/* Engraving Type facet emphasis + floating desktop filter panel.
   Palette: secondary-300 #F7EDE7, secondary-600 #ECD2C3, primary-200 #CDD4D4,
   primary-600 #032728, page bg #F9F9F7. Loaded after app.css (handle: prestige-facets). */

/* ---------- 1. Engraving Type: soft neutral panel (#EBE9E2) ---------- */
#jsf .facet-engraving{
  margin: .5rem 0 1rem;
  padding: 1rem 1.1rem 1.25rem;
  background: #ebe9e2;
  border: 1px solid rgba(3, 39, 40, .10);
  border-radius: 1rem;
}
#jsf .facet-engraving,
#jsf .facet-engraving > a,
#jsf .facet-engraving .facet-options,
#jsf .facet-engraving .facet-options div{ color: #032728; }
#jsf .facet-engraving > a > div:first-child{
  font-weight: 600;
  color: #032728;
}
#jsf .facet-engraving > a svg{ fill: #032728; opacity: .65; }
#jsf .facet-engraving__tag{
  display: inline-block;
  vertical-align: middle;
  margin-left: .5rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: #032728;
  font-size: .625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* unselected option pills: quiet translucent chips on the tinted panel */
#jsf .facet-engraving .rounded-full:not([class*="bg-"]){
  background: rgba(255, 255, 255, .62);
  border-color: rgba(3, 39, 40, .18);
  color: #032728;
  font-weight: 500;
}
#jsf .facet-engraving .rounded-full:not([class*="bg-"]):hover{
  background: #fff;
  border-color: #032728;
  color: #032728;
}
/* selected option pills: solid dark on the light panel (markup carries bg-primary-600) */
#jsf .facet-engraving .rounded-full[class*="bg-primary-600"]{
  background: #032728;
  border-color: #032728;
  color: #fff;
  font-weight: 600;
}
/* Show more / Show less sit on the same panel: keep them neutral */
#jsf .facet-engraving .facet-options a[class*="bg-secondary-600"]{
  background: rgba(255, 255, 255, .78);
  border-color: rgba(3, 39, 40, .18);
  color: #032728;
}

/* ---------- 2. More air between every facet title and its options ---------- */
#jsf .facet-options{ padding-top: 1.5rem; }

/* ---------- 3. Desktop: product cards line up with the first filter selection ---------- */
@media (min-width: 1024px){
  .prestige-product-grid{ padding-top: 26px; }
}

/* ---------- 4. Desktop: filter panel floats while the grid scrolls ---------- */
@media (min-width: 1024px){
  #jsf.js-filter-form{
    position: -webkit-sticky;
    position: sticky;
    top: 8.5rem;                              /* clears the 124px fixed header */
    max-height: calc(100vh - 9.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .9rem .85rem 1.1rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 18px 40px -28px rgba(3,39,40,.55), 0 1px 0 rgba(3,39,40,.05);
    scrollbar-width: thin;
    scrollbar-color: #CDD4D4 transparent;
  }
  #jsf.js-filter-form::-webkit-scrollbar{ width: 6px; }
  #jsf.js-filter-form::-webkit-scrollbar-thumb{ background: #CDD4D4; border-radius: 999px; }
  #jsf.js-filter-form::-webkit-scrollbar-track{ background: transparent; }
}
@media (min-width: 1024px) and (max-height: 820px){
  #jsf.js-filter-form{ top: 7.25rem; max-height: calc(100vh - 8.25rem); }
}