/* ==========================================================================
   5MA FASHIONS — style.css
   Core: design tokens, base elements, layout shell, header, footer.
   Component rules live in components.css
   Breakpoint overrides live in responsive.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */



/* --------------------------------------------------------------------------
   2. BASE / RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: #FFFFFF;
  color: #1C1A1A;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: normal;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reserve the scrollbar gutter permanently on the scroll container. Without
   this, opening the cart drawer / mobile nav (which sets overflow:hidden on the
   body) removes the scrollbar, the page gets ~15px wider, and everything jumps
   sideways once — the "shake" on first add/remove. Reserving the gutter keeps
   the width constant whether or not the scrollbar is showing. */
html, body { scrollbar-gutter: stable; }
body.is-locked { overflow: hidden; }

input, select, textarea, button {
  font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #1C1A1A;
  line-height: 1.2;
  letter-spacing: normal;
  margin: 0 0 16px;
}

h1 { font-size: 32px; font-weight: 300; letter-spacing: normal; }
h2 { font-size: 26px; font-weight: 300; letter-spacing: normal; }
h3 { font-size: 20px; font-weight: 500; }
h4 { font-size: 18px; font-weight: 600; }

p { margin: 0 0 16px; color: #4E4A49; }
p:last-child { margin-bottom: 0; }

a {
  color: #75174E;
  text-decoration: none;
  transition: color .18s cubic-bezier(.22,.61,.36,1);
}
a:hover,
a:focus { color: #94215F; text-decoration: none; }

img { max-width: 100%; height: auto; }

ul, ol { margin: 0 0 16px; padding-left: 16px; }
ul.list-plain { list-style: none; margin: 0; padding: 0; }

hr { border: 0; border-top: 1px solid #F0E6E6; margin: 32px 0; }

::selection { background: #75174E; color: #fff; }

/* --------------------------------------------------------------------------
   FOCUS

   :focus fires on mouse clicks too, which is where the unwanted ring came
   from — click a button and the browser leaves an outline behind. That is
   removed below.

   :focus-visible fires only when the browser judges the focus came from the
   keyboard, so the ring is kept there. Without it, tabbing through the site
   gives no indication of where you are, and the checkout becomes unusable
   without a mouse.
   -------------------------------------------------------------------------- */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus,
[tabindex]:focus,
[role="button"]:focus {
  outline: none;
  box-shadow: none;
}

/* Keyboard users still get a clear ring */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #75174E;
  outline-offset: 3px;
  border-radius: 8px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: #1C1A1A;
  color: #fff;
  padding: 12px 24px;
  border-radius: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

.sr-only-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   3. LAYOUT SHELL
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 24px;
}
.shell-narrow {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Vertical rhythm — declared once, modified by --tight / --flush utilities  */
.section { padding-block: 120px; }
.section.section--flush-top { padding-top: 0; }
.section.section--flush-bottom { padding-bottom: 0; }
.section.section--tinted { background: #FCF9F9; }
.section.section--white   { background: #FFFFFF; }
.section.section--surface { background: #FFFFFF; }

/* --------------------------------------------------------------------------
   Terms & Conditions — "Customer Support" body presentation (page-specific).
   A single clean premium card on a warm cream page, using the 5MA palette.
   Scoped to .tcsupport / .tcpage, which only the Terms page carries.
   -------------------------------------------------------------------------- */
.tcpage{ background: linear-gradient(180deg, #FFFBF7 0%, #FDF3EC 100%); }
.tcsupport{
  max-width: 940px; margin: 0 auto;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(247,175,206,.22);
  box-shadow: 0 10px 30px rgba(70,40,60,.06);
  border-radius: 18px; padding: 46px 48px;
}
.tcsupport__title{ font-size: 28px; margin: 0 0 12px; background-image: none; -webkit-text-fill-color: #382638; color: #382638; }
.tcsupport__rule{ display: block; width: 46px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #F7AFCE, #CB82E6); margin: 0 0 28px; }
.tcsupport__head{ font-size: 16px; font-weight: 600; letter-spacing: .04em; margin: 28px 0 8px; background-image: none; -webkit-text-fill-color: #85826B; color: #85826B; }
.tcsupport__head:first-of-type{ margin-top: 0; }
.tcsupport__lines{ font-size: 16px; line-height: 1.95; color: #56445A; margin: 0; }
.tcsupport__lines a{ color: #BE527B; text-decoration: none; }
.tcsupport__lines a:hover{ color: #CB82E6; }
.tcsupport__note{ background: linear-gradient(180deg, #FFF3EC, #FDE7D2); border-left: 3px solid #F7AFCE; border-radius: 10px; padding: 18px 22px; margin-top: 30px; }
.tcsupport__note-head{ font-size: 15px; font-weight: 600; letter-spacing: .04em; margin: 0 0 6px; background-image: none; -webkit-text-fill-color: #85826B; color: #85826B; }
.tcsupport__note p{ font-size: 15px; line-height: 1.85; color: #56445A; margin: 0; }
@media (max-width: 600px){
  .tcsupport{ padding: 28px 22px; border-radius: 14px; }
  .tcsupport__title{ font-size: 23px; }
}

/* Section heading block */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}
.section-head__text { max-width: 620px; }
.section-head__title { margin: 0; }
.section-head__lead {
  margin: 12px 0 0;
  color: #6D6767;
  font-size: 15px;
}
.section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-head--center .section-head__text { max-width: 640px; }

/* Eyebrow — small, heavily tracked caps. Used as the structural label device. */
.eyebrow {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  color: #75174E;
  margin-bottom: 12px;
}
.eyebrow--mute { color: #6D6767; }
.eyebrow--light { color: rgba(255,255,255,.8); }

/* Hairline rule that sits under a heading */
.rule {
  width: 44px;
  height: 2px;
  background: #75174E;
  border-radius: 999px;
  margin-top: 16px;
}


/* --------------------------------------------------------------------------
   4. ANNOUNCEMENT BAR

   Note on the colour: .announce__item is a <p>, and the base `p` rule sets
   both a colour and a bottom margin. A rule that matches an element directly
   always beats a value inherited from its parent, so setting colour on
   .announce alone was never going to reach the paragraph. Both properties
   are therefore reset on the item itself.
   -------------------------------------------------------------------------- */
.announce {
  position: relative;
  height: 44px;
  background: linear-gradient( 135deg, #FFF2DF 0%, #FFE2D4 35%, #FBC4CE 65%, #F3A5CB 100% );
  display: flex;
  align-items: center;
  overflow: hidden;
}

.announce__viewport {
  position: relative;
  width: 100%;
  height: 100%;
}

.announce__item {
  position: absolute;
  inset: 0;
  margin: 0;                       /* the base p margin would push it off-centre */
 color: #68433F;                    /* 5.20:1 on the brand colour */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-inline: 24px;            /* the close button that this cleared is gone */
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s cubic-bezier(.22,.61,.36,1),
              transform .4s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.announce__item.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.announce__item i {
  font-size: 12px;
  color: #68433F;
  flex: 0 0 auto;
}


/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid #F6EFEF;
  transition: box-shadow .26s cubic-bezier(.22,.61,.36,1),
              background .26s cubic-bezier(.22,.61,.36,1);
}
.site-header.is-stuck {
  box-shadow: 0 1px 2px rgba(26,24,24,.03), 0 2px 6px rgba(26,24,24,.03);
  background: rgba(255,255,255,.96);
}

/* Single-row header: logo left, navigation centred, actions right.

   The grid is 1fr / auto / 1fr rather than auto / 1fr / auto, so the centre
   column is optically centred in the viewport regardless of how wide the logo
   or the icon cluster happen to be. */

.hdr {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  height: 152px;
  transition: height .3s cubic-bezier(.22,.61,.36,1);
}

.brand {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
}
.brand__mark {
  display: block;
  height: 118px;             /* the original stacked artwork, unmodified.
                                Below ~110px the tagline stops resolving. */
  width: auto;
  transition: height .3s cubic-bezier(.22,.61,.36,1);
}

.hdr__nav     { grid-column: 2; justify-self: center; }
.hdr__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 2px; }
/* Two classes on this button — .icon-btn sets display:inline-flex further
   down at the same specificity, which would win on source order alone. The
   descendant selector settles it regardless of where the rules sit. */
.hdr .hdr__burger { display: none; grid-column: 1; justify-self: start; }

/* Sticky: the row tightens rather than disappearing */
.site-header.is-stuck .hdr        { height: 84px; }
.site-header.is-stuck .brand__mark { height: 60px; }

.icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #1C1A1A;
  cursor: pointer;
  transition: background .22s ease, color .22s ease;
}
.icon-btn:hover { background: #F9F3F3; color: #75174E; }

.icon-btn__count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #75174E;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}


/* --------------------------------------------------------------------------
   6. SEARCH OVERLAY
   -------------------------------------------------------------------------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s cubic-bezier(.16,1,.3,1), visibility 0s linear .26s;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
}
.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.search-overlay__inner {
  width: min(760px, calc(100vw - 48px));
  transform: translateY(-18px);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.search-overlay.is-open .search-overlay__inner { transform: none; }
.search-form {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 2px solid #75174E;
  padding-bottom: 16px;
}
.search-form input {
  flex: 1 1 auto;
  min-width: 0;   /* shrink below the placeholder so the Search button stays visible */
  border: 0;
  background: transparent;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: normal;
  color: #1C1A1A;
  padding: 0;
}
.search-form input::placeholder { color: #6D6767; }
.search-form input:focus { outline: none; }
.search-form > .fa-search { flex: 0 0 auto; }
.search-form .btn5 { flex: 0 0 auto; }
.search-suggest { margin-top: 32px; }
.search-suggest__label {
  font-size: 15px;
  letter-spacing: normal;
  font-weight: 600;
  color: #6D6767;
  margin-bottom: 16px;
}
.search-suggest__tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* Live search suggestions dropdown */
.search-live {
  margin-top: 16px;
  background: #ffffff;
  border: 1px solid #ece3e4;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(43,32,48,.12);
  padding: 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.search-live__head {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9b8f92;
  margin: 10px 10px 4px;
}
.search-live__head:first-child { margin-top: 4px; }
.search-live__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #2b2030;
  transition: background .15s ease;
}
.search-live__item:hover,
.search-live__item.is-active { background: #f7eeef; }
.search-live__name { font-size: 15px; }
.search-live__price { font-size: 14px; font-weight: 600; color: #75174E; white-space: nowrap; }
.search-live__all {
  display: block;
  margin-top: 6px;
  padding: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #75174E;
  text-decoration: none;
  border-top: 1px solid #ece3e4;
  border-radius: 0 0 10px 10px;
}
.search-live__all:hover,
.search-live__all.is-active { background: #f7eeef; }
.search-live__empty { padding: 18px 12px; text-align: center; color: #7a6f74; font-size: 15px; }

/* Write-a-review modal */
.revmodal { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 20px; }
.revmodal.is-open { display: flex; }
.revmodal__scrim { position: absolute; inset: 0; background: rgba(28,26,26,0.55); }
.revmodal__box { position: relative; width: 100%; max-width: 440px; background: #FFFFFF; border-radius: 16px; padding: 30px 28px 24px; box-shadow: 0 24px 60px rgba(28,26,26,0.28); }
.revmodal__close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; background: transparent; color: #6D6767; cursor: pointer; font-size: 16px; }
.revmodal__title { font-size: 20px; color: #1C1A1A; margin: 0 0 18px; }
.revmodal__field { margin-bottom: 16px; }
.revmodal__label { display: block; font-size: 14px; color: #1C1A1A; margin-bottom: 8px; font-weight: 600; }
.revmodal__msg { display: block; font-size: 13px; color: #b3261e; margin-bottom: 10px; min-height: 16px; }
.revmodal__acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.revmodal__note { font-size: 12px; color: #9A9090; margin: 12px 0 0; }

/* Review success toast (self-contained; always available) */
.revtoast { position: fixed; top: 90px; right: 20px; z-index: 4000; display: flex; align-items: flex-start; gap: 12px; width: min(360px, calc(100vw - 32px)); background: #FFFFFF; border: 1px solid #F0E6E6; border-radius: 14px; padding: 14px 16px; box-shadow: 0 16px 40px rgba(28,26,26,0.16); transform: translateX(120%); opacity: 0; transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .42s ease; }
.revtoast.is-in { transform: none; opacity: 1; }
.revtoast.is-out { transform: translateX(120%); opacity: 0; }
.revtoast__icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #EAF6EC; color: #2e7d32; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.revtoast__text { margin: 0; align-self: center; font-size: 14px; line-height: 1.4; color: #1C1A1A; }
@media (max-width: 640px) {
  .revtoast { top: auto; bottom: 20px; right: 16px; left: 16px; width: auto; transform: translateY(140%); }
  .revtoast.is-in { transform: none; }
  .revtoast.is-out { transform: translateY(140%); }
}

/* Interactive half-star rating picker */.ratepick { display: inline-flex; gap: 4px; cursor: pointer; font-size: 30px; line-height: 1; user-select: none; }
.ratepick:focus { outline: 2px solid #E0B84C; outline-offset: 4px; border-radius: 6px; }
.ratepick__star .far { color: #e3d7d7; }
.ratepick__star .fas { color: #E0B84C; }
.ratepick__val { display: block; margin-top: 8px; font-size: 14px; color: #6D6767; }
.rcard__title { color: #2b2030; }
.search-live__tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 10px 10px; }
.search-live__tag {
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  padding: 7px 14px;
  border: 1px solid #e4d7d8;
  background: #ffffff;
  color: #2b2030;
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.search-live__tag:hover,
.search-live__tag.is-active,
.search-live__tag:focus-visible { background: #75174E; border-color: #75174E; color: #ffffff; outline: none; }
.search-overlay__close {
  position: absolute;
  top: 28px; right: 28px;
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid #F0E6E6;
  background: #FFFFFF;
  color: #1C1A1A;
  font-size: 18px;
  cursor: pointer;
  transition: background .18s cubic-bezier(.22,.61,.36,1), color .18s cubic-bezier(.22,.61,.36,1);
}
.search-overlay__close:hover { background: #75174E; color: #fff; }


/* --------------------------------------------------------------------------
   7. MOBILE DRAWER
   -------------------------------------------------------------------------- */
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(26,24,24,.44);
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  transition: opacity .26s cubic-bezier(.22,.61,.36,1), visibility 0s linear .26s;
}
.drawer-scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(400px, 88vw);
  background: #FFFFFF;
  z-index: 1001;
  transform: translateX(-102%);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  display: flex;
  flex-direction: column;
}
.drawer.is-open { transform: none; }
.drawer--right { left: auto; right: 0; transform: translateX(102%); }
.drawer--right.is-open { transform: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid #F6EFEF;
  flex: 0 0 auto;
}
.drawer__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  margin: 0;
}
.drawer > [data-cart-render] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 24px; }
.drawer__foot { flex: 0 0 auto; padding: 24px; border-top: 1px solid #F6EFEF; }


/* --------------------------------------------------------------------------
   8. STICKY MOBILE BOTTOM NAV
   -------------------------------------------------------------------------- */
.mobile-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 800;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid #F6EFEF;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 64px;
}
.mobile-nav__item { flex: 1 1 0; }
.mobile-nav__link {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  color: #6D6767;
  background: none;
  border: 0;
  width: 100%;
  cursor: pointer;
  position: relative;
}
.mobile-nav__link i { font-size: 17px; }
.mobile-nav__link.is-current { color: #75174E; }
.mobile-nav__badge {
  position: absolute;
  top: 6px;
  margin-left: 16px;
  min-width: 16px; height: 16px;
  border-radius: 999px;
  background: #75174E;
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
}
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #6D6767;
}
.crumb li { display: inline-flex; align-items: center; gap: 8px; }
.crumb li + li::before {
  content: "\f105"; /* fa angle-right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
  opacity: .5;
}
.crumb a { color: #6D6767; }
.crumb a:hover { color: #75174E; }
.crumb [aria-current="page"] { color: #1C1A1A; font-weight: 500; }

.empty-state { text-align: center; padding-top: 64px; }
.empty-state__icon { font-size: 32px; color: #F0E6E6; }
.empty-state__title { font-size: 18px; margin: 24px 0 8px; }


/* ==========================================================================
   UTILITIES
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. SPACING
   -------------------------------------------------------------------------- */
.u-mt-0  { margin-top: 0 !important; }
.u-mt-1  { margin-top: 4px !important; }
.u-mt-2  { margin-top: 8px !important; }
.u-mt-3  { margin-top: 12px !important; }
.u-mt-4  { margin-top: 16px !important; }
.u-mt-5  { margin-top: 24px !important; }
.u-mt-6  { margin-top: 32px !important; }
.u-mt-7  { margin-top: 48px !important; }

.u-mb-0  { margin-bottom: 0 !important; }
.u-mb-2  { margin-bottom: 8px !important; }
.u-mb-3  { margin-bottom: 12px !important; }
.u-mb-4  { margin-bottom: 16px !important; }
.u-mb-5  { margin-bottom: 24px !important; }
.u-mb-6  { margin-bottom: 32px !important; }
.u-mb-7  { margin-bottom: 48px !important; }

.u-pt-0  { padding-top: 0 !important; }
.u-pb-0  { padding-bottom: 0 !important; }


/* --------------------------------------------------------------------------
   2. TEXT
   -------------------------------------------------------------------------- */
.u-center      { text-align: center; }
.u-left        { text-align: left; }
.u-right       { text-align: right; }

.u-ink         { color: #1C1A1A !important; }
.u-ink-soft    { color: #4E4A49 !important; }
.u-ink-mute    { color: #6D6767 !important; }
.u-accent      { color: #75174E !important; }
.u-sage        { color: #78C060 !important; }
.u-white       { color: #fff !important; }

.u-sm          { font-size: 15px !important; }
.u-xs          { font-size: 14px !important; }
.u-light       { font-weight: 300 !important; }
.u-medium      { font-weight: 500 !important; }
.u-semibold    { font-weight: 600 !important; }

.u-caps {
  letter-spacing: normal;
  font-size: 15px;
  font-weight: 600;
}

/* Clamp long product titles to a fixed number of lines */
.u-clamp-1,
.u-clamp-2,
.u-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.u-clamp-1 { -webkit-line-clamp: 1; }
.u-clamp-2 { -webkit-line-clamp: 2; }
.u-clamp-3 { -webkit-line-clamp: 3; }


/* --------------------------------------------------------------------------
   3. SURFACES
   -------------------------------------------------------------------------- */
.u-surface {
  background: #FFFFFF;
  border: 1px solid #F6EFEF;
  border-radius: 18px;
}
.u-tinted  { background: #FCF9F9; }
.u-round   { border-radius: 18px; }
.u-round-md{ border-radius: 12px; }
.u-pill    { border-radius: 999px; }
.u-shadow  { box-shadow: 0 2px 5px rgba(26,24,24,.04), 0 10px 24px rgba(26,24,24,.05); }
.u-hairline{ border-top: 1px solid #F0E6E6; }

/* Glass — used sparingly, only over imagery */
.u-glass {
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,255,255,.22);
}


/* --------------------------------------------------------------------------
   4. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.u-flex        { display: flex; }
.u-between     { display: flex; align-items: center; justify-content: space-between; }
.u-vcenter     { display: flex; align-items: center; }
.u-wrap        { flex-wrap: wrap; }
.u-gap-2       { gap: 8px; }
.u-gap-3       { gap: 12px; }
.u-gap-4       { gap: 16px; }
.u-gap-5       { gap: 24px; }

/* Horizontal scroller fallback for narrow screens */
.u-scroller {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.u-scroller::-webkit-scrollbar { display: none; }
.u-scroller > * { scroll-snap-align: start; flex: 0 0 74%; }


/* --------------------------------------------------------------------------
   5. VISIBILITY
   -------------------------------------------------------------------------- */
.u-hide        { display: none !important; }
.u-desktop-only{ display: block; }
.u-mobile-only { display: none; }

.u-gold  { color: #75174E !important; }
.u-brand { color: #75174E !important; }

/* Padding helpers for surface cards */
.pad-4 { padding: 16px; }
.pad-5 { padding: 24px; }
.pad-6 { padding: 32px; }
.pad-7 { padding: 48px; }

/* A heading one step down from the section title */
.heading-sm { font-size: 22px; font-weight: 500; letter-spacing: normal; }

.u-pt-5 { padding-top: 24px !important; }
.u-pt-6 { padding-top: 32px !important; }
.u-maxw-640 { max-width: 640px; }
.u-mt-8 { margin-top: 64px !important; }
.u-mt-9 { margin-top: 120px !important; }
.u-mb-8 { margin-bottom: 64px !important; }
.u-block { display: block; }
.u-push  { margin-left: auto; }
.u-center-flex { justify-content: center; }


/* ==========================================================================
   ANIMATION + SCROLL REVEAL
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes ticker-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse-soft {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.12); opacity: .7; }
}

@keyframes shimmer {
  from { background-position: -420px 0; }
  to   { background-position: 420px 0; }
}


/* --------------------------------------------------------------------------
   2. SCROLL REVEAL
   Elements marked data-reveal start hidden; main.js adds .is-revealed
   when they enter the viewport (IntersectionObserver).
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
/* Safety net: if JavaScript is disabled/fails, reveal targets must never stay
   invisible. <html> starts with .no-js; the head snippet removes it when JS runs,
   so this only applies when JS never executed. */
html.no-js [data-reveal],
html.no-js [data-reveal-group] > * {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger children of a revealed container */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
[data-reveal-group].is-revealed > * { opacity: 1; transform: none; }
[data-reveal-group].is-revealed > *:nth-child(1) { transition-delay: .04s; }
[data-reveal-group].is-revealed > *:nth-child(2) { transition-delay: .10s; }
[data-reveal-group].is-revealed > *:nth-child(3) { transition-delay: .16s; }
[data-reveal-group].is-revealed > *:nth-child(4) { transition-delay: .22s; }
[data-reveal-group].is-revealed > *:nth-child(5) { transition-delay: .28s; }
[data-reveal-group].is-revealed > *:nth-child(6) { transition-delay: .34s; }
[data-reveal-group].is-revealed > *:nth-child(7) { transition-delay: .40s; }
[data-reveal-group].is-revealed > *:nth-child(8) { transition-delay: .46s; }


/* --------------------------------------------------------------------------
   3. IMAGE LOADING PLACEHOLDER
   Applied while an image has not fired its load event.
   -------------------------------------------------------------------------- */
.is-loading-media {
  background-image: linear-gradient(
    90deg,
    #FCF9F9 0%,
    #FBF7F7 42%,
    #FCF9F9 84%
  );
  background-size: 420px 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.5s linear infinite;
}

.dot-live {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #78C060;
  animation: pulse-soft 2.2s cubic-bezier(.22,.61,.36,1) infinite;
}

.dot-live--out {
  background: #75174E;
}


/* --------------------------------------------------------------------------
   4. REDUCED MOTION
   Anyone who has asked their OS to calm things down gets a static page.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__img     { transform: none !important; }
  .ticker__track { animation: none !important; }
}


/* ==========================================================================
   SPACING SYSTEM

   One scale, used everywhere:

     2  4  8  12  16  24  32  40  48  64  80  96  120  160

   Before this the site used 47 different values, which is why the rhythm
   read as uneven — every component had decided its own spacing.

   Three rules govern where each step is used:

     · inside a component        4 to 16
     · between components        24 to 48
     · between sections          64 to 160

   The gap between two things should say how related they are. A heading and
   its paragraph sit at 16; two unrelated sections sit at 120. When those are
   inconsistent the page feels arbitrary even if nothing is obviously wrong.
   ========================================================================== */

/* Section rhythm. Generous, because the whole point of a premium layout is
   how much emptiness it can afford to leave. */
.section              { padding-block: 120px; }
.section--tight       { padding-block: 80px; }
.section--flush-top   { padding-top: 0; }
.section--flush-bot   { padding-bottom: 0; }

/* A heading and the thing it introduces */
.section-head         { margin-bottom: 64px; }
.section-head__title  { margin-bottom: 16px; }
.section-head__lead   { margin-bottom: 0; }

/* Panels and cards: 32 inside, 24 between */
.panelcard            { padding: 32px; margin-bottom: 24px; }
.panelcard:last-child { margin-bottom: 0; }
.panelcard__head      { margin-bottom: 24px; }

/* Grid gutters. 24 is the resting gap; the row gap is larger than the column
   gap so stacked rows do not read as one block. */
.row                  { margin-inline: -12px; }
.row > [class*="col-"]{ padding-inline: 12px; margin-bottom: 24px; }

/* Forms */
.field                { margin-bottom: 24px; }
.field:last-child     { margin-bottom: 0; }
.field__label         { margin-bottom: 8px; }
.field__hint          { margin-top: 8px; }

/* Buttons sitting together */
.u-actions            { display: flex; gap: 12px; flex-wrap: wrap; }


/* ==========================================================================
   HEADING GRADIENT

   Sampled from the supplied artwork: deep violet through plum into red.

   It is used at two strengths, and the reason is a contrast threshold rather
   than taste. As supplied the ramp bottoms out at 3.56:1 on white. WCAG asks
   3.0 for large text and 4.5 for everything else — so the artwork colours are
   legitimate on a 34px H1 and not on a 14px H6.

     h1, h2       the artwork exactly
     h3 to h6     the same ramp at 80%, which clears 5.24:1

   Two things this has to survive:

     1. Browsers without background-clip: text render the fill transparent,
        so the heading vanishes rather than falling back. The @supports guard
        means those get solid ink instead of nothing.

     2. Headings on dark grounds would be unreadable at either strength, so
        they are excluded in the block below.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  color: #1C1A1A;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {

  /* Large headings — the artwork colours, unaltered */
  h1, h2, .h1, .h2,
  .section-head__title,
  .sidegrid__title,
  .authcard__title,
  .welcome__title {
    background-image: linear-gradient(100deg,
      #4A266F 0%,
      #723665 18%,
      #9D485E 34%,
      #D25E4C 52%,
      #E56243 68%,
      #DE4149 100%);
    -webkit-background-clip: text;
            background-clip: text;
             color: transparent;
  }

  /* Smaller headings — the same ramp at 80%, so it reads as one family while
     clearing the 4.5 threshold that applies below 24px */
  h3, h4, h5, h6, .h3,
  .panelcard__title,
  .sizeblock__title,
  .heading-sm {
    background-image: linear-gradient(100deg,
      #3B1E59 0%,
      #5B2B51 18%,
      #7E3A4B 34%,
      #A84B3D 52%,
      #B74E36 68%,
      #B2343A 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
  }

  /* A heading that is also a link shifts the ramp rather than changing colour */
  a:hover > h2,
  a:hover > h3 {
    background-image: linear-gradient(100deg, #562755 0%, #B55849 50%, #CD404C 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* --------------------------------------------------------------------------
   WHERE THE GRADIENT MUST NOT GO

   On a dark ground an ink-to-wine ramp is unreadable, and inside a filled
   brand button it would erase the label. These revert to a solid colour.
   -------------------------------------------------------------------------- */
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6,
.section--dark .section-head__title,
.hero h1, .hero .hero__title,
.atl-open__title, .atl-head__title, .atl-card__name,
.btn5 h1, .btn5 h2, .btn5 h3,
.welcome h1, .welcome .welcome__title {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}

/* The hero carries its own colour; the page banner title now takes the brand
   gradient (see .pagehead__title in pages.css) on its light artwork. */
.hero__title     { color: #FDFBF9; }


/* --------------------------------------------------------------------------
   HEADING HIERARCHY

   The gradient is the same on every level, so size and weight have to carry
   the hierarchy on their own. H5 and H6 previously had neither and fell back
   to body size, which made them indistinguishable from a paragraph.

   Weight lightens as size grows: a Garamond at 34px does not need 600, and
   at 15px it does. That inversion is what stops small headings looking weak
   and large ones looking heavy.
   -------------------------------------------------------------------------- */
h1 { font-size: 34px; font-weight: 300; line-height: 1.15; margin: 0 0 16px; }
h2 { font-size: 26px; font-weight: 400; line-height: 1.2;  margin: 0 0 16px; }
h3 { font-size: 20px; font-weight: 500; line-height: 1.3;  margin: 0 0 12px; }
h4 { font-size: 17px; font-weight: 500; line-height: 1.4;  margin: 0 0 12px; }
h5 { font-size: 15px; font-weight: 600; line-height: 1.45; margin: 0 0 8px;  }
h6 { font-size: 14px; font-weight: 600; line-height: 1.45; margin: 0 0 8px;  }


/* --------------------------------------------------------------------------
   HEADING SIZES, SET FOR OUTFIT

   The scale above was chosen while headings were set in a Garamond, which has
   a small x-height and narrow letterforms. Outfit has a large x-height and is
   noticeably wider, so the same px size reads about 10% bigger and a 54px H1
   now overpowers the page.

   The sizes come down and the weights come up: a geometric sans at 300 looks
   underset where a Garamond at 300 looked elegant.
   -------------------------------------------------------------------------- */
h1 { font-size: 30px; font-weight: 400; }
h2 { font-size: 24px; font-weight: 400; }
h3 { font-size: 19px; font-weight: 500; }
h4 { font-size: 17px; font-weight: 500; }
h5 { font-size: 15px; font-weight: 600; }
h6 { font-size: 14px; font-weight: 600; }


/* --------------------------------------------------------------------------
   FORM VALIDATION — one global system for every customer-facing form
   --------------------------------------------------------------------------
   Contact, checkout delivery/billing, profile add & edit address, login,
   register, password forms and the report form all share these values. Page
   stylesheets may control layout, never the validation look, so a message
   renders identically wherever it appears.

   Field-level errors are small and inline (below the field). Process-level
   messages (payment failed, address saved) keep the separate alert component.
   -------------------------------------------------------------------------- */
.field-error {
  display: block;
  margin-top: 5px;
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #B94F4F;                       /* the one 5MA error red */
}
.field-error[hidden] { display: none; }

/* Invalid controls: a subtle border and the faintest rose tint. Height, radius
   and font are untouched so nothing shifts when an error appears. */
.field__control.is-invalid,
.field__control[aria-invalid="true"],
.input5.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: #DD7E7B;
  background: #FDF6F5;
}
.field__control.is-invalid:focus,
.field__control[aria-invalid="true"]:focus,
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
  border-color: #C9646A;
  box-shadow: 0 0 0 3px rgba(185,79,79,.12);
}

/* Required marker and the optional hint, identical on every form */
.field__label .req,
.field__req { color: #B94F4F; margin-left: 2px; }
.field__label .optional,
.field__optional { color: #8A8080; font-weight: 400; font-size: 12px; margin-left: 6px; }

/* The phone component keeps flag + code + input on one line; its error sits
   below the whole control rather than inside the flex row. */
.field .iti { width: 100%; }
.field .iti + .field-error { margin-top: 5px; }

/* Success feedback, one style everywhere */
.field-success,
.form-success {
  display: block;
  margin-top: 5px;
  font-family: 'Outfit', Arial, Helvetica, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #2E7D32;
}

/* Customer ID — quiet permanent account reference, not a status badge */
.custid{display:inline-flex;align-items:center;gap:8px;font-family:'Outfit',Arial,Helvetica,sans-serif;font-size:15px;font-weight:500;color:#1C1A1A;margin:2px 0 12px;word-break:break-all;}

/* Change email modal actions: comfortable spacing, stacked on small screens */
.ecacts{display:flex;gap:12px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap;}
.ecacts .btn5{min-height:42px;}
@media(max-width:520px){
  .ecacts{flex-direction:column-reverse;}
  .ecacts .btn5{width:100%;}
}

/* ---- Change email modal ------------------------------------------------- */
.vmodal[data-ec-modal]{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,16,15,.42);animation:ecfade .18s ease both;}
.vmodal[data-ec-modal][hidden]{display:none;}
@keyframes ecfade{from{opacity:0}to{opacity:1}}
.ecbox,
.ecsent{position:relative;background:#fff;width:100%;max-width:520px;border:1px solid #F0E6E6;border-radius:16px;padding:28px;}
.ecbox{text-align:left;
  box-shadow:0 20px 60px rgba(28,26,26,.18);max-height:calc(100vh - 32px);overflow-y:auto;animation:ecrise .2s ease both;}
@keyframes ecrise{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.ecbox__x{position:absolute;top:14px;right:14px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:#8A8080;border-radius:10px;cursor:pointer;font-size:16px;transition:background .15s ease,color .15s ease;}
.ecbox__x:hover{background:#FBF2F1;color:#75174E;}
.ecbox__x:focus-visible{outline:2px solid #75174E;outline-offset:2px;}
.ecbox__title{font-size:26px;font-weight:600;color:#1C1A1A;margin:0 34px 6px 0;line-height:1.25;}
.ecbox__lead{font-size:13.5px;line-height:1.6;color:#6D6767;margin:0 0 24px;}
.ecbox__eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A8080;margin:0 0 7px;}
.ecbox__current{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#FBF7F5;border:1px solid #F0E6E6;border-radius:11px;padding:14px 16px;margin-bottom:24px;}
.ecbox__mail{font-size:14.5px;color:#1C1A1A;overflow-wrap:anywhere;min-width:0;}
.ecbox__field{margin-bottom:20px;}
.ecbox__field .field__control{height:52px;}
.ecbox .field__withbtn .field__reveal{width:38px;height:38px;}
/* Autofill: keep the approved input look instead of the browser's yellow */
.ecbox .field__control:-webkit-autofill,
.ecbox .field__control:-webkit-autofill:hover,
.ecbox .field__control:-webkit-autofill:focus{
  -webkit-text-fill-color:#1C1A1A;
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  box-shadow:0 0 0 1000px #fff inset;
  caret-color:#1C1A1A;
}
.ecbox .ecacts{margin-top:26px;}
.ecbox .ecacts .btn5{min-height:46px;padding-left:20px;padding-right:20px;}
body.ec-locked{overflow:hidden;}   /* no background scroll while open */
@media(max-width:560px){
  .ecbox{padding:22px;max-width:none;width:calc(100% - 24px);border-radius:14px;}
  .ecbox__title{font-size:24px;}
}

/* ---- Email verification result ------------------------------------------ */
.vfy{padding-top:36px;padding-bottom:56px;}            /* tighter to the banner */
.vfy__card{max-width:540px;margin:0 auto;text-align:center;background:#fff;
  border:1px solid #F0E6E6;border-radius:18px;padding:40px 36px;
  box-shadow:0 12px 36px rgba(28,26,26,.07);animation:vfyIn .28s ease both;}
@keyframes vfyIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vfy__icon{width:64px;height:64px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px;}
.vfy__icon--ok{background:#E8F5E9;color:#2E7D32;}
.vfy__icon--ok svg{animation:vfyTick .34s .1s ease both;}
@keyframes vfyTick{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
.vfy__title{font-family:'Outfit',Arial,Helvetica,sans-serif;font-size:24px;font-weight:600;color:#1C1A1A;margin:0 0 10px;line-height:1.3;}
.vfy__body{font-size:14.5px;line-height:1.7;color:#6D6767;margin:0 auto 22px;max-width:420px;}
.vfy__redirect{display:flex;align-items:center;justify-content:center;gap:9px;font-size:13.5px;color:#8A8080;margin:0 0 24px;}
.vfy__spin{width:14px;height:14px;border-radius:999px;border:2px solid #E3D9D9;border-top-color:#75174E;display:inline-block;animation:vfySpin .7s linear infinite;}
@keyframes vfySpin{to{transform:rotate(360deg)}}
.vfy__acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.vfy__acts .btn5{min-height:46px;padding-left:24px;padding-right:24px;}
@media(max-width:560px){
  .vfy{padding-top:26px;padding-bottom:40px;}
  .vfy__card{width:calc(100% - 32px);padding:30px 22px;border-radius:16px;}
  .vfy__title{font-size:21px;}
  .vfy__acts .btn5{width:100%;}
}
@media (prefers-reduced-motion: reduce){
  .vfy__card,.vfy__icon--ok svg{animation:none;}
  .vfy__spin{animation-duration:2s;}
}

.iti--separate-dial-code .iti__selected-flag{background-color: transparent !important;}

/* Product share — anchored popover (desktop) / bottom sheet (mobile fallback).
   Native share sheet is used first where supported. */
.pdp-share { position: relative; display: inline-block; }
.pdp-share.is-open [data-share-btn] { color: #75174E; }

.pdp-share__menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 200;
  width: 320px; max-width: calc(100vw - 32px);
  background: #FFFDFC; border: 1px solid #F0DFE4; border-radius: 16px;
  box-shadow: 0 12px 35px rgba(45,27,47,.12); padding: 14px 14px 12px;
}
.pdp-share__menu[hidden] { display: none; }
.pdp-share__menu.is-above { top: auto; bottom: calc(100% + 10px); }
.pdp-share__menu.is-right { left: auto; right: 0; }

.pdp-share__handle { display: none; }
.pdp-share__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pdp-share__title { margin: 0; font-size: 14px; font-weight: 600; color: #2D1B2F; }
.pdp-share__close {
  border: 0; background: transparent; color: #9A8A90; width: 28px; height: 28px;
  border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.pdp-share__close:hover { background: #F7ECEF; color: #2D1B2F; }

.pdp-share__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pdp-share__grid > * {
  display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px;
  border: 1px solid #EEE4E6; border-radius: 11px; background: #fff;
  color: #3A2A32; font-size: 13.5px; font-family: inherit; text-decoration: none;
  cursor: pointer; text-align: left;
}
.pdp-share__grid > *:hover { background: #FFF4F2; border-color: #EBD0D8; }
.pdp-share__grid i { width: 18px; font-size: 17px; text-align: center; color: #75174E; }

.pdp-share__backdrop { display: none; }

/* Mobile fallback: premium bottom sheet (shown only when native share is absent) */
@media (max-width: 640px) {
  .pdp-share__menu {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%;
    border-radius: 22px 22px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 34px rgba(45,27,47,.18); animation: shareSheetUp .22s ease;
  }
  .pdp-share__menu.is-above, .pdp-share__menu.is-right { top: auto; bottom: 0; left: 0; right: 0; }
  .pdp-share__handle { display: block; width: 40px; height: 4px; border-radius: 999px; background: #E7D3DA; margin: 2px auto 12px; }
  .pdp-share__grid > * { min-height: 48px; }
  .pdp-share__backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 199; background: rgba(30,18,26,.38); }
}
@keyframes shareSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Premium password success/error toast (Account → Security) */
.pwtoast {
  position: fixed; top: 22px; left: 50%; z-index: 9999;
  transform: translateX(-50%) translateY(-18px);
  display: flex; align-items: center; gap: 12px;
  min-width: 300px; max-width: calc(100vw - 32px); padding: 15px 20px 15px 16px;
  background: #FFFDFC; border: 1px solid #F0DFE4; border-left: 4px solid #2E7D48;
  border-radius: 16px; box-shadow: 0 18px 46px rgba(45,27,47,.20);
  font-size: 14px; line-height: 1.4; color: #2D1B2F; font-weight: 500;
  opacity: 0; transition: opacity .32s ease, transform .32s cubic-bezier(.22,1,.36,1);
}
.pwtoast.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.pwtoast--err { border-left-color: #B23B3B; }
.pwtoast__icon {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #E7F5EC; color: #2E7D48; font-size: 15px; font-weight: 700;
}
.pwtoast--err .pwtoast__icon { background: #FBEAEA; color: #B23B3B; }
.pwtoast__msg { flex: 1 1 auto; }
@media (max-width: 480px) { .pwtoast { min-width: 0; width: calc(100vw - 24px); } }

/* ============================ Newborn Gift Box (premium home feature) ============================ */
/* Clean soft layout in the 5MA brand palette: warm ivory + blush, rose accents, plum text. */
.giftbox{padding:46px 0;}
.giftbox__card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px;align-items:center;border-radius:30px;padding:46px 50px;background:linear-gradient(135deg,#FFF8F3 0%,#FDEFF3 55%,#FBE7DE 100%);border:1px solid #F3E1E9;box-shadow:0 40px 90px -60px rgba(45,27,47,.35);}
.giftbox__glow{position:absolute;top:-120px;right:-90px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(246,223,231,.9),rgba(246,223,231,0) 70%);pointer-events:none;}
.giftbox__spark{position:absolute;left:-40px;bottom:-70px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(252,215,199,.35),rgba(252,215,199,0) 70%);pointer-events:none;}
.giftbox__spark::before{content:none;}
/* media */
.giftbox__media{position:relative;z-index:1;}
.giftbox__frame{position:relative;border-radius:24px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid #F0D9E1;box-shadow:0 30px 60px -34px rgba(45,27,47,.34);}
.giftbox__img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.giftbox__frame:hover .giftbox__img{transform:scale(1.03);}
.giftbox__img--ph{display:flex;align-items:center;justify-content:center;color:#D8B78E;font-size:64px;opacity:.7;}
/* copy */
.giftbox__copy{position:relative;z-index:1;}
.giftbox__eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#B95F83;margin:0 0 16px;}
.giftbox__eyebrow::before,.giftbox__eyebrow::after{content:"";width:26px;height:2px;border-radius:2px;background:#B95F83;opacity:.45;}
.giftbox__title{font-size:46px;line-height:1.04;font-weight:700;color:#2D1B2F;letter-spacing:-.015em;margin:0 0 14px;}
.giftbox__accent{color:#B95F83;}
.giftbox__sup{font-size:16px;line-height:1.6;color:#7c6870;max-width:470px;margin:0 0 22px;}
.giftbox__highlight{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 18px;}
.giftbox__pill{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.09em;color:#fff;background:#B95F83;border-radius:999px;padding:9px 18px;box-shadow:0 10px 24px -14px rgba(185,95,131,.5);}
.giftbox__avail{font-size:13.5px;font-weight:600;color:#B95F83;}
.giftbox__desc{font-size:15px;line-height:1.72;color:#5b4a52;max-width:470px;margin:0 0 18px;}
.giftbox__emotional{display:flex;flex-wrap:wrap;gap:8px 12px;margin:0 0 26px;}
.giftbox__emotional span{position:relative;font-size:14.5px;font-weight:600;color:#2D1B2F;padding-right:18px;}
.giftbox__emotional span::after{content:"\2665";position:absolute;right:3px;top:50%;transform:translateY(-50%);font-size:9px;color:#E0A8BE;}
.giftbox__emotional span:last-child{padding-right:0;}
.giftbox__emotional span:last-child::after{display:none;}
.giftbox__cta{display:inline-flex;align-items:center;gap:10px;background:#B95F83;border-color:#B95F83;color:#fff;box-shadow:0 16px 34px -18px rgba(185,95,131,.7);}
.giftbox__cta:hover{background:#a4507092;background:#A45070;border-color:#A45070;}
.giftbox__cta i{font-size:12px;transition:transform .25s ease;}
.giftbox__cta:hover i{transform:translateX(4px);}
/* tablet */
@media(max-width:991.98px){.giftbox{padding:36px 0;}.giftbox__card{grid-template-columns:1fr;gap:32px;padding:36px 30px;text-align:center;}.giftbox__frame{margin:0 auto;}.giftbox__title{font-size:37px;}.giftbox__eyebrow{justify-content:center;}.giftbox__sup,.giftbox__desc{margin-left:auto;margin-right:auto;}.giftbox__highlight,.giftbox__emotional{justify-content:center;}}
/* mobile */
@media(max-width:575.98px){.giftbox{padding:28px 0;}.giftbox__card{padding:26px 20px;border-radius:22px;}.giftbox__title{font-size:29px;}.giftbox__sup{font-size:15px;}.giftbox__glow{width:230px;height:230px;top:-70px;right:-60px;}}

/* ============================================================
   Shipment Tracking — premium card (customer order detail)
   ============================================================ */
.shipcard{
  margin-top:22px;background:linear-gradient(180deg,#FFFFFF 0%,#FDF7F9 100%);
  border:1px solid #F3DCE5;border-radius:20px;padding:26px 28px;
  box-shadow:0 10px 30px rgba(45,27,47,.06);
}
.shipcard__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.shipcard__title{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:600;color:#2D1B2F;letter-spacing:-.01em;}
.shipcard__title i{color:#B95F83;font-size:16px;}
.shipcard__status{
  font-size:12.5px;font-weight:600;color:#8E3F63;background:#FAEEF3;
  border:1px solid #F0D3DF;border-radius:999px;padding:5px 13px;white-space:nowrap;
}
.shipcard__status.is-done{color:#1F7A54;background:#E9F7EF;border-color:#CBEBD8;}
.shipcard__field{margin-bottom:16px;}
.shipcard__label{display:block;font-size:12.5px;color:#9A8E93;margin-bottom:3px;letter-spacing:.01em;}
.shipcard__courier{display:block;font-size:16px;font-weight:600;color:#2D1B2F;}
.shipcard__awb{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#FAF4F6;border:1px solid #F0DCE4;border-radius:12px;padding:12px 14px;
}
.shipcard__awbno{font-size:18px;font-weight:600;color:#2D1B2F;letter-spacing:.02em;word-break:break-all;user-select:all;}
.shipcard__copy{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:13px;font-weight:600;color:#B95F83;background:#fff;
  border:1px solid #E7C9D5;border-radius:9px;padding:7px 12px;transition:.15s;
}
.shipcard__copy:hover{background:#FBEEF3;}
.shipcard__copy.is-done{color:#1F7A54;border-color:#CBEBD8;background:#E9F7EF;}
.shipcard__help{margin:14px 0 0;font-size:13.5px;color:#6B5C63;}
.shipcard__note{margin:10px 0 0;font-size:13px;color:#9A8E93;}
.shipcard__prep{margin:4px 0 0;font-size:14px;color:#6B5C63;line-height:1.6;}
.shipcard__prep strong{color:#2D1B2F;}
.shipcard__cta{margin-top:18px;text-align:right;}
@media (max-width:600px){
  .shipcard{padding:20px;border-radius:18px;}
  .shipcard__awb{gap:10px;padding:10px 12px;}
  .shipcard__awbno{flex:1 1 auto;min-width:0;font-size:17px;word-break:break-all;}
  .shipcard__copy{flex:0 0 auto;}
  .shipcard__help{margin:14px 0 0;}
  .shipcard__cta{margin-top:16px;text-align:center;}
  .shipcard__cta{margin-top:16px;text-align:center;}
  .shipcard__cta .btn5{display:inline-flex;width:auto;box-sizing:border-box;margin:0 auto;padding-left:34px;padding-right:34px;}
}

/* About Us — Our Story premium gradient heading (§5, §21) */
.story-heading{
  /* Size follows the site-wide h2 scale in responsive.css (27/31/34 per
     breakpoint) — no clamp, no override here. This rule only adds the gradient. */
  line-height:1.16;letter-spacing:-.01em;
  color:#8E3F63;                                   /* fallback for old browsers */
  background:linear-gradient(100deg,#6A2E5B 0%,#B95F83 52%,#E07A5F 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .story-heading{-webkit-text-fill-color:currentColor;background:none;}
}