/* ========================================
   Starel Stones — Doofinder Styling
   File: assets/css/starel-doofinder.css

   IMPORTANT:
   This file is intentionally quarantined.
   Every selector must remain scoped under .dfd-root
   to prevent Doofinder styles from affecting the
   Starel header, mega menu, icons, cart, or site UI.
======================================== */


/* ========================================
   1. Core Doofinder Brand Overrides
======================================== */

.dfd-root {
  --df-accent-primary: #000000;
  --df-accent-primary-hover: #000000;
  --df-accent-primary-active: #000000;
  --df-accent-on-primary: #ffffff;

  --df-accent-tertiary: #000000;
  --df-accent-tertiary-hover: #000000;
  --df-accent-tertiary-active: #000000;
  --df-accent-on-tertiary: #ffffff;

  --df-neutral-high-contrast: #1c1c1c;
  --df-neutral-medium-contrast: #747474;
  --df-neutral-low-contrast: #d8d8d8;
  --df-neutral-outline: #e5e5e5;
  --df-neutral-surface: #ffffff;
  --df-neutral-background: #ffffff;

  color: #1c1c1c;
}

/* Force all Doofinder UI text into the Starel site font */
.dfd-root,
.dfd-root *,
.dfd-root input,
.dfd-root textarea,
.dfd-root select,
.dfd-root button {
  font-family: var(--e-global-typography-e9f93dd-font-family), Sans-serif !important;
}

/* Doofinder-only link/accent cleanup */
.dfd-root a,
.dfd-root a:visited,
.dfd-root a:hover,
.dfd-root a:focus,
.dfd-root a:active {
  color: #000000;
}


/* ========================================
   2. Search Layer / Searchbox
======================================== */

.dfd-root .dfd-searchbox {
  background: #ffffff;
  border: 0;
  border-radius: 0;
  color: #1c1c1c;
}

.dfd-root.dfd-fullscreen .dfd-searchbox,
.dfd-root .dfd-fullscreen .dfd-searchbox {
  border-bottom: 1px solid #000000 !important;
}

.dfd-root .dfd-searchbox-input,
.dfd-root .dfd-searchbox-autocomplete {
  font-family: var(--e-global-typography-e9f93dd-font-family), Sans-serif !important;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: #1c1c1c;
}

.dfd-root .dfd-searchbox-input::placeholder {
  color: #767676;
  opacity: 1;
}


/* ========================================
   3. Titles / Headings
======================================== */

.dfd-root .dfd-title-lg,
.dfd-root .dfd-facet-title > :first-child {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #1c1c1c;
}

.dfd-root.dfd-fullscreen .dfd-recommended-products .dfd-title-lg,
.dfd-root .dfd-fullscreen .dfd-recommended-products .dfd-title-lg {
  margin: 0 0 16px 40px;
}

.dfd-root .dfd-title-xl {
  color: #1c1c1c;
}


/* ========================================
   4. Results Grid
======================================== */

.dfd-root .dfd-results-grid {
  --dfd-results-grid-gap: 24px;
  gap: 24px !important;
  grid-gap: 24px !important;
}


/* ========================================
   5. Recommended Products Carousel
======================================== */

.dfd-root .dfd-carousel {
  --starel-doofinder-carousel-image-size: 200px;

  position: relative;
  display: flex;
  align-items: flex-start;
}

@media (min-width: 992px) {
  .dfd-root .dfd-carousel {
    --starel-doofinder-carousel-image-size: 240px;
  }
}

.dfd-carousel-content {
  padding: 0px !important;
}

.dfd-root .dfd-carousel-content {
  align-items: flex-start;
}

.dfd-root .dfd-carousel-arrow {
  display: flex !important;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: calc((var(--starel-doofinder-carousel-image-size) / 2) - 16px) 4px 0 !important;
  cursor: pointer;
  opacity: 1;
  transition: opacity 180ms ease;
}

.dfd-root .dfd-carousel-arrow svg {
  display: block;
  width: 32px;
  height: 32px;
  fill: #808080 !important;
  transition: fill 180ms ease;
}

.dfd-root .dfd-carousel-arrow svg path:not([fill="none"]) {
  fill: #808080 !important;
  transition: fill 180ms ease;
}

.dfd-root .dfd-carousel-arrow:hover svg,
.dfd-root .dfd-carousel-arrow:hover svg path:not([fill="none"]) {
  fill: #000000 !important;
}


/* ========================================
   6. Product Card — Structure
======================================== */

.dfd-root .dfd-card-live {
  height: 100%;
}

.dfd-root .dfd-card {
  padding: 0 !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #1c1c1c;
  cursor: pointer;
}

@media (hover: hover) {
  .dfd-root .dfd-card:hover,
  .dfd-root .dfd-card:focus,
  .dfd-root .dfd-card:focus-visible {
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }
}

.dfd-root .dfd-card.dfd-card--selected {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}


/* ========================================
   7. Product Card — Media
======================================== */

.dfd-root .dfd-card-media {
  padding: 0 !important;
  overflow: hidden;
  border-radius: 8px !important;
  background: #f5f5f5;
}

.dfd-root .dfd-card-thumbnail {
  position: relative;
  overflow: hidden;
  border-radius: 8px !important;
  background: #f5f5f5;
}

.dfd-root .dfd-card-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px !important;
  transition: opacity 240ms ease, transform 240ms ease;
}

/*
   Secondary image hover support.
   Only works if Doofinder outputs more than one image
   inside .dfd-card-thumbnail.
*/
.dfd-root .dfd-card-thumbnail img:nth-of-type(2) {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 2;
}

@media (hover: hover) {
  .dfd-root .dfd-card:hover .dfd-card-thumbnail:has(img:nth-of-type(2)) img:nth-of-type(1) {
    opacity: 0;
  }

  .dfd-root .dfd-card:hover .dfd-card-thumbnail:has(img:nth-of-type(2)) img:nth-of-type(2) {
    opacity: 1;
  }
}


/* ========================================
   8. Product Card — Content
======================================== */

.dfd-root .dfd-card-content {
  margin-top: 10px !important;
  padding: 0 !important;
}

.dfd-root .dfd-card-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #1c1c1c;
}

.dfd-root .dfd-card-description {
  margin-top: 6px;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45;
  letter-spacing: 0;
  color: #747474;
  opacity: 1;
}


/* ========================================
   9. Product Card — Pricing
======================================== */

.dfd-root .dfd-card-row {
  margin-top: 8px !important;
  min-height: 0 !important;
}

.dfd-root .dfd-card-pricing {
  margin-left: 0 !important;
  font-size: 14px !important;
  line-height: 1.35;
  gap: 6px;
}

.dfd-root .dfd-card-price {
  margin-left: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35;
  color: #1c1c1c;
  white-space: nowrap;
}

.dfd-root .dfd-card-price--sale {
  color: #1c1c1c !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.dfd-root .dfd-card-price--sale ~ .dfd-card-price {
  color: #747474 !important;
  font-weight: 400 !important;
  text-decoration: line-through;
}


/* ========================================
   10. Buttons / Accent States
======================================== */

/* Filter and sorting style variables only */
.dfd-root .dfd-category-term,
.dfd-root .dfd-btn-image-filter,
.dfd-root .dfd-btn-color-filter,
.dfd-root .dfd-btn-sort-filter,
.dfd-root .dfd-btn-term-filter,
.dfd-root label.dfd-image-search-button {
  --dfd-btn-color: #1c1c1c;
  --dfd-btn-hover-color: #000000;
  --dfd-btn-active-color: #000000;
  --dfd-btn-border-color: transparent;
  --dfd-btn-hover-border-color: transparent;
  --dfd-btn-active-border-color: transparent;
}

/* Primary Doofinder buttons only */
.dfd-root .dfd-cart-add-button,
.dfd-root .dfd-cart-check-button,
.dfd-root .dfd-next-page-button,
.dfd-root .dfd-back-to-top-button,
.dfd-root .dfd-smart-filters-toggle-btn {
  --dfd-btn-bg: #000000;
  --dfd-btn-border-color: #000000;
  --dfd-btn-color: #ffffff;
  --dfd-btn-hover-bg: #000000;
  --dfd-btn-hover-border-color: #000000;
  --dfd-btn-hover-color: #ffffff;
  --dfd-btn-active-bg: #000000;
  --dfd-btn-active-border-color: #000000;
  --dfd-btn-active-color: #ffffff;
}

/* Link-style Doofinder buttons only */
.dfd-root .dfd-clear-filters-button,
.dfd-root .dfd-view-all-link-button,
.dfd-root .dfd-delete-link-button {
  --dfd-btn-color: #000000;
  --dfd-btn-hover-color: #000000;
  --dfd-btn-active-color: #000000;
}


/* ========================================
   11. Facets / Filters
======================================== */

.dfd-root .dfd-btn-checkbox.dfd-is-selected,
.dfd-root .dfd-btn-term-filter.dfd-is-selected::before,
.dfd-root .dfd-category-term.dfd-is-selected {
  background-color: #000000 !important;
  outline-color: #000000 !important;
  border-color: #000000 !important;
}

.dfd-root .dfd-category-term {
  --dfd-btn-hover-bg: rgba(0, 0, 0, 0.06);
  --dfd-btn-active-bg: rgba(0, 0, 0, 0.08);
}

.dfd-root .dfd-tabs-item.dfd-is-selected {
  border-bottom-color: #000000;
}


/* ========================================
   12. Progress / General Accents
======================================== */

.dfd-root .dfd-progress > div {
  background-color: #000000;
}


/* ========================================
   13. Similar Products Button
======================================== */

.dfd-root .dfd-card-flags button.dfd-similar {
  color: #1c1c1c;
  --dfd-btn-color: #1c1c1c;
  border-color: #e5e5e5;
  box-shadow: none;
}

.dfd-root .dfd-card-flags button.dfd-similar:hover {
  color: #000000;
  --dfd-btn-color: #000000;
}


/* ========================================
   14. Price Slider — Starel Override
======================================== */

.dfd-root .dfd-slider {
  --df-slider-color-primary: #000000 !important;
  --df-slider-color-border: #000000 !important;
  --df-slider-color-connect-background: #000000 !important;
  --df-slider-color-tooltip-background: #000000 !important;
  --df-slider-color-tooltip-border: #000000 !important;
  --df-slider-color-pips: #747474 !important;
  --df-slider-color-marker: #d8d8d8 !important;

  font-size: 14px;
}

/* Active range line */
.dfd-root .dfd-slider-connect {
  background: #000000 !important;
}

/* Tooltip labels above slider handles */
.dfd-root .dfd-slider-tooltip {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

/* Slider handles */
.dfd-root .dfd-slider-handle {
  border-color: #808080 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Handle focus state */
.dfd-root .dfd-slider-handle:focus,
.dfd-root .dfd-slider-handle:focus-visible {
  border-color: #000000 !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12) !important;
  outline: none !important;
}

/* Slider pips / markers */
.dfd-root .dfd-slider-marker {
  background: #d8d8d8 !important;
}

.dfd-root .dfd-slider-value {
  color: #747474 !important;
}


/* ========================================
   15. Facet Checkbox / Term Hover States
======================================== */

/* Remove default blue hover on the full filter row */
.dfd-root .dfd-btn-term-filter {
  --dfd-btn-hover-bg: transparent !important;
  --dfd-btn-active-bg: transparent !important;
  --dfd-btn-hover-color: #1c1c1c !important;
  --dfd-btn-active-color: #1c1c1c !important;
}

.dfd-root .dfd-btn-term-filter:hover {
  background: transparent !important;
  color: #1c1c1c !important;
}

/* Checkbox hover fill */
.dfd-root .dfd-btn-term-filter:not(.dfd-is-selected):hover::before {
  background: #808080 !important;
  border-color: #808080 !important;
}

/* Selected checkbox state */
.dfd-root .dfd-btn-term-filter.dfd-is-selected::before,
.dfd-root .dfd-btn-term-filter.dfd-is-selected:hover::before {
  background: #000000 !important;
  border-color: #000000 !important;
  outline-color: #000000 !important;
}


/* ========================================
   16. Facet Header Collapse Controls
   Removes Doofinder default collapse / scroll-looking UI
======================================== */

.dfd-root .dfd-facet {
  scrollbar-width: none;
}

.dfd-root .dfd-facet::-webkit-scrollbar {
  display: none;
}

.dfd-root .dfd-facet-title {
  cursor: default !important;
  pointer-events: none;
  padding-right: 0 !important;
}

/* Hide Doofinder's generated collapse / indicator visuals */
.dfd-root .dfd-facet::before,
.dfd-root .dfd-facet::after,
.dfd-root .dfd-facet-title::before,
.dfd-root .dfd-facet-title::after {
  content: none !important;
  display: none !important;
}

/* Hide any icon/chevron injected inside the facet title */
.dfd-root .dfd-facet-title svg,
.dfd-root .dfd-facet-title [class*="icon"],
.dfd-root .dfd-facet-title [class*="chevron"],
.dfd-root .dfd-facet-title [class*="collapse"] {
  display: none !important;
}


/* ========================================
   17. Back To Top Styling
======================================== */

.dfd-root .dfd-back-to-top-button {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.dfd-root .dfd-back-to-top-button svg {
  fill: #ffffff !important;
}

.dfd-root .dfd-back-to-top-button svg path:not([fill="none"]) {
  fill: #ffffff !important;
}


/* ========================================
   18. Hide Doofinder Branding
======================================== */

.dfd-root.dfd-fullscreen .dfd-branding,
.dfd-root .dfd-fullscreen .dfd-branding,
.dfd-root .dfd-branding {
  display: none !important;
}


/* ========================================
   19. Mobile Safety
======================================== */

@media (max-width: 767px) {
  .dfd-root .dfd-results-grid {
    --dfd-results-grid-gap: 18px;
    gap: 18px !important;
    grid-gap: 18px !important;
  }

  .dfd-root .dfd-card-content {
    margin-top: 8px !important;
  }

  .dfd-root .dfd-card-title,
  .dfd-root .dfd-card-price,
  .dfd-root .dfd-card-price--sale {
    font-size: 14px !important;
  }

  .dfd-root .dfd-card-description {
    font-size: 12px !important;
  }

  .dfd-root .dfd-carousel {
    --starel-doofinder-carousel-image-size: 200px;
  }
}