/** Shopify CDN: Minification failed

Line 114:10 Expected ":"

**/
product-info {
  --coeur-ink: #0D0802;
  --coeur-sage: #BCCFB9;
  --coeur-olive: #656A4A;
  --coeur-rule: rgba(13, 8, 2, 0.16);
  --coeur-help: #656A4A;
  --coeur-aktiv: 'aktiv-grotesk-extended', sans-serif;
  --coeur-eaves: 'mrs-eaves-roman-lining', Georgia, serif;
  --coeur-mono: var(--font-mono-family, 'Mono LL', ui-monospace, monospace);
}

/* Swatch hover/selected outline — match the footer "Stay in Touch" green */
product-info .swatch-input__input:active + .swatch-input__label,
product-info .swatch-input__input:checked + .swatch-input__label,
product-info .swatch-input__input:active:focus-visible + .swatch-input__label,
product-info .swatch-input__input:checked:focus-visible + .swatch-input__label {
  outline-color: var(--coeur-olive);
}

product-info .swatch-input__input + .swatch-input__label:hover,
product-info .swatch-input__input:hover + .swatch-input__label {
  outline-color: var(--coeur-olive);
}

/* Extra breathing room above the title on the info column only — media column untouched */
.product__info-wrapper {
  padding-top: 2.5rem;
}

/* Title — Aktiv Grotesk Extended, 45px. base.css has a "COEUR — Product Page
   Overrides" block that caps .product__title at max-width:20ch, which wraps
   titles early even when the column has room (same issue the description
   had) — override it here. */
product-info .product__title > a { display: none; }
product-info .product__title,
product-info .product__title h1 {
  max-width: 100%;
}
product-info .product__title h1 {
  font-family: var(--coeur-aktiv);
  font-weight: 300;
  font-size: 45px;
  line-height: 1.05;
  letter-spacing: 0;
  margin: 0 0 1.25rem;
}

/* Price — 25px Mrs Eaves */
product-info .price .price-item--regular {
  font-family: var(--coeur-eaves);
  font-size: 25px;
  color: var(--coeur-ink);
  letter-spacing: 0;
}

product-info .product__description,
product-info .product__description p,
product-info .product__text {
  font-family: var(--coeur-eaves);
  font-weight: 250;
  font-size: 2.0rem;
  line-height: 1.2;
  letter-spacing: 0;
  color:  #1F1E1E;
}
product-info .product__description,
product-info .product__text { max-width: 100%; margin: 1rem 0 1.5rem; }

/* Variant dropdown — Aktiv 30px */
product-info .product-form__input--dropdown .select__select,
product-info .product-form__input select {
  font-family: var(--coeur-aktiv);
  font-size: 30px;
  min-height: 3.25rem;
}

/* Variant picker text buttons (size/style pills) — hover and selected states
   are a thicker border in the footer "Stay in Touch" green, no fill. base.css
   has a blanket `.product-form__input input[type="radio"] ~ label { border:
   0.1rem solid ... !important }` (all states, "--- Variant Pills ---" block),
   so this needs !important too or it's a no-op. */
product-info .product-form__input--pill input[type='radio'] ~ label:hover {
  border-width: 0.2rem !important;
  border-color: var(--coeur-olive) !important;
}

/* Adjacent-sibling combinator on purpose: a general-sibling (~) selector
   here would match every label after the checked radio, not just its own
   pair, since :checked doesn't limit "any preceding sibling" matching. */
product-info .product-form__input--pill input[type='radio']:checked + label {
  border-width: 0.2rem !important;
  border-color: var(--coeur-olive) !important;
}

product-info .product-form__submit {
  flex: 1 1 100%;
  width: 100%;
  box-sizing: border-box;
  background: var(--coeur-sage);
  color: var(--coeur-ink);
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--coeur-aktiv);
  font-size: 30px;
  letter-spacing: 0;
  min-height: 3.5rem;
  transition: background 0.2s ease, color 0.2s ease;
  border-w
}

product-info .product-form__submit:hover:not([disabled]) {
  background: var(--coeur-olive);
  color: #fff;
}

/* Helper row — Mrs Eaves 20px in #656A4A; uppercase parts Mono LL 15px */
.coeur-pdp-help {
  display: flex;
   justify-content: center;
  align-items: center; 
  gap: 1rem;
  margin-top: 0.75rem;
  font-family: var(--coeur-eaves);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--coeur-help);
}
.coeur-pdp-help a {
  font-family: var(--coeur-mono);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Accordions */
product-info .product__accordion { border: none; }
product-info .product__accordion details { border-top: 1px solid var(--coeur-rule); }
product-info .product__accordion details:last-of-type { border-bottom: 1px solid var(--coeur-rule); }
product-info .product__accordion summary { display: flex; align-items: center; padding: 1rem 0; }
product-info .product__accordion .summary__title .icon-accordion { display: none; }
product-info .product__accordion .accordion__title {
  font-family: var(--coeur-aktiv);
  font-weight: 300;
  font-size: 20px;
  color: var(--coeur-ink);
}
product-info .product__accordion summary .icon-caret { display: none; }
product-info .product__accordion summary::after {
  content: "(+)";
  margin-left: auto;
  font-family: var(--coeur-mono);
  font-size: 15px;
  font-weight: 200;
  color: var(--coeur-ink);
}
product-info .product__accordion details[open] summary::after { content: "(-)"; }
product-info .product__accordion .accordion__content {
  font-family: var(--coeur-eaves);
  font-size: 1.75rem;
  line-height: 1.45;
  color: var(--coeur-ink);
  padding-bottom: 1.25rem;
}

/* Indent the text/list content only — not the badge image beside it */
product-info .product__accordion .accordion__content-text {
  padding-left: 1.25rem;
}

/*
 * Dawn only widens the stacked gallery's hero image to full width (and caps
 * the rest at 50%) starting at 990px — see .product--stacked .product__media-item
 * and the width:100% first-child/--full rule in section-main-product.css.
 * Between 750-989px nothing overrides the base .grid__item sizing
 * (width: ~25%, max-width: ~50%), so every stacked product image renders at
 * roughly a quarter of the column's width instead of full-bleed, which reads
 * as the image being severely cropped. Mirror the >=990px rules down to 750px.
 */
@media screen and (min-width: 750px) and (max-width: 989px) {
  product-info .product--stacked .product__media-item {
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  product-info .product:not(.product--columns) .product__media-list .product__media-item:first-child,
  product-info .product:not(.product--columns) .product__media-list .product__media-item--full {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (min-width: 750px) {
  /*
   * Dawn's constrain-height + media-fit-cover combo caps the image container
   * at max(500px, 100vh - 170px) and crops with object-fit:cover to fill it.
   * For portrait product photos that's a severe vertical crop on any window
   * that isn't tall relative to its width (confirmed cropping ~24% of image
   * height off a real product at 1600px wide / 900px tall). Show the whole
   * image at its natural aspect ratio instead — never crop.
   */
  product-info .product-media-container.media-fit-cover.constrain-height .media {
    padding-top: var(--ratio-percent);
  }

  product-info .product-media-container.media-fit-cover .media > img {
    object-fit: contain;
  }

  /* Base theme forces height:100% on these, which fights the aspect-ratio
     padding-top above and crops the image once the grid row stretches taller
     than the media column (e.g. window widths just above the mobile
     breakpoint, where the info column's content is tall relative to the
     column width). Let padding-top be the sole source of height here. */
  product-info .product-media-container.media-fit-cover,
  product-info .product-media-container.media-fit-cover .product__modal-opener,
  product-info .product-media-container.media-fit-cover .media {
    height: auto;
  }
}

/*
 * Same viewport-height-capped cropping bug as above, but mobile (<750px).
 * Never crop, regardless of media_fit: constrain the box to the image's own
 * aspect ratio (padding-top: var(--ratio-percent)) instead of a fixed pixel
 * height, and let object-fit:contain guarantee the full photo is visible
 * even if a stretched grid row still forces some fixed height somewhere
 * upstream. No overflow:hidden here — nothing should ever need to be
 * clipped to fit this box once it's sized from the image itself.
 */
@media screen and (max-width: 749px) {
  product-info .product-media-container.constrain-height {
    height: auto;
    max-height: none;
    overflow: visible;
    padding-top: 0;
    align-self: auto;
  }

  product-info .product-media-container.constrain-height .media {
    height: auto;
    padding-top: var(--ratio-percent);
  }

  product-info .product-media-container.constrain-height .media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* Anaïs-specific: same reasoning as the desktop override further down —
     the first (hero) photo is 3338x4500 (≈0.74) while the other two gallery
     photos are a true 2:3 (≈0.67), so sized to its own natural ratio like
     every image above, it reads noticeably shorter/smaller next to them.
     Match its box to 2:3 here too so it fills the same height, cropping a
     little off the left/right edges rather than looking undersized. Mobile
     doesn't have the fixed-height parent that desktop needed reset — the
     base rule above already uses height:auto — so this is just the ratio
     and fit swap. */
  product-info.product-info--anais-hobo-bag .product__media-item.is-active .product-media-container.constrain-height .media {
    padding-top: 150%;
  }

  product-info.product-info--anais-hobo-bag .product__media-item.is-active .product-media-container.constrain-height .media img {
    object-fit: cover;
    object-position: center;
  }

  product-info.product-info--madeleine-handbag .product__media-item .product-media-container.constrain-height .media {
    padding-top: 135%;
  }

  product-info.product-info--madeleine-handbag .product__media-item .product-media-container.constrain-height .media img {
    object-fit: cover;
    object-position: center;
  }
}

product-info .product-form__buttons {
  max-width: none;
}

@media screen and (min-width: 375px) and (max-width: 749px) {
  product-info .accordion__content-flex {
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: nowrap;
  }

  product-info .accordion__content-text {
    min-width: 0;
  }

  product-info .accordion__badge-image {
    width: 50px;
    margin-top: 0;
    align-self: flex-end;
  }
}
@media screen and (max-width: 749px) {
  product-info .product__title h1{
      font-size: 3.0rem;
      font-weight: 300;
      padding-top: .5rem;
    }

  product-info .price .price-item--regular{
      font-size: 2.0rem;
      font-weight: 400;
    }

    product-info .product__description, product-info .product__description p, product-info .product__text {
      font-weight: 100;
      font-size: 1.75rem;
    }

  }



product-info .swatch {
  --swatch-input--size: 4rem;
  border: none !important;
}



/* made it so the first image is constrained in size on the product page.
   Desktop-only (>=990px): on narrow/tablet widths this fought the two
   "never crop" fixes above and clipped the active slide out of view
   entirely (overflow:hidden + a calculated height that can run very small
   on short/narrow viewports), which is why product photos were vanishing
   on tablet and mobile. Scoping to real desktop keeps the original intent
   without breaking smaller breakpoints. */
@media screen and (min-width: 990px) {
  product-info .product__media-item.is-active .product-media-container.constrain-height {
    height: calc(var(--constrained-height) * 0.98);
    max-height: calc(var(--constrained-height) * 0.98);
    overflow: hidden;
  }

  product-info .product__media-item.is-active .product-media-container.constrain-height .product__modal-opener {
    height: 100%;
  }

  product-info .product__media-item.is-active .product-media-container.constrain-height .media {
    height: 100%;
    padding-top: 0;
  }

  product-info .product__media-item.is-active .product-media-container.constrain-height .media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: scale(1.10) translateY(-5%);
    transform-origin: center;
  }

  product-info.product-info--genevieve-hobo-bag .product__media-item.is-active .product-media-container.constrain-height .media img {
    transform: scale(1.10) translateY(7%);
  }

  /* Colette-specific reframe — was previously unscoped (applied at every
     screen width, including mobile/tablet), which zoomed and cropped the
     hero photo well past what "never crop" intended. Desktop-only, matching
     the Genevieve override above. */
  product-info.product-info--colette-handbag .product__media-item.is-active .product-media-container.media-fit-cover .media > img {
    object-position: 54% bottom;
    transform: scale(1.42);
    transform-origin: center bottom;
  }

  /* Anaïs-specific: the first (hero) photo is a wider/shorter aspect ratio
     (3338x4500 ≈ 0.74) than the other two gallery photos (both a true 2:3 ≈
     0.67), so — sized to its own natural ratio like every image here — it
     reads noticeably shorter/smaller next to them. Match its box to the 2:3
     ratio the other two use and let it fill that height; this crops a
     little off the left/right edges rather than leaving it undersized.
     Desktop-only, same reasoning as the Colette/Genevieve overrides above:
     mobile keeps the natural, uncropped size.
     Must also reset the container/modal-opener height back to auto — the
     base rule above forces them to a fixed viewport-relative height with
     overflow:hidden, which clipped the taller 150% box down to a tiny
     sliver instead of letting it render at full size before the crop. */
  product-info.product-info--anais-hobo-bag .product__media-item.is-active .product-media-container.constrain-height {
    height: auto;
    max-height: none;
  }

  product-info.product-info--anais-hobo-bag .product__media-item.is-active .product-media-container.constrain-height .product__modal-opener {
    height: auto;
  }

  product-info.product-info--anais-hobo-bag .product__media-item.is-active .product-media-container.constrain-height .media {
    height: auto;
    padding-top: 150%;
  }

  product-info.product-info--anais-hobo-bag .product__media-item.is-active .product-media-container.constrain-height .media img {
    object-fit: cover;
    object-position: center;
    transform: none;
  }
}

product-info .swatch-input__input + .swatch-input__label,
product-info .swatch-input__input + .swatch-input__label.swatch-input__label--square {
  padding: 0 !important;
  margin: 2.0rem 2.2rem 0.2rem 0 !important;
}