/** Shopify CDN: Minification failed

Line 1197:0 Unexpected "}"

**/
/* ==========================================================================
   IVERACO home page, newsletter, trust strip and footer.
   Mayave's layout (mayave.com home, measured at 1440/834/390), Iveraco's
   content and palette. Section order on the home template:
     hero video > statement > media band > shop by category > find your
     story > promise (image with text) > two image cards > newsletter >
     trust strip > footer
   Loaded after iveraco.css from layout/theme.liquid.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared display type. Mayave sets section headlines in a condensed
   uppercase display face; Iveraco keeps its serif but takes the case, size
   and spacing so the rhythm matches.
   -------------------------------------------------------------------------- */
.iv-display,
.iv-statement .m-richtext__title,
.iv-promise .m-richtext__title,
.iv-cards .m-icon-box__heading,
.iv-newsletter .m-newsletter-section__heading {
  font-family: var(--font-stack-header, Georgia, serif);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.08;
}

/* Small uppercase label used under tiles and on the trust strip */
.iv-label {
  font-family: var(--font-stack-body, 'Jost', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Outlined button, the only button style Mayave uses on the home page */
.iv-outline.m-button,
.iv-promise .m-richtext__button .m-button,
.iv-cards .m-icon-box .m-button,
.iv-newsletter .m-newsletter-section__form button,
.iv-newsletter .m-newsletter-section__form .m-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 26px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-stack-body, 'Jost', sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease;
}

.iv-promise .m-richtext__button .m-button:hover,
.iv-cards .m-icon-box .m-button:hover {
  background: var(--iv-ink, #2c241f);
  color: #fff;
}

.iv-newsletter .m-newsletter-section__form button:hover {
  background: #fff;
  color: var(--iv-ink, #2c241f);
}

/* --------------------------------------------------------------------------
   1. HERO VIDEO. Full viewport, headline bottom-left (Mayave: 110px inset,
   headline ~72px, one line of copy, outlined EXPLORE button).
   -------------------------------------------------------------------------- */


/* Mobile has no horizontal room for a side scrim, so the copy sits on a
   stronger bottom-up wash instead. */


/* Keep the headline readable regardless of the frame behind it */


/* --------------------------------------------------------------------------
   2. STATEMENT. Mayave: centred headline 56px, two-line paragraph, 120px of
   air above and below.
   -------------------------------------------------------------------------- */
.iv-statement .m-richtext {
  max-width: 820px;
  margin-inline: auto;
}

.iv-statement .m-richtext__title {
  font-size: clamp(32px, 3.9vw, 56px);
  margin-bottom: 26px;
}

.iv-statement .m-richtext__description {
  max-width: 560px;
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.7;
  color: #5d534c;
}

/* --------------------------------------------------------------------------
   3. MEDIA BAND. Full-bleed video with one caption over it. Mayave's is a
   dark macro of a stone with "CONSCIOUS BRILLIANCE"; ours is the ring
   turntable on white, so the caption is ink.
   -------------------------------------------------------------------------- */
.iv-band .m-hero {
  max-height: 820px;
}

.iv-band .m-hero__bg::after {
  display: none;
}

.iv-band .m-hero__inner {
  align-items: center !important;
  justify-content: center !important;
}

.iv-band .m-hero__title {
  font-family: var(--font-stack-header, Georgia, serif);
  font-size: clamp(34px, 4.6vw, 66px);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--iv-ink, #2c241f);
  text-align: center;
}

.iv-band .m-hero__subtitle {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--iv-ink, #2c241f);
}

/* --------------------------------------------------------------------------
   4. SHOP BY CATEGORY. Mayave: spaced uppercase heading, tall 3:4 tiles in a
   slider with round arrows on the edges, uppercase underlined label under
   each tile.
   -------------------------------------------------------------------------- */
.iv-categories .m-section__heading {
  font-family: var(--font-stack-body, 'Jost', sans-serif);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--iv-ink, #2c241f);
}


.iv-categories .m-section__header {
  justify-content: center !important;
  margin-bottom: 40px;
}

.iv-categories .m-collection-card__image {
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--iv-hairline, #e8e0da);
}

.iv-categories .m-collection-card__image .m-image,
.iv-categories .m-collection-card__image img {
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* The category photos are square; `contain` shows the whole piece in the 3:4 tile instead of cropping its sides
   (the white-background preview in iveraco.css makes the space around it blend in). */
.iv-categories .m-collection-card__image img {
  object-fit: contain;
}

.iv-categories .m-collection-card__info {
  padding-top: 18px;
  text-align: center;
}

.iv-categories .m-collection-card__title {
  margin: 0;
}

.iv-categories .m-collection-card__link {
  display: inline-block !important;
  font-family: var(--font-stack-body, 'Jost', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--iv-ink, #2c241f);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.iv-categories .m-collection-card__product-count,
.iv-categories .m-collection-card sup {
  display: none !important;
}

/* Arrows sit on the tile edges, vertically centred on the images.
   The theme renders the controls inside .m-section__header (a sibling of
   the tile row), so the positioning context is the section itself and the
   offset is measured from the section top: header block + heading + gap. */
.iv-categories {
  position: relative;
}

/* The theme sets .m-section__header to position:relative, which would trap
   the absolutely positioned controls in the heading row. */
.m-section.iv-categories .m-section__header,
.iv-categories .m-collection-list__header-container .m-section__header {
  position: static !important;
  justify-content: center !important;
  margin-bottom: 40px;
}

.m-section.iv-categories .m-collection-list__controls--header,
.iv-categories .m-section__header .m-collection-list__controls--header {
  position: absolute !important;
  left: 12px;
  right: 12px;
  /* % of the section height tracks the tile row at any width */
  top: 49%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
  z-index: 4;
  pointer-events: none;
}

.iv-categories .m-slider-controls,
.iv-categories .m-slider-controls__wrapper {
  display: flex !important;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0;
}

/* the wrapper is the only flex child of the control row, so it must stretch */
.iv-categories .m-collection-list__controls--header > * {
  flex: 1 1 auto;
}

.iv-categories .m-slider-controls__button {
  pointer-events: auto;
  position: static !important;
  margin: 0 !important;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 2px 14px rgba(44, 36, 31, .16);
  color: var(--iv-ink, #2c241f);
  opacity: 1;
  transition: background-color .2s ease, color .2s ease;
}

.iv-categories .m-slider-controls__button:hover {
  background: var(--iv-ink, #2c241f);
  color: #fff;
}

.iv-categories .m-slider-controls__button svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 767px) {
  .m-section.iv-categories .m-collection-list__controls--header,
  .iv-categories .m-section__header .m-collection-list__controls--header {
    left: 4px;
    right: 4px;
    top: 13%;
  }

  .iv-categories .m-slider-controls__button {
    width: 38px;
    height: 38px;
  }
}

/* --------------------------------------------------------------------------
   5. FIND YOUR STORY. Three tall editorial tiles, the middle one raised and
   a touch larger, the name under each in display type.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   6. PROMISE. Text left, image right (Mayave "Boundless gifts": headline
   56px, paragraph 16px, outlined button; image 670px wide, 600px tall).
   -------------------------------------------------------------------------- */
.iv-promise .m-image-with-text__inner {
  align-items: center;
}

.iv-promise .m-richtext__subtitle {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--iv-deep, #75606e);
  margin-bottom: 16px;
}

.iv-promise .m-richtext__title {
  font-size: clamp(32px, 3.9vw, 56px);
  margin-bottom: 22px;
}

.iv-promise .m-richtext__description {
  max-width: 500px;
  font-size: 16px;
  line-height: 1.7;
  color: #5d534c;
  margin-bottom: 28px;
}

.iv-promise .m-image-with-text__image img {
  aspect-ratio: 670 / 600;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   7. TWO IMAGE CARDS (icon-box section used as image cards). Image, then
   headline, line and outlined button, all left aligned. Mayave: 660x630
   images, 56px headline.
   -------------------------------------------------------------------------- */
.iv-cards .m-icon-box {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: left;
}

.iv-cards .m-icon-box__inner {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.iv-cards .m-icon-box__icon {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 28px !important;
}

.iv-cards .m-icon-box__icon img,
.iv-cards .m-icon-box__icon .m-image {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 660 / 630;
  object-fit: cover;
}

.iv-cards .m-icon-box__content {
  align-items: flex-start;
  text-align: left;
}

.iv-cards .m-icon-box__heading {
  font-size: clamp(30px, 3.6vw, 52px);
  margin: 0 0 12px;
}

.iv-cards .m-icon-box__description {
  max-width: 480px;
  font-size: 16px;
  line-height: 1.7;
  color: #5d534c;
  margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
   8. NEWSLETTER BAND.

   Was: `form_layout: horizontal` put the heading and the form in two 50%
   columns, then a `display:block` override here collapsed the row.  The
   result, measured at 1440: a 660px band whose right half was empty and
   whose form sat 100px to the right of the heading it belonged to.

   Now: one centred column.  The section is set to `text_alignment: center`
   and `form_layout: vertical` in the theme settings, so the merchant can
   still change the heading, body, placeholder and button label in the
   editor; this file only handles the look.
   -------------------------------------------------------------------------- */
.iv-newsletter {
  background: var(--iv-deep, #75606e) !important;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* a single hairline rule top and bottom keeps the band from floating */
.iv-newsletter::before,
.iv-newsletter::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .16);
}
.iv-newsletter::before { top: 0; }
.iv-newsletter::after  { bottom: 0; }

.iv-newsletter .m-newsletter-section__image {
  display: none !important;
}

.iv-newsletter .m-newsletter-section__wrapper,
.iv-newsletter .m-newsletter-section__inner {
  background: transparent !important;
}

.iv-newsletter .m-newsletter-section__inner {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 60px);
}

/* the whole composition is one centred column.  `justify-content` is forced
   back to flex-start: the theme's `justify-between` was pushing the field
   ~120px away from the copy it belongs to and leaving slack at the bottom. */
.iv-newsletter .m-newsletter-section__content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start !important;
  text-align: center;
  max-width: none;
  margin: 0 auto;
  gap: 0;
}

.iv-newsletter .m-newsletter-section__header {
  max-width: 640px;
  margin: 0 auto !important;
}

.iv-newsletter .m-newsletter-section__form {
  width: 100% !important;
  max-width: 420px;
  margin: 0 auto !important;
  float: none !important;
}

/* The eyebrow is the section's own `subheading` setting, not CSS content, so
   the merchant can change or clear it in the theme editor. */
.iv-newsletter .m-newsletter-section__subheading {
  display: block;
  width: auto;
  margin: 0 0 18px !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

/* The eyebrow used to be injected here with `content: "Newsletter"`, from a
   time when the section carried no subheading. The section now sets
   `subheading: "Newsletter"` in footer-group.json, so both printed and the
   band read NEWSLETTER twice. The merchant-editable field wins; hardcoding
   copy in CSS is what caused the duplicate. */

.iv-newsletter .m-newsletter-section__heading {
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.1;
  color: #fff;
  margin: 0 auto 16px;
  max-width: 18ch;
}

/* The description is a wrapper div containing a <p>.  Giving both a 34px
   bottom margin stacked them, which is where the dead gap above the field
   came from.  The space belongs to the wrapper only. */
/* The theme's `newsletter.css` sets `opacity: .4` on this element.  At 40%
   on the mauve band the supporting line was barely legible, which is what
   the client saw as the line "not visible".  Contrast is set through the
   colour instead, so the text is dimmer than the headline but readable. */
.iv-newsletter .m-newsletter-section__description {
  opacity: 1 !important;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.75;
  max-width: 44ch;
  margin: 0 auto 30px;
}

.iv-newsletter .m-newsletter-section__description p {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0 !important;
}

/* the header is a flex-wrap row in the theme; as a centred column it should
   be exactly as tall as its content */
.iv-newsletter .m-newsletter-section__header {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Minimog's inline-button form absolutely positions the button over the
   input.  One hairline carries the field and the action together. */
.iv-newsletter .m-newsletter-form,
.iv-newsletter .contact-form {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
}

.iv-newsletter .m-newsletter-form__wrapper {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0 0 8px;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .45) !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: border-color .3s var(--iv-ease, ease);
}

.iv-newsletter .m-newsletter-form__wrapper:focus-within {
  border-bottom-color: #fff !important;
}

.iv-newsletter .m-newsletter-form__input-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.iv-newsletter .m-newsletter-section__form input[type="email"] {
  width: 100%;
  height: 44px;
  padding: 0 0 0 2px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff;
  font-size: 15px;
  text-align: left;
}

.iv-newsletter .m-newsletter-section__form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, .55);
  text-transform: none;
  letter-spacing: .01em;
  font-size: 14px;
}

/* the action is a word on the field's baseline, not a slab on colour */
.iv-newsletter .m-newsletter-form__button,
.iv-newsletter .m-newsletter-section__form button {
  position: static !important;
  flex: 0 0 auto;
  width: auto !important;
  height: 44px;
  inset: auto !important;
  transform: none !important;
  display: inline-flex;
  align-items: center;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  padding: 0 2px 0 16px !important;
  min-height: 0 !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .92;
  box-shadow: none !important;
  transition: opacity .25s var(--iv-ease, ease);
}

.iv-newsletter .m-newsletter-form__button:hover,
.iv-newsletter .m-newsletter-section__form button:hover {
  opacity: 1;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Reassurance under the field: answers "will you spam me" at the moment of
   decision, which is where the objection actually fires.  Driven by the
   section's `reassurance` setting so it is editable, not baked into CSS. */
.iv-newsletter .m-newsletter-section__reassurance {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

/* --------------------------------------------------------------------------
   9. THE FIVE PROMISES.

   Was a thin strip: icon plus a 12px uppercase label, second line hidden.
   Five bare labels in a row carry no weight, and the line that actually
   answers the buyer's question ("IGI graded, every stone") was the one being
   thrown away.

   Now each promise is a small stacked unit: icon, claim, and the proof line
   under it.  Vertical hairlines separate them the way a jeweller's guarantee
   panel would.  Content stays editable per block in the theme editor.
   -------------------------------------------------------------------------- */
.iv-trust {
  border-top: 1px solid var(--iv-hairline, #e8e0da);
  border-bottom: 1px solid var(--iv-hairline, #e8e0da);
  background: var(--iv-ivory, #fefcfa);
}

.iv-trust .m-section__header {
  display: none !important;
}

.iv-trust .m-mixed-layout__inner {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 !important;
  align-items: stretch;
}

/* The grid children are the theme's `.m:column` wrappers, not `.m-icon-box`
   itself (measured: column 273px, icon-box 249px inside it).  The dividing
   rules therefore belong on the column, or they never paint.  Note the `m:`
   prefix needs the colon escaped in CSS. */
.iv-trust .m-mixed-layout__inner > .m\:column {
  padding: 0 !important;
  border-left: 1px solid var(--iv-hairline, #e8e0da);
  display: flex;
}

.iv-trust .m-mixed-layout__inner > .m\:column:first-child {
  border-left: 0;
}

.iv-trust .m-icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  width: 100%;
  padding: 6px clamp(14px, 1.8vw, 28px) !important;
  border: 0 !important;
  background: transparent !important;
}

.iv-trust .m-icon-box__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  width: 100%;
}

.iv-trust .m-icon-box__icon {
  width: 26px !important;
  max-width: 26px !important;
  margin: 0 0 12px !important;
  flex: 0 0 auto;
  opacity: .85;
}

.iv-trust .m-icon-box__icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.iv-trust .m-icon-box__heading {
  margin: 0 0 5px;
  font-family: var(--font-stack-body, 'Jost', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--iv-ink, #2c241f);
  line-height: 1.3;
}

/* the proof line: this is the half that answers the buyer */
.iv-trust .m-icon-box__description,
.iv-trust .m-icon-box__description p {
  display: block !important;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: .01em;
  text-transform: none;
  color: #6b615a;
}

.iv-trust .m-icon-box__subheading,
.iv-trust .m-icon-box .m-button {
  display: none !important;
}

/* Tablet: 5 across gets cramped, so wrap to a 3 + 2 grid and drop the
   vertical rules for horizontal ones. */
/* Tablet: five across gets cramped, so wrap to 3 + 2 and add horizontal
   rules where the rows now meet. */
@media (max-width: 1023px) {
  .iv-trust .m-mixed-layout__inner {
    grid-template-columns: repeat(3, 1fr);
  }
  .iv-trust .m-mixed-layout__inner > .m\:column {
    border-top: 1px solid var(--iv-hairline, #e8e0da);
  }
  .iv-trust .m-mixed-layout__inner > .m\:column:nth-child(-n+3) { border-top: 0; }
  .iv-trust .m-mixed-layout__inner > .m\:column:nth-child(3n+1) { border-left: 0; }
  .iv-trust .m-icon-box { padding-block: 22px !important; }
}

@media (max-width: 639px) {
  .iv-trust .m-mixed-layout__inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .iv-trust .m-mixed-layout__inner > .m\:column {
    border-left: 1px solid var(--iv-hairline, #e8e0da);
    border-top: 1px solid var(--iv-hairline, #e8e0da);
  }
  .iv-trust .m-mixed-layout__inner > .m\:column:nth-child(-n+2) { border-top: 0; }
  .iv-trust .m-mixed-layout__inner > .m\:column:nth-child(3n+1) { border-left: 1px solid var(--iv-hairline, #e8e0da); }
  .iv-trust .m-mixed-layout__inner > .m\:column:nth-child(odd)  { border-left: 0; }
  /* the fifth promise sits alone on the last row: let it span both columns */
  .iv-trust .m-mixed-layout__inner > .m\:column:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-left: 0;
  }
  .iv-trust .m-icon-box__heading { font-size: 11px; letter-spacing: .1em; }
  .iv-trust .m-icon-box__description,
  .iv-trust .m-icon-box__description p { font-size: 12px; }
}

/* Section 10 (footer) moved to assets/iveraco-footer.css, 15 Sep 2026. */

/* --------------------------------------------------------------------------
   11. MOBILE (390). Mayave stacks everything, tiles go one per view with
   arrows, newsletter and cards are centred.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  

  

  

  .iv-band .m-hero {
    min-height: 60vw;
  }

  

  .iv-cards .m-icon-box,
.iv-cards .m-icon-box__content,
.iv-newsletter .m-newsletter-section__content {
    text-align: center;
    align-items: center;
  }

  .iv-cards .m-icon-box__description,
  .iv-promise .m-richtext__description {
    margin-inline: auto;
  }

  .iv-promise .m-richtext {
    text-align: center;
  }

  .iv-newsletter .m-newsletter-section__form form {
    flex-direction: column;
    align-items: center;
  }

  .iv-newsletter .m-newsletter-section__form input[type="email"] {
    width: 100%;
  }

  /* The five promises are a grid now (section 9 handles every breakpoint).
     The old `flex-direction: column` here stacked them into one tall list
     and fought that grid, so it is gone. */

  .m-footer .m-footer--block-custom_text {
    padding-bottom: 12px;
  }
}

/* --------------------------------------------------------------------------
   12. FIXES FROM THE CLIENT REVIEW (measured, 2026-09-14)
   -------------------------------------------------------------------------- */

/* Header: left links centred at y=66 but the right icons at y=73. Give every
   column the same height and centre them on one axis. */
.m-header .m-header__top .m-header__inner {
  align-items: center;
}

.m-header .m-header__left,
.m-header .m-header__center,
.m-header .m-header__right {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.m-header .m-header__right {
  justify-content: flex-end;
  gap: 22px;
}

.m-header .m-header__left {
  gap: 26px;
}

.m-header .m-header__right > *,
.m-header .m-header__left > * {
  display: flex;
  align-items: center;
  line-height: 1;
}

/* The logo column sets the row height; keep it optically centred */
.m-header .m-logo,
.m-header .m-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Story tiles: video fills the tile exactly like the still it replaces */
.m-collection-card__video {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}


/* Two image cards were requesting a 360px file for a 660px slot (blurry).
   image_by_url renders a plain img; make it render sharp and cover the box. */
.iv-cards .m-icon-box__external-image {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 660 / 630;
  object-fit: cover;
  display: block;
  image-rendering: auto;
}

/* --------------------------------------------------------------------------
   13. MOBILE ALIGNMENT
   Measured at 390px: the story grid kept three 257px columns (last card at
   x=562, far off screen). Mayave stacks these tiles one per row on mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* The theme's grid utility (md:m:grid-3-cols) also lands on this node, so
     the override needs matching specificity, not just !important. */
  

  

  

  /* the category row stays a slider, but tiles should show ~1.3 per view
     so the next one is visibly cut off (Mayave's mobile carousel) */
  .iv-categories .m-mixed-layout__inner {
    gap: 12px !important;
  }

  /* nothing in these sections may push past the viewport */
  .iv-categories,
.iv-cards,
.iv-promise {
    overflow-x: clip;
  }
}

/* --------------------------------------------------------------------------
   14. STICKY HEADER + MOTION
   The header is set to "always" so it stays with the customer down the page.
   On the index it starts transparent over the hero and turns solid once it
   sticks, rather than hiding on scroll-down.
   -------------------------------------------------------------------------- */
.m-header.stuck .m-header__wrapper {
  background: rgba(254, 252, 250, .94);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 1px 0 rgba(44, 36, 31, .08);
}

/* it must never slide out of view, even while scrolling down */
.m-header.scroll-down.stuck .m-header__wrapper,
body.header-scroll-down .m-header.stuck .m-header__wrapper {
  transform: none !important;
}

.m-header .m-header__wrapper {
  transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* --------------------------------------------------------------------------
   15. CONSISTENT MOTION
   Everything that appears should ease in rather than snap. One duration and
   one curve across the site so it reads as a single piece of design.
   -------------------------------------------------------------------------- */
:root {
  --iv-ease: cubic-bezier(.22, .61, .36, 1);
  --iv-dur: .45s;
}

.m-scroll-trigger.animate--fade-in-up,
.m-scroll-trigger.animate--fade-in,
.m-scroll-trigger.animate--fade-in-left,
.m-scroll-trigger.animate--fade-in-right {
  transition: opacity var(--iv-dur) var(--iv-ease), transform var(--iv-dur) var(--iv-ease) !important;
}

/* images fade up as they decode instead of popping in */
.m-image img,
.m-collection-card__image img,
.m-product-card__media img {
  transition: opacity .5s var(--iv-ease), transform .6s var(--iv-ease);
}

/* every interactive element shares one hover curve */
a,
button,
.m-button,
.m-product-card,
.m-collection-card {
  transition: color .25s var(--iv-ease), background-color .25s var(--iv-ease),
              border-color .25s var(--iv-ease), transform .35s var(--iv-ease),
              box-shadow .35s var(--iv-ease), opacity .25s var(--iv-ease);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Section 16 (footer type) moved to assets/iveraco-footer.css, 15 Sep 2026. */

/* --------------------------------------------------------------------------
   17. NEWSLETTER
   Previously a second, conflicting set of newsletter rules lived here and
   fought section 8 for the same properties.  Everything is now in section 8.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   18. TWO IMAGE CARDS: let the image carry the section
   -------------------------------------------------------------------------- */
.iv-cards .m-icon-box__icon {
  overflow: hidden;
}

.iv-cards .m-icon-box__external-image {
  transition: transform .8s var(--iv-ease, ease);
}

.iv-cards .m-icon-box:hover .m-icon-box__external-image {
  transform: scale(1.035);
}

.iv-cards .m-icon-box__heading {
  font-size: clamp(26px, 2.9vw, 40px);
  margin-bottom: 10px;
}

.iv-cards .m-icon-box__description {
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.7;
}

/* The index header starts transparent over the hero, then becomes a solid
   sticky bar. `sticky_header: always` adds .header-sticky-always (never
   .stuck), which is what releases the transparent rule above. */
body.template-index .m-header.header-sticky-always .m-header__wrapper {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: rgba(254, 252, 250, .94) !important;
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 1px 0 rgba(44, 36, 31, .08);
  transform: none !important;
}

/* once solid, the type and logo return to ink */
body.template-index .m-header.header-sticky-always .m-menu > .m-menu__item > a.m-menu__link--main,
body.template-index .m-header.header-sticky-always .iv-header__link,
body.template-index .m-header.header-sticky-always .m-header__right a,
body.template-index .m-header.header-sticky-always .m-header__left a {
  color: var(--iv-ink, #2c241f) !important;
}

body.template-index .m-header.header-sticky-always .m-logo img {
  filter: none !important;
}

/* --------------------------------------------------------------------------
   19. MADE FOR YOU (replaces the two image cards, 15 Sep 2026)
   Image-with-text, custom class iv-made. Image left at the asset's own crop
   (837x655, 1.28:1), copy right on the page ground: one 440px block with
   eyebrow, heading, body and button on a single left edge 96px in from the
   image, vertically centred (Cullen split band). The eyebrow is the
   section's sub_title, which the theme renders inside the content box; the
   section-level subheading (rendered outside the columns) is blank in
   templates/index.json. The round-1 grid / display:contents workaround is
   gone.
   -------------------------------------------------------------------------- */
.iv-made .container-full { padding: 0; margin: 0; }

.iv-made .m-image-with-text__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0; /* .m:flex pulls the row out by half the column gap */
}

.iv-made .m-image-with-text__image,
.iv-made .m-image-with-text__content { padding: 0; margin: 0; }

.iv-made .m-image-with-text__image { width: 58.3333%; flex: 0 0 58.3333%; }
.iv-made .m-image-with-text__image-wrapper,
.iv-made .m-image-with-text__image-first,
.iv-made .m-image-with-text__image responsive-image { display: block; height: 100%; }
.iv-made .m-image-with-text__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.iv-made .m-image-with-text__content {
  width: 41.6667%;
  flex: 0 0 41.6667%;
  display: flex;
  align-items: center;
  padding: 64px 32px 64px 96px;
  background: transparent;
}
.iv-made .m-content-box { width: 100%; max-width: 440px; text-align: left; }

.iv-made .m-richtext__subtitle {
  margin: 0 0 14px;
  font-family: var(--font-stack-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--iv-mauve, #6b4a5e);
}
.iv-made .m-richtext__title {
  margin: 0 0 18px;
  font-family: var(--font-stack-header);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}
.iv-made .m-richtext__description p { font-size: 15.5px; line-height: 1.8; color: #4A423D; }
.iv-made .m-richtext__button { margin-top: 26px; }

@media (max-width: 1023px) {
  .iv-made .m-image-with-text__image,
  .iv-made .m-image-with-text__content { width: 50%; flex-basis: 50%; }
  .iv-made .m-image-with-text__content { padding: 48px 24px 48px 48px; }
}
@media (max-width: 767px) {
  .iv-made .m-image-with-text__image,
  .iv-made .m-image-with-text__content { width: 100%; flex-basis: 100%; }
  .iv-made .m-image-with-text__image img { height: auto; }
  .iv-made .m-image-with-text__content { padding: 40px 15px 48px; }
  .iv-made .m-content-box { max-width: none; }
}
@media (max-width: 767px) { .iv-made .m-image-with-text__image img { min-height: 60vw; } .iv-made .m-image-with-text__content { padding: 40px 20px !important; } }


/* ==========================================================================
   NEWSLETTER: NEVER DEPEND ON THE REVEAL ANIMATION COMPLETING

   Measured on / at 1440x900 after a full scroll pass:
     .m-newsletter-section__wrapper  opacity 0.01,
                                     class m-scroll-trigger--offscreen,
                                     transform matrix(1,0,0,1,0,20)
   while the h2 inside it computed color rgb(255,255,255) opacity 1. So the
   heading colour was always correct; the whole band was being held at 1% by
   the theme's IntersectionObserver reveal, which never completed for this
   section. That is the same failure already fixed on the contact page.

   The newsletter band is the last section before the footer and is taller
   than the observer's trigger margin at 390 width, so it is exactly the case
   the observer misses. Content here is always painted; the animation stays as
   an enhancement for the transform only.
   ========================================================================== */
.iv-newsletter .m-newsletter-section__wrapper.m-scroll-trigger,
.iv-newsletter .m-newsletter-section__wrapper.m-scroll-trigger--offscreen,
.iv-newsletter .m-newsletter-section__inner.m-scroll-trigger,
.iv-newsletter .m-newsletter-section__inner.m-scroll-trigger--offscreen,
.iv-newsletter .m-scroll-trigger--offscreen {
  opacity: 1 !important; /* main.css holds .animate--fade-in-up at opacity .01 */
  transform: none !important;
  visibility: visible !important;
}

/* The headline and its supporting line are legible white on the mauve ground
   regardless of any animation state or inherited opacity. */
.iv-newsletter .m-newsletter-section__heading,
.iv-newsletter .m-newsletter-section__heading * {
  color: #fff !important; /* theme colour schemes repaint headings per section */
  opacity: 1 !important;
}

.iv-newsletter .m-newsletter-section__subheading {
  opacity: 1 !important; /* newsletter.css dims the eyebrow */
}

/* --------------------------------------------------------------------------
   20. MADE FOR YOU, SMALLER AND UNCROPPED  (Jash, 29 Sep 2026)

   The frame took the shape of whatever was uploaded (section 19 was drawn
   for an 837x655 landscape), so the portrait photograph now in it rendered
   1120x1440 at 1920, a third taller than the screen. A first pass cropped it
   to a 4:3 frame; Rutvik wants the whole photograph kept. So the image keeps
   its own shape (object-fit: contain) and only its height is capped, so it
   is smaller and never cut. Nothing else on the home page is resized here.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* The column stays half the row; the whole photograph is fitted inside it
     at a capped height. Sizing the column from the image instead (width:
     auto) collapsed it to 0px, because the image loads lazily and a
     zero-width column never scrolls into view to trigger the load. */
  .iv-made .m-image-with-text__image,
  .iv-made .m-image-with-text__content { width: 50%; flex: 0 0 50%; }
  .iv-made .m-image-with-text__image {
    height: min(82vh, 760px);
  }
  .iv-made .m-image-with-text__image-wrapper,
  .iv-made .m-image-with-text__image-first,
  .iv-made .m-image-with-text__image responsive-image { height: 100%; }
  .iv-made .m-image-with-text__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* against the copy, so the photograph and its text read as one pair
       rather than the photograph floating mid-column */
    object-position: right center;
  }
}
}