.fp-bf-collection-top {
  --fp-gold: #efd094;
  --fp-gold-line: #785a32;
  padding: 12px 0;
  background: #f7f6f0;
}

.fp-bf-collection-top__inner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  width: calc(100% - 120px);
  max-width: 1680px;
  margin-inline: auto;
  padding: clamp(14px, 1.6vw, 22px) clamp(20px, 3vw, 46px);
  color: #f8efdd;
  background:
    linear-gradient(110deg, transparent 54%, #a3753517 71%, transparent 82%),
    radial-gradient(ellipse at top right, #513718 0, #211a12 29%, #11100f 72%);
  border: 1px solid var(--fp-gold-line);
  box-shadow: inset 0 1px #f4ce8138, 0 6px 16px #19150d10;
}

.fp-bf-collection-top__amount {
  display: flex;
  align-items: baseline;
  gap: .12em;
  color: var(--fp-gold);
  font: 400 clamp(36px, 4vw, 62px)/.95 var(--fp-serif, Georgia, serif);
  white-space: nowrap;
}

.fp-bf-collection-top__amount sup {font-size: .47em; align-self: center; position: static; color: inherit;}
.fp-bf-collection-top__amount small {font: 600 .20em/1 Arial, sans-serif; letter-spacing: .09em; margin-inline-start: .28em;}
.fp-bf-collection-top__message {min-width: 0; border-inline-start: 1px solid #b28c534d; padding-inline-start: clamp(15px, 2vw, 32px);}
.fp-bf-collection-top__title {display: block; color: var(--fp-gold); font: 600 12px/1.3 Arial, sans-serif; letter-spacing: .19em;}
.fp-bf-collection-top__details {margin: 5px 0 0; color: #f4e9d6; font: 13px/1.5 Arial, sans-serif;}
.fp-bf-collection-top__date {display: block; margin-top: 4px; color: #e1c997; font: 11px/1.4 Arial, sans-serif;}
.fp-bf-collection-top .fp-bf-copy {background: linear-gradient(135deg,#f1d6a2,#c9a264); color: #22190e; border-color: #f3d6a4; min-width: 120px;}
.fp-bf-collection-top .fp-bf-copy:hover {background: #ffe7b7; color: #22190e;}
.fp-bf-collection-top .fp-bf-copy:focus-visible {outline: 2px solid #fff0cc; outline-offset: 4px;}
.fp-bf-collection-top .fp-bf-copy[data-copied="true"] {background: #f8efd6; color: #382b17;}

.fp-collection-grid #CollectionProductGrid {min-width: 0;}
.fp-collection-grid .f-sidebar--title {margin-block: 0 15px; font-size: 17px; line-height: 1.4;}
.fp-collection-grid .f-filter-tag-box .f-filter--widget {border-bottom: 1px solid #e2dfd3;}
.fp-collection-grid .f-filter-tag-box .f-filter--widget-title {font-size: 14px; color: #2d332b;}
.fp-collection-grid .f-collection--wrapper:not(:has(.f-filter--widget)) :is(.f-sidebar,.f-sidebar--open) {display: none;}
.fp-collection-grid[data-initial-column="4"]:not([data-show-col-switchers="true"]):not([data-show-col-switchers="1"]) .f-collection-products > .f-product-item {
  flex: 0 0 var(--fp-card-width,50%);
  width: var(--fp-card-width,50%);
  max-width: var(--fp-card-width,50%);
}

@media (min-width: 768px) {.fp-collection-grid {--fp-card-width: 33.333333%;}}
@media (min-width: 1024px) {.fp-collection-grid {--fp-card-width: 25%;}}
@media (min-width: 1280px) {
  .fp-collection-grid .f-sidebar {
    position: sticky;
    top: calc(var(--f-header-height, 110px) + 16px);
    align-self: flex-start;
    max-height: calc(100vh - var(--f-header-height, 110px) - 32px);
    overflow: auto;
    padding-inline-end: 16px;
  }
}

@media (max-width: 1023px) {
  .fp-bf-collection-top__inner {width: calc(100% - 40px);}
}

@media (max-width: 540px) {
  .fp-bf-collection-top {padding: 8px 0;}
  .fp-bf-collection-top__inner {width: calc(100% - 24px); padding: 12px 10px; gap: 9px;}
  .fp-bf-collection-top__amount {font-size: 36px;}
  .fp-bf-collection-top__message {padding-inline-start: 9px;}
  .fp-bf-collection-top__title {font-size: 10px; letter-spacing: .11em;}
  .fp-bf-collection-top__details,.fp-bf-collection-top__date {font-size: 10px;}
  .fp-bf-collection-top .fp-bf-copy {min-width: 82px; padding: 7px 8px;}
}

@media (max-width: 365px) {
  .fp-bf-collection-top__inner {grid-template-columns: 1fr auto;}
  .fp-bf-collection-top__message {grid-row: 2; grid-column: 1 / -1; border: 0; padding-inline-start: 0;}
}


/* Align the existing campaign countdown between the offer and the copy button. */
@media (min-width: 801px) {
  .fp-bf-collection-top__inner {
    grid-template-columns: auto minmax(0, 1fr) minmax(205px, 1.2fr) auto;
  }
}

.fp-bf-collection-top__countdown {
  justify-self: center;
  min-width: 0;
}

.fp-bf-collection-top__countdown .fp-bf-countdown {
  margin: 0;
  gap: clamp(9px, 1.4vw, 20px);
  color: #e1c997;
}

.fp-bf-collection-top__countdown .fp-bf-countdown-title {
  max-width: 11ch;
  line-height: 1.45;
}

.fp-bf-collection-top__countdown .fp-bf-clock {
  align-items: center;
  gap: 6px;
}

.fp-bf-collection-top__countdown .fp-bf-clock > span {
  min-width: 46px;
  padding: 6px 6px 5px;
  border: 1px solid #d7ad654d;
  border-radius: 3px;
  background: #f2cf8820;
}

.fp-bf-collection-top__countdown .fp-bf-clock b {font-size: 22px;}
.fp-bf-collection-top__countdown .fp-bf-clock small {margin-top: 2px;}

@media (max-width: 800px) {
  .fp-bf-collection-top__countdown {display: none;}
}

/* The swatches use canonical tag names while the visible labels stay localized. */
:where(.fp-collection-grid .f-filter-tag-box) [data-tag-default-filter="black"] {--fp-filter-swatch: #242625;}
:where(.fp-collection-grid .f-filter-tag-box) [data-tag-default-filter="white"] {--fp-filter-swatch: #fff;}
:where(.fp-collection-grid .f-filter-tag-box) [data-tag-default-filter="gold"] {--fp-filter-swatch: #c3a051;}
:where(.fp-collection-grid .f-filter-tag-box) [data-tag-default-filter="silver"] {--fp-filter-swatch: #c1c7ca;}
:where(.fp-collection-grid .f-filter-tag-box) [data-tag-default-filter="gray"] {--fp-filter-swatch: #777c7c;}
:where(.fp-collection-grid .f-filter-tag-box) [data-tag-default-filter="brown"] {--fp-filter-swatch: #79533b;}
:where(.fp-collection-grid .f-filter-tag-box) [data-tag-default-filter="beige"] {--fp-filter-swatch: #dfcfb4;}
:where(.fp-collection-grid .f-filter-tag-box) [data-tag-default-filter="green"] {--fp-filter-swatch: #527753;}
:where(.fp-collection-grid .f-filter-tag-box) [data-tag-default-filter="blue"] {--fp-filter-swatch: #496f9d;}
:where(.fp-collection-grid .f-filter-tag-box) [data-tag-default-filter="amber"] {--fp-filter-swatch: #c77a23;}
:where(.fp-collection-grid .f-filter-tag-box) [data-tag-default-filter="clear"] {
  --fp-filter-swatch: repeating-conic-gradient(#fff 0% 25%, #c8cbd0 0% 50%) 0 0 / 6px 6px;
}

.fp-collection-grid .f-filter-tag-box :is(
  [data-tag-default-filter="black"], [data-tag-default-filter="white"],
  [data-tag-default-filter="gold"], [data-tag-default-filter="silver"],
  [data-tag-default-filter="gray"], [data-tag-default-filter="brown"],
  [data-tag-default-filter="beige"], [data-tag-default-filter="green"],
  [data-tag-default-filter="blue"], [data-tag-default-filter="amber"],
  [data-tag-default-filter="clear"]
) .f-facet--label::before {
  content: '';
  display: inline-block;
  box-sizing: border-box;
  width: 13px;
  height: 13px;
  margin-inline-end: 8px;
  vertical-align: -1px;
  border: 1px solid #292c294f;
  border-radius: 50%;
  background: var(--fp-filter-swatch);
}