/** Shopify CDN: Minification failed

Line 310:0 Unexpected "<"
Line 310:70 Unterminated string token
Line 311:75 Unterminated string token
Line 336:0 Unexpected bad string token
Line 336:2 Unterminated string token

**/
/* Brand accent, available to every NV section. */
:root {
  --nv-gutter: 1.5rem;
  --nv-gold: #C8A45D;
  --nv-gold-dk: #846C3D;
}


/*
 * Corner radius for custom NV sections.
 * Dawn's global radius settings cover its own components; these mirror the
 * same 5px on the imagery and controls this theme adds.
 */
:root {
  --nv-radius: 5px;
}

.nv-catgrid__media,
.nv-buyback__media img,
.nv-buyback__placeholder,
.nv-hero__placeholder-svg,
.pdp__main,
.nv-catgrid__img {
  border-radius: var(--nv-radius);
}

.nv-buyback__media img,
.nv-buyback__placeholder {
  overflow: hidden;
}

.nv-wa-enquire,
.nv-bb-badge,
.nv-buyback__cta {
  border-radius: var(--nv-radius);
}

/* The hero is a full-bleed band; rounding its corners would leave slivers
   of page background at the edges, so it stays square. */
.nv-hero,
.nv-hero__asset {
  border-radius: 0;
}

/*
 * Heading sizes.
 * Dawn's heading_scale setting cannot go below 100%, and Tenor Sans is a wide
 * face — 40px headings read considerably larger than the same size in a
 * narrower one. These bring the scale down to suit the typeface.
 */
h1, .h1 { font-size: 2.7rem; }
h2, .h2 { font-size: 2.1rem; }
h3, .h3 { font-size: 1.8rem; }

@media only screen and (min-width: 750px) {
  h1, .h1 { font-size: 3.6rem; }
  h2, .h2 { font-size: 2.4rem; }
  h3, .h3 { font-size: 1.9rem; }
}

.h0 { font-size: 3.2rem; }

@media only screen and (min-width: 750px) {
  .h0 { font-size: 4.2rem; }
}


/*
 * Header: logo left, navigation beside it, icons right.
 * Dawn's middle-left grid already does the layout; these only stop the menu
 * from wrapping to a second line when the item count grows.
 */
@media screen and (min-width: 990px) {
  .header--middle-left {
    column-gap: 3.5rem;
  }

  .header__inline-menu > .list-menu--inline {
    flex-wrap: nowrap;
    column-gap: 2.4rem;
  }

  .header__menu-item {
    white-space: nowrap;
    padding-left: 0;
    padding-right: 0;
  }

  /* Caret needs its own room once the item padding is removed. */
  summary.header__menu-item {
    padding-right: 1.5rem;
  }

  .header__menu-item .icon-caret {
    right: 0;
  }
}

@media screen and (min-width: 990px) and (max-width: 1199px) {
  .header--middle-left {
    column-gap: 2.2rem;
  }

  .header__inline-menu > .list-menu--inline {
    column-gap: 1.7rem;
  }

  .header__menu-item {
    font-size: 1.15rem;
    letter-spacing: 0.09em;
  }
}

/*
 * Wordmark.
 * Name on top, the trade word set small between two rules beneath it, and the
 * founding year under that — the arrangement an engraved jeweller's mark uses.
 * Replaced automatically as soon as a logo image is uploaded.
 */
.nv-wm {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  line-height: 1;
  text-transform: uppercase;
}

.nv-wm__name {
  font-family: var(--font-heading-family);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  /* Uppercase tracking adds a trailing gap; pull it back so the mark centres. */
  text-indent: 0.16em;
}

.nv-wm__sub {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}

.nv-wm__rule {
  flex: 1;
  height: 0.1rem;
  background: currentColor;
  opacity: 0.32;
}

.nv-wm__word {
  font-size: 0.85rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  opacity: 0.9;
  white-space: nowrap;
}

.nv-wm__est {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  opacity: 0.6;
  white-space: nowrap;
}

@media screen and (max-width: 989px) {
  .nv-wm__name {
    font-size: 1.7rem;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }

  .nv-wm__word {
    font-size: 0.75rem;
    letter-spacing: 0.26em;
    text-indent: 0.26em;
  }

  /* The year is the first thing to drop when space is tight. */
  .nv-wm__est {
    display: none;
  }
}

/* Footer uses the same mark, left-aligned and in the footer's colour. */
.footer .nv-wm {
  align-items: flex-start;
}

/*
 * Centre the navigation while the logo stays left.
 * Dawn's middle-left grid is `auto auto 1fr`, which parks the menu right
 * beside the wordmark. Giving the nav column the free space and centring
 * its contents balances the row without moving the logo.
 */
@media screen and (min-width: 990px) {
  .header--middle-left {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .header--middle-left .header__inline-menu {
    display: flex;
    justify-content: center;
  }
}

/*
 * No underline on hover, anywhere.
 * Dawn underlines links, menu items and share buttons on hover. Colour and
 * opacity carry the hover state instead, which suits the editorial look.
 * Keyboard focus keeps a visible ring, so this costs nothing in accessibility.
 */
a:hover,
a:focus,
.link:hover,
.link:focus,
.customer a:hover,
.inline-richtext a:hover,
.header__menu-item:hover,
.header__menu-item:hover span,
.header__active-menu-item,
.header__menu-item:focus span,
.mega-menu__link:hover,
.mega-menu__link:focus,
.list-menu__item:hover,
.list-menu__item:focus,
.share-button__button:hover,
.announcement-bar__link:hover,
.footer-block__details-content a:hover,
.footer__copyright a:hover,
.copyright__content a:hover,
details[open] > .header__menu-item,
.nv-ticker__link:hover,
.nv-fabout__line a:hover,
.nv-fstore__link:hover,
.nv-fstore__link--plain:hover,
.nv-bb-badge__link:hover,
.nv-tm__card a:hover,
.nv-occ__card:hover {
  text-decoration: none;
}

/* Underlined-by-default links lose the rule entirely, not just on hover. */
.nv-fabout__line a,
.nv-fstore__link,
.nv-bb-badge__link,
.footer__copyright a,
.copyright__content a {
  text-decoration: none;
}

/* Footer links brighten on hover rather than fading out. */
.nv-fabout__line a:hover,
.nv-fstore__link:hover,
.nv-bb-badge__link:hover {
  opacity: 1;
  color: #FFFFFF;
}

/* Focus stays visible for keyboard users. */
a:focus-visible,
.link:focus-visible,
.header__menu-item:focus-visible {
  outline: 0.2rem solid rgb(var(--color-foreground));
  outline-offset: 0.3rem;
  text-decoration: none;
}

/*
 * Product cards: no underline on the title when the card is hovered.
 * Dawn applies this through `.underline-links-hover:hover a`, which a plain
 * `a:hover` rule never matches — the hover sits on the wrapper, not the link.
 */
.card-wrapper.underline-links-hover:hover a,
.card-wrapper.underline-links-hover:focus-within a,
.product-card-wrapper.underline-links-hover:hover a,
.complementary-products-contains-quick-add .card-wrapper.underline-links-hover:hover a,
.card__heading a:hover,
.card__heading a:focus,
.card-information a:hover,
.card__information a:hover,
.card__content a:hover,
.full-unstyled-link:hover,
.full-unstyled-link:focus {
  text-decoration: none;
}

/* The card lifts its title colour instead, so hover still reads. */
.card-wrapper.underline-links-hover:hover .card__heading a {
  opacity: 0.72;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .card-wrapper.underline-links-hover:hover .card__heading a {
    transition: none;
  }
}
<a href=" sets text-decoration: underline outright (base.css), and the
   footer's own reset is undone again on hover/focus. Cover every state. */
.footer .link,
.footer .link:hover,
.footer .link:focus,
.footer__list-social a,
.footer__list-social a:hover,
.list-menu__item--link,
.list-menu__item--link:hover,
.list-menu__item--link:focus,
.list-menu__item--active,
.footer-block__details-content a,
.footer-block__details-content a:hover,
.footer-block__details-content a:focus,
.nv-fsocial-row a,
.nv-fsocial-row a:hover {
  text-decoration: none;
}

/* Hover reads through a brighter text colour, not a fade. */
.list-menu__item--link:hover,
.footer .link:hover,
.footer-block__details-content a:hover {
  opacity: 1;
  color: #FFFFFF;
}
">
/* Footer + list menus: never underline, in any state. */
/* Dawn's </a>

/* Dawn ships the featured-collection title left-aligned with no setting to
   change it. Centre it so it matches every other section heading. */
.collection__title.title-wrapper {
  text-align: center;
}

.collection__title .title,
.collection__title .collection__description {
  margin-left: auto;
  margin-right: auto;
}

/* --- Order-proof overrides -------------------------------------------
   These duplicate rules above at higher specificity because nv-brand.css is
   loaded before component-list-menu.css and the section stylesheets. --- */

.footer .footer-block .list-menu__item--link,
.footer .footer-block .list-menu__item--link:hover,
.footer .footer-block .list-menu__item--link:focus,
.footer .footer-block__details-content a,
.footer .footer-block__details-content a:hover,
ul.list-menu .list-menu__item--link:hover,
a.link.list-menu__item--link:hover {
  text-decoration: none;
  text-decoration-line: none;
}

.footer .footer-block .list-menu__item--link:hover,
ul.list-menu .list-menu__item--link:hover,
a.link.list-menu__item--link:hover {
  color: #FFFFFF;
  opacity: 1;
}

.collection__title.title-wrapper.page-width,
.collection__title.title-wrapper.page-width .title,
section .collection__title h2 {
  text-align: center;
}

/* Section headings must not depend on a scroll observer to become visible.
   Dawn holds .scroll-trigger--offscreen at opacity 0.01; if the observer is
   slow, blocked, or the element is already in view on load, the heading simply
   never appears. Headings opt out — the cards below still animate. */
.collection__title .title.scroll-trigger--offscreen,
.title-wrapper .title.scroll-trigger--offscreen {
  opacity: 1 !important;
  transform: none !important;
}

/* White header: a hairline separates it from the page, which is also near
   white. Without this the header edge disappears entirely on scroll. */
.shopify-section-header,
.section-header {
  border-bottom: 0.1rem solid rgba(41, 39, 36, 0.1);
}

/* Nav and icons were styled for a dark ground. */
.header__menu-item,
.header__menu-item span,
.header__icon,
.header__icon--cart,
.header__heading-link {
  color: #292724;
}

.header__icon svg,
.header__icon .icon {
  color: #292724;
}

.header__menu-item:hover span {
  color: #062C24;
  text-decoration: none;
}

/* The cart count bubble needs to invert too. */
.cart-count-bubble {
  background: #292724;
  color: #FFFFFF;
}

/* ---- Nav typography ------------------------------------------------------
 * Nav: sentence case, larger and tighter than Dawn's default. Wide-tracked
 * uppercase at 12.5px reads as a label strip; this reads as navigation, which
 * is what the reference does.
 */
.header__menu-item,
.header__menu-item span {
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 400;
}

/* Dawn pads each item 27px to the right; even spacing looks deliberate. */
.header__inline-menu .list-menu--inline > li > .header__menu-item {
  padding-inline: 0 2rem;
}

.header__inline-menu .list-menu--inline > li:last-child > .header__menu-item {
  padding-inline-end: 0;
}

/* The first item is the one we want people to click. */
.header__inline-menu .list-menu--inline > li:first-child > .header__menu-item span {
  color: #9A5A2E;
}

.header__inline-menu .list-menu--inline > li:first-child > .header__menu-item:hover span {
  color: #7A4522;
}

/* Chevrons were sized for the smaller type. */
.header__menu-item .icon-caret {
  height: 0.5rem;
  margin-left: 0.5rem;
}

/* Submenu items inherit the same treatment. */
.header__submenu .header__menu-item {
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* ---- Dropdown panels ----------------------------------------------------
 * Dawn renders these as a full-width mega menu: a 1400px strip across the
 * whole viewport for eight short category names. Bring it back to a panel
 * that sits under its own nav item.
 */

/* The mega menu positions itself off the header; anchor it to the item. */
.header__inline-menu .list-menu--inline > li {
  position: relative;
}

.header__inline-menu .mega-menu__content,
.header__inline-menu .header__submenu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  right: auto;
  width: max-content;
  min-width: 20rem;
  max-width: 28rem;
  padding: 1rem 0;
  background: #FFFFFF;
  border: 0.1rem solid rgba(41, 39, 36, 0.1);
  border-radius: 5px;
  box-shadow: 0 1rem 3rem rgba(41, 39, 36, 0.13);
}

/* page-width forces the full viewport; neutralise it inside the panel. */
.header__inline-menu .mega-menu__list.page-width {
  max-width: none;
  width: auto;
  padding: 0;
  margin: 0;
}

.header__inline-menu .mega-menu__list {
  display: block;
  column-count: 1;
  gap: 0;
}

/* Items: sentence case to match the nav, and a real hit area. */
.header__inline-menu .mega-menu__list .mega-menu__link,
.header__inline-menu .header__submenu .header__menu-item {
  display: block;
  padding: 0.85rem 1.6rem;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #292724;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.header__inline-menu .mega-menu__list .mega-menu__link:hover,
.header__inline-menu .header__submenu .header__menu-item:hover {
  background: transparent;
  color: #062C24;
  text-decoration: none;
}

/* Dawn rules every row and spaces them 4px apart; on a compact panel that
   reads as a table. The panel edge is the only line needed. */
.header__inline-menu .mega-menu__list li {
  border: 0;
  list-style: none;
  margin: 0;
}

.header__inline-menu .mega-menu__list .mega-menu__link {
  border: 0;
  margin: 0;
}

/* Mobile drawer keeps Dawn's own full-width layout. */
@media screen and (max-width: 989px) {
  .header__inline-menu .mega-menu__content,
  .header__inline-menu .header__submenu {
    position: static;
    width: auto;
    max-width: none;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
}

/* Footer: Dawn renders scheme text at 75% alpha, which on a pure black ground
   leaves everything looking switched off. Body copy and links go to full
   strength; only the fine print stays quieter, on purpose. */
.footer,
.footer .nv-fabout__blurb,
.footer .nv-fabout__line,
.footer .nv-fabout__line a,
.footer .list-menu__item--link,
.footer .link,
.footer-block__details-content a,
.footer .nv-fstore__link {
  color: #FFFFFF;
}

/* Column headings match the body copy and the white logo. */
.footer .footer-block__heading,
.footer h2,
.footer h3 {
  color: #FFFFFF;
}

/* Address and hours sit back a step, but not to 75% of black. */
.footer .nv-fabout__hours,
.footer .nv-fstore__addr,
.footer .nv-fabout__label {
  color: rgba(255, 255, 255, 0.72);
}

/* Copyright line: the one place a quieter tone is right. */
.footer__content-bottom,
.footer__copyright,
.copyright__content,
.copyright__content a {
  color: rgba(255, 255, 255, 0.6);
}

/* Footer headings were technically passing contrast (10.8:1) but reading as
   faint: 11px gold at wide tracking has very little ink on the page. More
   size and weight, less tracking, and a brighter tone. */
.footer .footer-block__heading,
.footer h2,
.footer h3 {
  color: #FFFFFF;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  opacity: 1;
}

/* Link rows: a touch more size so the columns do not feel like fine print. */
.footer .list-menu__item--link,
.footer .link,
.footer-block__details-content a {
  font-size: 1.45rem;
  opacity: 1;
}

.footer .nv-fabout__blurb,
.footer .nv-fabout__line {
  font-size: 1.45rem;
  opacity: 1;
}

/* Glassy header on scroll.
   Dawn adds .scrolled-past-header to the section once the page moves. At the
   top the header stays solid white; past that it turns translucent and blurs
   what passes underneath, so the content reads through without the nav
   losing legibility. */
.section-header.scrolled-past-header .header-wrapper {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: rgba(41, 39, 36, 0.08);
  box-shadow: 0 0.2rem 1.6rem rgba(41, 39, 36, 0.07);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Where backdrop-filter is unsupported the header would go see-through with
   no blur, so fall back to a near-solid ground. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .section-header.scrolled-past-header .header-wrapper {
    background: rgba(255, 255, 255, 0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-header.scrolled-past-header .header-wrapper { transition: none; }
}

/* ---- Product card price row ---------------------------------------------
 * Struck original, then the price you pay in full weight, then the saving.
 * The three sit on one line so the discount reads as a single statement.
 */
.price--on-sale .price__sale {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Original: quieter, and struck through. */
.price--on-sale .price__sale s.price-item--regular {
  font-size: 1.35rem;
  color: rgba(var(--color-foreground), 0.5);
  text-decoration: line-through;
  font-weight: 400;
}

/* What they actually pay: the biggest thing in the row. */
.price--on-sale .price__sale .price-item--sale {
  font-size: 1.7rem;
  font-weight: 600;
  color: rgb(var(--color-foreground));
}

/* The saving, in the same red the reference uses for urgency. */
.price-item--discount {
  font-size: 1.3rem;
  font-weight: 600;
  color: #C0392B;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Cards centre their content; product pages align left. */
.product .price--on-sale .price__sale {
  justify-content: flex-start;
}

/* Sale badge: the percentage in the price row says the same thing, with a
   number. Two markers for one fact is noise. The badge renders as
   .card__badge > .badge, not .price__badge-sale. */
.card-wrapper .card__badge .badge,
.card__badge.bottom.left {
  display: none;
}

/* Footer links: colour only on hover. Any padding or transform shift makes a
   tidy column jitter as the pointer runs down it. */
.footer .list-menu__item--link,
.footer .link,
.footer-block__details-content a,
.footer .nv-fabout__line a {
  transition: color 0.15s ease;
  padding-left: 0;
}

.footer .list-menu__item--link:hover,
.footer .link:hover,
.footer-block__details-content a:hover,
.footer .nv-fabout__line a:hover {
  padding-left: 0;
  transform: none;
  opacity: 1;
  color: #FFFFFF;
}

/* And no rule under the column headings. */
.footer .footer-block__heading::after,
.footer .footer-block__heading:not(:empty)::after {
  content: none;
  display: none;
}

/* Price row stays on one line: struck original, price, saving. Wrapping the
   percentage onto its own line made the row look like two facts. */
.price--on-sale .price__sale {
  flex-wrap: nowrap;
  gap: 0.5rem;
  white-space: nowrap;
}

.price--on-sale .price__sale s.price-item--regular {
  font-size: 1.25rem;
}

.price--on-sale .price__sale .price-item--sale {
  font-size: 1.55rem;
}

.price-item--discount {
  font-size: 1.2rem;
}

/* The struck price is wrapped in a span of its own, which becomes a flex
   item and lets the row break. Keep every child inline on one line. */
.price--on-sale .price__sale {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
}

.price--on-sale .price__sale > span {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Screen-reader labels must not take a slot in the row, but must stay in the
   accessibility tree — so position them out rather than display: none. */
.price--on-sale .price__sale > span.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.price--on-sale .price__sale {
  gap: 0.3rem;
  justify-content: center;
}

/* Dawn puts a 10px right margin on every .price-item, which sits on top of
   the row's own gap. Clear it and let the gap alone do the spacing; the
   screen-reader labels are taken out of the flow so they cost no width. */
.price--on-sale .price__sale .price-item {
  margin: 0;
}

.price--on-sale .price__sale > .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Product cards on phones --------------------------------------------
 * Two cards to a row leaves little width, so: titles run to one line and
 * ellipsis rather than wrapping to two and pushing the prices out of step,
 * the price row steps down a size, and the button centres in its tile.
 */
@media screen and (max-width: 749px) {
  /* One line, then an ellipsis. */
  /* Flex and grid children default to min-width: auto, which refuses to
     shrink below the text width — that is what made nowrap overflow before. */
  .card-wrapper,
  .card,
  .card__content,
  .card__information,
  .card-information,
  .card__heading {
    min-width: 0;
  }

  .card__heading {
    font-size: 1.28rem;
    line-height: 1.4;
  }

  .card__heading a,
  .card-information .card__heading a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Smaller price row so all three parts stay on one line. */
  .price--on-sale .price__sale s.price-item--regular { font-size: 1.05rem; }
  .price--on-sale .price__sale .price-item--sale { font-size: 1.3rem; }
  .price-item--discount { font-size: 1rem; }
  .price--on-sale .price__sale { gap: 0.25rem; }

  /* Centre the button under its card. */
  .card-wrapper .quick-add {
    display: flex;
    justify-content: center;
    padding-inline: 0.6rem;
    margin-top: 0.5rem;
  }

  .quick-add__submit.button,
  .card-wrapper .quick-add__submit {
    width: auto;
    min-width: 0;
    padding: 1rem 1.4rem;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
  }
}

/* Phones: the price row must stay inside its own tile.
 * nowrap on a 160px-wide card pushes the three parts past the edge and into
 * the neighbouring card. Let the row shrink and wrap as a last resort, and
 * give the container the min-width: 0 that lets it clip at all.
 */
@media screen and (max-width: 749px) {
  .card__information,
  .card-information,
  .card__content,
  .price,
  .price__container,
  .price--on-sale .price__sale {
    min-width: 0;
    max-width: 100%;
  }

  .price--on-sale .price__sale {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.1rem;
    column-gap: 0.35rem;
    white-space: normal;
  }

  .price--on-sale .price__sale > span,
  .price--on-sale .price__sale s,
  .price-item--discount {
    white-space: nowrap;
    min-width: 0;
  }
}

/* Two logos, one breakpoint.
 * The wide wordmark holds the desktop header; the stacked mark replaces it on
 * phones. Dawn sets display on .header__heading-logo further down its own
 * stylesheet, so these are qualified by the wrapper and marked important —
 * exactly one logo must ever be painted.
 */
.header__heading-logo-wrapper .header__heading-logo--mobile {
  display: none !important;
}

@media screen and (max-width: 749px) {
  .header__heading-logo-wrapper,
  .header__heading-link {
    max-width: none;
  }

  /* Wide wordmark off. */
  .header__heading-logo-wrapper .header__heading-logo:not(.header__heading-logo--mobile) {
    display: none !important;
  }

  /* Stacked mark on, small enough to leave the icons their room. */
  .header__heading-logo-wrapper .header__heading-logo--mobile {
    display: block !important;
    width: 7.2rem !important;
    max-width: 7.2rem !important;
    height: auto !important;
  }

  .header {
    padding-block: 0.6rem;
  }
}

/* Phones: all three price parts on one line.
 * A 177px tile fits them only at this size; the earlier attempt stacked them
 * and then clipped the second line, which is why the original and the saving
 * disappeared. Nothing is hidden here.
 */
@media screen and (max-width: 749px) {
  .price--on-sale .price__sale {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.25rem;
    max-width: 100%;
    overflow: visible;
  }

  .price--on-sale .price__sale s.price-item--regular {
    font-size: 0.95rem;
    order: 0;
  }

  .price--on-sale .price__sale .price-item--sale {
    font-size: 1.28rem;
    font-weight: 600;
    order: 0;
    flex: 0 0 auto;
  }

  .price-item--discount {
    font-size: 0.95rem;
    order: 0;
  }

  /* Let the tile's own box clip nothing — the text now fits. */
  .card__information,
  .card-information,
  .price,
  .price__container {
    overflow: visible;
  }
}

/* Product card media follows the 5px the rest of the site uses. Dawn keeps
   this in a theme setting whose range steps by 2, so 5 cannot be selected
   there — it has to come from CSS. */
.card__media,
.card__inner,
.card-wrapper .media,
.card--standard .card__inner {
  border-radius: 5px;
}

/* ---- Price to Add-to-cart spacing ---------------------------------------
 * Dawn puts a 17px padding-bottom on .card__information, which lands between
 * the price and the quick-add button, and the button's own top spacing stacks
 * on it — 23px in total on the New arrivals row. This sets one deliberate gap
 * for every product card on the site instead, so the rows match wherever a
 * card appears. The Most loved section reaches the same 10px through its own
 * stylesheet.
 */
.card-wrapper .card__information {
  padding-bottom: 0;
}

.card-wrapper .quick-add {
  margin-top: 1.4rem;
  padding-top: 0;
}

/* ---- One supporting-line style ------------------------------------------
 * Sections had drifted into two different treatments for the line under the
 * heading: Curated and New Arrivals used a small gold uppercase label, while
 * Occasion, Most loved and the FAQ used a larger grey sentence. Same slot,
 * same job, two designs.
 *
 * The gold label wins — it reads as a kicker rather than a paragraph, and it
 * is what the brief's own supporting lines are written as ('Our Latest
 * Introductions', 'A Companion For Every Occasion'). Setting it here rather
 * than in each section's stylesheet keeps the next section consistent by
 * default.
 */
.nv-occ__sub,
.nv-loved__sub,
.nv-faq__sub,
.nv-catgrid__sub,
.nv-trust__sub,
.nv-cur__sub,
.nv-arr__sub,
.nv-hl__sub {
  font-size: 1.2rem !important;
  line-height: 1.5;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #846C3D !important;
  max-width: none;
}

/* These blocks render rich text, so the styling has to reach the paragraph
   the editor wraps the line in. */
.nv-occ__sub > *,
.nv-loved__sub > *,
.nv-faq__sub > *,
.nv-catgrid__sub > * {
  margin: 0;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

@media screen and (max-width: 749px) {
  .nv-occ__sub,
  .nv-loved__sub,
  .nv-faq__sub,
  .nv-catgrid__sub,
  .nv-trust__sub,
  .nv-cur__sub,
  .nv-arr__sub,
  .nv-hl__sub {
    font-size: 1.1rem !important;
    letter-spacing: 0.18em !important;
  }
}

/* ---- Sale badge on the product page -------------------------------------
 * The price row already states the saving as a percentage next to the struck
 * original, so the badge repeated it in a third style. The same badge was
 * removed from the product cards earlier for the same reason.
 */
.product__info-container .price .badge,
.product__info-container .price__badge-sale {
  display: none;
}

/* ---- Product title size --------------------------------------------------
 * The h1 was running to two lines at desktop and taking the top of the
 * column before the price. A smaller display size keeps the name, the price
 * and the buyback note in view together.
 */
.product__info-container .product__title,
.product__info-container .product__title h1 {
  font-size: clamp(2.2rem, 2.6vw, 2.8rem);
  line-height: 1.22;
  letter-spacing: 0.005em;
}

@media screen and (max-width: 749px) {
  .product__info-container .product__title,
  .product__info-container .product__title h1 {
    font-size: 2rem;
  }
}

/* ---- Cart drawer line items ---------------------------------------------
 * The product name was running to three lines in the drawer's narrow column
 * and pushing the price and stepper down. A smaller size fits most names in
 * two.
 */
.cart-drawer .cart-item__name,
.cart-drawer .cart-item__details > a {
  font-size: 1.35rem;
  line-height: 1.4;
}

/* The saving, matching the '(20% OFF)' the product cards and product page
   already show — so the same piece reads the same way in all three places. */
.nv-cart-off {
  margin-left: 0.5rem;
  font-size: 1.15rem;
  color: #C0392B;
  white-space: nowrap;
}

.nv-cart-compare {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}

.nv-cart-compare .cart-item__old-price {
  font-size: 1.2rem;
  opacity: 0.6;
}

@media screen and (max-width: 749px) {
  .cart-drawer .cart-item__name,
  .cart-drawer .cart-item__details > a {
    font-size: 1.28rem;
  }
}

/* ---- Drawer name to two lines -------------------------------------------
 * Measured live the name still ran to three lines at 13.5px in the drawer's
 * ~150px column. Clamping it to two keeps every line item the same height,
 * and the full name is still one tap away on the product page.
 */
.cart-drawer .cart-item__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.28rem;
  line-height: 1.38;
}

/* ---- Related products heading -------------------------------------------
 * Centred, matching every other section heading on the site — Dawn left-
 * aligns this one, which made it the only heading on the product page that
 * did not sit over the middle of its row.
 */
.related-products__heading {
  text-align: center;
  margin-bottom: 3rem;
  font-size: clamp(2rem, 2.6vw, 2.6rem);
  line-height: 1.25;
}

@media screen and (max-width: 749px) {
  .related-products__heading {
    font-size: 1.9rem;
    margin-bottom: 2.2rem;
  }
}

/* ---- Secondary actions share a row --------------------------------------
 * Save for later and Enquire on WhatsApp are both optional paths, so they
 * carry equal weight side by side rather than stacking as two full-width
 * bars that read as louder than the Add to cart above them.
 *
 * The info column is a flex column, so each wrapper takes half the row with
 * a gap between — no JS needed, unlike the quantity pairing, because these
 * two are already adjacent siblings.
 */
.nv-secondary-action {
  float: left;
  width: calc(50% - 0.5rem);
  margin-bottom: 1rem;
}

.nv-secondary-action:last-of-type {
  float: right;
}

/* Whatever follows the pair clears them — a float cannot clear itself from
   the inside, which is why an ::after on the button did not work. */
.nv-secondary-action ~ *:not(.nv-secondary-action) {
  clear: both;
}

/* Smaller labels: at half the column width 'Enquire on WhatsApp' was close to
   filling its button edge to edge. */
.nv-secondary-action .nv-wl-btn,
.nv-secondary-action .nv-wa-enquire {
  width: 100%;
  font-size: 0.98rem;
  letter-spacing: 0.05em;
  padding-inline: 0.8rem;
  /* Both labels on one line: wrapping left the two buttons at different
     heights, which is what made the pair look misaligned. */
  white-space: nowrap;
  min-height: 4.4rem;
}

.nv-secondary-action .nv-wl-btn,
.nv-secondary-action .nv-wa-enquire {
  width: 100%;
}

@media screen and (max-width: 749px) {
  .nv-secondary-action {
    width: calc(50% - 0.4rem);
  }

  /* Long labels for half a phone column, so they shorten to the essentials
     and the icons carry the rest of the meaning. */
  .nv-secondary-action .nv-wl-btn,
  .nv-secondary-action .nv-wa-enquire {
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    padding-inline: 0.6rem;
    gap: 0.5rem;
  }
}

/* ---- Matched button heights ---------------------------------------------
 * The two sat 2px apart: the wishlist button draws its border inside the box
 * and the WhatsApp link outside it. Stating the box model and one height for
 * both settles it.
 */
.nv-secondary-action .nv-wl-btn,
.nv-secondary-action .nv-wa-enquire {
  box-sizing: border-box;
  height: 5rem;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- Table-wrapped descriptions -----------------------------------------
 * Descriptions pasted from a word processor arrive wrapped in tables, which
 * Dawn's rte styles render with visible cell borders — a paragraph of copy
 * inside a drawn box, plus an empty box above it where the source had a
 * blank row.
 *
 * Stripping the table chrome inside the description lets that copy read as a
 * paragraph regardless of how it was pasted, so a merchant does not have to
 * know to clean the HTML.
 */
.nv-desc-accordion .rte table,
.product__description table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
}

.nv-desc-accordion .rte table td,
.nv-desc-accordion .rte table th,
.product__description table td,
.product__description table th {
  border: 0;
  padding: 0;
}

/* A row whose cells are empty came from a blank line in the source. */
.nv-desc-accordion .rte table tr:empty,
.product__description table tr:empty {
  display: none;
}

.nv-desc-accordion .rte table + table,
.product__description table + table {
  margin-top: 1rem;
}

/* ---- Product page measure -----------------------------------------------
 * The product page is capped at 1200px: at 1300–1400 the image and the
 * buying column drifted far apart on a wide screen, and the description ran
 * to an uncomfortably long line.
 *
 * Every band on the page takes the same cap — breadcrumbs, the product
 * itself, and the related row — so the left and right edges line up down the
 * whole page rather than stepping in and out.
 */
.product.page-width,
.related-products,
.nv-crumbs--product .page-width {
  max-width: 120rem;
}

/* :has support is not universal, and the breadcrumb nav sits before the
   product in the DOM — a plain rule on the product template's own crumb bar
   is more dependable. It is scoped by the sections that follow it. */
.shopify-section:has(.product) .page-width,
.shopify-section:has(.related-products) .page-width {
  max-width: 120rem;
}

/* ---- Secondary pair: one label size, one coloured heart ------------------
 * The wishlist custom element wraps an inner <button>, and nv-wishlist.css
 * sets 1.3rem on that button — so sizing the custom element alone left
 * Save for later a third larger than Enquire on WhatsApp beside it.
 * The inner button is the element that has to inherit.
 *
 * The heart draws with stroke: currentColor and no fill, so it took the
 * muted body colour while the WhatsApp glyph carried its own brand green —
 * one button read as active, the other as disabled. The rose is the blush
 * accent already used on the USP and buyback blocks, so the pair reads as
 * two live actions in the page's own palette rather than one borrowed one.
 */
.nv-secondary-action .nv-wl-btn--full button {
  font-size: inherit;
  letter-spacing: inherit;
}

.nv-secondary-action .nv-wl-btn__icon svg {
  color: #C2453A;
  fill: rgba(194, 69, 58, 0.16);
}

/* Saved: the same rose, filled solid, so the state change stays legible
   without swapping to a second colour. */
.nv-secondary-action .nv-wl-btn button.is-on .nv-wl-btn__icon svg {
  fill: #C2453A;
}

/* The heart is drawn on a 24 box and the WhatsApp mark on a tighter one, so
   equal declared sizes did not look equal — a hair smaller settles them. */
.nv-secondary-action .nv-wl-btn__icon svg {
  width: 1.9rem;
  height: 1.9rem;
}

/* ---- Secondary pair: one text colour ------------------------------------
 * Measured side by side, every typographic property already matched: 9.8px
 * Lato 400, the same letter-spacing, the same 12px glyph height. The pair
 * still read as two different sizes because of colour alone — the wishlist
 * button inherits rgba(41, 39, 36,0.75) from the info column while the
 * WhatsApp link states a solid rgba(41, 39, 36), and text at 75% opacity looks
 * thinner and smaller than solid text of the same size beside it.
 *
 * Stating one colour for both settles it. The border stays at its lighter
 * value on both so the buttons keep reading as secondary to Add to cart.
 */
.nv-secondary-action .nv-wl-btn--full button,
.nv-secondary-action .nv-wa-enquire {
  color: rgb(var(--color-foreground));
}

/* ---- Secondary pair: label size --------------------------------------
 * The 0.98rem set earlier was chosen while the labels still wrapped to two
 * lines. Now that both sit on one line in a 5rem-tall button, that size
 * read as far too small for the box around it.
 *
 * Measured against the room each button actually has: at 990px the longer
 * 'Enquire on WhatsApp' needs 197px of a 197px opening at 1.3rem — exactly
 * its edge — so 1.2rem is the largest size with slack left for a longer
 * label or a wider rendering of the font.
 */
.nv-secondary-action .nv-wl-btn--full button,
.nv-secondary-action .nv-wa-enquire {
  font-size: 1.2rem;
  letter-spacing: 0.06em;
}

/* On a phone the pair splits a much narrower column, where even 1.1rem
   pushed the WhatsApp label past its button. */
@media screen and (max-width: 749px) {
  .nv-secondary-action .nv-wl-btn--full button,
  .nv-secondary-action .nv-wa-enquire {
    font-size: 1.05rem;
    letter-spacing: 0.04em;
  }
}

/* ---- Small phones: the pair stays in one row ----------------------------
 * Stacking gave each button its own line, which pushed the description far
 * down the page. They share the row instead, with the type sized so the
 * longer label still fits: at 320px each button has about 140px, and
 * 'Enquire on WhatsApp' needs the smaller size to sit inside that.
 */
@media screen and (max-width: 374px) {
  .nv-secondary-action .nv-wl-btn--full button,
  .nv-secondary-action .nv-wa-enquire {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    padding-inline: 0.4rem;
    gap: 0.4rem;
  }

  /* The icons take room the labels need at this width. */
  .nv-secondary-action .nv-wl-btn__icon svg,
  .nv-secondary-action .nv-wa-enquire svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}


/* ---- Collection page: the grid starts higher ----------------------------
 * The first product sat 540px down a 900px screen, so a visitor landing on
 * a collection saw a title, a filter row and almost no stock. The heading
 * block and the gap beneath the subcategory row give up the space — none of
 * it was carrying information.
 */
.collection-hero,
.collection .title-wrapper,
.collection__title {
  padding-block: 0;
}

.collection__title h1,
.collection-hero h1 {
  margin-block: 1rem;
}

/* Dawn spaces the filter bar off the block above it; with the subcategory
   row there too that gap was counted twice. */
.collection .facets-wrapper,
.collection facet-filters-form,
.collection .facets-container {
  margin-top: 0;
  padding-top: 0;
}

.collection .product-grid,
.collection .collection .grid {
  margin-top: 0.8rem;
}

/* ---- Typography: two families, each with one job ------------------------
 * Cormorant carries the editorial voice — hero and section headings, and the
 * brand storytelling blocks. Montserrat carries everything functional:
 * navigation, product names, prices, descriptions and buttons.
 *
 * Dawn gives product card titles its .h5 class, which pulls in the heading
 * family. A product name is a label a shopper scans, not a piece of
 * editorial, so it is moved to the functional face here.
 */
.card__heading,
.card__heading a,
.card-information .card__heading,
.product__title,
.product__title h1,
.product__title h2 {
  font-family: var(--font-body-family);
  /* The heading weight rose to 600 for the Cormorant headings; a product
     name is a label, so it takes the body weight rather than inheriting
     the editorial one. */
  font-weight: 400;
}

/* Cormorant is a light, high-contrast serif: at the sizes Dawn uses for
   headings it needs a little more tracking than a grotesque would, or the
   letterforms crowd each other. */
h1, h2, h3,
.h0, .h1, .h2, .h3,
.nv-occ__heading,
.nv-arr__heading,
.nv-cur__heading,
.nv-tm__heading,
.nv-ig__heading,
.nv-vs__heading,
.nv-hl__heading {
  letter-spacing: 0.02em;
}

/* The small uppercase supporting lines above and below headings carry the
   brief's wider tracking. */
.nv-occ__sub,
.nv-arr__sub,
.nv-cur__sub,
.nv-tm__sub,
.nv-ig__sub,
.nv-vs__sub,
.nv-sub__heading {
  letter-spacing: 0.22em;
}

/* Functional text sits a touch open rather than tight, which suits
   Montserrat's even width and keeps small labels legible. */
.button,
.quick-add__submit,
.product-form__submit,
.nv-hdr__cat,
.nv-hdr__action-label {
  letter-spacing: 0.08em;
}

/* ---- Palette ------------------------------------------------------------
 * Emerald, champagne gold, ivory and charcoal, held at roughly 60–70% ivory
 * ground, 20–25% emerald and 5–10% gold. The colour scheme settings carry
 * the grounds; these tokens are for the places that need a specific value.
 *
 * Gold on ivory measures 2.14:1, which fails WCAG at any size, so the gold
 * used for small text on a pale ground is darkened to #846C3D (4.56:1). The
 * bright gold is kept for emerald grounds, where it reaches 6.4:1, and for
 * rules and borders, which carry no text.
 */
:root {
  --nv-emerald: #062C24;
  --nv-emerald-dk: #031D18;
  --nv-gold: #C8A45D;
  --nv-gold-lt: #E1C78A;
  --nv-gold-ink: #846C3D;
  --nv-ivory: #F7F4ED;
  --nv-charcoal: #292724;
}

/* ---- Eyebrow headings in champagne gold ---------------------------------
 * The small uppercase lines that sit above a heading — "CRAFTED SINCE 1985"
 * and the supporting lines throughout — are the brief's gold accent. On a
 * pale ground they take the darkened gold so they stay readable; on an
 * emerald ground the bright gold is already well clear.
 */
.nv-occ__sub,
.nv-arr__sub,
.nv-cur__sub,
.nv-tm__sub,
.nv-ig__sub,
.nv-vs__sub,
.nv-hl__sub,
.nv-sub__heading,
.nv-owner__eyebrow,
.nv-ticker__item {
  color: var(--nv-gold-ink);
}

/* On an emerald or dark ground the bright champagne is the right value. */
.color-scheme-3 .nv-occ__sub,
.color-scheme-3 .nv-arr__sub,
.color-scheme-3 .nv-tm__sub,
.color-scheme-4 .nv-occ__sub,
.color-scheme-4 .nv-arr__sub,
.color-scheme-6 .nv-occ__sub,
.color-scheme-6 .nv-arr__sub,
.footer .nv-fstore__label,
.footer .nv-fabout__eyebrow {
  color: var(--nv-gold);
}

/* Rules and dividers carry the gold without needing contrast, since no text
   sits on them. */
.nv-vs__city::after,
.nv-occ__sub::after,
.nv-arr__viewall::after {
  background: var(--nv-gold);
}

/* ---- White page ground --------------------------------------------------
 * The colour schemes carry white now, so the few sections that painted
 * their own ivory would be the only tinted bands left on the page. They
 * follow the scheme instead.
 *
 * Image placeholders, input fills and letterbox bands keep their tint —
 * those exist precisely to be a shade off white, and flattening them would
 * make an empty frame indistinguishable from the page.
 */
.nv-val--pillars .nv-val__grid {
  background: #FFFFFF;
}

/* ---- One button colour --------------------------------------------------
 * Every button on the site is emerald and hovers to an outline. A few were
 * still carrying the charcoal ink colour from before the palette changed —
 * the header's search submit, the card quick-add and the owner CTA — which
 * left three near-black buttons among the green ones.
 *
 * The rules are written to match the specificity of the ones they replace,
 * so none of this needs !important.
 */
.nv-hdr__search-submit,
.quick-add__submit.button,
.card-wrapper .quick-add__submit,
.nv-owner__cta,
.nv-contact__submit,
.nv-loc__btn--solid {
  background: var(--nv-emerald, #062C24);
  border: 0.1rem solid var(--nv-emerald, #062C24);
  color: var(--nv-ivory, #F7F4ED);
}

/* Hover empties the fill and keeps the outline, matching Add to cart and
   every other button on the site. */
.nv-hdr__search-submit:hover,
.nv-hdr__search-submit:focus-visible,
.quick-add__submit.button:hover,
.card-wrapper .quick-add__submit:hover,
.nv-owner__cta:hover,
.nv-owner__cta:focus-visible,
.nv-contact__submit:hover,
.nv-loc__btn--solid:hover,
.nv-loc__btn--solid:focus-visible {
  background: transparent;
  color: var(--nv-emerald, #062C24);
  border-color: var(--nv-emerald, #062C24);
}

/* The quick-add label is a child span, so it follows the button rather than
   keeping its own colour. */
.quick-add__submit.button:hover span,
.card-wrapper .quick-add__submit:hover span {
  color: var(--nv-emerald, #062C24);
}

/* The ghost variants invert: outlined at rest, filling on hover. */
.nv-owner__cta--ghost {
  background: transparent;
  color: var(--nv-emerald, #062C24);
}

.nv-owner__cta--ghost:hover,
.nv-owner__cta--ghost:focus-visible {
  background: var(--nv-emerald, #062C24);
  color: var(--nv-ivory, #F7F4ED);
}

/* ---- Collection page: less air above the products -----------------------
 * The page spent 371px before the first product: a 49px breadcrumb, a 67px
 * title block, a 161px subcategory row and a 36px gap to the filters. None
 * of that is content a shopper came for.
 *
 * Each piece gives up a little rather than one losing a lot, so the page
 * still breathes — it just does not open on an empty screen.
 */
/* The subcategory row's own padding is set in nv-subcats.css, which loads
   after this file — overriding it from here could never win. */

/* Dawn spaces the filter bar off whatever precedes it, which here is
   already a spaced band. */
.collection .facets-container,
.collection facet-filters-form {
  padding-top: 0;
  margin-top: 0.4rem;
}

/* The title block carries its own margins on the h1 as well as padding on
   the wrapper; the h1's are enough. */
/* The title block is .collection-hero__text-wrapper here, not .title-wrapper. */
.collection-hero,
.collection-hero__text-wrapper {
  padding-block: 0;
}

.collection-hero h1,
.collection-hero__text-wrapper h1 {
  margin-block: 0.4rem;
}

/* ---- The secondary pair, matched -----------------------------------------
 * Two problems the measurements showed: the wishlist button was 152px
 * inside a 168px wrapper while the WhatsApp one filled its 168px, so the
 * pair looked misaligned; and 'Enquire on WhatsApp' ran 16px past its own
 * border because its padding had been squeezed to 8px to make room.
 *
 * Both buttons now fill their wrapper, carry the same padding, and the type
 * is sized so the longer label fits inside rather than overflowing.
 */
.nv-secondary-action .nv-wl-btn--full button,
.nv-secondary-action .nv-wa-enquire {
  /* flex, not inline-flex: an inline box shrinks to its content, so
     width: 100% resolved against the text rather than the wrapper and the
     button came out 16px short of its neighbour. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  /* One stated height for both: a <button> and an <a> resolve their own
     line-height differently, which left the pair 3px apart. */
  height: 5rem;
  padding-block: 0;
  padding-inline: 1rem;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  gap: 0.6rem;
  white-space: nowrap;
}

/* The wishlist custom element is inline-flex, so its inner button sized to
   its own text (152px) rather than the 168px the element occupies. Making
   the element a block lets the button fill it, which is what finally
   matched the two. */
.nv-secondary-action .nv-wl-btn {
  display: block;
  width: 100%;
  /* The custom element carried 8px of side padding, which is exactly the
     16px its button came out short of the WhatsApp one beside it. */
  padding-inline: 0;
}

/* The icons take a little less room so the words have more. */
.nv-secondary-action .nv-wl-btn__icon svg,
.nv-secondary-action .nv-wa-enquire svg {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}

/* ---- You may also like: one-line titles ---------------------------------
 * The titles ran to one or two lines depending on the name, so the prices
 * beneath them sat at different heights across the row. One line with an
 * ellipsis lines them up, the same way the New Arrivals rail does.
 */
.related-products .card__heading,
.related-products .card__heading a {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

/* The card becomes a column so the price and button sit at its foot however
   the title above them wraps. */
.related-products .card__content,
.related-products .card__information {
  display: flex;
  flex-direction: column;
}

/* ---- A real gap between the two buttons ---------------------------------
 * The pair measured 0px apart: the wrappers take calc(50% - 0.5rem), which
 * leaves 10px over, but with one floated left and the other right that
 * slack sat at the outside edges rather than between them. The second
 * wrapper is pushed off the first instead, so the gap lands where it is
 * wanted.
 */
/* The pair stays floated (flex on the info column broke every other block
   in it). The gap comes from the first wrapper's right margin, and the
   widths are reduced to make room for it. */
.nv-secondary-action {
  float: left;
  width: calc(50% - 0.6rem);
  margin-bottom: 1rem;
}

.nv-secondary-action + .nv-secondary-action {
  margin-left: 1.2rem;
}

/* ---- Mobile: the WhatsApp label has to fit ------------------------------
 * 'Enquire on WhatsApp' ran past its own border by 13px at 320px and 3px at
 * 360px: nowrap keeps it on one line, and one line of that label is wider
 * than half a phone column at 10.5px.
 *
 * The type comes down and the icon gives up a little room, so the label sits
 * inside the button at every phone width rather than bleeding out of it.
 */
@media screen and (max-width: 749px) {
  .nv-secondary-action .nv-wl-btn--full button,
  .nv-secondary-action .nv-wa-enquire {
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    padding-inline: 0.5rem;
    gap: 0.4rem;
  }

  .nv-secondary-action .nv-wl-btn__icon svg,
  .nv-secondary-action .nv-wa-enquire svg {
    width: 1.3rem;
    height: 1.3rem;
  }
}

/* Below 360px even that is tight, so the pair stacks and each label gets the
   full column width. */
@media screen and (max-width: 359px) {
  .nv-secondary-action {
    float: none;
    width: 100%;
  }

  .nv-secondary-action + .nv-secondary-action {
    margin-left: 0;
    margin-top: 0.8rem;
  }

  .nv-secondary-action .nv-wl-btn--full button,
  .nv-secondary-action .nv-wa-enquire {
    font-size: 1.1rem;
    letter-spacing: 0.06em;
  }
}

/* ---- Phones: close the gap above the secondary buttons ------------------
 * Desktop already sits at 8px, but on a phone the pair measured 30px: the
 * wrapper's own 15px plus the buyback panel's margin beneath it. Only the
 * phone rule is touched, so the desktop spacing is left as it is.
 */
/* Both widths, stated once. Earlier rules for desktop lived further up the
   file and a later phone-only block reset them, which pushed desktop from
   8px back to 30px — so the pair is set together here. */
.product__info-container > * + .nv-secondary-action {
  margin-top: 0;
}

.nv-bb-badge {
  margin-bottom: 0.6rem;
}

.product__info-container > div:has(> .nv-bb-badge) {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Product page: equal columns on desktop.

   The section's "large" media size splits the row 65/35, which left the
   photograph's column far wider than the details beside it — and with
   "constrain to viewport" on, a square photograph on a laptop screen is
   capped by the window's height and sits centred in that wide column with
   white space either side and a ~150px gap before the details. The row is
   split 50/50 instead, and the 4rem gutter Dawn puts entirely on the info
   side is shared 2rem / 2rem so the two content boxes come out the same
   width. From 750px, where the row first goes side by side, up.

   Scoped to the main product section so a featured-product block elsewhere
   keeps its own proportions; the extra specificity beats Dawn's rule, which
   loads later in section-main-product.css.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 750px) {
  product-info[id^="MainProduct-"] .product:not(.product--no-media) .product__media-wrapper,
  product-info[id^="MainProduct-"] .product:not(.product--no-media) .product__info-wrapper {
    max-width: 50%;
    width: calc(50% - var(--grid-desktop-horizontal-spacing, 0px) / 2);
  }

  product-info[id^="MainProduct-"] .product:not(.product--no-media) .product__media-wrapper {
    padding-right: 2rem;
  }

  product-info[id^="MainProduct-"] .product:not(.product--no-media) .product__info-wrapper {
    padding-left: 2rem;
  }
}

/* ---------------------------------------------------------------------------
   Side cart line item, after the reference the shop supplied.

   The name in the body face rather than the display serif, so it reads as a
   label; the line total set large and bold with its struck-out price above
   and the saving in green below; a compact rounded stepper; and a solid
   delete button in the brand emerald that outlines on hover, like every
   other button on the site. A low-stock note appears when five or fewer
   tracked pieces remain.
   --------------------------------------------------------------------------- */
.cart-drawer .cart-item__name {
  font-family: var(--font-body-family);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--nv-charcoal, #292724);
}

.cart-drawer .cart-item__details > .product-option,
.cart-drawer .cart-item__details .cart-item__discounted-prices {
  font-size: 1.3rem;
  color: rgba(41, 39, 36, 0.75);
  margin-top: 0.4rem;
}

.cart-drawer .nv-cart-stock {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: #A3341F;
}

.cart-drawer .nv-cart-stock svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  color: #9C7C43;
}

/* ---- Line total: struck price, bold total, saving ------------------------- */
.cart-drawer .cart-item__totals .cart-item__discounted-prices,
.cart-drawer .cart-item__totals .nv-cart-compare {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}

.cart-drawer .cart-item__totals .cart-item__old-price,
.cart-drawer .cart-item__totals .cart-item__old-price.price {
  font-size: 1.2rem;
  font-weight: 400;
  opacity: 0.55;
}

.cart-drawer .cart-item__totals .price {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--nv-charcoal, #292724);
}

.cart-drawer .nv-cart-off {
  margin-left: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #1B7A3E;
}

/* ---- Stepper and delete --------------------------------------------------- */
.cart-drawer .cart-item__quantity-wrapper {
  align-items: center;
  gap: 1rem;
}

.cart-drawer .cart-item__quantity-wrapper .quantity {
  width: 11rem;
  min-height: 3.6rem;
  border-radius: 0.8rem;
  border: 0.1rem solid rgba(41, 39, 36, 0.45);
}

.cart-drawer .cart-item__quantity-wrapper .quantity::before,
.cart-drawer .cart-item__quantity-wrapper .quantity::after {
  display: none;
}

.cart-drawer .cart-item__quantity-wrapper .quantity__input,
.cart-drawer .cart-item__quantity-wrapper .quantity__button {
  height: 3.4rem;
}

.cart-drawer .cart-remove-button {
  width: 3.6rem;
  height: 3.6rem;
  min-width: 3.6rem;
  min-height: 0;
  max-height: 3.6rem;
  align-self: center;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 0.8rem;
  border: 0.1rem solid var(--nv-emerald, #062C24);
  background: var(--nv-emerald, #062C24);
  color: #FFFFFF;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cart-drawer .cart-remove-button::before,
.cart-drawer .cart-remove-button::after {
  display: none;
}

.cart-drawer .cart-remove-button .svg-wrapper,
.cart-drawer .cart-remove-button svg {
  width: 1.5rem;
  height: 1.5rem;
  color: currentColor;
}

.cart-drawer .cart-remove-button:hover {
  background: transparent;
  color: var(--nv-emerald, #062C24);
}

/* ---------------------------------------------------------------------------
   Numbers in Lato.

   Prices, discounts, quantities and counts are set in Lato across the site;
   names, labels and headings stay in Montserrat and Cormorant. Lato's
   figures are even and compact, which keeps a struck-out MRP, the sale
   price and the saving reading as one figure group.
   --------------------------------------------------------------------------- */
.price,
.price-item,
.price__regular,
.price__sale,
.price-item--discount,
.unit-price,
.cart-item__old-price,
.cart-item__final-price,
.cart-item__price-wrapper,
.cart-drawer .cart-item__details > .product-option,
.cart-item__discounted-prices,
.nv-cart-off,
.totals__total-value,
.totals__subtotal-value,
.discounts__discount,
.quantity__input,
.cart-count-bubble,
.nv-hdr__count,
.nv-gr__rate-value,
.facets__price input {
  font-family: 'Lato', var(--font-body-family), sans-serif;
}

/* ---------------------------------------------------------------------------
   No underline on hover, anywhere.

   Dawn draws an underline under links, card titles, menu items, cart names
   and accordion titles on hover; the shop wants none of them. The struck-out
   price (<s>) is deliberately left out of the descendant rule, so its line
   survives when a card is hovered.
   --------------------------------------------------------------------------- */
a:hover,
a:focus-visible,
a:hover :not(s):not(del),
.underlined-link:hover,
.underline-links-hover:hover a,
.card__heading:hover a,
.cart-item__name:hover,
.header__menu-item:hover span,
.header__menu-item:hover .header__active-menu-item,
details[open]:hover > .header__menu-item,
.mega-menu__link:hover,
.list-menu__item--active:hover,
.list-menu__item--link:hover,
.copyright__content a:hover,
.collapsible-content summary:hover .accordion__title,
.facets__summary:hover .facets__summary-label,
.facets__label:hover .facet-checkbox__text-label,
.mobile-facets__open:hover .mobile-facets__open-label,
.predictive-search__list-item:hover .predictive-search__item-heading,
.share-button__button:hover,
.announcement-bar__link:hover,
.product-popup-modal__button:hover,
.product__view-details:hover,
.rte a:hover,
.inline-richtext a:hover,
.customer a:hover {
  text-decoration: none !important;
}

/* ---- Quantity number ---------------------------------------------------
   Dawn sets the figure in the input at a lighter weight and a faded colour,
   which in Lato read as thin and grey. It is the value the customer is
   choosing, so it is set solid and centred. */
.quantity__input {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--nv-charcoal, #292724);
  opacity: 1;
  text-align: center;
  -webkit-text-fill-color: var(--nv-charcoal, #292724);
}

/* ---- Side cart: stepper room for the figure -----------------------------
   In the 11rem stepper Dawn's 4.5rem buttons left about 2rem for the input,
   so a bold "2" was clipped. The buttons give up a little width. */
.cart-drawer .cart-item__quantity-wrapper .quantity__button {
  width: 3.4rem;
  flex: 0 0 3.4rem;
}

.cart-drawer .cart-item__quantity-wrapper .quantity__input {
  min-width: 3rem;
  flex: 1 1 auto;
  padding: 0;
}

/* ---- Side cart: heading and total label in Montserrat -------------------
   "Your cart" and "Estimated total" are labels on a working panel, not
   editorial headings, so they take the body face. The total figure itself
   stays in Lato with the other numbers. */
.cart-drawer .drawer__heading {
  font-family: var(--font-body-family);
  font-weight: 500;
  font-size: 1.9rem;
  letter-spacing: 0.02em;
}

.cart-drawer .totals__total {
  font-family: var(--font-body-family);
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: 0.02em;
}

/* ---- Side cart: stepper and delete sit together -------------------------
   The 10px flex gap was landing on top of the 10px margin Dawn gives
   cart-remove-button, so the two controls sat 20px apart. The margin is
   cleared and the pair tightened to a 6px gap, with a smaller stepper, so
   they read as one set of controls. */
.cart-drawer .cart-item__quantity-wrapper {
  gap: 0.6rem;
}

.cart-drawer .cart-item__quantity-wrapper cart-remove-button {
  margin: 0;
}

.cart-drawer .cart-item__quantity-wrapper .quantity {
  width: 9.4rem;
  min-height: 3.2rem;
}

.cart-drawer .cart-item__quantity-wrapper .quantity__button {
  width: 2.8rem;
  flex: 0 0 2.8rem;
  height: 3rem;
}

.cart-drawer .cart-item__quantity-wrapper .quantity__input {
  height: 3rem;
  min-width: 2.6rem;
  font-size: 1.3rem;
}

.cart-drawer .cart-remove-button {
  width: 3.2rem;
  height: 3.2rem;
  min-width: 3.2rem;
  max-height: 3.2rem;
}

/* ---- Side cart: tighter row, matching radii -----------------------------
   The line item is a grid whose second row holds the stepper, and the 10px
   row gap sat on top of the details column's own trailing space. It comes
   down to 4px. The two controls also take the 5px radius every other button
   on the site uses, rather than the rounder 8px they were given. */
.cart-drawer .cart-items .cart-item {
  row-gap: 0.4rem;
}

.cart-drawer .cart-item__quantity-wrapper .quantity,
.cart-drawer .cart-remove-button {
  border-radius: var(--nv-radius, 5px);
}

/* ---------------------------------------------------------------------------
   Policy pages (shipping, returns, terms, privacy).

   Shopify renders these from the Settings panel with no padding of its own,
   so the last line sat flush against the footer and the first against the
   header. The page gets room top and bottom, headings get air above them so
   each section reads as a block, and the measure is widened a little from
   Shopify's 688px — long enough to read comfortably, short enough to scan.
   --------------------------------------------------------------------------- */
.shopify-policy__container {
  max-width: 76rem;
  padding-block: 4rem 6rem;
}

.shopify-policy__title {
  margin-bottom: 3.2rem;
}

.shopify-policy__body h3 {
  margin-top: 3.6rem;
  margin-bottom: 1.2rem;
  font-size: 1.9rem;
  letter-spacing: 0.01em;
}

/* The opening paragraph needs no gap above it: the title already gave one. */
.shopify-policy__body > h3:first-child {
  margin-top: 0;
}

.shopify-policy__body p {
  margin-bottom: 1.6rem;
}

.shopify-policy__body ul {
  margin-block: 1.6rem 2rem;
  padding-left: 2.2rem;
}

.shopify-policy__body li {
  margin-bottom: 0.8rem;
}

.shopify-policy__body li:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 749px) {
  .shopify-policy__container {
    padding-block: 3rem 4.5rem;
  }

  .shopify-policy__title {
    margin-bottom: 2.4rem;
  }

  .shopify-policy__body h3 {
    margin-top: 2.8rem;
    font-size: 1.75rem;
  }
}

/* ---- Side cart: Check out in caps ---------------------------------------
   Every other button on the site is set in caps with the same tracking —
   Add to Cart, Buy It Now, the hero buttons. Dawn leaves this one in
   sentence case, which made it the odd one out at the end of the cart. */
.cart-drawer .cart__checkout-button,
.cart__checkout-button {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 1.4rem;
}

/* ---- Side cart: MRP and saving beside the total --------------------------
   The label and the figures share one line, with the struck MRP in front of
   the total and the saving beneath it. The label aligns to the top of that
   stack rather than to its bottom, which is what pushed "Estimated total"
   below the price once the saving line appeared. */
.cart-drawer .totals.nv-totals--saving {
  align-items: flex-start;
}

.cart-drawer .totals__amounts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}

.cart-drawer .nv-totals__row {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  white-space: nowrap;
}

.cart-drawer .totals__amounts .totals__total-value {
  margin: 0;
}

.cart-drawer .nv-totals__mrp {
  font-family: 'Lato', var(--font-body-family), sans-serif;
  font-size: 1.4rem;
  color: rgba(41, 39, 36, 0.5);
  text-decoration: line-through;
}

.cart-drawer .nv-totals__saved {
  font-family: 'Lato', var(--font-body-family), sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1B7A3E;
  white-space: nowrap;
}

/* ---- Side cart: no sideways scrollbar -----------------------------------
   Dawn pulls the close button 10px past the right edge of the drawer header
   with a negative offset, which on a phone was enough to give the whole
   drawer a horizontal scrollbar. The button is brought back inside, and the
   drawer is told not to scroll sideways whatever else ends up a pixel wide. */
.cart-drawer .drawer__close {
  right: 0;
}

.cart-drawer .drawer__inner,
.cart-drawer .drawer__header {
  overflow-x: clip;
}

/* ---- Side cart: no horizontal scrollbar across the items ----------------
   cart-drawer-items is set to overflow:auto so a long list can scroll
   vertically. Its content came out one pixel wider than the box, which was
   enough for the browser to draw a full-width horizontal bar between the
   items and the total. Vertical scrolling is kept; sideways is clipped, and
   WebKit's horizontal bar is given no height. */
.cart-drawer cart-drawer-items {
  overflow-x: clip;
  overflow-y: auto;
}

.cart-drawer cart-drawer-items::-webkit-scrollbar:horizontal {
  height: 0;
  display: none;
}