/* =========================================================
   CHANGE LOG (summary)
   - Unified df-more CTA buttons into one consistent system (radius/hover/focus)
   - Removed conflicting woof_image_term hover filter; kept icon-only ::before mask approach
   - Scoped Ion.RangeSlider styling to .diamond-filter (prevents site-wide leakage)
   - Reordered + made .diamond-filter layout mobile-first (same final appearance)
   - Reduced duplicate/overlapping rules to eliminate unwanted overrides
   ========================================================= */


/* =========================================================
   1) VARIABLES
   ========================================================= */

.diamond-filter{
  --df-black: #111;
  --df-border: #e9e9e9;

  --df-radius-outer: 20px;
  --df-gap: 16px;
  --df-pad: 16px;
}

body.df-list-view{
  --df-border: #f0f0f0;
  --df-pad-x: 14px;

  /* Final columns (9): Thumb | SKU | Price | Shape | Color | Clarity | Cut | Actions | Plus */
  --df-cols: 90px 140px 140px 120px 110px 110px 90px 260px 64px;
}


/* =========================================================
   2) BASE / SAFETY
   ========================================================= */

.diamond-filter *,
.diamond-filter *::before,
.diamond-filter *::after{
  box-sizing: border-box;
}


/* =========================================================
   3) LAYOUT
   ========================================================= */

/* Make sure WOOF wrapper doesn't limit width */
.diamond-filter .woof{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}

/* Redraw zone grid (mobile-first) */
.diamond-filter .woof_redraw_zone{
  width: 100% !important;
  margin: 0 auto !important;

  background: #fff;
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius-outer);
  padding: 14px !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  align-items: start !important;
}

/* Desktop: 2 columns */
@media (min-width: 901px){
  .diamond-filter .woof_redraw_zone{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--df-gap) !important;
    padding: var(--df-pad) !important;
  }
}

/* Filter cards */
.diamond-filter .woof_redraw_zone > .woof_container{
  float: none !important;
  clear: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;

  background: #fff;
  padding: 12px 12px 14px !important;
}

/* Titles */
.diamond-filter .woof_container_title,
.diamond-filter .woof_container h4{
  margin: 0 0 10px !important;
  font-size: 16px !important;
  color: var(--df-black) !important;
}

/* Full-width blocks */
.diamond-filter .woof_container_pa_diamond_type,
.diamond-filter .woof_submit_search_form_container,
.diamond-filter .woof_reset_button,
.diamond-filter .woof_reset_button_2{
  grid-column: 1 / -1 !important;
}


/* =========================================================
   4) COMPONENTS
   ========================================================= */

/* -------------------------
   4.1 Diamond Type = Buttons
   ------------------------- */

.diamond-filter .woof_container_pa_diamond_type .woof_list_radio{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.diamond-filter .woof_container_pa_diamond_type .woof_list_radio li{
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.diamond-filter .woof_container_pa_diamond_type .woof_list_radio label{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 1px solid #d7d7d7 !important;
  background-color: #f7f7f7 !important;

  font-weight: 700 !important;
  user-select: none !important;
  transition: all .15s ease !important;

  position: relative !important;
  z-index: 1 !important;

  /* iCheck overlay handles click */
  pointer-events: none !important;
}

/* iCheck overlay: keep for click, hide dot */
.diamond-filter .woof_container_pa_diamond_type div[class*="iradio"],
.diamond-filter .woof_container_pa_diamond_type ins,
.diamond-filter .woof_container_pa_diamond_type .iCheck-helper{
  opacity: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  display: block !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

.diamond-filter .woof_container_pa_diamond_type li.checked label,
.diamond-filter .woof_container_pa_diamond_type li.woof_term_checked label,
.diamond-filter .woof_container_pa_diamond_type label.woof_radio_label_selected{
  background-color: var(--df-black) !important;
  border-color: var(--df-black) !important;
  color: #fff !important;
}


/* -------------------------
   4.2 Shape tiles (ICONS visible, TEXT hidden)
   ------------------------- */

.diamond-filter .woof_container_pa_shape .woof_list_image{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.diamond-filter .woof_container_pa_shape .woof_list_image li{
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Hide extra text label */
.diamond-filter .woof_container_pa_shape .woof_list_image label.woof_wcga_label_hide{
  display: none !important;
}

/* Icon tile label */
.diamond-filter .woof_container_pa_shape .woof_list_image label:not(.woof_wcga_label_hide){
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 46px !important;
  height: 46px !important;

  border: 1px solid #e6e6e6 !important;
  border-radius: 12px !important;

  background-color: #fff !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 72% 72% !important;

  cursor: pointer !important;
  transition: all .15s ease !important;

  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
}

.diamond-filter .woof_container_pa_shape .woof_list_image label:not(.woof_wcga_label_hide) img{
  display: block !important;
  max-width: 50% !important;
  max-height: 50% !important;
}

/* Selected */
.diamond-filter .woof_container_pa_shape .woof_list_image input:checked + label:not(.woof_wcga_label_hide),
.diamond-filter .woof_container_pa_shape .woof_list_image input:checked + label.woof_wcga_label_hide + label{
  border-color: var(--df-black) !important;
  box-shadow: 0 0 0 2px rgba(17,17,17,.12) !important;
}


/* -------------------------
   4.3 Sliders – BLACK + remove “double line” look (scoped)
   ------------------------- */

.diamond-filter .irs{ margin-top: 10px !important; }

.diamond-filter .irs-line,
.diamond-filter .irs-bar,
.diamond-filter .irs-bar-edge{
  border: 0 !important;
  box-shadow: none !important;
}

.diamond-filter .irs-line{ background: #d8d8d8 !important; }
.diamond-filter .irs-bar,
.diamond-filter .irs-bar-edge{ background: var(--df-black) !important; }

.diamond-filter .irs--round .irs-handle{ border: 4px solid var(--df-black) !important; }

.diamond-filter .irs-from,
.diamond-filter .irs-to,
.diamond-filter .irs-single{
  background: var(--df-black) !important;
  border-color: var(--df-black) !important;
}

.diamond-filter .irs-handle i,
.diamond-filter .irs-handle > i:first-child{
  background: var(--df-black) !important;
  border-color: var(--df-black) !important;
}

.diamond-filter .irs-grid-text{ color: #777 !important; }


/* -------------------------
   4.4 Desktop: title left, controls right (except Shape + Diamond Type)
   ------------------------- */

@media (min-width: 901px){
  .diamond-filter .woof_redraw_zone > .woof_container:not(.woof_container_pa_shape):not(.woof_container_pa_diamond_type) .woof_container_inner{
    display: grid !important;
    grid-template-columns: 90px minmax(0, 1fr) !important;
    align-items: center !important;
  }

  .diamond-filter .woof_redraw_zone > .woof_container:not(.woof_container_pa_shape):not(.woof_container_pa_diamond_type) .woof_container_inner > h4,
  .diamond-filter .woof_redraw_zone > .woof_container:not(.woof_container_pa_shape):not(.woof_container_pa_diamond_type) .woof_container_inner > .woof_container_title{
    grid-column: 1 !important;
    margin: 0 !important;
    text-align: left !important;
    justify-self: start !important;
    white-space: nowrap !important;
  }

  .diamond-filter .woof_redraw_zone > .woof_container:not(.woof_container_pa_shape):not(.woof_container_pa_diamond_type) .woof_container_inner > *:not(h4):not(.woof_container_title){
    grid-column: 2 !important;
    min-width: 0 !important;
  }

  .diamond-filter .woof_redraw_zone > .woof_container:not(.woof_container_pa_shape):not(.woof_container_pa_diamond_type) .woof_container_inner .irs{
    width: 100% !important;
    margin-top: 0 !important;
  }

  .diamond-filter .woof_redraw_zone > .woof_container:not(.woof_container_pa_shape):not(.woof_container_pa_diamond_type) label.woof_wcga_label_hide{
    display: none !important;
  }

  /* Shape left, Cut right */
  .diamond-filter .woof_container_pa_shape{ grid-column: 1 / 2 !important; }
  .diamond-filter .woof_container_pa_cut{ grid-column: 2 / 3 !important; }

  /* Reset centered */
  .diamond-filter .woof_reset_button,
  .diamond-filter .woof_reset_button_2,
  .diamond-filter .woof_submit_search_form_container{
    grid-column: 1 / -1 !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
  }

  .diamond-filter .woof_reset_button button,
  .diamond-filter .woof_reset_button_2 button,
  .diamond-filter .woof_reset_button a,
  .diamond-filter .woof_reset_button_2 a{
    margin: 0 auto !important;
  }
}


/* =========================================================
   5) DF LIST VIEW – TABLE LAYOUT (final)
   ========================================================= */

/* Ensure the products wrapper behaves like a table */
body.df-list-view ul.products.products,
body.df-list-view .products.list-view{
  display: block !important;
}

body.df-list-view ul.products.products > li.product,
body.df-list-view .products.list-view > .product{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Header row: shared properties */
body.df-list-view .df-dt-head.df-v5,
body.df-list-view .df-dt-head.df-v7{
  display: grid !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px var(--df-pad-x) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--df-border) !important;
  background: #fff !important;
  width: 100% !important;
}

/* Header row: columns */
body.df-list-view .df-dt-head.df-v5{
  grid-template-columns: var(--df-cols) !important;
}

body.df-list-view .df-dt-head.df-v7{
  grid-template-columns: var(--df-cols, 90px 140px 120px 120px 90px 90px 90px 260px 56px) !important;
}

body.df-list-view .df-dt-head.df-v5 .c-thumb{
  visibility: hidden;
}

body.df-list-view .df-dt-head.df-v7 > div{
  min-width: 0;
  white-space: nowrap;
}

/* Keep header clean (empty edge cells) */
body.df-list-view .df-dt-head.df-v7 .c-thumb{ opacity: 0; }
body.df-list-view .df-dt-head.df-v7 .c-plus{ opacity: 0; }

/* Critical: override theme 'display: contents' so grid columns work */
body.df-list-view .products.list-view .product .pls-product-inner.df-dt-row,
body.df-list-view ul.products.products > li.product .pls-product-inner.df-dt-row{
  display: grid !important;
  grid-template-columns: var(--df-cols) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px var(--df-pad-x) !important;
  border-bottom: 1px solid var(--df-border) !important;
  width: 100% !important;
  grid-auto-rows: auto !important;
}

/* Keep all main cells on row 1 */
body.df-list-view .pls-product-inner.df-dt-row > .c-thumb,
body.df-list-view .pls-product-inner.df-dt-row > .c-sku,
body.df-list-view .pls-product-inner.df-dt-row > .c-price,
body.df-list-view .pls-product-inner.df-dt-row > .c-shape,
body.df-list-view .pls-product-inner.df-dt-row > .c-color,
body.df-list-view .pls-product-inner.df-dt-row > .c-clarity,
body.df-list-view .pls-product-inner.df-dt-row > .c-cut,
body.df-list-view .pls-product-inner.df-dt-row > .c-actions,
body.df-list-view .pls-product-inner.df-dt-row > .c-plus{
  grid-row: 1 !important;
  align-self: center !important;
}

/* Expanded details row goes below */
body.df-list-view .pls-product-inner.df-dt-row > .df-more{
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  padding: 12px var(--df-pad-x) 16px !important;
  border-top: 1px solid var(--df-border) !important;
  background: #fff !important;
}

body.df-list-view .pls-product-inner.df-dt-row > .df-more[hidden]{
  display: none !important;
}

/* Force CUT / ACTIONS / PLUS columns */
body.df-list-view .pls-product-inner.df-dt-row > .c-cut{ grid-column: 7 !important; }

body.df-list-view .pls-product-inner.df-dt-row > .c-actions{
  grid-column: 8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

body.df-list-view .pls-product-inner.df-dt-row > .c-plus{
  grid-column: 9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Stop action buttons from shrinking/wrapping */
body.df-list-view .pls-product-inner.df-dt-row > .c-actions a,
body.df-list-view .pls-product-inner.df-dt-row > .c-actions button{
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Thumb */
body.df-list-view .pls-product-inner.df-dt-row > .c-thumb img{
  width: 56px !important;
  height: 56px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
}

/* Hide remaining theme blocks if they survive JS cleanup */
body.df-list-view li.product .pls-product-image,
body.df-list-view li.product .pls-product-info,
body.df-list-view li.product .pls-product-buttons,
body.df-list-view li.product .pls-product-addtocart{
  display: none !important;
}

/* Plus toggle (list row) */
body.df-list-view .df-more-toggle{
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #111 !important;
  border-radius: 10px !important;
  width: 36px !important;
  height: 36px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 0 !important;

  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}

body.df-list-view .df-more-toggle:hover{
  background: #fff !important;
  color: #111 !important;
  border-color: #111 !important;
  transform: translateY(-1px);
}

body.df-list-view .df-more-toggle[aria-expanded="true"]{
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}

/* Center "see more" content area */
body.df-list-view .df-more-inner{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  padding: 18px 0 !important;
}

/* 3-part layout (media + 2 cols) */
body.df-list-view .df-more-layout{
  max-width: 1100px !important;
  width: 100% !important;
  margin: 0 auto !important;

  display: flex !important;
  gap: 28px !important;
  align-items: flex-start !important;

  padding: 18px 18px 22px !important;
}

/* Media column */
body.df-list-view .df-more-media{
  flex: 0 0 340px !important;
  max-width: 340px !important;
  min-width: 0 !important;
}

/* Two spec columns */
body.df-list-view .df-more-col{
  flex: 1 1 0 !important;
  min-width: 260px !important;
}

/* 360 box */
body.df-list-view .df-360{
  position: relative !important;
  width: 100% !important;
  padding-top: 85% !important;
  border: 1px solid var(--df-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fafafa !important;
}

body.df-list-view .df-360 iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

body.df-list-view .df-more-img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border: 1px solid var(--df-border) !important;
  border-radius: 14px !important;
}

/* Specs */
body.df-list-view .df-more-col .df-specs{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.df-list-view .df-more-col .df-spec{
  display: grid !important;
  grid-template-columns: 140px 1fr !important;
  gap: 14px !important;
  align-items: baseline !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

body.df-list-view .df-more-col .df-spec dt,
body.df-list-view .df-more-col .df-spec dd{
  margin: 0 !important;
}

/* CTA row */
body.df-list-view .df-more-cta{
  margin-top: 14px !important;
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* --- CTA Buttons (single source of truth) ---
   Supports:
   - .df-view-more / .df-view-details / .df-cert
   - .df-more-cta a.button.df-btn (theme button class)
*/
body.df-list-view .df-view-more,
body.df-list-view .df-view-details,
body.df-list-view .df-cert,
body.df-list-view .df-more-cta a.button.df-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #111 !important;
  color: #fff !important;
  border: 1px solid #111 !important;

  border-radius: 10px !important;
  padding: 12px 22px !important;
  min-height: 44px !important;

  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;

  box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important;

  /* Theme hover-variable override (Alukas / pls) */
  --pls-button-bg-hover-color: #111;
  --pls-button-hover-color: #fff;
}

/* Hover / focus (invert) */
body.df-list-view .df-view-more:hover,
body.df-list-view .df-view-details:hover,
body.df-list-view .df-cert:hover,
body.df-list-view .df-more-cta a.button.df-btn:hover,
body.df-list-view .df-view-more:focus,
body.df-list-view .df-view-details:focus,
body.df-list-view .df-cert:focus,
body.df-list-view .df-more-cta a.button.df-btn:focus{
  background: transparent !important;
  color: #111 !important;
  border-color: #111 !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

body.df-list-view .df-view-more:focus-visible,
body.df-list-view .df-view-details:focus-visible,
body.df-list-view .df-cert:focus-visible,
body.df-list-view .df-more-cta a.button.df-btn:focus-visible{
  box-shadow: 0 0 0 2px rgba(17,17,17,.18) !important;
}

/* Disabled certificate */
body.df-list-view .df-cert.is-disabled{
  opacity: .45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  border-color: #999 !important;
  color: #666 !important;
  background: transparent !important;
}

/* Responsive */
@media (max-width: 1024px){
  body.df-list-view{
    --df-cols: 80px 130px 130px 110px 110px 110px 80px 240px 64px;
  }

  body.df-list-view .df-more-layout{
    flex-direction: column !important;
  }

  body.df-list-view .df-more-media{
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }

  body.df-list-view .df-more-col{
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 520px){
  body.df-list-view .df-more-col .df-spec{
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   6) UTILITIES / SMALL FIXES
   ========================================================= */

/* Shape icons: add inner padding (space between border and icon) */
.diamond-filter .woof_container_pa_shape span.checkbox.woof_image_term{
  padding: 6px !important;
  background-origin: content-box !important;
  background-clip: content-box !important;
}


/*.diamond-filter span.woof_image_term{*/
/*  position: relative;*/
/*  background-image: none !important;*/
/*}*/

/*.diamond-filter span.woof_image_term::before{*/
/*  content:"";*/
/*  position:absolute;*/
/*  inset: 4px;*/
/*  background-color: currentColor;*/
/*  -webkit-mask: var(--woof-icon) no-repeat center / contain;*/
/*          mask: var(--woof-icon) no-repeat center / contain;*/
/*  pointer-events:none;*/
/*  opacity:.75;*/
/*  transition: opacity .2s ease, filter .2s ease;*/
/*}*/

/*.diamond-filter span.woof_image_term:hover::before{*/
/*  opacity:.95;*/
/*  filter: brightness(.85);*/
/*}*/

/*.diamond-filter span.woof_image_term:has(input:checked)::before{*/
/*  opacity: 1;*/
/*  filter: brightness(.70);*/
/*}*/

/*.diamond-filter span.woof_image_term:hover{*/
/*  border-color:#c9ced2 !important;*/
/*}*/
/*.diamond-filter span.woof_image_term:has(input:checked){*/
/*  border-color:#9aa3aa !important;*/
/*}*/

/* =========================
   SHAPE ONLY (colorable PNG)
   ========================= */

/* only in Shape block */
.diamond-filter .woof_container_pa_shape span.checkbox.woof_image_term{
  position: relative;
  background-image: none !important; /* remove original icon only for shape */
  color: #292f38 !important;         /* default shape icon color */
}

/* the colored icon layer */
.diamond-filter .woof_container_pa_shape span.checkbox.woof_image_term::before{
  content:"";
  position:absolute;
  inset: 4px;
  background-color: currentColor;
  -webkit-mask: var(--woof-icon) no-repeat center / contain;
          mask: var(--woof-icon) no-repeat center / contain;
  pointer-events:none;
  opacity:.75;
  transition: opacity .2s ease, filter .2s ease;
}

/* hover */
.diamond-filter .woof_container_pa_shape span.checkbox.woof_image_term:hover::before{
  opacity:.95;
  filter: brightness(.85);
}

/* selected */
.diamond-filter .woof_container_pa_shape span.checkbox.woof_image_term:has(input:checked)::before{
  opacity: 1;
  filter: brightness(.70);
}




/* =========================================================
   7) GRID VIEW (4 cols default, responsive)
   ========================================================= */

body.woocommerce.df-grid-view ul.products,
body.woocommerce:not(.df-list-view) ul.products{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

@media (max-width: 1200px){
  body.woocommerce.df-grid-view ul.products,
  body.woocommerce:not(.df-list-view) ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px){
  body.woocommerce.df-grid-view ul.products,
  body.woocommerce:not(.df-list-view) ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px){
  body.woocommerce.df-grid-view ul.products,
  body.woocommerce:not(.df-list-view) ul.products{
    grid-template-columns: 1fr !important;
  }
}

body.df-grid-view ul.products{
  grid-auto-flow: row !important;
}

body.df-grid-view ul.products > li.product{
  width: auto !important;
  flex: none !important;
}


/* =========================================================
   8) HEADER CONTROLS (remove unwanted buttons)
   ========================================================= */

/* Hide ONLY 2-col + 3-col buttons (based on your DOM) */
.pls-products-view a.pls-tooltip.grid-two-col,
.pls-products-view a.pls-tooltip.grid-three-col{
  display: none !important;
}

/* Remove the "Filters" button */
.pls-products-header .pls-product-filter-btn{
  display: none !important;
}

/* Remove spacing after hiding filter button */
.pls-products-header-right{
  gap: 0 !important;
}