/** Shopify CDN: Minification failed

Line 810:0 Unexpected "}"

**/
/* ==========================================================================
   BRAND TYPE SYSTEM — three fonts, three roles (per the Pacem font guide).

     IvyPresto Headline 300 → display headings (section titles, overlay headlines)
     Aktiv Grotesk 400      → body copy (paragraphs, form fields, footer link lists)
     Presicav 400           → "UI" type: nav, buttons, product titles, eyebrows,
                              footer column headers — anything uppercase + tracked

   Aktiv Grotesk and Presicav are @font-faces in layout/theme.liquid; IvyPresto
   comes from the client's Adobe Fonts kit, linked in the same file. The
   variables below re-point the theme's font vars at the right role, and the
   !important blocks that follow exist because an app injects runtime CSS
   hardcoding font-family with !important on bare element and class
   selectors — plain declarations and variables lose to it, so each role is
   re-asserted at `html body …` specificity. Ordering matters: the UI block
   comes last so nav/button/product-title text beats the broad body selectors.
   ========================================================================== */
:root {
  --font-display-family: "ivypresto-headline", Georgia, "Times New Roman", serif;
  /* Display headings are title case. Every pacem-* heading reads these three,
     so tuning weight, case or tracking is a one-line change here. The kit
     carries 100/300/400/600. 2026-09-24 client feedback: one step lighter than
     the Light (300) cut the 2026-09-23 build used, and more space between the
     letters. */
  --font-display-weight: 100;
  --font-display-case: none;
  --font-display-tracking: 0.02em;
  /* Body copy leading. The pacem-* sections set paragraphs at 1.3, which the
     client found crowded next to the designs (2026-09-24); they read this. */
  --font-copy-leading: 1.65;
  --font-copy-family: "AKTIV GROTESK", "Helvetica Neue", Arial, sans-serif;
  /* Bold body copy: see the AKTIV GROTESK SYNTH @font-face in theme.liquid. */
  --font-copy-bold-family: "AKTIV GROTESK SYNTH", "Helvetica Neue", Arial, sans-serif;
  --font-ui-family: "PRESICAV", "Syne", sans-serif;

  /* Fourth, narrow role: the italic serif accents on the product page — the
     selected option value, the "Select Size" placeholder, the made-to-order
     copy. Deliberately not wired into any theme variable; only the components
     that ask for it by name get it. NOTE: only a regular face of Adobe Caslon
     Pro is loaded (see @font-face in layout/theme.liquid), so `font-style:
     italic` on it is synthesised by the browser. Uploading an
     acaslonpro-italic webfont would upgrade these to a true italic. */
  --font-accent-serif: "Adobe Caslon Pro", Georgia, "Times New Roman", serif;

  /* Theme/section variables mapped onto the three roles above. */
  --font-body-family: var(--font-copy-family);
  --font-paragraph-family: var(--font-copy-family);
  --font-Work-Sans: var(--font-copy-family);
  --font-lato-family: var(--font-copy-family);
  --font-heading-family: var(--font-display-family);
  --font-subheading-family: var(--font-display-family);
  --font-spring-family: var(--font-display-family);
  --font-accent-family: var(--font-ui-family);
  --font-menu-family: var(--font-ui-family);
}

/* --- Role 1: display headings → IvyPresto Headline ----------------------- */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .h0,
html body .h1,
html body .h2,
html body .h3,
html body .h4,
html body .h5,
html body .h6 {
  font-family: var(--font-display-family) !important;
  /* Beats the theme's --font-heading-weight (600, left over from Syne). */
  font-weight: var(--font-display-weight);
}

/* --- Role 2: body copy → Aktiv Grotesk ----------------------------------- */
html body,
html body p,
html body a,
html body span,
html body li,
html body label,
html body input,
html body select,
html body textarea,
html body blockquote,
html body figcaption,
html body td,
html body th,
html body dd,
html body dt,
html body summary,
html body small,
html body .desktop-text,
html body .mobile-facets__item,
html body span.custom-nl__subtext {
  font-family: var(--font-copy-family) !important;
}

/* Placeholders follow the field's own (body) font rather than the UA default. */
html body input::placeholder,
html body textarea::placeholder {
  font-family: var(--font-copy-family) !important;
}

/* --- Role 3: UI type → Presicav ------------------------------------------
   Navigation, buttons, product/card titles, eyebrow labels and footer column
   headers. Listed after the body block so these win on shared elements
   (a, span, li) at equal-or-greater specificity. */
html body .header__inline-menu a,
html body .header__menu-item,
html body .list-menu__item,
html body .header__icon,
html body .section-header a,
html body .section-header span,
html body .section-header .header__icon,
html body .mobile-hide-nav-link,
html body .mega__panel .mega__col-title,
html body .mega__panel .mega__promo-caption,
html body .menu-drawer__menu-item,
html body .button,
html body button,
html body .btn,
html body .shopify-payment-button__button,
html body input[type='submit'],
html body .card__heading,
html body .card__heading a,
html body .card-information__text,
html body h3.jpg-card-title,
html body .footer-block__heading,
html body .list-social__link {
  font-family: var(--font-ui-family) !important;
}

/* Reserve the scrollbar gutter so the preloader logo doesn't shift when the
   page scrollbar appears after load. Brand-colored scrollbar: EDE9E1 track,
   dark blue-green thumb. */
html {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #334C58 #EDE9E1;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #EDE9E1;
}
::-webkit-scrollbar-thumb {
  background: #334C58;
  border-radius: 8px;
  border: 3px solid #EDE9E1;
}
::-webkit-scrollbar-thumb:hover {
  background: #2B4D59;
}

a {
  color: inherit;
}

/* Search overlay spans the full viewport width. */
details[open] .modal-overlay::after {
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  margin-left: -50vw !important;
}

/* Cart drawer: page off-white (#FBFAF8) background, dark-blue (scheme 1 = #334c58) text.
   Override the scheme variables so all scheme-driven text/bg follows suit while
   button colors (their own vars) keep their contrast. */
cart-drawer .drawer__inner {
  --color-background: 251, 250, 248 !important;
  --color-foreground: 51, 76, 88 !important;
  --gradient-background: #FBFAF8 !important;
  background: #FBFAF8 !important;
  color: #334c58 !important;
}
cart-drawer .drawer__inner .cart-item,
cart-drawer .drawer__inner .cart-item *,
cart-drawer .drawer__inner .totals,
cart-drawer .drawer__inner .totals *,
cart-drawer .drawer__inner .cart-drawer__footer,
cart-drawer .drawer__inner .drawer__heading,
cart-drawer .drawer__inner a:not(.button) {
  color: #334c58 !important;
}

input,
input::placeholder,
.field__input::placeholder,
input::-webkit-input-placeholder,
select,
textarea {
  font-family: inherit;
  color: inherit !important;
}

button, .button {
  background-color: rgba(var(--color-button),var(--alpha-button-background));
  color: rgb(var(--color-button-text));
  font-family: var(--font-accent-family);
}

.link {
  color: var(--color-link);
}

.shopify-section-group-footer-group {
  overflow-x: hidden;
}

#index .image-with-text__text+.image-with-text__text {
  display: block;
  width: 100%;
}

#index .image-with-text__text+.image-with-text__text p {
  display: flex;
  justify-content: space-between;
}

#index .image-with-text__media img {
  max-width: 100%;
  height: auto;
}

.header {
  display: flex;
  justify-content: space-between;
}

.header__heading {
  order: 2;
}

.header__inline-menu {
  order: 1;
}

.header__icons {
  order: 3;
}

.slideshow__text.banner__box {
  background: transparent;
}

@media (max-width: 749px) {
  .mobile-text-below .slideshow__text.banner__box {
    background: rgb(var(--color-background));
  }
}

.banner__buttons {
  border: 1px solid var(--color-white-light) !important;
}

.banner__buttons:hover {
  border: 1px solid var(--color-goldenrod) !important;
}

/* .banner__buttons a {
  color: var(--color-goldenrod);
} */

/* .banner__buttons a:hover {
  color: var(--color-white);
} */

.slideshow__text>* {
  font-weight: bold;
}

.banner__subheading.banner__text>* {
  font-weight: normal;
  letter-spacing: 4px;
}

.slideshow__controls {
  position: absolute !important;
  top: 74%;
  left: 22.2%;
  left: max(19rem, calc((100vw - var(--page-width) + 36rem - var(--grid-desktop-horizontal-spacing)) / 2));
  border: 0 !important;
}

.slider-button .icon {
  height: 20px !important;
}

/* .slideshow__controls .slider-button--prev,
.slideshow__controls .slider-button--next, */
.slideshow__controls .slideshow__autoplay {
  display: none !important;
}

.slider-counter--dots .slider-counter__link {
  padding: 1rem;
  width: 15px;
  height: 15px;
  background: var(--slider-btns-bg, rgb(var(--color-button)));
  border-radius: 50%;
  margin: 5px;
  border: 2px solid var(--color-medium-grey);
}

.slider-counter--dots .slider-counter__link.slider-counter__link--active {
  border: 2.5px solid var(--color-white);
}

.slider-counter--dots .slider-counter__link .dot {
  display: none !important;
}

.header-wrapper {
  /* background: transparent; */
  /* position: fixed;
  width: 100%;
  top: 0; */
}

#index .header-wrapper {
  background: transparent;
}

.shopify-section-header-sticky .header-wrapper,
.header-wrapper:hover,
#index .header-wrapper:hover {
  background-color: rgb(var(--color-background)) !important;
}

/* .shopify-section-header-sticky .list-menu__item,
.shopify-section-header-sticky .desktop-text {
  color: var(--color-white);
} */

.header-wrapper--border-bottom {
  border-bottom: 0;
}

.header__heading {
  order: 2;
}

/* .hxxl {
  font-size: 40px;
  line-height: 1.3;
} */

.slideshow__text .banner__heading {
  margin-top: 19px;
  /* font-family: var(--font-BentonModDisp-family); */
}

.slideshow__text .banner__heading strong {
  display: block;
  font-weight: 700;
}

.slideshow__text .banner__buttons a {
  /* color: var(--color-goldenrod); */
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.17rem;
  text-transform: uppercase;
  min-height: 32px;
}

/* .slideshow__text .banner__buttons a:hover {
  background-color: var(--color-goldenrod);
  color: var(--color-white);
} */

.featured-collection .slider-arrow-control {
  top: -47px;
}
.featured-collection .slider-button {
  transition: all 0.3s ease;
}
.featured-collection .slider-button[disabled]{
  opacity: 0;
  visibility: hidden;
  width: 0;
}

@media (min-width: 986px) {
  .list-menu__item {
    text-transform: uppercase;
    font-weight: bold;
    /* color: var(--color-white); */
    /* font-family: var(--font-menu-family); */
    font-size: 12px;
    font-weight: 700;
    line-height: 4.25;
    letter-spacing: 0.15rem;
    padding: 0 14px;
  }

  .mobile-facets__item.list-menu__item {
    color: var(--color-foreground);
  }

  /* Hides the icon wrappers this header does not use. The wishlist heart is a
     deliberate one, so it is exempt alongside cart, account and search. */
  .header__icon:not(.header__icon--cart):not(.header__icon--account):not(.header__icon--search):not(.header__icon--wishlist) .svg-wrapper {
    display: none;
  }

  .desktop-text {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    /* color: var(--color-white); */
    text-decoration: none;
    /* font-family: var(--font-menu-family); */
    font-weight: 700;
    line-height: 4.25;
    letter-spacing: 0.15rem;
    padding: 0 14px;
  }

  .desktop-text:hover {
    color: var(--color-goldenrod);
    text-decoration: underline;
  }

  .link,
  .customer a {
    text-decoration: none;
  }

  .header__icon {
    margin-left: 24px;
  }
}

@media (max-width: 985px) {
  .desktop-text {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .collection slider-component:not(.page-width-desktop) {
    padding: 0 5rem;
  }
}

.decorative-inner {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 200px;
}

.circular-text {
  width: 55%;
  position: relative;
  min-height: 435px;
  min-width: 614px;
}

#myCircularText {
  font-size: 18px;
  position: absolute;
  left: 185px;
  top: 20px;
  font-weight: 600;
  /* font-family: var(--font-paragraph-family); */
  /* color: var(--color-white); */
}

#myCircularText div>span:first-child {
  position: static !important;
}

.decorative-text {
  margin-top: 215px;
  /* color: var(--color-goldenrod); */
  text-align: center;
  /* font-family: var(--font-paragraph-family); */
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.7454;
  text-align: center;
  padding-left: 30px;
}

.home-menu {
  margin: 0;
}

@media screen and (max-width: 749px) {
  .home-menu {
    padding-bottom: 25px;
    padding-top: 35px;
  }
  .decorative-text{
    padding-left: 0;
  }
}
@media only screen and (min-width: 1280px) {
  .circular-text {
    padding-right: 9rem;
  }
}

.home-menu li,
.home-menu li a {
  text-transform: uppercase;
  /* color: var(--color-goldenrod); */
  /* font-family: var(--font-spring-family); */
  font-size: 42px;
  text-decoration: none;
  font-weight: 700;
}

.home-menu li a:hover {
  /* color: var(--color-white); */
  text-decoration: underline;
}

.swiper-slide {
  width: auto !important;
}

body#index .collection-list-wrapper.page-width {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

body#index .collection-list-wrapper.page-width ul {
  margin: 0;
  padding: 0;
  /* column-gap: 0;
  row-gap: 0; */
}

body#index .collection-list-wrapper {
  text-align: center;
}

body#index .collection-list-wrapper .card__information {
  text-align: center;
}

body#index .collection-list-wrapper .collection-list__item {
  position: relative;
}

body#index .collection-list-wrapper .card__content {
  position: absolute;
  width: 100%;
  bottom: 27px;
  z-index: 1111;
  /* color: var(--color-white); */
  text-decoration: none;
}

.image-with-text__media {
  border: 0;
}

body#index .image-with-text__media-item {
  position: relative;
}

body#index .image-with-text__media-item::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 1.87px;
  left: auto;
  height: 100%;
  background-color: var(--color-goldenrod);
  right: -45px;
}

body#index .image-with-text__content {
  padding: 3.5rem 7rem 7rem 90px;
}

body#index .image-with-text__media-item--large+.image-with-text__text-item .image-with-text__content {
  padding: 4rem 0 7rem 65px;
}

#index .image-with-text__media-item--large+.image-with-text__text-item .image-with-text__text+.image-with-text__text p {
  display: flex;
  flex-direction: column;
}

body#index .image-with-text__heading {
  color: var(--color-dark-grey);
  /* font-family: var(--font-spring-family); */
  font-style: normal;
  font-weight: 700;
}

body#index .image-with-text__heading.h1 {
  font-size: 32px;
  line-height: 1.6;
  letter-spacing: 0.02rem;
}

body#index .image-with-text__heading.h1 + .image-with-text__text{
  margin-top: 13px;
}

body#index .image-with-text__text {
  margin-top: 25px;
}

body#index .collection-list-wrapper .card__content .full-unstyled-link {
  /* color: var(--color-goldenrod); */
  font-size: 34px;
  text-align: center;
  /* font-family: var(--font-spring-family); */
  font-weight: 700;
  line-height: 1.5294117647058822;
  letter-spacing: 0.02;
}

/* body#index .collection-list-wrapper .card__content .full-unstyled-link:hover {
  color: var(--color-white);
} */

body#index .collection-list-wrapper .card__content .full-unstyled-link .first-word {
  display: block;
}

.collection-shop-link {
  /* color: var(--color-white); */
  /* font-family: var(--font-paragraph-family); */
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.29rem;
  text-transform: uppercase;
}

body#index .collection-list-wrapper .card__content span a {
  /* color: var(--color-white); */
  text-decoration: none;
  text-transform: uppercase;
}

/* .collection-shop-link:hover,
body#index .collection-list-wrapper .card__content span a:hover,
.collection-shop-link:hover a {
  color: var(--color-goldenrod);
} */

body#index .collection-list-wrapper .card__content .full-unstyled-link .icon-wrap,
body#index .collection-list-wrapper .card__content .full-unstyled-link:after {
  display: none;
}

/* Category Filter */

/* .shopify-section.category-selector {
  background-color: var(--color-white-light);
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
} */

.shopify-section.category-selector .container {
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.category-selector h2 {
  /* color: var(--color-goldenrod); */
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.716;
  text-transform: uppercase;
  /* font-family: var(--font-BentonModDisp-family); */
}

.category-selector__content {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-end;
  align-content: center;
}

.dropdown {
  --background: var(--color-white) fff;
  position: relative;
}

.dropdown__button {
  width: 100%;
  display: inline-block;
  background-repeat: no-repeat;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.dropdown__options {
  display: none;
  margin: 0;
  overflow-y: scroll;
  position: absolute;
  left: 0;
  max-height: 215px;
  background: var(--background);
  width: 100%;
  padding: 10px;
  border: 0;
  box-shadow: 2px 26px 36px -14px rgba(0, 0, 0, 0.54);
  -webkit-box-shadow: 2px 26px 36px -14px rgba(0, 0, 0, 0.54);
  -moz-box-shadow: 2px 26px 36px -14px rgba(0, 0, 0, 0.54);
}

.dropdown__options a {
  text-decoration: none;
  color:  var(--color-dark-grey);
  text-transform: uppercase;
  /* font-family: var(--font-BentonModDisp-family); */
}

.dropdown__options::-webkit-scrollbar,
.dropdown__options::-webkit-scrollbar-thumb,
.dropdown__options::-webkit-scrollbar,
.dropdown__options::-webkit-scrollbar-thumb {
  width: 0;
  background: transparent;
  display: none;
}

.dropdown__options label:selected,
.dropdown__options .selected {
  pointer-events: none;
  background-color: var(--color-accent);
}

.dropdown__options label,
.dropdown__options li {
  margin-bottom: 0;
  margin-top: 0;
  cursor: pointer;
}

.dropdown__options label:after,
.dropdown__options li:after {
  content: attr(aria-label);
  font-size: 0.645rem;
}

.dropdown__options label:last-of-type,
.dropdown__options li:last-of-type {
  border-bottom: 0;
}

.dropdown.open {
  z-index: 100;
}

.dropdown.open .dropdown__button {
  opacity: 50;
}

.dropdown.open .dropdown__options {
  display: block;
  background-color: var(--color-white);
}

.dropdown-label {
  display: block;
  width: 100%;
  padding: 5px 10px;
}

.category-selector button {
  font-size: 32px;
  /* background: transparent; */
  border: 0;
  /* border-bottom: 0px solid var(--color-goldenrod); */
  margin-top: 3px;
  /* font-family: var(--font-BentonModDisp-family); */
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  /* color: var(--color-dark-grey); */
  line-height: 1.71;
  margin-left:15px;
      background: transparent;
    font-weight: normal;
    font-size: 30px;
    color: #F5F1EA;
}
}

.category-selector button svg {
  /* margin-top: 20p; */
  position: relative;
  /* top: 8px; */
  vertical-align: middle;
  color: var(--color-blue-grey);
}

#index .collection__title.title-wrapper {
  margin-bottom: 0;
}

.collection__title.title-wrapper .title.h2 {
  /* font-family: var(--font-paragraph-family); */
  margin-bottom: 0;
  font-size: 12px;
  letter-spacing: 4.32px;
}

.featured-collection .slider--destop.grid {
  column-gap: 14px;
}

.slider-counter--dots .slider-counter__link {
  padding: 0 !important;
  width: 15px;
  height: 15px;
  margin: 3px;
}

@media (max-width: 1200px) {

  .desktop-text,
  .list-menu__item {
    padding: 0 5px;
  }
}

@media screen and (max-width: 1100px) {

  /* .header:not(.drawer-menu).page-width,
  .page-width,
  .featured-collection .slider-component-desktop.page-width {
    padding-left: 20px;
    padding-right: 20px;
  } */
}

@media screen and (max-width: 989px) {
  .header:not(.drawer-menu).page-width {
    padding-left: 60px;
  }

  .header__icon .icon {
    color: rgb(var(--color-foreground));
  }

  /* .shopify-section-header-sticky .list-menu__item,
  .shopify-section-header-sticky .desktop-text {
    color: var(--color-black);
  } */

  .footer-block__heading {
    font-size: 20px;
  }
}

@media screen and (max-width: 850px) {
  .circular-text {
    width: 100%;
    min-width: 100%;
  }

  #myCircularText {
    left: 50%;
  }
  
  .home-menu li,
  .home-menu li a {
    font-size: 25px;
  }

  body#index .image-with-text__heading.h1 {
    font-size: 25px;
  }

  body#index .image-with-text__text p strong {
    font-size: 16px;
  }

  body#index .image-with-text__text p a {
    font-size: 13px;
  }

  .category-selector h2 {
    font-size: 20px;
  }

  .category-selector button {
    font-size: 20px;
  }

  .slideshow__controls {
    left: 24.2%;
  }
}

@media screen and (max-width: 768px) {
  .slideshow__controls {
    left: 50%;
    margin-left: -75px;
    top: 80%;
  }
  .header {
    padding: 14px 2rem 14px 4rem !important;
  }
  .mobile-text-below .slideshow__controls {
    top: auto;
    bottom: 24px;
  }

  .mobile-text-below .slideshow__text.banner__box {
    padding-bottom: 80px;
  }

  #index .image-with-text__media img {
    height: auto;
    width: auto;
    position: static;
    display: inline-block;
  }

  #index .image-with-text__media {
    padding-bottom: 0 !important;
    text-align: center;
  }

  body#index .image-with-text__content {
    padding: 4rem 0rem 0rem 0px;
  }

  .footer-block__newsletter+.footer__blocks-wrapper {
    padding-top: 0px !important;
  }

  .footer-block.footer-block--menu.scroll-trigger.animate--slide-in {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 0;
  }

  #myCircularText {
    font-size: 16px;
  }

  .featured-collection .slider-arrow-control {
    top: -36px;
  }

  .decorative-inner {
    padding-bottom: 70px;
  }

  body#index .image-with-text__media-item:before {
    display: none;
  }
}

@media screen and (max-width: 560px) {

  .category-selector h2,
  .category-selector button {
    margin-bottom: 0;
  }

  #index .image-with-text__media img {
    width: 50%;
  }

  .category-selector {
    padding-bottom: 12px;
  }
}

@media screen and (max-width: 485px) {
  #myCircularText {
    display: none;
  }

  .decorative-text {
    margin-top: 0;

    text-align: center;
    padding-left: 0;
  }

  .decorative-inner {
    padding-bottom: 0;
  }

  .circular-text {
    min-height: max-content !important;
  }

  .collection-list {
    flex-direction: column;
  }

  .collection-list-wrapper .grid--2-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }

  .slideshow__controls {
    top: auto;
    bottom: 0;
  }

  .banner__heading.inline-richtext.h1 {
    font-size: 20px;
  }
}

/* Collection page */
/* .collection .card__inner .card__media {
  border: 1px solid gray;
} */

:root {
  --custom-grid-desktop-horizontal-spacing: 16px;
  --custom-grid-desktop-vertical-spacing: 36px;
  --custom-grid-mobile-horizontal-spacing: 16px;
  --custom-grid-mobile-vertical-spacing: 18px;
}

@media screen and (min-width: 750px) {
  .collection-list-title {
    padding-left: 15px;
  }

  .featured-collection .slider--desktop.grid {
    column-gap: var(--custom-grid-desktop-horizontal-spacing);
    row-gap: var(--custom-grid-desktop-vertical-spacing);
  }
}

@media screen and (min-width: 990px) {
  .collection .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--custom-grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--custom-grid-desktop-horizontal-spacing) * 3 / 4);
  }
}

@media screen and (max-width: 749px) {
  .collection .grid {
    column-gap: var(--custom-grid-mobile-horizontal-spacing);
    row-gap: var(--custom-grid-mobile-vertical-spacing);
  }

  .collection .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--custom-grid-mobile-horizontal-spacing) / 2);
  }

  .collection-hero__title+.collection-hero__description {
    /* font-family: var(--font-Work-Sans); */
    text-align: center;
  }
  .collection .slider.slider--tablet .card__information{
    padding-bottom: 0;
  }
}

@media screen and (max-width: 376px) {
  .collection .grid--2-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

.collection__view-all {
  margin-top: 20px;
}
.decorative-text{
  margin: 0;
}
.decorative-inner{
  padding: 0;
}
#myCircularText{
  margin: 0;
  top: 0;
}
.circular-text{
  align-items: center;
  display: flex;
}
#product-grid .card .card__inner .card__media{
  border: 0;
}

/* Home-page styles */
.home-menu li,
.home-menu li a {
  font-size: 40px;
  letter-spacing: 0.8px;
}
.slideshow__text .banner__heading {
  letter-spacing: 0.8px;

}
.slideshow__text .banner__buttons a {
  font-size: 9px;
  letter-spacing: 1.53px;
  /* line-height: 5.71421; */
}
.slideshow__text .banner__buttons a:after {
  box-shadow: none;
  /* line-height: 5.71421; */
}
.slideshow__text .banner__buttons {
  border: 0.935px solid var(--color-white-light) !important;
}
.category-selector h2 {
  margin-top: 12px;
  margin-bottom: 12px;
  font-size: 30px;
  font-weight: 700;
}
body#index .collection-list-wrapper .card__content span a {
  /* font-family: var(--font-paragraph-family); */
  font-size: 13px;
  font-weight: 400;
  line-height: 3.95;
  letter-spacing: 3.77px;
}
#index .image-with-text__media img {
  max-width: 240px;
  margin: auto;
  position: absolute;
  top: 46px;
  left: auto;
  right: 0;
}
body#index .image-with-text__text p a:hover {
  text-decoration: underline;
}
/* Home-page styles */

/* plp-page styles */
.facets-container  .custom-dropdown .dropdown-toggle,
.facets-container  .facets__disclosure, .facets__disclosure-vertical {
  border: 0;
}

/* Collection filters: borderless row with sort inline, aligned to the page
   gutter; a divider line between the filters and the grid. Scoped to
   body.collection-page (every collection template) so the category pages,
   whose body class is collection.category, get the same bar. */
/* One left-aligned row: FILTER BY | CATEGORY | AVAILABILITY | SIZE | SORT, all
   with the same gap. The gap on the form and the inner wrapper match so every
   element is evenly spaced. */
body.collection-page .facets__form {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 26px;
  text-align: left;
}
/* Shrink the SORT control so it's the same size as a filter (hide the redundant
   native select and collapse the toggle to its text width). */
body.collection-page .facet-filters.sorting .facet-filters__field {
  display: none !important;
}
body.collection-page .facet-filters.sorting,
body.collection-page .facet-filters.sorting .custom-dropdown,
body.collection-page .facet-filters.sorting .dropdown-toggle {
  width: max-content !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.collection-page .facet-filters.sorting .dropdown-toggle {
  padding: 4px 2px !important;
}
/* The toggle is now only as wide as its text, so the base right-anchored menu
   opened leftwards off the page when SORT sits at the start of the row. */
body.collection-page .facet-filters.sorting .custom-dropdown .dropdown-menu {
  left: 0 !important;
  right: auto !important;
}
body.collection-page .facets__form > * {
  flex: 0 0 auto;
  margin: 0;
}
body.collection-page .facets__form > .active-facets,
body.collection-page .facets__form > .product-count {
  display: none;
}
/* Hide the theme's FILTER BY heading and render it as the first item INSIDE the
   filter group (::before), so it always sits inline immediately left of CATEGORY
   with the same gap as the other elements. */
body.collection-page .facets__heading {
  display: none !important;
}
body.collection-page .facets__wrapper {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 26px;
}
body.collection-page .facets__wrapper::before {
  content: "FILTER BY";
  white-space: nowrap;
}

/* Every control in the bar is the same kind of thing — a label that opens a
   menu — so they all get one type spec. Previously FILTER BY, the facet labels
   and SORT each carried their own size, weight, tracking and family, which is
   why SORT read as bold beside the rest. */
body.collection-page .facets__wrapper::before,
body.collection-page .facets__summary-label,
body.collection-page .facets-container .custom-dropdown .dropdown-toggle {
  font-family: var(--font-ui-family) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgb(51, 76, 88) !important;
}
body.collection-page .facet-filters.sorting {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
}
body.collection-page .facets-container .facets__disclosure,
body.collection-page .facets-container .custom-dropdown .dropdown-toggle {
  border: 0 !important;
  background: transparent !important;
  padding: 4px 2px !important;
}
/* Simple chevron, 5px after the last letter (replaces the ornate arrow svg). */
body.collection-page .facets__summary svg,
body.collection-page .custom-dropdown .dropdown-toggle svg {
  display: none !important;
}
body.collection-page .facets__summary-label::after,
body.collection-page .facets__summary > div > span::after,
body.collection-page .custom-dropdown .dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  vertical-align: middle;
}
body.collection-page .facets-container {
  border-bottom: 1px solid rgba(51, 76, 88, 0.16);
  padding-bottom: 16px;
  margin-bottom: 28px;
}
.facets-container svg path {
  stroke: rgba(var(--color-secondary-button-text));
}
.custom-dropdown .dropdown-toggle svg {
  top: 50%;
  transform: translateY(-50%);
}
/* plp-page styles */ 















/* Footer stars animation removed (logo section + bottom bar). */
.custom-footer__stars,
.stars-wrapper,
.shopify-section-group-footer-group .stars {
  display: none !important;
}

/* ADDED BY MICHAEL FOR STARS ANIMATION IN FOOTER 11/5 */

.shopify-section.shopify-section-group-footer-group {
  position: relative;
}


.shopify-section.shopify-section-group-footer-group footer.footer {
  z-index: 2;
  position: relative;
}

.footer-block--newsletter {
  padding-bottom: 30px;
}

.stars-wrapper { 
  position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  /* background-image: radial-gradient(ellipse at center, rgba(47,67,67,1) 0%, rgba(47,67,67,1) 50%, rgba(25,43,43,1) 100%);
  background: -moz-radial-gradient(center, ellipse cover, rgba(47,67,67,1) 0%, rgba(47,67,67,1) 50%, rgba(25,43,43,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(47,67,67,1)), color-stop(50%,rgba(47,67,67,1)), color-stop(100%,rgba(17,17,34,1)));
  background: -webkit-radial-gradient(center, ellipse cover,rgba(47,67,67,1) 0%, rgba(47,67,67,1) 50%, rgba(25,43,43,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(47,67,67,1) 0%, rgba(47,67,67,1) 50%, rgba(25,43,43,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(47,67,67,1) 0%, rgba(47,67,67,1) 50%, rgba(25,43,43,1) 100%); */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f4343', endColorstr='#192B2B', GradientType=1);
  background-position: 50% 0%;
  background-size: 150vmax 150vmax;
  background-repeat: no-repeat;
  background-color: transparent;
	}

  
@keyframes stars {
  0% {
    transform: translateY(110vh) translateZ(0);
  }
  100% {
    transform: translateY(-10vh) translateZ(0);
  }
}

@keyframes twinkle {
  0%, 80%, 100% {
    opacity: 0.7;
    box-shadow: 0 0 0 white, 0 0 0 white;
  }
  95% {
    opacity: 1;
    box-shadow: 0 0 2px white, 0 0 4px white;
  }
}
	

.stars .container {
  position: absolute;
  animation: stars linear infinite;
}

.stars .container .star {
  animation: twinkle linear infinite;
  border-radius: 100%;
  transform: translateZ(0);
  display: block;
}

/* Infinite drifting and twinkling is exactly the kind of motion that triggers
   vestibular symptoms, and there is no control to stop it, so honour the
   system-level preference (WCAG 2.3.3, and 2.2.2 for motion that never ends).
   The stars stay visible — they just hold still. */
@media (prefers-reduced-motion: reduce) {
  .stars .container,
  .stars .container .star {
    animation: none;
  }
}


/* .slider-type-two {
    margin-bottom: 80px;
    margin-top: 80px;
} */

.header__icon span {
  height:100%;
}

/* "Slider with content right" carousel heading — ~20% smaller. */
.slider-type-two .banner__heading.h1 {
  font-size: 27px !important;
}
@media screen and (max-width: 1024px) {
  .slider-type-two .banner__heading.h1 {
    font-size: 20px !important;
  }
}

/* "You may also like": all four cards on one row. Dawn sizes .grid__item from
   --grid-desktop-horizontal-spacing (8px here) while this grid's column-gap is
   20px, so four cards + gaps overflow and the fourth wraps. Size the items from
   the gap that is actually rendered. */
@media screen and (min-width: 990px) {
  .related-products .grid--4-col-desktop .grid__item {
    width: calc((100% - 60px) / 4);
    max-width: calc((100% - 60px) / 4);
  }
}

/* "You may also like": no image hover-zoom. */
.related-products .media--hover-effect > img,
.related-products .card .media img,
.related-products .card:hover .media img,
.related-products .card__media img {
  transform: none !important;
  scale: 1 !important;
  transition: none !important;
}

/* Product gallery (thumbnail_slider): thumbnails fill the full main-image height,
   distributed so the last one aligns with the bottom of the main image, and stay
   the same size no matter how many there are. */
@media screen and (min-width: 750px) {
  /* Thumbnails stack vertically; the nav (arrows) sits below them. The slider
     stretches to the media-gallery height (= main image) via flex align-self. */
  media-gallery { align-items: stretch !important; }
  .thumbnail-slider {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    align-self: stretch !important;
  }
  /* Few images (no scrolling): thumbnails fill the height, last aligns to bottom. */
  .thumbnail-slider--no-slide .thumbnail-list {
    height: 100% !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    row-gap: 12px;
  }
  /* Many images: constrain to the main-image height and scroll (arrows below). */
  .thumbnail-slider:not(.thumbnail-slider--no-slide) .thumbnail-list {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: none;
  }
  .thumbnail-slider:not(.thumbnail-slider--no-slide) .thumbnail-list::-webkit-scrollbar {
    display: none;
  }
  .thumbnail-slider--no-slide .thumbnail-list__item {
    flex: 0 0 auto !important;
  }

  /* Both arrows below the thumbnails, side by side, pointing up/down. */
  .thumbnail-nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    width: 100%;
  }
  .thumbnail-nav .slider-button {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }
  .thumbnail-nav .slider-button--prev .svg-wrapper { display: inline-flex; transform: rotate(180deg); }
  .thumbnail-nav .slider-button--next .svg-wrapper { display: inline-flex; transform: rotate(0deg); }
}

/* === PDP Mockup Styles === */

/* Vendor label above product title */
.product__vendor-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.6);
  margin: 0 0 8px 0;
}

/* "About This Piece" section */
.product__about-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--color-foreground), 0.1);
}

.product__about-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.75);
  margin: 0 0 12px 0;
}

.product__about-body {
  font-size: 11px;
  line-height: 1.7;
  color: rgba(var(--color-foreground), 0.85);
  text-align: left;
}
/* Description text: 11px, left-aligned, normal weight — let the WYSIWYG's own
   <strong>/<b> control emphasis (those keep their bold). */
.product__about-body,
.product__about-body p,
.product__about-body ul,
.product__about-body ol,
.product__about-body li {
  font-size: 11px !important;
  text-align: left !important;
  font-weight: 400 !important;
}

/* Product accordions (Details / Jewelry Care / Free US Shipping). */
.product__accordions {
  margin-top: 24px;
  border-top: 1px solid rgba(var(--color-foreground), 0.1);
}
.product__accordion {
  border-bottom: 1px solid rgba(var(--color-foreground), 0.1);
}
.product__accordion-summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgb(var(--color-foreground));
}
.product__accordion-summary::-webkit-details-marker { display: none; }
.product__accordion-summary::after {
  content: "+";
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  margin-left: 12px;
}
.product__accordion[open] .product__accordion-summary::after { content: "\2013"; }
.product__accordion-body {
  padding: 0 0 16px;
  font-size: 11px;
  line-height: 1.7;
  text-align: left;
  color: rgba(var(--color-foreground), 0.85);
}
.product__accordion-body ul { margin: 0; padding-left: 18px; }
.product__accordion-body p { font-size: 11px; text-align: left; }

/* Specs 2-column grid */
.product__specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--color-foreground), 0.1);
}

.product__spec-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product__spec-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--color-foreground), 0.5);
}

.product__spec-value {
  font-size: 13px;
  color: rgba(var(--color-foreground), 0.85);
}

/* Feature links row at bottom */
.product__feature-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--color-foreground), 0.1);
}

.product__feature-link {
  font-size: 12px;
  color: rgba(var(--color-foreground), 0.65);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.product__feature-link:hover {
  color: rgb(var(--color-foreground));
  text-decoration: underline;
}

/* === Nav Dropdown: remove arrow, hover open, drop from top === */
@media screen and (min-width: 990px) {
  /* Remove caret arrow from dropdown trigger */
  .header__inline-menu .header__menu-item .icon-caret {
    display: none !important;
  }

  /* Position submenu directly below the nav bar */
  header-menu > details > .header__submenu {
    top: 100% !important;
  }

  /* Open on hover — override the JS-hidden state */
  .header__inline-menu header-menu:hover > details > .header__submenu {
    opacity: 1 !important;
    transform: translateY(0) !important;
    z-index: 2 !important;
  }
}

/* All H1s: lightest weight the loaded font offers (browser falls back to the
   nearest available face, so 100 = thinnest possible for any given font). */
h1,
.h1 {
  font-weight: 100 !important;
}

/* Collection & product page title (h1) typography — matched size on both pages.
   Excludes .ppdp-title: the rebuilt product page sets its own title size from
   the section's "Title size" setting, and this !important rule was silently
   winning over it and pinning every product title to 30px. */
.collection-hero__title,
.product__title h1:not(.ppdp-title) {
  font-family: var(--font-display-family) !important;
  font-size: 30px !important;
  line-height: 1.05;
}

/* Homepage collection-list: card text in the dark brand color (both blocks). */
body#index .collection-list-wrapper .card__heading,
body#index .collection-list-wrapper .card__heading a,
body#index .collection-list-wrapper .card__content,
body#index .collection-list-wrapper .card__content a,
body#index .collection-list-wrapper .card__content span a,
body#index .collection-list-wrapper .full-unstyled-link,
body#index .collection-list-wrapper .collection-shop-link {
  color: #334C58 !important;
}

/* Collection pages: the #FBFAF8 page colour from the client brief
   (2026-09-23; #FAF9F5 before). The section scheme wrappers are made
   transparent so the body background actually shows through. */
body.collection {
  background-color: #FBFAF8 !important;
  overflow-x: clip;
}
/* Collection title a touch smaller. */
body.collection .collection-hero__title {
  font-size: 26px !important;
}
body.collection .shopify-section-group-header-group,
body.collection #MainContent,
body.collection #MainContent > .shopify-section,
body.collection #MainContent .shopify-section > .gradient,
body.collection #MainContent .collection.gradient,
body.collection #MainContent .collection-hero.gradient {
  background-color: transparent !important;
  background-image: none !important;
}

/* Transparent header overlaid on the page's hero image (journal/blog and
   collection pages). The header is absolutely positioned so the hero starts
   at the very top, behind it. */
body.blog .section-header,
body.collection .section-header {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 5;
}
/* Transparent while over the hero at the top... */
body.blog .header-wrapper,
body.collection .header-wrapper {
  background: transparent !important;
}
/* ...solid once scrolled past the hero so it's readable over the content. */
body.blog .scrolled-past-header .header-wrapper,
body.collection .scrolled-past-header .header-wrapper {
  background-color: rgb(var(--color-background)) !important;
}
body.blog .header-wrapper--border-bottom,
body.collection .header-wrapper--border-bottom {
  border-bottom: 0 !important;
}

/* Heading case follows the display role (title case since the 2026-09-23
   IvyPresto change; set --font-display-case back to uppercase to restore). */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .h0,
html body .h1,
html body .h2,
html body .h3,
html body .h4,
html body .h5,
html body .hxl,
html body .hxxl {
  text-transform: var(--font-display-case) !important;
}

/* ============================================================
   Header + collection refinements
   ============================================================ */

/* Header: double the gap between the last nav link (Contact) and the first
   right-side icon (search). Search is a details-modal, so it doesn't pick up
   the 2rem inter-link margin — set an explicit doubled gap here. */
.header__nav-right > .header__search {
  margin-left: 2.4rem;
}

/* Header: make the right-side icons (search, account, wishlist, cart) ~33%
   smaller. They render at their .icon size — search/account 2rem, cart 4.4rem.

   The cart needs its own size because its artwork is drawn small inside a 40x40
   viewBox while the others fill theirs, so an equal box gives an unequal glyph.
   Sized by the ink instead: at 2.8rem the bag's drawn height is 15.6px against
   15.2 for the account figure and 14.8 for the search lens, so the four read as
   one size in the row. It was 3.5rem, which drew the bag 19.5px tall — visibly
   taller than its neighbours. Re-measure the ink, not the box, if the cart
   artwork is ever swapped. */
html body .header__icon .icon {
  width: 1.6rem !important;
  height: 1.6rem !important;
}
html body .header__icon--cart .icon {
  width: 2.8rem !important;
  height: 2.8rem !important;
}
html body .header__icon--account shop-user-avatar {
  --shop-avatar-size: 2.24rem;
}

/* "We design and make" category selector: match the dropdown (PENDANTS) text to
   the heading size. Desktop 30px set on .category-selector button above; keep
   the .dropdown__button in sync at the shared mobile breakpoints via that rule. */

/* Collection page: the description is not bold. */
html body .collection-hero__description,
html body .collection-hero__description * {
  font-weight: 400 !important;
}

/* Collection page filters/sort dropdown: not italic. */
html body .mobile-facets__summary,
html body .facets__summary-label,
html body .custom-dropdown .dropdown-toggle {
  font-style: normal !important;
}

/* Product cards show the photo edge to edge across the site (2026-09-24
   client feedback): the collection grid, the homepage best sellers and "You
   may also like" all fill the square tile, the same scale as the product page
   gallery. An earlier pass inset these photos by 12.5% to match the homepage
   cards; the client read that as zoomed out and framed ("white border"),
   including on the hover image. The product photos are square, so cover only
   crops the lifestyle hover shots, which is what fills the tile. */
#product-grid .card__media img {
  box-sizing: border-box !important;
  padding: 0 !important;
  object-fit: cover !important;
}

/* The tile behind the photo stays white so a photo that loads late, or one
   that isn't quite square, never shows the cream card scheme around it. */
#product-grid .card__inner {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Product page ground. The info column sits on this as a white panel, so the
   page itself is a shade off-white rather than the same white. */
body.product,
body.product .pacem-pdp {
  background-color: #FBFAF8 !important;
}

/* The gallery tiles carried a hairline border; the photography is on white and
   reads better without a frame around it. */
body.product .product-media-container {
  border: 0 !important;
}

/* Links inside the product description were rendering as the browser's default
   blue; nothing in the theme claimed them. Brand ink, underlined so they still
   read as links without the colour doing that work alone. */
.pacem-pdp .ppdp-intro a,
.pacem-pdp .ppdp-row__content a {
  color: #334C58 !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pacem-pdp .ppdp-intro a:hover,
.pacem-pdp .ppdp-row__content a:hover {
  opacity: 0.65;
}

/* Collection page product grid: smaller product titles, ranged left under the
   image so the card text starts on the same edge as the filter row and the
   collection title above it. .card--standard sets text-align:center and every
   text node inherits it, so the override is applied to the text containers.
   Product names here use the body copy font (not the UI/eyebrow font every
   other card__heading gets from the sitewide rule above) and title case
   instead of the "all heading-type text is uppercase" rule further down —
   the #product-grid ID beats both of those !important rules on specificity. */
#product-grid .card__heading,
#product-grid .card__heading a {
  font-family: var(--font-copy-family) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-transform: capitalize !important;
}

#product-grid .card__content,
#product-grid .card__information,
#product-grid .card-information,
#product-grid .card__heading,
#product-grid .card__heading a,
#product-grid .price,
#product-grid .price__container,
#product-grid .price__regular,
#product-grid .price__sale {
  text-align: left !important;
}

/* text-align alone leaves short titles looking centred: .card__information is
   a grid whose single track is sized to its content and centred by
   justify-content, so a one-line title sits in a narrow box in the middle of
   the card. Range the track left and the text starts on the image's edge. */
#product-grid .card__information {
  justify-content: start !important;
}

/* Jewelry Product Grid ("NOW SHOWING"): "shop everything" plain right-aligned
   link under the products. */
.jpg-shop-everything {
  text-align: right;
  margin-top: 16px;
}
.jpg-shop-everything-link {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  color: rgb(var(--color-foreground));
}
.jpg-shop-everything-link:hover {
  opacity: 0.6;
}

/* Homepage product feed: "shop everything" as a plain, right-aligned link under
   the products (smaller than the NOW SHOWING heading, no underline/border). */
.featured-collection .collection__view-all--right {
  text-align: right;
  margin-top: 12px;
}
.featured-collection .collection__view-all--right .shop-everything-link {
  display: inline-block;
  font-size: 13px;
  text-transform: none;
  text-decoration: none;
  border: 0;
  letter-spacing: 0.04em;
  color: rgb(var(--color-foreground));
}
.featured-collection .collection__view-all--right .shop-everything-link:hover {
  opacity: 0.6;
}

/* Cart drawer upsell callout: jewelry-cleaner (or whatever product is set in
   Theme Settings > Cart) shown above the subtotal while the cart has items.
   Config-driven (settings.cart_drawer_upsell_product) rather than hardcoded,
   since the product to promote is a merchant choice, not a code one. */
.cart-drawer__upsell {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 1.9rem 1.5rem 0;
  padding: 1.4rem 1.6rem;
  border: 1px solid rgba(var(--color-foreground), 0.15);
  background: rgba(var(--color-foreground), 0.03);
}
.cart-drawer__upsell-media {
  flex: 0 0 auto;
  width: 56px;
}
.cart-drawer__upsell-image {
  display: block;
  width: 56px;
  height: auto;
}
.cart-drawer__upsell-content {
  flex: 1 1 auto;
  min-width: 0;
}
.cart-drawer__upsell-heading {
  margin: 0 0 4px;
  font-family: var(--font-ui-family);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(51, 76, 88);
}
.cart-drawer__upsell-title {
  display: block;
  margin: 0 0 4px;
  font-family: var(--font-copy-family);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.cart-drawer__upsell-price {
  font-size: 13px;
  margin: 0 0 8px;
}
.cart-drawer__upsell-button {
  min-height: auto;
  padding: 6px 16px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* ==========================================================================
   2026-09-24 client feedback (Loom videos + "PACEM WEB EDITS" doc)
   ========================================================================== */

/* Body copy is untracked in the designs; Dawn tracks body text 0.06rem, which
   crowded the paragraphs. Elements that want tracking (nav, buttons, eyebrows)
   set their own letter-spacing, so resetting the inherited value only touches
   running copy. Grayscale smoothing draws Aktiv Grotesk and Presicav lighter on
   macOS, where subpixel rendering made them read bold (only their Regular cuts
   are loaded, so there is no lighter weight to switch to). */
html body {
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The menu bar is pure white on every page, at the top and after scrolling,
   so it always separates from the #FBFAF8 page. It used to go transparent on
   the homepage, collections and the journal. */
html body .header-wrapper,
html body#index .header-wrapper,
html body.collection .header-wrapper,
html body.blog .header-wrapper,
html body .shopify-section-header-sticky .header-wrapper {
  background-color: #FFFFFF !important;
}

/* Collection grid price at the product name's size (client, 2026-09-28;
   13px before, 15px before 2026-09-24). */
#product-grid .price,
#product-grid .price .price-item {
  font-size: 12px !important;
  font-weight: 400 !important;
}
#product-grid .card__heading,
#product-grid .card__heading a,
#product-grid .price,
#product-grid .price .price-item {
  letter-spacing: 0 !important;
}


/* Klaviyo signup teaser: the "JOIN THE LIST" tab pinned to the bottom-left
   corner. The client asked for it gone (2026-09-24); the footer already has the
   Join The List band. Klaviyo renders it client-side as
   div.kl-teaser-<form id>, so it can only be hidden here, not left out of the
   markup. Turning the teaser off in the Klaviyo form editor makes this rule a
   no-op.
   Hidden with visibility, never display: none. Closing the popup hands off to
   the teaser, and Klaviyo waits for the teaser to render before it removes the
   popup overlay and body.klaviyo-prevent-body-scrolling. With display: none that
   never happens, so an invisible overlay froze the page (2026-09-28). */
html body div[class*="kl-teaser-"],
html body div[class*="kl-teaser-"] * {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Cart page (client, 2026-09-28) ─────────────────────────────────────
   Add to Bag now goes to /cart instead of opening the drawer (theme setting
   cart_type = page). On desktop the page is two columns: line items on the
   left, an order summary card on the right (main-cart-footer's subtotal block
   renders the card's contents). Only when the cart has items; the empty state
   keeps Dawn's single column. */
body.cart .pacem-summary__heading {
  margin: 0 0 20px;
  font-family: var(--font-display-family) !important;
  font-size: 26px;
  font-weight: var(--font-display-weight, 100) !important;
  letter-spacing: var(--font-display-tracking, 0);
  color: #324C57;
}
body.cart .pacem-summary__rows {
  margin: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(50, 76, 87, 0.15);
}
body.cart .pacem-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}
body.cart .pacem-summary__row dt,
body.cart .pacem-summary__row dd {
  margin: 0;
  font-family: var(--font-copy-family) !important;
  font-size: 14px;
  line-height: 1.5;
  color: #324C57;
}
body.cart .pacem-summary__row dd { text-align: right; }
body.cart #main-cart-footer .tax-note { display: none; }
body.cart #main-cart-footer .totals {
  justify-content: space-between;
  margin-top: 16px;
}
body.cart #main-cart-footer .totals__total {
  font-family: var(--font-copy-bold-family) !important;
  font-size: 15px;
  font-weight: 700 !important;
  letter-spacing: 0;
  color: #324C57;
}
body.cart #main-cart-footer .totals__total-value {
  font-family: var(--font-copy-bold-family) !important;
  font-size: 15px;
  font-weight: 700 !important;
  color: #324C57;
}
body.cart #main-cart-footer .cart__ctas,
body.cart #main-cart-footer .cart__dynamic-checkout-buttons {
  margin-top: 20px;
}
body.cart #main-cart-footer .cart__checkout-button {
  width: 100%;
  max-width: none;
}

/* Empty cart "Continue shopping": the cart section's colour scheme gave it
   gold text, so it's styled like Add to Bag (client, 2026-09-29). */
body.cart .cart__warnings .button {
  min-height: 52px;
  padding: 0 40px;
  border: 0;
  border-radius: 0;
  background: #324C57;
  box-shadow: none;
  color: #FFFFFF;
  font-family: var(--font-ui-family, 'PRESICAV', sans-serif) !important;
  font-size: 12px;
  font-weight: 400 !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: opacity 0.25s ease;
}
body.cart .cart__warnings .button::before,
body.cart .cart__warnings .button::after {
  content: none;
}
body.cart .cart__warnings .button:hover {
  opacity: 0.88;
}

@media screen and (min-width: 990px) {
  body.cart #MainContent:has(#main-cart-footer:not(.is-empty)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    column-gap: 56px;
    align-items: start;
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 5rem 80px;
  }
  body.cart #MainContent:has(#main-cart-footer:not(.is-empty)) .page-width {
    max-width: none;
    padding: 0;
  }
  body.cart #MainContent:has(#main-cart-footer:not(.is-empty)) .cart__footer-wrapper {
    position: sticky;
    top: calc(var(--header-height, 93px) + 24px);
    margin-top: 36px;
  }
  body.cart #MainContent:has(#main-cart-footer:not(.is-empty)) .cart__footer {
    display: block;
    padding: 36px 32px;
    background: #FFFFFF;
    border: 1px solid rgba(50, 76, 87, 0.12);
  }
  body.cart #MainContent:has(#main-cart-footer:not(.is-empty)) .cart__blocks {
    width: 100%;
  }
}

/* ── Header search panel (client, 2026-09-28) ───────────────────────────
   A full-width white panel: a large serif input on a single rule, then
   "Suggested" category links beside a row of best sellers until the shopper
   types, when Dawn's predictive results take their place as product tiles.
   Idle markup is in snippets/header-search.liquid. */
.header__search .search-modal {
  bottom: auto;
  height: auto;
  min-height: 100%;
  max-height: 100vh;
  overflow-y: auto;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(50, 76, 87, 0.12);
  /* Dims the page below; Dawn's overlay assumed a header-height modal. */
  box-shadow: 0 0 0 100vmax rgba(50, 76, 87, 0.3);
}
.header__search .search-modal__content {
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 1440px;
  height: auto;
  margin: 0 auto;
  padding: 44px 64px 56px;
  bottom: auto;
  top: auto;
}
.header__search .search-modal__form {
  flex: 1 1 100%;
  max-width: none;
}
.header__search .search-modal__close-button {
  position: absolute;
  top: 20px;
  right: 24px;
  margin: 0;
}
.header__search .search-modal .field {
  border-bottom: 1px solid rgba(50, 76, 87, 0.3);
}
.header__search .search-modal .field::before,
.header__search .search-modal .field::after,
.header__search .search-modal .field__input:focus,
.header__search .search-modal .field__input:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}
.header__search .search-modal .field__label {
  display: none;
}
html body .header__search .search-modal .search__input {
  height: 76px;
  padding: 0 56px 0 0 !important;
  border: 0;
  background: transparent;
  font-family: var(--font-display-family) !important;
  font-size: 44px;
  font-weight: var(--font-display-weight, 100) !important;
  letter-spacing: var(--font-display-tracking, 0);
  color: #324C57;
}
html body .header__search .search-modal .search__input::placeholder {
  opacity: 1;
  font-family: var(--font-display-family) !important;
  font-weight: var(--font-display-weight, 100) !important;
  color: rgba(50, 76, 87, 0.45);
}
.header__search .search-modal .field__button {
  color: #324C57;
}
.header__search .search-modal .search__button {
  right: 0;
}
.header__search .search-modal .reset__button {
  right: 44px;
}

.pacem-search-idle {
  display: flex;
  flex: 1 1 100%;
  gap: 64px;
  margin-top: 36px;
}
.header__search .search-modal__content:has(predictive-search[open]) .pacem-search-idle {
  display: none;
}
.pacem-search-idle__links {
  flex: 0 0 200px;
}
.pacem-search-idle__products {
  flex: 1 1 auto;
  min-width: 0;
}
html body .pacem-search-idle__heading,
html body .header__search .predictive-search__heading {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  font-family: var(--font-ui-family) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #324C57;
}
.pacem-search-idle__links ul {
  display: grid;
  gap: 14px;
  margin: 0;
}
html body .pacem-search-idle__links a {
  font-family: var(--font-copy-family) !important;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: #324C57;
  text-decoration: none;
}
.pacem-search-idle__links a:hover { opacity: 0.6; }

.pacem-search-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}
.pacem-search-tile {
  display: block;
  color: #324C57;
  text-decoration: none;
}
.pacem-search-tile__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: #FFFFFF;
}
html body .pacem-search-tile__title,
html body .pacem-search-tile__price,
html body .header__search #predictive-search-results-products-list .predictive-search__item-heading,
html body .header__search #predictive-search-results-products-list .price,
html body .header__search #predictive-search-results-products-list .price-item {
  display: block;
  margin: 10px 0 0;
  font-family: var(--font-copy-family) !important;
  font-size: 12px;
  font-weight: 400 !important;
  line-height: 1.5;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left;
  white-space: normal;
  color: #324C57;
}

/* Predictive results inside the panel, not a dropdown. */
.header__search .predictive-search {
  position: static;
  max-height: none;
  margin-top: 36px;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.header__search .predictive-search__results-groups-wrapper {
  gap: 64px;
  border: 0;
  padding: 0;
}
.header__search .predictive-search__result-group:first-child:not(:only-child) {
  flex: 0 0 200px;
}
.header__search .predictive-search__result-group:last-child {
  flex: 1 1 auto;
  min-width: 0;
}
html body .header__search .predictive-search__item-heading,
html body .header__search .predictive-search__item-query-result,
html body .header__search .predictive-search__item-query-result * {
  font-family: var(--font-copy-family) !important;
  font-size: 14px;
  font-weight: 400 !important;
  text-align: left;
  color: #324C57;
}
.header__search .predictive-search__item {
  padding: 0;
}
.header__search .predictive-search__list-item:hover > .predictive-search__item,
.header__search .predictive-search__list-item[aria-selected='true'] > .predictive-search__item {
  background: transparent;
}
.header__search #predictive-search-results-products-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
}
.header__search .predictive-search__item--link-with-thumbnail {
  display: block;
}
.header__search .predictive-search__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: #FFFFFF;
}
.header__search #predictive-search-results-products-list .predictive-search__item-content {
  display: block;
  margin-top: 10px;
}
html body .pacem-search-tile__price,
html body .header__search #predictive-search-results-products-list .price,
html body .header__search #predictive-search-results-products-list .price-item {
  margin-top: 2px;
}
.header__search #predictive-search-results-queries-list,
.header__search .predictive-search__result-group:first-child .predictive-search__results-list {
  display: grid;
  gap: 14px;
}
.header__search .predictive-search__search-for-button {
  margin-top: 28px;
  border-top: 1px solid rgba(50, 76, 87, 0.12);
}

@media screen and (max-width: 989px) {
  .header__search .search-modal__content { padding: 56px 24px 40px; }
  html body .header__search .search-modal .search__input { height: 56px; font-size: 30px; }
  .pacem-search-idle { flex-direction: column; gap: 32px; }
  .pacem-search-idle__links { flex-basis: auto; }
  .pacem-search-tiles,
  .header__search #predictive-search-results-products-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}