/* ==========================================================================
   5MA FASHIONS — components.css
   Reusable UI parts: buttons, chips, badges, forms, cards, hero, sections.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BUTTONS
   Namespaced .btn5 so Bootstrap's .btn defaults are never fought with.
   -------------------------------------------------------------------------- */
.btn5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 32px;
  border: 1px solid #DCCFCF;
  border-radius: 999px;
  background: #FFFFFF;
  color: #1C1A1A;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  cursor: pointer;
  white-space: nowrap;
  transition: background .26s cubic-bezier(.22,.61,.36,1),
              border-color .26s cubic-bezier(.22,.61,.36,1),
              color .26s cubic-bezier(.22,.61,.36,1),
              transform .18s cubic-bezier(.22,.61,.36,1),
              box-shadow .26s cubic-bezier(.22,.61,.36,1);
}
.btn5:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(26,24,24,.04), 0 10px 24px rgba(26,24,24,.05);
}
.btn5:active { transform: translateY(0); }

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

   Three weights, so a page never presents two equal choices:

     accent   solid brand   the one action we want taken
     base     outlined ink  the alternative, present but quieter
     ghost    outlined red  tertiary, used inside cards and panels
   -------------------------------------------------------------------------- */

/* Base: outlined. Quiet on its own, and it darkens rather than fills. */
.btn5:hover { border-color: #1C1A1A; background: #1C1A1A; color: #FFFFFF; }

.btn5.btn5--accent { background: #75174E; border-color: #75174E; color: #FFFFFF; }
.btn5.btn5--accent:hover { background: #94215F; border-color: #94215F; color: #FFFFFF; }

.btn5.btn5--dark { background: #1C1A1A; border-color: #1C1A1A; }

.btn5.btn5--ghost { background: transparent; color: #75174E; border-color: #75174E; }
.btn5.btn5--ghost:hover { background: #75174E; color: #FFFFFF; border-color: #75174E; }

.btn5.btn5--soft { background: #FCF9F9; color: #75174E; border-color: #FCF9F9; }
.btn5.btn5--soft:hover { background: #F9F3F3; color: #75174E; border-color: #F0E6E6; }

.btn5.btn5--light { background: #FFFFFF; color: #1C1A1A; border-color: #FFFFFF; }
.btn5.btn5--light:hover { background: #F9F3F3; border-color: #F9F3F3; }

.btn5.btn5--outline-light { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.45); }
.btn5.btn5--outline-light:hover { background: #FFFFFF; color: #1C1A1A; border-color: #FFFFFF; }

.btn5.btn5--sm { min-height: 40px; padding: 0 24px; font-size: 13px; }
.btn5.btn5--lg { min-height: 56px; padding: 0 48px; }
.btn5.btn5--block { display: flex; width: 100%; }

/* Text link with a moving underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  color: #1C1A1A;
  padding-bottom: 4px;
  border-bottom: 1px solid #1C1A1A;
  white-space: nowrap;
}
.link-arrow i { transition: transform .26s cubic-bezier(.16,1,.3,1); }
.link-arrow:hover { color: #75174E; border-bottom-color: #75174E; }
.link-arrow:hover i { transform: translateX(4px); }


/* --------------------------------------------------------------------------
   2. CHIPS & BADGES
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #F0E6E6;
  background: #FFFFFF;
  color: #4E4A49;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s cubic-bezier(.22,.61,.36,1);
}
.chip:hover,
.chip.is-active {
  border-color: #75174E;
  background: #75174E;
  color: #fff;
}

/* SIGNATURE DEVICE — feeding access chip.
   Tells the shopper how the garment opens. The single most useful fact
   about this catalogue, so it gets its own consistent visual token. */
.access {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px 0 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  border: 1px solid transparent;
  white-space: nowrap;
}
.access i { font-size: 11px; }
.access.access--zipless {
  background: #F9F3F3;
  border-color: #F0E6E6;
  color: #75174E;
}
.access.access--zip {
  background: #FAF8F8;
  border-color: #EFE8E8;
  color: #75174E;
}
.access.access--none {
  background: rgba(126,140,132,.1);
  border-color: rgba(126,140,132,.24);
  color: #6D6767;
}
.access.access--lg { height: 32px; padding: 0 12px 0 12px; font-size: 13px; }

/* Corner badge on product media */
.badge5 {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
  background: #75174E;
  color: #fff;
}
.badge5.badge5--sale { background: #75174E; }
.badge5.badge5--new  { background: #1C1A1A; color: #fff; }
.badge5.badge5--soft { background: #FCF9F9; color: #1C1A1A; }
.badge5.badge5--low  { background: #F2CE86; color: #6B4A00; }
.badge5.badge5--newstock { background: #E6F4EC; color: #1E7A46; }
.badge5.badge5--offer { background: #75174E; color: #fff; }


/* --------------------------------------------------------------------------
   3. FORM CONTROLS
   -------------------------------------------------------------------------- */
.field { margin-bottom: 24px; }
.field__label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  color: #6D6767;
  margin-bottom: 8px;
}
.field__control {
  width: 100%;
  min-height: 50px;
  padding: 12px 24px;
  border: 1px solid #F0E6E6;
  border-radius: 999px;
  background: #FFFFFF;
  color: #1C1A1A;
  font-size: 15px;
  transition: border-color .18s cubic-bezier(.22,.61,.36,1),
              box-shadow .18s cubic-bezier(.22,.61,.36,1);
}
textarea.field__control { border-radius: 18px; min-height: 140px; resize: vertical; }
.field__control::placeholder { color: #6D6767; }
.field__control:focus {
  outline: none;
  border-color: #75174E;
  box-shadow: 0 0 0 3px rgba(170,82,83,.14);
}
.field__hint { font-size: 14px; color: #6D6767; margin-top: 8px; }

/* Select styled without a plugin */
.field__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237E8C84' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
  padding-right: 64px;
  cursor: pointer;
}

/* Inline newsletter field */
.inline-field {
  display: flex;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #F0E6E6;
  border-radius: 999px;
  padding: 4px 4px 4px 24px;
}
.inline-field input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  font-size: 15px;
  color: #1C1A1A;
  min-width: 0;
}
.inline-field input:focus { outline: none; }
.inline-field:focus-within {
  border-color: #75174E;
  box-shadow: 0 0 0 3px rgba(170,82,83,.14);
}


/* --------------------------------------------------------------------------
   4. MEDIA FRAME
   Keeps every image slot at a fixed ratio so nothing reflows while loading.
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  display: block;
  overflow: hidden;
  background: linear-gradient(135deg, #F9F3F3, #F0E6E6);
  border-radius: 12px;
}
.media::before { content: ""; display: block; padding-top: 133.33%; } /* 3:4 default */
.media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media.media--square::before  { padding-top: 100%; }
.media.media--wide::before    { padding-top: 62.5%; }   /* 16:10 */
.media.media--portrait::before{ padding-top: 140%; }
.media.media--tall::before    { padding-top: 160%; }


/* --------------------------------------------------------------------------
   5. PRODUCT CARD
   -------------------------------------------------------------------------- */
.pcard { position: relative; }

.pcard__media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: block;
}
.pcard__media::before { content: ""; display: block; padding-top: 133.33%; }
.pcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: opacity .5s cubic-bezier(.16,1,.3,1),
              transform 1.1s cubic-bezier(.16,1,.3,1);
}
.pcard__img--hover { opacity: 0; }
.pcard:hover .pcard__img--main  { opacity: 0; }
.pcard:hover .pcard__img--hover { opacity: 1; }
.pcard:hover .pcard__img { transform: scale(1.05); }
/* Single-image cards still get the zoom, but never fade to nothing */
.pcard:hover .pcard__img--main:only-of-type { opacity: 1; }

.pcard__promo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.pcard__promo .badge5 { height: 22px; padding: 0 9px; font-size: 11px; white-space: nowrap; }
.pcard__status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.pcard__status .badge5 { height: 22px; padding: 0 9px; font-size: 11px; white-space: nowrap; }
.pcard__flags {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  max-width: calc(100% - 52px);   /* leave the top-right clear for the wishlist */
  z-index: 2;
}
.pcard__flags .badge5 { height: 20px; padding: 0 7px; font-size: 10px; white-space: nowrap; box-shadow: 0 1px 4px rgba(40,20,30,.14); }
.badge5.badge5--best { background: #8E6BB0; color: #fff; }

.pcard__wish {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.92);
  color: #1C1A1A;
  font-size: 15px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .26s cubic-bezier(.16,1,.3,1),
              transform .26s cubic-bezier(.16,1,.3,1),
              background .18s cubic-bezier(.22,.61,.36,1),
              color .18s cubic-bezier(.22,.61,.36,1);
}
.pcard:hover .pcard__wish,
.pcard__wish:focus-visible,
.pcard__wish.is-active { opacity: 1; transform: none; }
.pcard__wish:hover { background: #75174E; color: #fff; }
.pcard__wish.is-active { background: #75174E; color: #fff; }

.pcard__body { padding-top: 16px; }
.pcard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.pcard__cat {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  color: #6D6767;
}
.pcard__title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: normal;
  margin: 0 0 8px;
}
.pcard__title a { color: #1C1A1A; }
.pcard__title a:hover { color: #75174E; }

.pcard__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pcard__price-now { font-size: 15px; font-weight: 600; color: #1C1A1A; }
.pcard__price-was { font-size: 14px; color: #6D6767; text-decoration: line-through; }
.pcard__price-off { font-size: 14px; font-weight: 600; color: #75174E; }

.pcard__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #6D6767;
}
.pcard__rating .stars { color: #75174E; letter-spacing: normal; font-size: 11px; }


/* --------------------------------------------------------------------------
   6. CATEGORY CARD
   -------------------------------------------------------------------------- */
.ccard {
  display: block;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #FCF9F9;
  color: #fff;
}
.ccard::before { content: ""; display: block; padding-top: 118%; }
.ccard__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
.ccard:hover .ccard__img { transform: scale(1.06); }
.ccard__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,24,24,.72) 0%, rgba(26,24,24,.18) 46%, rgba(26,24,24,0) 74%);
}
.ccard__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px;
}
.ccard__count {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  color: rgba(255,255,255,.72);
  margin-bottom: 4px;
  display: block;
}
.ccard__title {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  margin: 0;
  letter-spacing: normal;
}
.ccard__go {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .26s cubic-bezier(.16,1,.3,1), transform .26s cubic-bezier(.16,1,.3,1);
}
.ccard:hover .ccard__go { opacity: 1; transform: none; }


/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: #FCF9F9;
}
.hero__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 26%;
  transform: scale(1.06);
  transition: transform 7s cubic-bezier(.16,1,.3,1);
}
.hero__slide.is-active .hero__img { transform: scale(1); }
.hero__title {
  font-size: 40px;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1;
  color: #fff;
  margin: 0 0 24px;
}
.hero__title em {
  font-style: normal;
  font-weight: 600;
  display: block;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__slide.is-active .hero__copy > * { opacity: 1; transform: none; }
.hero__slide.is-active .hero__copy > *:nth-child(1) { transition-delay: .16s; }
.hero__slide.is-active .hero__copy > *:nth-child(2) { transition-delay: .26s; }
.hero__slide.is-active .hero__copy > *:nth-child(3) { transition-delay: .36s; }
.hero__slide.is-active .hero__copy > *:nth-child(4) { transition-delay: .46s; }
.hero__dot.is-active { background: #fff; width: 52px; }


/* --------------------------------------------------------------------------
   8. STAGE STRIP — signature navigator (Pregnancy → Feeding → Newborn)
   -------------------------------------------------------------------------- */
.stages {
  background: #FFFFFF;
  border-bottom: 1px solid #F6EFEF;
}
.stages__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.stages__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 32px 24px;
  transition: background .26s cubic-bezier(.22,.61,.36,1);
}
.stages__item + .stages__item { border-left: 1px solid #F6EFEF; }
.stages__item:hover { background: #FFFFFF; }
.stages__step {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid #F0E6E6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  color: #75174E;
  background: #FFFFFF;
  transition: background .26s cubic-bezier(.22,.61,.36,1), color .26s cubic-bezier(.22,.61,.36,1),
              border-color .26s cubic-bezier(.22,.61,.36,1);
}
.stages__item:hover .stages__step {
  background: #75174E;
  border-color: #75174E;
  color: #fff;
}
.stages__label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #1C1A1A;
  margin-bottom: 2px;
}
.stages__desc {
  display: block;
  font-size: 14px;
  color: #6D6767;
  line-height: 1.45;
}
.stages__item::after {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 10px;
  color: #6D6767;
  margin-left: auto;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .26s cubic-bezier(.16,1,.3,1), transform .26s cubic-bezier(.16,1,.3,1);
}
.stages__item:hover::after { opacity: 1; transform: none; }


/* --------------------------------------------------------------------------
   9. TABS
   -------------------------------------------------------------------------- */
.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #FCF9F9;
  border-radius: 999px;
}
.tabs__btn.is-active { background: #FFFFFF; color: #1C1A1A; box-shadow: 0 1px 2px rgba(26,24,24,.03), 0 2px 6px rgba(26,24,24,.03); }
.tabpanel.is-active { display: block; }


/* --------------------------------------------------------------------------
   10. EDITORIAL / COLLECTION BANNERS
   -------------------------------------------------------------------------- */
.editorial {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  color: #fff;
}
.editorial__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
.editorial:hover .editorial__img { transform: scale(1.04); }
.editorial__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,24,24,.76), rgba(26,24,24,.06) 68%);
}
.editorial__body { position: relative; padding: 48px; max-width: 460px; }
.editorial__title { color: #fff; font-size: 26px; margin-bottom: 12px; }
.editorial__text { color: rgba(255,255,255,.8); font-size: 15px; margin-bottom: 24px; }
.editorial--tall { min-height: 560px; }

/* Offer strip — split colour block, no image dependency */
.offer {
  border-radius: 26px;
  overflow: hidden;
  background: #75174E;
  color: #fff;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: stretch;
}
.offer__body { padding: 64px; }
.offer__title { color: #fff; margin-bottom: 12px; }
.offer__text { color: rgba(255,255,255,.78); margin-bottom: 32px; max-width: 420px; }
.offer__media { position: relative; min-height: 320px; background: #94215F; }
.offer__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offer__countdown { display: flex; gap: 12px; margin-bottom: 32px; }
.offer__unit {
  min-width: 68px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  text-align: center;
}
.offer__num { display: block; font-size: 24px; font-weight: 600; line-height: 1.2; }
.offer__unit-label {
  display: block;
  font-size: 13px;
  letter-spacing: normal;
  color: rgba(255,255,255,.6);
  margin-top: 4px;
}


/* --------------------------------------------------------------------------
   11. WHY CHOOSE US
   -------------------------------------------------------------------------- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.usp {
  background: #FFFFFF;
  border: 1px solid #F6EFEF;
  border-radius: 18px;
  padding: 32px;
  transition: transform .26s cubic-bezier(.16,1,.3,1), box-shadow .26s cubic-bezier(.16,1,.3,1);
}
.usp:hover { transform: translateY(-4px); box-shadow: 0 2px 5px rgba(26,24,24,.04), 0 10px 24px rgba(26,24,24,.05); }
.usp__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: #FCF9F9;
  color: #75174E;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 24px;
}
.usp__title { font-size: 18px; margin-bottom: 8px; }
.usp__text { font-size: 15px; color: #6D6767; margin: 0; }


/* --------------------------------------------------------------------------
   12. REVIEW CARD
   -------------------------------------------------------------------------- */
.rcard {
  background: #FFFFFF;
  border: 1px solid #F6EFEF;
  border-radius: 18px;
  padding: 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .26s cubic-bezier(.16,1,.3,1), box-shadow .26s cubic-bezier(.16,1,.3,1);
}
.rcard:hover { transform: translateY(-4px); box-shadow: 0 2px 5px rgba(26,24,24,.04), 0 10px 24px rgba(26,24,24,.05); }
.rcard__stars { color: #75174E; font-size: 14px; letter-spacing: normal; margin-bottom: 16px; }
.rcard__text {
  font-size: 15px;
  color: #4E4A49;
  line-height: 1.65;
  flex: 1 1 auto;
  margin-bottom: 24px;
}
.rcard__who { display: flex; align-items: center; gap: 12px; }
.rcard__avatar {
  width: 42px; height: 42px;
  border-radius: 999px;
  object-fit: cover;
  background: #FCF9F9;
  flex: 0 0 auto;
}
.rcard__name { font-size: 15px; font-weight: 600; display: block; line-height: 1.2; }
.rcard__where { font-size: 14px; color: #6D6767; }
.rcard__bought {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #F6EFEF;
  font-size: 14px;
  color: #6D6767;
}
.rcard__bought a { color: #1C1A1A; font-weight: 500; }


/* --------------------------------------------------------------------------
   13. INSTAGRAM GALLERY
   -------------------------------------------------------------------------- */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.insta {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #FCF9F9;
}
.insta::before { content: ""; display: block; padding-top: 100%; }
.insta img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.insta__veil {
  position: absolute;
  inset: 0;
  background: rgba(26,24,24,.42);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 0;
  transition: opacity .26s cubic-bezier(.22,.61,.36,1);
}
.insta:hover img { transform: scale(1.07); }
.insta:hover .insta__veil { opacity: 1; }


/* --------------------------------------------------------------------------
   15. MARQUEE STRIP (brand promise ticker)
   -------------------------------------------------------------------------- */
.ticker {
  background: #75174E;
  color: rgba(255,255,255,.9);
  overflow: hidden;
  padding-block: 16px;
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: ticker-slide 34s linear infinite;
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  white-space: nowrap;
}
.ticker__item i { color: #F07878; font-size: 8px; }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* A single petal-coloured strip down the seam, tying the two halves together */



/* --------------------------------------------------------------------------
   2. CATEGORY RAIL — a horizontal row that scrolls, replacing the 4+3 grid.
   Every category is reachable without a second row, and the overflow tells
   you there is more to the right.
   -------------------------------------------------------------------------- */
.rail { position: relative; }


.railcard { scroll-snap-align: start; display: block; }

/* display:block matters on all three of these. They are <span> elements, and
   an inline box with position:relative gives absolutely-positioned children a
   degenerate containing block — the image collapses to nothing while the
   ratio spacer still reserves height. */
.railcard__media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #FCF9F9;
  margin-bottom: 16px;
}
.railcard__media::before { content: ""; display: block; padding-top: 118%; }
.railcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.railcard:hover .railcard__media img { transform: scale(1.05); }

.railcard__name {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: #1C1A1A;
  margin-bottom: 2px;
  transition: color .2s ease;
}
.railcard:hover .railcard__name { color: #75174E; }
.railcard__count {
  display: block;
  padding-top: 4px;
  font-size: 15px;
  color: #6D6767;
  font-variant-numeric: tabular-nums;
}

.railcard__flag { position: absolute; left: 12px; top: 12px; z-index: 2; }


/* --------------------------------------------------------------------------
   RAIL CONTROLS
   Scroll-snap does the movement; the buttons just nudge it. No carousel
   library — that would be ~40KB and another jQuery dependency for behaviour
   the browser already provides.
   -------------------------------------------------------------------------- */
.rail { position: relative; }

.rail__track {
  display: grid;
  grid-auto-flow: column;
  /* Exactly four cards per view. 1fr stretched them to fit the container,
     which is why all seven were squeezing in. */
  grid-auto-columns: calc((100% - 3 * 20px) / 4);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail__track::-webkit-scrollbar { display: none; }

.rail__nav { display: flex; gap: 8px; }

.rail__btn {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #F0E6E6;
  border-radius: 50%;
  background: #FFFFFF;
  color: #1C1A1A;
  cursor: pointer;
  transition: background .24s ease, border-color .24s ease,
              color .24s ease, opacity .24s ease;
}
.rail__btn:hover:not(:disabled) {
  background: #75174E;
  border-color: #75174E;
  color: #fff;
}
.rail__btn:disabled { opacity: .3; cursor: default; }

/* Soft fade at the right edge, so a partially visible card reads as
   "there is more" rather than as a cropping mistake */
.rail::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 64px;
  height: calc(100% - 4px);
  background: linear-gradient(to right, rgba(255,255,255,0), #FFFFFF);
  pointer-events: none;
  opacity: 1;
  transition: opacity .3s ease;
}
.rail.is-end::after { opacity: 0; }


/* --------------------------------------------------------------------------
   4. LOOKBOOK BAND — full-bleed, edge to edge, centred type.
   The one place on the page that breaks the container.
   -------------------------------------------------------------------------- */
.lookbook {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
}


/* --------------------------------------------------------------------------
   6. ASYMMETRIC PRODUCT GRID — heading column sticks, products scroll past.
   Replaces the centred heading over a full-width grid.
   -------------------------------------------------------------------------- */
.sidegrid { display: grid; grid-template-columns: 264px minmax(0,1fr); gap: 64px; align-items: start; }
.sidegrid__head { position: sticky; top: 176px; }

.stages__step { border-color: #F0E6E6; color: #75174E; }
.stages__item:hover .stages__step { background: #75174E; border-color: #75174E; color: #fff; }


/* --------------------------------------------------------------------------
   PROMISES STRIP
   Sits above the footer on every page. Circular icon plate on the left, claim
   and supporting line stacked beside it — the same treatment the strip had
   inside the footer, kept so the two feel like one system.
   -------------------------------------------------------------------------- */
.usp-strip {
  background: #FCF9F9;
  border-block: 1px solid #F6EFEF;
  padding-block: 40px;
}

.usp-strip__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.usp-strip__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.usp-strip__icon {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #F0E6E6;
  color: #75174E;
  transition: background .26s ease, border-color .26s ease, color .26s ease;
}
.usp-strip__item:hover .usp-strip__icon {
  background: #75174E;
  border-color: #75174E;
  color: #fff;
}

.usp-strip__body { display: block; padding-top: 2px; }

.usp-strip__title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: #1C1A1A;
  margin-bottom: 4px;
}

.usp-strip__text {
  display: block;
  font-size: 15px;
  line-height: 1.65;
  color: #6D6767;
}


/* --------------------------------------------------------------------------
   TESTIMONIAL SLIDER
   Slick supplies the mechanics; everything visible is ours. Only slick.css is
   loaded, not slick-theme.css — the theme ships a webfont solely to draw its
   default arrows and dots, which SVG and avatars replace.

   Do NOT set display:flex on .slick-track here. In fade mode Slick makes every
   slide absolute except the active one, and the list takes its height from
   that single in-flow slide. Flex breaks the measurement and the quote gets
   clipped from below.
   -------------------------------------------------------------------------- */
.quotes {
  position: relative;
  max-width: 880px;          /* keeps the arrows beside the text, not at the
                                far edges of a 1600px container */
  margin-inline: auto;
  padding-inline: 80px;
}

/* Before Slick runs, only the first slide shows — otherwise all four stack
   for a frame and the section visibly jumps on load. */
.quotes__slide { display: none; }
.quotes__slide:first-child,
.quotes.slick-initialized .quotes__slide { display: block; }

.quotes .slick-list { overflow: hidden; }


/* --------------------------------------------------------------------------
   ADD TO CART
   Sits under the price rather than floating over the photograph. A button
   that covers the garment hides the thing the customer came to look at.
   -------------------------------------------------------------------------- */
.pcard__cart {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid #F0E6E6;
  border-radius: 999px;
  background: #FFFFFF;
  color: #1C1A1A;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  cursor: pointer;
  transition: background .24s ease, border-color .24s ease, color .24s ease;
}
.pcard__cart:hover {
  background: #75174E;
  border-color: #75174E;
  color: #fff;
}

.pcard__buy { position: relative; margin-top: 12px; }
.pcard__buy .pcard__cart { margin-top: 0; }
.pcard.is-picking { z-index: 30; }
.pcard__pick {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
  background: #FFFFFF; border: 1px solid #F0E6E6; border-radius: 12px;
  padding: 12px; z-index: 30;
  box-shadow: 0 12px 30px rgba(28, 26, 26, .14);
}
.pcard__pick[hidden] { display: none; }
.pcard__pick-label { display: block; font-size: 12px; font-weight: 600; color: #6D6767; margin-bottom: 8px; }
.pcard__pick-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.sizebtn--sm { min-width: 40px; height: 34px; padding: 0 10px; font-size: 13px; }


/* --------------------------------------------------------------------------
   MINI-CART
   The drawer contents. Thumb left, details centre, remove top-right — the
   same anatomy as the cart page, so moving between them feels continuous.
   -------------------------------------------------------------------------- */
.minicart { list-style: none; margin: 0; padding: 0; }

.minicart__line {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid #F6EFEF;
}
.minicart__line:first-child { padding-top: 4px; }

.minicart__thumb {
  flex: 0 0 auto;
  width: 76px;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: #FCF9F9;
}
.minicart__thumb img { display: block; width: 100%; height: auto; }

.minicart__body { flex: 1 1 auto; min-width: 0; padding-right: 24px; }

.minicart__name {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  margin: 0 0 4px;
}
.minicart__name a { color: #1C1A1A; }
.minicart__name a:hover { color: #75174E; }

.minicart__opt {
  font-size: 13px;
  color: #6D6767;
  margin: 0 0 8px;
}

.minicart__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.minicart__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #F0E6E6;
  border-radius: 999px;
  overflow: hidden;
}
.minicart__qty button {
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  color: #4E4A49;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.minicart__qty button:hover { background: #F9F3F3; color: #75174E; }
.minicart__qty span {
  min-width: 24px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.minicart__price { font-size: 15px; font-weight: 600; color: #1C1A1A; }

.minicart__remove {
  position: absolute;
  top: 18px;
  right: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #6D6767;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.minicart__remove:hover { background: #F9F3F3; color: #75174E; }

/* Count beside the drawer title */
.drawer__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  margin-left: 8px;
  border-radius: 999px;
  background: #75174E;
  color: #fff;
  -webkit-text-fill-color: #fff; /* h2 gradient sets this transparent site-wide; keep the count visible */
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}



/* --------------------------------------------------------------------------
   MINI-CART SIZE ROW
   Inline and always visible. Nothing to open, one tap to change, and the
   whole range is legible at a glance — which is what a bag line wants when
   the customer is checking their order rather than browsing.
   -------------------------------------------------------------------------- */
.linesize__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: normal;
  color: #6D6767;
  margin-bottom: 8px;
}

.linesize {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

/* Product-type line (e.g. "Type: Pack of 10") — same breathing room before the
   quantity row as the size block above, so type and size cart items line up. */
.minicart__variant {
  margin: 4px 0 12px;
  font-size: 13px;
  color: #6D6767;
}
.minicart__variant strong { color: #4a4045; font-weight: 600; }

.linesize__opt {
  min-width: 36px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #F0E6E6;
  border-radius: 8px;
  background: #FFFFFF;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #1C1A1A;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.linesize__opt:hover:not(:disabled) { border-color: #75174E; color: #ffffff; }

.linesize__opt.is-active {
  background: #75174E;
  border-color: #75174E;
  color: #fff;
}

/* Struck through rather than hidden — knowing a size is sold out is useful */
.linesize__opt.is-out {
  color: #6D6767;
  background: #FCF9F9;
  cursor: not-allowed;
  text-decoration: line-through;
  opacity: .55;
}

/* Stale/insufficient cart variant: keep the approved drawer layout and add only
   the minimum validation message required to prevent checkout with an invalid size. */
.linesize__warning {
  margin: -4px 0 12px;
  color: #75174E;
  font-size: 12px;
  line-height: 1.45;
}
.linesize__warning--drawer {
  margin: -4px 0 12px;
  text-align: center;
}
.drawer__foot .btn5:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Opening hours in the footer */
.ftr-hours {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  font-size: 14px;
}
.ftr-hours__k { color: #6D6767; }
.ftr-hours__v { color: #1C1A1A; }

@media (max-width: 767.98px) {
}

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


/* ==========================================================================
   ARCHED COLLECTION TILES

   The arch is the only shape on the page that is not a rectangle, which is
   why it can carry a section on its own. It reads as a doorway, and a
   wardrobe is a set of doors.

   Built with border-radius on the top two corners at a percentage, so the
   curve stays a true arch at any tile width rather than becoming a stadium
   at narrow sizes the way a px radius would.
   ========================================================================== */
.arches { background: #FDFBF9; }


/* ==========================================================================
   COLLECTION TILES

   An arched top on a squared foot, with the name and the way in set inside
   the tile rather than beneath it. Putting the caption inside is what makes
   the arch read as a doorway with something behind it; a caption underneath
   turns the same shape into a thumbnail.

   The arch is a percentage radius, not px, so the curve stays a true arch
   from a 320px desktop tile down to a 150px phone one. A px radius becomes
   a stadium as the tile narrows.
   ========================================================================== */
.archgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
}

/* Layer 1 — the arch.
   The artwork is portrait (1006x1478) and the tile is square, so it is
   anchored to the top: the arch curve is the part that has to be seen, and
   the flowers at the foot can run past the edge. */
.arch__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  /* drop-shadow follows the arch's own silhouette; a box-shadow would draw
     a rectangle behind an image with transparent corners */
  filter: drop-shadow(0 4px 10px rgba(60, 30, 40, .06));
  transition: filter .55s ease;
}


/* ==========================================================================
   COLLECTION TILE — HOVER

   The previous version moved the model on its own, so she lifted away from
   the arch and the two read as separate pictures — which is exactly what the
   layering is meant to hide.

   The fix is that nothing inside the tile moves relative to anything else.
   The tile as a whole rises and settles; the arch and the model travel with
   it, locked together. What changes inside is only light and colour.
   ========================================================================== */
/* The tile itself. Without position/aspect-ratio the absolutely positioned
   layers inside have nothing to sit in and the whole grid collapses. */
.arch {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: transparent;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}

/* One movement, applied to the tile — never to a layer inside it */
.arch:hover,
.arch:focus-visible {
  transform: translateY(-6px);
}

/* The arch warms very slightly, which reads as the string lights coming up
   rather than as an image effect */


/* Touch devices have no hover, and a sticky transform after a tap looks
   broken, so the movement is left to pointer devices only */
@media (hover: none) {
  .arch:hover { transform: none; }
}

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


/* --------------------------------------------------------------------------
   TILE TEXT AND MODEL — keeping them apart

   The two were laid out as 56% text and 40% model, which left a 4% gutter —
   about 12px on a desktop tile and 7px on a phone. A three-line name set at
   21px reaches the figure before it has a chance to wrap, which is why the
   words looked like they were touching her.

   The columns are now 48% and 42%, leaving 10% clear between them. The text
   box also stops short of the arch's own curve at the top and foot, so a long
   name cannot ride up into the narrowing part of the shape.
   -------------------------------------------------------------------------- */

/* The model keeps the right-hand side */
.arch__model {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 92%;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
}

/* The words take the left, and stop 10% short of her */
.arch__body {
  position: absolute;
  left: 0;
  /* inset from the top and foot so the text sits in the widest part of the
     arch rather than where the curve closes in */
  top: 50%;
  bottom: 14%;
  width: 48%;
  padding-left: 8%;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  z-index: 2;
}

.arch__name {
  display: block;
  width: 100%;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #E0574F;
  margin: 0 0 18px;
  /* a long single word breaks rather than pushing into the figure */

  transition: color .3s ease;
}
.arch:hover .arch__name { color: #C33F38; }

.arch__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #241C19;
  position: relative;
  transition: color .3s ease;
}
.arch__go::after {
  content: "";
  position: absolute;
  left: 0;
  right: 22px;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.arch:hover .arch__go { color: #C33F38; }
.arch:hover .arch__go::after { transform: scaleX(1); }
.arch__go svg { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.arch:hover .arch__go svg { transform: translateX(6px); }

/* A tile still waiting for its cutout has the whole width to itself */
.arch:not(:has(.arch__model)) .arch__body { width: 74%; }


/* ==========================================================================
   BANNER

   The artwork is 2000x650 with its own clear area on the left, so the words
   sit in that space. No overlay is laid on top — an overlay would dull the
   flowers and lights that the picture is paying for.

   The image keeps its exact ratio so nothing is cropped, and the text is
   positioned over it rather than beside it.
   ========================================================================== */
.banner {
  position: relative;
  display: block;
  width: 100%;
  background: #FBE9DC;   /* the artwork's own tone, so no white flash */
}

.banner__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2000 / 650;
  object-fit: cover;
}

/* The words, held to the same container width as the rest of the site so
   they line up with the sections below rather than floating free */
/* A soft scrim behind the words only.

   The artwork looked clear in the left third, but the string lights and their
   wire cross it — the darkest pixel under the text is nearly black, which
   drops every ink colour under 2:1. Rather than move the text or dull the
   whole picture, a light wash sits behind the column and fades out before
   the flowers on the right. */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  
}

/* Whole-banner clickable link (rendered only when a Banner Link is set). It sits
   BELOW the Slick arrows/dots and below the CTA, and the text overlay passes
   clicks through so the banner and its CTA stay independently clickable (§5,§13). */
.banner__link { position: absolute; inset: 0; z-index: 1; display: block; }
.banner--link { cursor: pointer; }
.banner--link .banner__inner { pointer-events: none; }
.banner--link .banner__cta { pointer-events: auto; position: relative; z-index: 2; }

.banner__inner {
  position: absolute;
  inset: 0;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 40px;
  display: flex;
  align-items: center;
  z-index: 1;
}

.banner__text { width: 52%; max-width: 620px; }

.banner__title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: normal;
  margin: 0 0 16px;

}
.banner__title span { display: block; }

/* The second half of the line takes the warm end of the brand ramp. #D9483F
   from the reference only reaches 2.62:1 on the pinker part of the artwork,
   so this is deepened to #C2352D, which holds 4.52:1 across the whole band. */
.banner__title em {
  font-style: normal;
  color: #C2352D;
}

.banner__lead {
  font-size: 15px;
  line-height: 1.7;
  color: #3A2E2A;
  max-width: 46ch;
  margin: 0 0 26px;
}

/* A solid pill, because the artwork behind it is busy and an outline would
   disappear into the flowers */
.banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 30px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #241C19;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(74, 38, 112, .10);
  transition: background .3s ease, color .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.banner__cta:hover {
  background: #C2352D;
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* Dynamic hero slider — each slide reuses the approved .banner styling above. */
.banner-slider { position: relative; width: 100%; background: #FBE9DC; }
.banner picture { display: block; }
.banner-slider .slick-track { display: flex; }
.banner-slider .slick-slide { height: auto; }
/* Before Slick initialises, show only the first slide (no stacking flash, no layout shift). */
.banner-slider[data-slider]:not(.slick-initialized) .banner__slide { display: none; }
.banner-slider[data-slider]:not(.slick-initialized) .banner__slide:first-child { display: block; }

/* Premium hero arrows — brand rose on a soft white pill, above the artwork.
   Only rendered by Slick when 2+ active banners exist. */
.banner-slider .banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FFFFFF;
  color: #75174E;
  border: 1px solid rgba(170, 82, 83, 0.28);
  box-shadow: 0 6px 18px rgba(43, 32, 48, 0.14);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}
.banner-slider .banner-arrow--prev { left: 24px; }
.banner-slider .banner-arrow--next { right: 24px; }
.banner-slider .slick-dots { display: none; }   /* desktop: hover arrows are the nav */
.banner-slider .banner-arrow:hover {
  background: #75174E;
  color: #FFFFFF;
  border-color: #75174E;
  box-shadow: 0 10px 24px rgba(43, 32, 48, 0.22);
  transform: translateY(-50%) scale(1.04);
}
.banner-slider .banner-arrow:focus-visible {
  outline: 2px solid #75174E;
  outline-offset: 3px;
  opacity: 1;
}
/* Arrows are ALWAYS visible on desktop/laptop — no hover required. */
.banner-slider .banner-arrow { opacity: 1; }
/* Mobile + tablet: hide the arrows entirely (they were covering banner content)
   and navigate with dots + swipe instead. Scoped to the home hero only. */
@media (max-width: 991.98px) {
  .banner-slider .banner-arrow { display: none; }
  .banner-slider .slick-dots {
    display: flex; justify-content: center; align-items: center; gap: 9px;
    position: absolute; left: 0; right: 0; bottom: 12px;
    margin: 0; padding: 0; list-style: none; z-index: 6;
  }
  .banner-slider .slick-dots li { margin: 0; line-height: 0; }
  .banner-slider .slick-dots li button {
    width: 9px; height: 9px; padding: 0; font-size: 0; line-height: 0;
    border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 3px rgba(43, 32, 48, 0.30); cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .banner-slider .slick-dots li button:before { content: none; display: none; }
  .banner-slider .slick-dots li.slick-active button { background: #FFFFFF; transform: scale(1.2); }
}


/* ==========================================================================
   SECTION HEADING — SHOP BY COLLECTIONS

   Set in Outfit like the rest of the site. Uppercase with open tracking is
   what gives it the fashion-plate look, not a different typeface.

   The gradient is sampled from the supplied artwork, then reduced from
   thirteen stops to six. Five of the originals sat on near-identical oranges
   between 48% and 72% — colour deltas of 0, 2, 7 — which does not make a
   ramp smoother, it just gives the browser more places to band. Six evenly
   spaced stops render as one continuous sweep.
   ========================================================================== */
.arches__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}

/* The lotus, in the same gold as the rule below it */
.arches__mark {
  display: block;
  color: #C9A227;
  margin-bottom: 18px;
}

.arches__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8A6B20;
  margin: 0 0 14px;
}

.arches__title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 18px;

  background-image: linear-gradient(96deg,
    #4A266F 0%,
    #723665 18%,
    #9D485E 34%,
    #D25E4C 52%,
    #E56243 68%,
    #DE4149 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Browsers without background-clip render the fill transparent, so the
   heading would vanish rather than fall back. This gives them the violet. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .arches__title {
    color: #4A266F;
    -webkit-text-fill-color: #4A266F;
  }
}

/* A row of small diamonds, drawn rather than loaded */
.arches__rule {
  display: block;
  width: 158px;
  height: 6px;
  margin: 0 auto 22px;
  background-image: radial-gradient(circle 2px at 4px 3px, #C9A227 2px, transparent 2px);
  background-size: 11px 6px;
  background-repeat: repeat-x;
}

.arches__lead {
  font-size: 15px;
  line-height: 1.75;
  color: #2A2320;
  max-width: 62ch;
  margin: 0 auto;
}


/* --------------------------------------------------------------------------
   SIDE-GRID HEADING — New arrivals, and any section head like it

   Same family as the collections heading: gold eyebrow, gradient title, the
   diamond rule. What differs is that this one is left-aligned and only two
   words wide, so the ramp is set to 88% rather than 100% — a gradient sized
   for a full-width heading would only reach its plum stage across a short
   line, and the coral end would never appear.
   -------------------------------------------------------------------------- */
.sidegrid__head .eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8A6B20;
  margin: 0 0 12px;
}

.sidegrid__title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0 0 16px;

  background-image: linear-gradient(96deg,
    #4A266F 0%,
    #723665 16%,
    #9D485E 30%,
    #D25E4C 46%,
    #E56243 60%,
    #DE4149 88%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sidegrid__title { color: #4A266F; -webkit-text-fill-color: #4A266F; }
}

/* The diamond rule, left-aligned to match the heading */
.sidegrid__head .eyebrow + .sidegrid__title::after {
  content: "";
  display: block;
  width: 112px;
  height: 6px;
  margin-top: 16px;
  background-image: radial-gradient(circle 2px at 4px 3px, #C9A227 2px, transparent 2px);
  background-size: 11px 6px;
  background-repeat: repeat-x;
}

.sidegrid__text {
  font-size: 15px;
  line-height: 1.75;
  color: #2A2320;
  max-width: 44ch;
  margin: 0 0 24px;
}


/* ==========================================================================
   TESTIMONIALS

   One review at a time, given the full column width. A wall of cards makes
   every voice smaller; a single quote across the page makes one person's
   words the thing you read.

   The arrows sit outside the text rather than under it, so the eye stays on
   the line it is reading.
   ========================================================================== */
.gsection { text-align: center; }

.gsection__head { margin-bottom: 40px; }

.gsection__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8A6B20;
  margin: 0 0 14px;
}

.gsection__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 18px;

  background-image: linear-gradient(96deg,
    #4A266F 0%,
    #723665 18%,
    #9D485E 34%,
    #D25E4C 52%,
    #E56243 68%,
    #DE4149 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gsection__title { color: #4A266F; -webkit-text-fill-color: #4A266F; }
}

.gsection__rule {
  display: block;
  width: 158px;
  height: 6px;
  margin: 0 auto;
  background-image: radial-gradient(circle 2px at 4px 3px, #C9A227 2px, transparent 2px);
  background-size: 11px 6px;
  background-repeat: repeat-x;
}

/* The quote, with the arrows flanking it */
.gwrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.quotes { flex: 1 1 auto; min-width: 0; }

.gquote { margin: 0; }

.gquote__text {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: #2A2320;
  max-width: 68ch;
  margin: 0 auto 26px;
    min-height: 105px;
}

/* Italic caps for the name — the one place a different treatment is worth it,
   because it separates the person from their words without a rule or a gap */
.gquote__name {
  font-size: 16px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1C1A1A;
  margin: 0;
}

/* Arrows: a hairline circle, quiet until reached for */
.gnav {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E4DCD8;
  border-radius: 50%;
  background: #FFFFFF;
  color: #6D6767;
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.gnav:hover { border-color: #C2352D; color: #C2352D; }
.gnav:focus-visible { outline: 2px solid #C2352D; outline-offset: 3px; }


/* --------------------------------------------------------------------------
   GOOGLE REVIEWS BADGE

   The G is Google's trademark and has to be their own asset, so it sits in
   its own <img>. If the file is absent the alt is empty and the badge still
   reads — the stars and the wordmark carry it on their own.
   -------------------------------------------------------------------------- */
.gbadge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  padding: 10px 20px;
  border: 1px solid #EAE3DF;
  border-radius: 999px;
  background: #FFFFFF;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.gbadge:hover {
  border-color: #D9CFC9;
  box-shadow: 0 2px 10px rgba(28,26,26,.06);
}

.gbadge__g {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: block;
}

.gbadge__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.2;
}

/* Google's own star colour, not the brand red — these are their ratings */
.gbadge__stars {
  font-size: 12px;
  letter-spacing: .1em;
  color: #F4B400;
}

.gbadge__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #3C4043;
}


/* --------------------------------------------------------------------------
   PRODUCT NAMES

   Ink, not gradient. A section heading is a label on the page and can carry
   decoration; a product name is the thing being sold, and a customer reading
   "Malar — Feeding Maxi with Invisible Zip" needs the words, not the effect.

   These are set explicitly rather than left to inherit, so the gradient
   cannot reach them if a heading rule is widened later.
   -------------------------------------------------------------------------- */
.pcard__title,
.pcard__title a,
.pdp__title {
  background-image: none;
  -webkit-text-fill-color: #1C1A1A;
  color: #1C1A1A;
}

/* Hover moves to the brand red — a colour change, not a gradient */
.pcard__title a:hover {
  -webkit-text-fill-color: #75174E;
  color: #75174E;
}



/* Admin-uploaded decorative assets for the Shop by collections intro. Fixed
   boxes so any uploaded SVG matches the built-in artwork's scale and can never
   stretch the layout. */
.arches__mark-img { display: block; width: 30px; height: 17px; object-fit: contain; margin: 0 auto; }
/* The uploaded divider asset, repeated ten times in a single centred row.
   nowrap keeps all ten on one line at every width; the sizes step down on small
   screens rather than allowing a second row. */
.arches__dots {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: nowrap; gap: 7px; margin: 0 auto 22px;
}
.arches__dots img {
  width: 8px; height: 8px; flex: 0 0 auto;
  display: block; object-fit: contain;
}
@media (max-width: 640px) {
  .arches__dots { gap: 6px; }
  .arches__dots img { width: 7px; height: 7px; }
}
@media (max-width: 360px) {
  .arches__dots { gap: 5px; }
  .arches__dots img { width: 6px; height: 6px; }
}

/* The New Arrivals intro is left-aligned, unlike the centred Shop by
   collections head, so its divider row aligns left and keeps its own spacing. */
.sidegrid__dots { justify-content: flex-start; margin: 0 0 18px; }
@media (max-width: 860px) {
  .sidegrid__dots { justify-content: center; }
}
/* The heading already draws a built-in diamond rule via ::after. When an admin
   uploads a divider we render our own row, so the built-in one is suppressed —
   otherwise both appear and the section shows two rules. */
.sidegrid__head.has-dots .eyebrow + .sidegrid__title::after { content: none; }

/* A single review is static: no track, no cloning, just the quote centred. */
.quotes--single .quotes__slide { display: block; }

.faqwrap{max-width:840px;margin:0 auto;}

.faq__inner a{color:#B95F83;text-decoration:none;border-bottom:1px solid rgba(185,95,131,.4);word-break:break-word;}
.faq__inner a:hover{border-bottom-color:#B95F83;}
.faq__inner{overflow-wrap:anywhere;}