/** Shopify CDN: Minification failed

Line 1081:85 Unexpected "{"

**/
/* ==========================================================================
   Carat & Cluster — content sections (Horizon build)
   Header, announcement bar, cart, search and footer are Horizon's own.
   This file styles ONLY the Carat & Cluster content sections and is scoped
   to .cc-section-root so it cannot leak into Horizon's components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand token defaults.
   These make the stylesheet work on its own. The {% style %} block in
   layout/theme.liquid re-declares the same variables from your theme
   settings and overrides these, so merchants keep full control — but if
   that block is missing, or the settings have not been merged yet, the
   design still renders correctly instead of collapsing to unstyled HTML.
   -------------------------------------------------------------------------- */
:root {
  --cc-black: #000000;
  --cc-white: #FFFFFF;
  --cc-gold: #C9A24B;
  --cc-gold-light: #E8C873;
  --cc-sale: #C8102E;
  --cc-bg: #FFFFFF;
  --cc-text: #000000;
  --cc-font-display: 'UtileDisplay', Georgia, 'Times New Roman', serif;
  --cc-font-display-em: 'Editor Note', Georgia, serif;
  --cc-font-body: 'Area', Helvetica, Arial, sans-serif;
  --cc-font-product-title: 'Area', Helvetica, Arial, sans-serif;
  --cc-font-price: 'Area', Helvetica, Arial, sans-serif;
  --cc-font-accent: 'Editor Note', Georgia, serif;
  --cc-font-size-base: 17px;
}

.cc-section-root *,
.cc-section-root *::before,
.cc-section-root *::after { box-sizing: border-box; }

.cc-section-root :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd) {
  margin: 0;
  padding: 0;
}

.cc-section-root :where(a) { color: inherit; text-decoration: none; }
.cc-section-root :where(img) { display: block; max-width: 100%; }
.cc-section-root :where(button) { font-family: inherit; }
.cc-section-root :where(ul, ol) { list-style: none; }

.cc-section-root {
  font-family: var(--cc-font-body);
  font-size: var(--cc-font-size-base);
  color: var(--cc-text);
  background: var(--cc-bg);
}
.page-wrapper--drawer-open {
    margin-right: 0 !important;
}
.theme-drawer__dialog[open] {
    z-index: 99999 !important;
}
.cc-section-root ::selection { background: var(--cc-gold-light); color: var(--cc-black); }

.cc-section-root :focus-visible {
  outline: 2px solid var(--cc-gold);
  outline-offset: 2px;
}
span.price-item__group.price {
    font-size: 14px;
    color: #c8102e;
}
span.price-item__group.price-item--regular.compare-at-price {
    font-size: 12px !important;
}
.cc-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- Typography */
.cc-display {
  font-family: var(--cc-font-display);
  font-weight: 300;
  margin: 0;
}

.cc-eyebrow {
    font-size: 12px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--cc-gold);
    margin-bottom: 16px;
    font-weight: 600;
}

.cc-section-head { text-align: center; margin-bottom: 56px; }

.cc-section-title {
  font-family: var(--cc-font-display);
  font-weight: 300;
  font-size: 44px;
  line-height: 1.15;
  margin: 0;
}

.cc-section-title em,
.cc-display em { font-style: italic; }

/* Italic emphasis inside headings uses the secondary display face.
   Deliberately scoped to headings — <em> in body copy stays on the body font. */
.cc-section-root :is(h1, h2, h3, h4) em,
.cc-section-title em,
.cc-display em,
.cc-hero__title em,
.cc-banner__title em,
.cc-about__title em,
.cc-split__title em {
  font-family: var(--cc-font-display-em);
  font-style: italic;
  font-weight: 100;
}

/* -------------------------------------------------------------- Link styles */
.cc-link-underline {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
  transition: color 260ms ease, border-color 260ms ease;
}
.cc-link-underline:hover { color: var(--cc-gold); border-color: var(--cc-gold); }
.cc-link-underline--gold { border-bottom-color: var(--cc-gold-light); }

.cc-btn {
    display: inline-block;
    font-family: var(--cc-font-body);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 16px 26px;
    border: 1px solid var(--cc-black);
    background: transparent;
    color: var(--cc-black);
    cursor: pointer;
    transition: background .26s ease,color .26s ease;
}
.cc-btn:hover { background: var(--cc-black); color: var(--cc-white); }

.cc-btn--solid {
  background: var(--cc-black);
  color: var(--cc-white);
  padding: 17px 38px;
}
.cc-btn--solid:hover { background: var(--cc-white); color: var(--cc-black); }

/* --------------------------------------------------------------------- Hero */
.cc-hero {
  position: relative;
  height: var(--cc-hero-h, 760px);
  overflow: hidden;
  background: var(--cc-white);
}

.cc-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}
.cc-hero__slide.is-active { opacity: 1; pointer-events: auto; }

.cc-hero__media,
.cc-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, var(--cc-hero-shade-l, .34)) 0%,
    rgba(0, 0, 0, var(--cc-hero-shade-m, .08)) 42%,
    rgba(0, 0, 0, var(--cc-hero-shade-r, .5)) 100%);
}

.cc-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 8vw;
}
.cc-hero__content--right { justify-content: flex-end; }
.cc-hero__content--left { justify-content: flex-start; }
.cc-hero__content--center { justify-content: center; }

.cc-hero__copy {
  max-width: 560px;
  color: var(--cc-white);
}
.cc-hero__copy--right { text-align: right; }
.cc-hero__copy--left { text-align: left; }
.cc-hero__copy--center { text-align: center; }

.cc-hero__eyebrow {
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.cc-hero__title {
  font-family: var(--cc-font-display);
  font-weight: 300;
  font-size: 68px;
  line-height: 1.02;
  margin: 0 0 20px;
}
.cc-hero__text {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.65;
  margin: 0 0 32px;
}
.cc-hero__text p { margin: 0 0 12px; }
.cc-hero__text p:last-child { margin-bottom: 0; }

.cc-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, .85) !important;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 200ms ease;
  opacity:0;
}
section.cc-hero:hover .cc-hero__arrow {
  opacity:1;
}
.cc-hero__arrow:hover { background: var(--cc-white); }
.cc-hero__arrow--prev { left: 22px; }
.cc-hero__arrow--next { right: 22px; }

.cc-hero__controls {
  position: absolute;
  left: 0; right: 0; bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 5;
}
.cc-hero__dot {
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, .6);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: width 400ms ease, background 400ms ease;
}
.cc-hero__dot.is-active { width: 52px; background: var(--cc-gold-light); }

.cc-hero__autoplay {
  margin-left: 10px;
  background: none;
  border: 1px solid rgba(255, 255, 255, .65);
  color: var(--cc-white);
  font-family: var(--cc-font-body);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 6px 11px;
  cursor: pointer;
}

/* --------------------------------------------------------- Category tiles */
.cc-cats {
    display: grid;
    grid-template-columns: repeat(var(--cc-cats-cols, 6), 1fr);
    margin-top: 1.5px;
}

.cc-cat {
  display: block;
  border-right: 1px solid var(--cc-white);
}
.cc-cat__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cc-white);
}
.cc-cat__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms ease;
}
.cc-cat:hover .cc-cat__media img { transform: scale(1.06); }
.cc-cat__shade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}
.cc-cat__label {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  text-align: center;
  color: var(--cc-white);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ Banner duo */
.cc-banner-duo {
  display: grid;
  grid-template-columns: repeat(var(--cc-banner-cols, 2), 1fr);
  gap: 6px;
  padding: 6px 6px 0;
}
.cc-banner {
  position: relative;
  display: block;
  height: var(--cc-banner-h, 500px);
  overflow: hidden;
}
.cc-banner img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms ease;
}
.cc-banner:hover img { transform: scale(1.04); }
.cc-banner__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .58), rgba(0, 0, 0, 0) 62%);
}
.cc-banner__copy {
  position: absolute;
  left: 0; right: 0; bottom: 44px;
  text-align: center;
  color: var(--cc-white);
  padding: 0 20px;
}
.cc-banner__title {
  font-family: var(--cc-font-display);
  font-size: 42px;
  font-weight: 300;
  line-height: 1.2;
}
.cc-banner__cta {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--cc-gold-light);
  padding-bottom: 5px;
}

/* --------------------------------------------------------- Product cards */
.cc-grid {
  display: grid;
  grid-template-columns: repeat(var(--cc-grid-cols, 5), 1fr);
  gap: var(--cc-grid-gap, 24px);
}

.cc-card { display: block; }
.slideshow-control.slideshow-control--next, .slideshow-control.slideshow-control--previous{
    background: #000000ff !important;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    box-shadow: -3px 2px 7px 1px #0000001b;
    margin: 10px;
    border-radius: 5px;
    filter: unset;
}
.product-media{
    background-image: url('/cdn/shop/files/177806561_90d9e2d2-da77-4bcf-8a08-578956a2ecdb.jpg?v=1788354549');
    background-position: top;
    background-repeat: no-repeat !important;
}
.cc-card__media {
    position: relative;
    aspect-ratio: var(--cc-card-ratio, 1 / 1);
    overflow: hidden;
    background-image: url('/cdn/shop/files/177806561_90d9e2d2-da77-4bcf-8a08-578956a2ecdb.jpg?v=1788354549');
    background-position: top;
    background-repeat: no-repeat !important;
}
.cc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s ease,opacity .4s ease;
    object-position: bottom;
}
.cc-card:hover .cc-card__media img { transform: scale(1.05); }

.cc-card__media--hover .cc-card__image--secondary {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.cc-card:hover .cc-card__image--secondary { opacity: 0; }
.cc-card:hover .cc-card__image--primary { opacity: 1; }

.cc-badge {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--cc-white);
  border: 1px solid var(--cc-gold);
  color: var(--cc-black);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 6px 10px;
  z-index: 2;
}
.cc-badge--dark {
  background: var(--cc-black);
  color: var(--cc-white);
  border-color: var(--cc-black);
}

.cc-card__info { padding: 16px 2px 0; }
.cc-card__title {
    font-family: var(--cc-font-product-title);
    font-size: 14px;
    margin-bottom: 9px;
}
.cc-card__prices {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  flex-wrap: wrap;
  font-weight:700;
}
.cc-card__prices,
.cc-card__price-was,
.cc-card__price-now { font-family: var(--cc-font-price); }
.cc-card__price-was { text-decoration: line-through; color: #000000b8; font-size: 12px !important;}
.cc-card__price-now { font-weight: 700; color: var(--cc-sale); }
.cc-card__price-now--regular { font-weight: 400; color: var(--cc-text); }

.cc-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  flex-wrap: wrap;
}
.cc-swatch {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .25);
  background-size: cover;
  background-position: center;
  display: inline-block;
}
.cc-card__metal {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  display:none;
}

/* --------------------------------------------------------- Marquee strip */
.cc-strip {
  border-top: 1px solid var(--cc-gold);
  border-bottom: 1px solid var(--cc-gold);
  padding: 34px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  text-align: center;
}
.cc-strip__item {
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: 26px;
}
.cc-diamond {
  width: 6px; height: 6px;
  background: var(--cc-gold);
  transform: rotate(45deg);
  display: inline-block;
}

/* ----------------------------------------------------------------- Tabs */
.cc-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 52px;
  padding: 0 20px;
}
.cc-tabs__list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.cc-tab {
    background: var(--cc-white) !important;
    color: var(--cc-black) !important;
    border: 1px solid var(--cc-gold) !important;
    padding: 13px 26px !important;
    cursor: pointer;
    font-family: var(--cc-font-body) !important;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    transition: all .26s ease;
}
.cc-tab:hover { border-color: var(--cc-gold) !important; }
.cc-tab.is-active {
  background: var(--cc-black) !important;
  color: var(--cc-white) !important;
  border-color: var(--cc-black) !important;
}

.cc-tabpanel { display: none; }
.cc-tabpanel.is-active { display: block; }

/* ---------------------------------------------------------- Rail slider */
.cc-rail {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 0 40px 24px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.cc-rail > * {
  flex: 0 0 var(--cc-rail-item, 330px);
  scroll-snap-align: start;
}
.cc-rail::-webkit-scrollbar { height: 2px; }
.cc-rail::-webkit-scrollbar-thumb { background: var(--cc-gold); }
.cc-rail::-webkit-scrollbar-track { background: var(--cc-white); }

/* ------------------------------------------------------------ About/stats */
.cc-about {
  border-top: 1px solid var(--cc-gold);
  padding-top: 80px;
  text-align: center;
}
.cc-about__title {
  font-family: var(--cc-font-display);
  font-weight: 300;
  font-size: 44px;
  line-height: 1.25;
  margin: 0 auto 26px;
  max-width: 900px;
}
.cc-about__text {
  font-size: 18px;
  line-height: 1.85;
  font-weight: 300;
  max-width: 760px;
  margin: 0 auto 64px;
}
.cc-stats {
  display: grid;
  grid-template-columns: repeat(var(--cc-stats-cols, 3), 1fr);
  text-align: center;
}
.cc-stat { padding: 0 32px; border-right: 1px solid var(--cc-gold); }
.cc-stat:last-child { border-right: 0; }
.cc-stat__value {
    font-weight: 500;
    font-family: 'UtileDisplay' !important;
    margin-bottom: 12px;
}
.cc-stat__label {
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* -------------------------------------------------------- Editorial split */
.cc-split {
  display: grid;
  grid-template-columns: 1fr var(--cc-split-mid, 1.05fr) 1fr;
  align-items: stretch;
}
.cc-split__media {
  width: 100%;
  height: 100%;
  min-height: var(--cc-split-min-h, 600px);
  object-fit: cover;
}
.cc-split__media--grayscale { filter: grayscale(1); }

.cc-split__body {
  background: var(--cc-white);
  padding: var(--cc-split-pad, 78px 60px);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cc-split__body--ruled {
  border-left: 1px solid var(--cc-gold);
  border-right: 1px solid var(--cc-gold);
}
.cc-split__eyebrow {
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cc-gold);
  margin-bottom: 24px;
}
.cc-split__title {
  font-family: var(--cc-font-display);
  font-weight: 300;
  font-size: 42px;
  line-height: 1.3;
  margin: 0 0 24px;
}
.cc-split__text {
  font-size: 17px;
  line-height: 1.85;
  margin: 0 0 22px;
  font-weight: 300;
}
.cc-split__text p { margin: 0 0 14px; }
.cc-split__text p:last-child { margin-bottom: 0; }
.cc-split__text strong { font-weight: 700; }
.cc-split__quote {
  font-family: var(--cc-font-display);
  font-style: italic;
  font-size: 23px;
  line-height: 1.6;
  margin: 0 0 30px;
}
.cc-split__signoff {
  font-family: var(--cc-font-accent);
  font-style: italic;
  font-size: 27px;
  color: var(--cc-gold);
  margin-top: 42px;
  line-height: 1.4;
}

/* ------------------------------------------------------------- Trust bar */
.cc-trust {
  background: var(--cc-black);
  color: var(--cc-white);
  padding: 26px 40px;
}
.cc-trust__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 66px;
  flex-wrap: wrap;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.cc-trust__item { display: flex; align-items: center; gap: 12px; }
.cc-trust__item .cc-diamond {
  width: 7px; height: 7px;
  background: var(--cc-gold-light);
}

/* --------------------------------------------------------------- Reviews */
.cc-reviews { position: relative; padding: 0 76px; }
.cc-reviews__viewport { overflow: hidden; }
.cc-reviews__track {
  display: flex;
  gap: 24px;
  transition: transform 620ms cubic-bezier(.4, 0, .2, 1);
}
.cc-review {
  flex: 0 0 calc(100% / var(--cc-reviews-per, 4) - (24px * (var(--cc-reviews-per, 4) - 1) / var(--cc-reviews-per, 4)));
  border: 1px solid var(--cc-gold);
  padding: 38px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cc-review__stars {
  color: var(--cc-gold);
  letter-spacing: .24em;
  font-size: 16px;
}
.cc-review__title { font-size: 16px; letter-spacing: .04em; font-weight: 700; }
.cc-review__body {
  font-size: 16px;
  line-height: 1.8;
  font-weight: 300;
  margin: 0;
  flex: 1;
}
.cc-review__name { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }

.cc-reviews__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  background: var(--cc-white);
  border: 1px solid var(--cc-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 200ms ease;
}
button.cc-reviews__arrow {
    /* background: red !important; */
    border: 1px solid #000 !important;
}
.cc-reviews__arrow:hover { border-color: var(--cc-gold) !important; }
.cc-reviews__arrow[disabled] { opacity: .3; cursor: default; }
.cc-reviews__arrow--prev { left: 18px; }
.cc-reviews__arrow--next { right: 18px; }

/* ----------------------------------------------------------------- Press */
.cc-press {
  background: var(--cc-black);
  color: var(--cc-white);
  padding: 66px 40px 58px;
  text-align: center;
}
.cc-press__eyebrow {
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--cc-gold-light);
  margin-bottom: 28px;
}
.cc-press__quote {
  font-family: var(--cc-font-display);
  font-weight: 300;
  font-size: 34px;
  line-height: 1.45;
  max-width: 880px;
  margin: 0 auto 48px;
}
.cc-press__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  font-size: 16px;
  letter-spacing: .2em;
}
.cc-press__logo--serif {
  font-family: var(--cc-font-display);
  font-size: 21px;
}
.cc-press__logo img { max-height: 34px; width: auto; }

/* ------------------------------------------------------------------- FAQ */
.cc-faq { max-width: 900px; margin: 0 auto; }
.cc-faq__list { display: flex; flex-direction: column; }
.cc-faq__item { border-top: 1px solid var(--cc-gold); }
.cc-faq__list::after {
  content: "";
  display: block;
  border-top: 1px solid var(--cc-gold);
}

.cc-faq__q {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 28px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  font-family: var(--cc-font-body);
  font-size: 18px;
  color: var(--cc-text);
}
.cc-faq__sign {
  font-size: 24px;
  color: var(--cc-gold);
  line-height: 1;
  flex: 0 0 auto;
}
.cc-faq__a {
  display: none;
  padding: 0 4px 30px;
}
.cc-faq__item.is-open .cc-faq__a { display: block; }
.cc-faq__a p {
  font-size: 17px;
  line-height: 1.85;
  font-weight: 300;
  margin: 0 0 14px;
  max-width: 760px;
}
.cc-faq__a p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Footer */
.cc-footer {
  background: var(--cc-black);
  color: var(--cc-white);
  padding: 70px 48px 30px;
}
.cc-footer__grid {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr repeat(3, .9fr);
  gap: 46px;
  align-items: start;
}
.cc-footer__logo img {
    width: 130px !important;
    height: auto;
}
.cc-footer__heading {
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.cc-footer__text {
  font-size: 16px;
  font-weight: 300;
  margin: 0 0 22px;
  line-height: 1.7;
}
.cc-footer__links {
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-size: 16px;
  font-weight: 300;
}
.cc-footer__links a:hover { color: var(--cc-gold-light); }

.cc-newsletter {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--cc-gold-light);
  padding-bottom: 10px;
  max-width: 400px;
}
.cc-newsletter input {
  flex: 1;
  background: none;
  border: 0;
  outline: none;
  color: var(--cc-white);
  font-family: var(--cc-font-body);
  font-size: 13px;
  letter-spacing: .18em;
}
.cc-newsletter input::placeholder { color: rgba(255, 255, 255, .65); }
.cc-newsletter button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  display: flex;
}
.cc-newsletter__message {
  font-size: 13px;
  color: var(--cc-gold-light);
  letter-spacing: .1em;
  margin-top: 14px;
  min-height: 16px;
}
.cc-newsletter__message--error { color: #ff8a8a; }

.cc-footer__rule {
  height: 1px;
  background: var(--cc-gold-light);
  margin: 48px 0 22px;
}
.cc-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13px;
  letter-spacing: .1em;
}
.cc-footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.cc-footer__legal a:hover { color: var(--cc-gold-light); }
.cc-footer__social { display: flex; align-items: center; gap: 20px; }
.cc-footer__social a { display: flex; }
.cc-footer__social svg { stroke: var(--cc-gold-light); fill: none; }

.cc-to-top {
  background: none;
  border: 1px solid var(--cc-gold-light);
  color: var(--cc-white);
  font-family: var(--cc-font-body);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 9px 13px;
  cursor: pointer;
}
.cc-to-top:hover { color: var(--cc-gold-light); }

.cc-payment-icons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.cc-payment-icons svg { width: 38px; height: 24px; }

/* ------------------------------------------------------------ Utilities */
.cc-section { padding: var(--cc-section-pt, 96px) var(--cc-section-px, 40px) var(--cc-section-pb, 78px); }
.cc-section--flush { padding-left: 0; padding-right: 0; }
.cc-center { text-align: center; }
.cc-mt-52 { margin-top: 52px; }
.cc-mt-44 { margin-top: 44px; }
.cc-mt-38 { margin-top: 38px; }

.cc-placeholder {
  background: #f4f4f4;
  width: 100%;
  height: 100%;
  display: block;
}
.cc-placeholder svg { width: 100%; height: 100%; }

/* ---------------------------------------------------------- Breakpoints */
@media (max-width: 1180px) {
  
  
}

@media (max-width: 1100px) {
  .cc-cats { grid-template-columns: repeat(3, 1fr) !important; }
  .cc-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .cc-split { grid-template-columns: 1fr !important; }
  .cc-split__media { min-height: 340px !important; }
  .cc-split__body--ruled { border-left: 0; border-right: 0; }
  .cc-stats { grid-template-columns: 1fr !important; }
  .cc-stat {
    border-right: 0 !important;
    border-bottom: 1px solid var(--cc-gold);
    padding: 32px 20px !important;
  }
  .cc-stat:last-child { border-bottom: 0; }
}

@media (max-width: 860px) {
  .cc-banner-duo { grid-template-columns: 1fr !important; }
  .cc-footer__grid { grid-template-columns: 1fr 1fr !important; }
  .cc-review { flex: 0 0 100% !important; }
  .cc-reviews { padding: 0 20px; }
  .cc-reviews__arrow--prev { left: -4px; }
  .cc-reviews__arrow--next { right: -4px; }
  .cc-trust__list { gap: 28px; }
  .cc-press__logos { gap: 32px; }
  .cc-hero__arrow {
    position: absolute;
    top: 94%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, .85) !important;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 200ms ease;
    opacity: 0;
}
button.cc-hero__arrow.cc-hero__arrow--next {
    right: 35%;
}
button.cc-hero__arrow.cc-hero__arrow--prev {
    left: 35%;
}
.cc-hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 0 8vw;
    padding: 120px 15px !important;
}
button.cc-hero__arrow {
    opacity: 1 !important;
}
.cc-ann__message {
    font-size: 9px !important;
}
.cc-reviews__arrow {
    position: absolute;
    top: 112%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background: var(--cc-white);
    border: 1px solid var(--cc-black);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 200ms ease;
}
.cc-reviews__arrow--next {
    right: 35% !important;
}
.cc-reviews__arrow--prev {
    left: 35%;
}
}

@media (max-width: 620px) {
  .cc-cats { grid-template-columns: repeat(2, 1fr) !important; }
  .cc-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cc-hero { height: var(--cc-hero-h-mobile, 520px) !important; }
  .cc-hero__title { font-size: 38px !important; }
  .cc-hero__copy {
    max-width: 100% !important;
    text-align: left !important;
  }
  .cc-hero__content { justify-content: flex-start !important; padding: 0 24px; }
  
  .cc-footer__grid { grid-template-columns: 1fr !important; }
  .cc-section-title,
  .cc-about__title { font-size: 28px !important; }
  .cc-section { padding-left: 20px; padding-right: 20px; }
  .cc-rail { padding-left: 20px; padding-right: 20px; }
  .cc-banner__title { font-size: 30px; }
  .cc-split__body, .cc-faq-wrap { padding: 56px 15px !important; }
  .cc-footer { padding: 56px 24px 30px; }
  .cc-strip { gap: 20px; }
  .cc-strip__item { font-size: 20px; }
  .cc-card__title {
    font-size: 12px;
    margin-bottom: 5px;
}
.cc-card__prices {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
    flex-wrap: nowrap;
    font-weight: 700;
    flex-direction: row;
}
.cc-pgrid, section.cc-about-wrap, .cc-split__body, .cc-tabs, .cc-grid, .cc-reviews,  {
    padding: 0 15px !important;
}
.cc-footer {
    color: #ffffff;
    padding: 70px 15px 30px !important;
}
span.price-item__group.price {
    font-size: 14px;
    color: #c8102e;
}
span.price-item__group.price-item--regular.compare-at-price {
    font-size: 10px !important;
}
span.price-item__group.price {
    font-size: 13px;
    color: #c8102e;
}
}

/* ------------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .cc-card:hover .cc-card__media img,
  .cc-cat:hover .cc-cat__media img,
  .cc-banner:hover img { transform: none; }
}


/* ------------------------------------------------- Horizon interoperability */
/* Horizon applies section padding and page margins via .section / spacing-style.
   Carat & Cluster sections are full-bleed and set their own padding. */
.shopify-section.cc-section-root { padding: 0; }
.cc-section-root .section,
.cc-section-root .spacing-style { padding: 0; margin: 0; }

/* Horizon styles bare <button> and .button globally. Keep those defaults out. */
.cc-section-root button:not(.cc-btn) {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  min-width: 0;
  padding: 0;
  color: inherit;
}
.cc-btn,
.cc-tab {
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
}

/* ------------------------------------------------------- Announcement bar */
/* Sits in normal flow inside Horizon's header group. Deliberately not
   position:fixed — Horizon measures its own header group height, and a
   fixed bar here would break that measurement and overlap the page. */
.cc-ann {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-transform: uppercase;
  font-family: var(--cc-font-body);
  position: relative;
  z-index: 2;
}

.cc-ann__side { display: flex; gap: 20px; min-width: 210px; }
.cc-ann__side--end { justify-content: flex-end; }
.cc-ann__side a { transition: color 200ms ease; }

.cc-ann__messages { flex: 1; position: relative; text-align: center; }

.cc-ann__message {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
    letter-spacing: 1.5px;
    font-size: 11px !important;
}
.cc-ann__message.is-active { opacity: 1; pointer-events: auto; }
.cc-ann__message a { border-bottom: 1px solid currentColor; }

@media (max-width: 749px) {
  .cc-ann__side { display: none; }
  .cc-ann__messages { min-width: 0; }
  .cc-ann__message { white-space: normal; padding: 0 8px; line-height: 1.3; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-ann__message { transition: none; }
}

/*faq styles  */
button.cc-faq__q {
    width: 100%;
    background: none;
    border: 0px;
    cursor: pointer;
    padding: 28px 4px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
}

/* --------------------------------------------------------------- Icon bar */
.cc-iconbar { width: 100%; }

.cc-iconbar__list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center !important;
    max-width: 1140px;
    margin: 0 auto;
}

.cc-iconbar__item {
    display: flex;
    align-items: center;
    flex: 0 0 25%;
    line-height: 1.25;
    justify-content: center;
}

a.cc-iconbar__item { transition: opacity 200ms ease; }
a.cc-iconbar__item:hover { opacity: .72; }

.cc-iconbar__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-iconbar__icon svg { width: 100%; height: 100%; display: block; }
.cc-iconbar__icon--image img { width: 100%; height: 100%; object-fit: contain; }

.cc-iconbar__text {
    font-family: var(--cc-font-body) !important;
    white-space: nowrap;
    font-size: 18px !important;
    line-height: 2em;
}

/* Wrap rather than overflow once the row runs out of room on tablets. */
@media (max-width: 1100px) {
  .cc-iconbar__list { flex-wrap: wrap; justify-content: center !important; row-gap: 18px; }
}

@media (max-width: 749px) {
  /* Swipe sideways — keeps the single-row look of the reference. */
  .cc-iconbar__list--scroll {
    flex-wrap: nowrap;
    justify-content: flex-start !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cc-iconbar__list--scroll::-webkit-scrollbar { display: none; }
  .cc-iconbar__list--scroll .cc-iconbar__item { scroll-snap-align: center; }

  .cc-iconbar__list--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch !important;
    row-gap: 18px;
  }
  .cc-iconbar__list--grid .cc-iconbar__text { white-space: normal; }

  .cc-iconbar__list--stack {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start !important;
    row-gap: 14px;
  }
  .cc-iconbar__list--stack .cc-iconbar__text { white-space: normal; }
}




/* ------------------------------------------------------- Fly to cart */
/* The cloned product image that animates to the cart icon. Positioned by
   JS; only the paint properties live here. */
.cc-fly {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  object-fit: cover;
  will-change: transform, opacity;
}

/* The cart icon reacts when the flight lands. */
.cc-cart-bump { animation: cc-cart-bump 500ms cubic-bezier(.34, 1.56, .64, 1); }

@keyframes cc-cart-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  60%  { transform: scale(.94); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------- Pagination */
.cc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 60px;
}

.cc-pagination__link {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid transparent;
  font-family: var(--cc-font-body);
  font-size: 14px;
  transition: border-color 200ms ease, color 200ms ease;
}
.cc-pagination__link:hover { border-color: var(--cc-gold); color: var(--cc-gold); }
.cc-pagination__link.is-current { border-color: var(--cc-black); font-weight: 700; }
.cc-pagination__link--gap { opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .cc-cart-bump { animation: none; }
}


/* ==========================================================================
   Carat & Cluster — quick add button
   --------------------------------------------------------------------------
   PASTE ALL THREE PARTS BELOW into your stylesheet.

   Part 1 is a FIX to a rule you already have — find it and replace the
   selector, do not add a second copy.
   ========================================================================== */


/* -------------------------------------------------------------- PART 1 ----
   FIND this selector in your CSS:

       .cc-section-root button:not(.cc-btn) {

   REPLACE it with the line below. Everything inside the braces stays as is.

   Why: that reset scores 0,2,1 on specificity and .cc-quickadd__btn scores
   0,1,0, so the reset wins no matter which comes first in the file. It was
   stripping the button's background, padding and shadow, which is why the
   markup was present but nothing was visible.
   -------------------------------------------------------------------------- */

.cc-section-root button:not(.cc-btn):not(.cc-quickadd__btn) {
  /* ...keep your existing declarations here, unchanged... */
}


/* -------------------------------------------------------------- PART 2 ----
   Card structure. The card is a <div> now rather than an <a>, so the media
   link needs to fill it.
   -------------------------------------------------------------------------- */

.cc-card { display: block; position: relative; }
.cc-card__media-link { display: block; width: 100%; height: 100%; }
.cc-card__info { display: block; }


/* -------------------------------------------------------------- PART 3 ----
   The quick add button itself.
   -------------------------------------------------------------------------- */
/* ------------------------------------------------------------- Quick add */
/* A pill on the product image that adds a single-variant product without
   leaving the page. Products with options link through to the product page
   instead, so a variant is never chosen on the shopper's behalf. */
.cc-quickadd {
  position: absolute;
  right: var(--cc-qa-inset, 14px);
  bottom: var(--cc-qa-inset, 14px);
  z-index: 3;
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.cc-card:hover .cc-quickadd,
.cc-card:focus-within .cc-quickadd { opacity: 1; transform: translateY(0); }

.cc-quickadd__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  padding: var(--cc-qa-pad-y, 11px) var(--cc-qa-pad-x, 20px);
  background: var(--cc-qa-bg, var(--cc-white));
  color: var(--cc-qa-text, var(--cc-black));
  border: 1px solid var(--cc-qa-border, transparent);
  border-radius: var(--cc-qa-radius, 999px);
  font-family: var(--cc-font-body);
  font-size: var(--cc-qa-font, 14px);
  letter-spacing: var(--cc-qa-tracking, 0.02em);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  transition: background 220ms ease, color 220ms ease,
              border-color 220ms ease, transform 140ms ease;
}

.cc-quickadd__btn:hover {
  background: var(--cc-qa-bg-hover, var(--cc-black));
  color: var(--cc-qa-text-hover, var(--cc-white));
  border-color: var(--cc-qa-bg-hover, var(--cc-black));
}

/* Tactile press, the same cue Horizon gives. */
.cc-quickadd__btn:active { transform: scale(.94); }

.cc-quickadd__face {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 180ms ease, transform 180ms ease;
}
.cc-quickadd__bag { width: 17px; height: 17px; flex: 0 0 auto; }
.cc-quickadd__label { white-space: nowrap; }

/* ---- Loading: label swaps for a spinner ---- */
.cc-quickadd__spinner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0;
  animation: cc-qa-spin 620ms linear infinite;
}

.cc-quickadd.is-loading .cc-quickadd__face { opacity: 0; transform: scale(.8); }
.cc-quickadd.is-loading .cc-quickadd__spinner { opacity: 1; }
.cc-quickadd.is-loading .cc-quickadd__btn { cursor: wait; }

/* ---- Added: a checkmark draws in, then the button settles back ---- */
.cc-quickadd__check {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: scale(.4);
  transition: opacity 200ms ease, transform 260ms cubic-bezier(.34, 1.56, .64, 1);
}

.cc-quickadd.is-added .cc-quickadd__face { opacity: 0; transform: scale(.8); }
.cc-quickadd.is-added .cc-quickadd__check { opacity: 1; transform: scale(1); }
.cc-quickadd.is-added .cc-quickadd__btn {
  background: var(--cc-qa-bg-added, var(--cc-black));
  color: var(--cc-qa-text-added, var(--cc-white));
  border-color: var(--cc-qa-bg-added, var(--cc-black));
  animation: cc-qa-pop 420ms ease;
}

/* ---- Error: shake, and the label reports what happened ---- */
.cc-quickadd.is-error .cc-quickadd__btn { animation: cc-qa-shake 380ms ease; }

.cc-quickadd__status {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  white-space: nowrap;
  font-family: var(--cc-font-body);
  font-size: 12px;
  background: var(--cc-black);
  color: var(--cc-white);
  padding: 6px 10px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.cc-quickadd.is-error .cc-quickadd__status { opacity: 1; }

@keyframes cc-qa-spin { to { transform: rotate(360deg); } }
@keyframes cc-qa-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
@keyframes cc-qa-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* Touch devices have no hover, so the pill stays visible. */
@media (hover: none) {
  .cc-quickadd { opacity: 1; transform: none; }
  .cc-quickadd__btn { padding: 9px 16px; font-size: 13px; }
}

@media (max-width: 620px) {
  .cc-quickadd { right: 10px; bottom: 10px; }
  .cc-quickadd__label { display: var(--cc-qa-label-mobile, inline); }
  span.cc-card__price-was {
    font-size: 12px !important;
  }
  .cc-badge {
    top: 9px;
    left: 9px;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 8px 2px 8px;
}
}

@media (prefers-reduced-motion: reduce) {
  .cc-quickadd,
  .cc-quickadd__btn,
  .cc-quickadd__face,
  .cc-quickadd__check { transition: none; }
  .cc-quickadd__spinner { animation-duration: 1.4s; }
  .cc-quickadd.is-added .cc-quickadd__btn,
  .cc-quickadd.is-error .cc-quickadd__btn { animation: none; }
  .cc-quickadd { opacity: 1; transform: none; }
}


/* -------------------------------------------------------------- OPTIONAL --
   The pill fades in on hover, matching Horizon. To show it permanently on
   desktop as well, add this:

   .cc-quickadd { opacity: 1; transform: none; }

   To square it off to match your other buttons:

   .cc-quickadd__btn { --cc-qa-radius: 0; }
   -------------------------------------------------------------------------- */

   
/* ------------------------------------------------------------- Quick add */
/* A pill on the product image that adds a single-variant product without
   leaving the page. Products with options link through to the product page
   instead, so a variant is never chosen on the shopper's behalf. */
.cc-quickadd {
  position: absolute;
  right: var(--cc-qa-inset, 14px);
  bottom: var(--cc-qa-inset, 14px);
  z-index: 3;
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
}
 
.cc-card:hover .cc-quickadd,
.cc-card:focus-within .cc-quickadd { opacity: 1; transform: translateY(0); }
 
.cc-quickadd__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  padding: var(--cc-qa-pad-y, 11px) var(--cc-qa-pad-x, 20px);
  background: var(--cc-qa-bg, var(--cc-white));
  color: var(--cc-qa-text, var(--cc-black));
  border: 1px solid var(--cc-qa-border, transparent);
  border-radius: var(--cc-qa-radius, 999px);
  font-family: var(--cc-font-body);
  font-size: var(--cc-qa-font, 14px);
  letter-spacing: var(--cc-qa-tracking, 0.02em);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  transition: background 220ms ease, color 220ms ease,
              border-color 220ms ease, transform 140ms ease;
}
 
.cc-quickadd__btn:hover {
  background: var(--cc-qa-bg-hover, var(--cc-black));
  color: var(--cc-qa-text-hover, var(--cc-white));
  border-color: var(--cc-qa-bg-hover, var(--cc-black));
}
 
/* Tactile press, the same cue Horizon gives. */
.cc-quickadd__btn:active { transform: scale(.94); }
 
.cc-quickadd__face {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 180ms ease, transform 180ms ease;
}
.cc-quickadd__bag { width: 17px; height: 17px; flex: 0 0 auto; }
.cc-quickadd__label { white-space: nowrap; }
 
/* ---- Loading: label swaps for a spinner ---- */
.cc-quickadd__spinner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0;
  animation: cc-qa-spin 620ms linear infinite;
}
 
.cc-quickadd.is-loading .cc-quickadd__face { opacity: 0; transform: scale(.8); }
.cc-quickadd.is-loading .cc-quickadd__spinner { opacity: 1; }
.cc-quickadd.is-loading .cc-quickadd__btn { cursor: wait; }
 
/* ---- Added: a checkmark draws in, then the button settles back ---- */
.cc-quickadd__check {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: scale(.4);
  transition: opacity 200ms ease, transform 260ms cubic-bezier(.34, 1.56, .64, 1);
}
 
.cc-quickadd.is-added .cc-quickadd__face { opacity: 0; transform: scale(.8); }
.cc-quickadd.is-added .cc-quickadd__check { opacity: 1; transform: scale(1); }
.cc-quickadd.is-added .cc-quickadd__btn {
  background: var(--cc-qa-bg-added, var(--cc-black));
  color: var(--cc-qa-text-added, var(--cc-white));
  border-color: var(--cc-qa-bg-added, var(--cc-black));
  animation: cc-qa-pop 420ms ease;
}
 
/* ---- Error: shake, and the label reports what happened ---- */
.cc-quickadd.is-error .cc-quickadd__btn { animation: cc-qa-shake 380ms ease; }
 
.cc-quickadd__status {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  white-space: nowrap;
  font-family: var(--cc-font-body);
  font-size: 12px;
  background: var(--cc-black);
  color: var(--cc-white);
  padding: 6px 10px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.cc-quickadd.is-error .cc-quickadd__status { opacity: 1; }
 
@keyframes cc-qa-spin { to { transform: rotate(360deg); } }
@keyframes cc-qa-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
@keyframes cc-qa-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
 
/* Touch devices have no hover, so the pill stays visible. */
@media (hover: none) {
  .cc-quickadd { opacity: 1; transform: none; }
  .cc-quickadd__btn { padding: 9px 16px; font-size: 13px; }
}
 
@media (max-width: 620px) {
  .cc-quickadd { right: 10px; bottom: 10px; }
  .cc-quickadd__label { display: var(--cc-qa-label-mobile, inline); }
}
 
@media (prefers-reduced-motion: reduce) {
  .cc-quickadd,
  .cc-quickadd__btn,
  .cc-quickadd__face,
  .cc-quickadd__check { transition: none; }
  .cc-quickadd__spinner { animation-duration: 1.4s; }
  .cc-quickadd.is-added .cc-quickadd__btn,
  .cc-quickadd.is-error .cc-quickadd__btn { animation: none; }
  .cc-quickadd { opacity: 1; transform: none; }
}
 
/* ------------------------------------------------------- Fly to cart */
/* The cloned product image that animates to the cart icon. Positioned by
   JS; only the paint properties live here. */
.cc-fly {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  object-fit: cover;
  will-change: transform, opacity;
}
 
/* The cart icon reacts when the flight lands. */
.cc-cart-bump { animation: cc-cart-bump 500ms cubic-bezier(.34, 1.56, .64, 1); }
 
@keyframes cc-cart-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  60%  { transform: scale(.94); }
  100% { transform: scale(1); }
}
 
/* ------------------------------------------------------- Pagination */
.cc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 60px;
}
 
.cc-pagination__link {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid transparent;
  font-family: var(--cc-font-body);
  font-size: 14px;
  transition: border-color 200ms ease, color 200ms ease;
}
.cc-pagination__link:hover { border-color: var(--cc-gold); color: var(--cc-gold); }
.cc-pagination__link.is-current { border-color: var(--cc-black); font-weight: 700; }
.cc-pagination__link--gap { opacity: .5; }
 
@media (prefers-reduced-motion: reduce) {
  .cc-cart-bump { animation: none; }
}
 
 
/* ------------------------------------------------------ Discount chip */
/* Sits opposite the badge so the two never collide. */
.cc-discount {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: var(--cc-discount-bg, var(--cc-sale));
  color: var(--cc-discount-text, var(--cc-white));
  font-family: var(--cc-font-body);
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1;
  padding: 6px 9px;
  border-radius: var(--cc-discount-radius, 0);
  white-space: nowrap;
}
 
@media (max-width: 620px) {
  .cc-discount { top: 10px; right: 10px; font-size: 10px; padding: 5px 7px; }
}