/* Front CSS v1.7.8 */
:root{--peri-bg:#0b132b;--peri-bg-hover:#1a2442;--peri-ink:#ffffff;--peri-line:#e5e7eb;--peri-icon:#111111;--peri-ra:20px;--peri-btn-radius:999px}
.peridot-any-align{display:flex;margin:.5rem 0}
.peridot-any-align--left{justify-content:flex-start}.peridot-any-align--center{justify-content:center}.peridot-any-align--right{justify-content:flex-end}
.peri-btn{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;padding:.75rem 1rem;border-radius:var(--peri-btn-radius);border:1px solid var(--peri-line);font-weight:normal!important;cursor:pointer;transition:transform .18s,opacity .18s,box-shadow .18s,background .18s,color .18s,border-color .18s;background:var(--peri-bg);color:var(--peri-ink)}
.peri-btn--outline{background:transparent;color:var(--peri-bg);border-color:var(--peri-bg)}
.peri-btn--ghost{background:transparent;color:var(--peri-bg);border-color:transparent}
.peri-btn:hover{box-shadow:0 6px 14px rgba(0,0,0,.15); background:var(--peri-bg-hover); color:var(--peri-ink-hover, var(--peri-ink))}
.peri-btn--outline:hover{background:var(--peri-bg);color:var(--peri-ink-hover, #fff)}
.peri-btn--ghost:hover{background:rgba(0,0,0,.04); color:var(--peri-ink-hover, var(--peri-bg))}
.peri-btn--sm{padding:.5rem .75rem;font-size:.9rem}.peri-btn--md{padding:.7rem 1rem;font-weight:normal;font-size:1rem}.peri-btn--lg{padding:.85rem 1.1rem;font-size:1.05rem}
.peri-btn--shadow{box-shadow:0 6px 14px rgba(0,0,0,.12)}.peri-btn--upper{text-transform:uppercase;letter-spacing:.4px}.peri-btn--full{display:block;font-weight:normal;width:100%}
.peri-btn-icon svg{width:18px;height:18px}.peri-btn:active{transform:scale(.98)}

.peridot-any-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:10000}
.peridot-any-overlay[aria-hidden="false"]{opacity:1;pointer-events:auto}
.peridot-any-modal{position:fixed;left:0;right:0;top:5vh;margin:0 auto;background:#fff;border-radius:var(--peri-ra);box-shadow:0 20px 60px rgba(0,0,0,.2);transform:translateY(12px) scale(.98);opacity:0;pointer-events:none;transition:transform .22s ease,opacity .22s ease;z-index:10001;max-width:780px;max-height:90vh;overflow:hidden}
.peridot-any-modal[aria-hidden="false"]{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.peridot-any-modal-inner{padding:16px;outline:0;position:relative;max-height:90vh;overflow:auto;scrollbar-gutter:stable}
.peridot-any-close{position:absolute;top:10px;right:12px;background:#fff;border:1px solid var(--peri-line);border-radius:999px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 6px 14px rgba(0,0,0,.08)}
.peridot-any-close .peri-x,.peridot-any-qv-close .peri-x{position:relative;display:block;width:18px;height:18px}
.peridot-any-close .peri-x::before,.peridot-any-close .peri-x::after,.peridot-any-qv-close .peri-x::before,.peridot-any-qv-close .peri-x::after{content:"";position:absolute;left:50%;top:50%;width:2px;height:16px;background:var(--peri-icon);transform-origin:center;border-radius:1px}
.peridot-any-close .peri-x::before{transform:translate(-50%,-50%) rotate(45deg)}.peridot-any-close .peri-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.peridot-any-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.peridot-any-searchwrap{position:relative;flex:1 1 220px}
.peridot-any-searchwrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:18px;height:18px;opacity:.55}
.peridot-any-search{width:100%;border:1px solid var(--peri-line);border-radius:12px;padding:.6rem .8rem .6rem 2.2rem}
.peridot-any-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.peridot-any-filter-cat{border:1px solid var(--peri-line);border-radius:12px;padding:.5rem .6rem;min-width:180px}
.peridot-any-filter-price{display:flex;align-items:center;gap:6px}
.peridot-any-filter-price input{width:110px;border:1px solid var(--peri-line);border-radius:10px;padding:.5rem .6rem}
.peridot-any-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:4px 0 12px}
.peridot-any-card{border:1px solid var(--peri-line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:6px;transition:transform .18s,box-shadow .18s;cursor:pointer;background:#fff}
.peridot-any-card{position:relative;overflow:hidden}
.peridot-any-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.peridot-any-card img{width:100%;height:auto;border-radius:10px}
.peridot-any-card-image{position:relative;overflow:hidden;border-radius:10px}
.peridot-any-card-image img{display:block;width:100%;height:auto}

/* Discount badge */
.peri-badge{position:absolute;
  /* move the discount badge slightly lower so it doesn't crowd the top edge */
  top:28px;
  left:8px;
  z-index:2;
  background:rgba(0,0,0,.72);
  color:#fff;
  padding:2px 6px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
}

/*
 * === Grid Modal width & card sizing improvements ===
 * On larger screens, expand the modal to show more products per row and
 * enlarge the cards uniformly. The modal width is increased and the grid
 * uses auto-fill columns with a minimum card width. Mobile layouts remain
 * unchanged, still showing one product per row.
 */
@media (min-width: 769px){
  /* Increase the modal’s max-width for desktop layouts */
  .peridot-any-modal{
    max-width:1160px;
  }
  /* Constrain the inner container’s width to the same max */
  .peridot-any-modal-inner{
    width:min(96vw, 1160px);
  }
  /* Responsive grid: choose number of columns via CSS variable. Each column takes equal space. */
  .peridot-any-grid{
    grid-template-columns: repeat(var(--peri_grid_cols, 4), 1fr);
    gap:16px;
  }
}
.peri-badge-qv{display:inline-block;margin-left:8px;background:rgba(0,0,0,.72);color:#fff;padding:2px 8px;border-radius:999px;font-size:.8rem;font-weight:700;vertical-align:middle;white-space:nowrap;}
.peri-old-price{text-decoration:line-through;opacity:.65;margin-right:6px;}
.peri-new-price{font-weight:700;color:#c0232b;}

/* Skeleton placeholders */
.peri-skeleton-card{border:1px solid var(--peri-line);border-radius:14px;padding:10px;background:#fff;display:flex;flex-direction:column;gap:6px}
.peri-skeleton{background:linear-gradient(90deg,#f3f3f3 25%,#eaeaea 37%,#f3f3f3 63%);background-size:400% 100%;animation:peri-shine 1.2s ease infinite;border-radius:8px}
.peri-skeleton-img{width:100%;height:0;padding-bottom:75%;border-radius:10px}
.peri-skeleton-line{width:100%;height:14px;border-radius:7px}
.peri-skeleton-line.short{width:60%}
@keyframes peri-shine{0%{background-position:200% 0}100%{background-position:-200% 0}}
.peridot-any-card-title{font-weight:600;font-size:.95rem;line-height:1.2}
.peridot-any-card-price{font-size:.9rem;opacity:.8}
.peridot-any-actions{display:flex;justify-content:center;margin:10px 0 14px}
.peridot-any-actions .peri-btn{min-width:220px}

.peridot-any-quickview{position:fixed;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:10002}
.peridot-any-quickview[aria-hidden="false"]{opacity:1;pointer-events:auto}
.peridot-any-qv-inner{background:#fff;border-radius:18px;max-width:720px;width:100%;padding:16px 16px 12px;box-shadow:0 20px 60px rgba(0,0,0,.2);outline:0;position:relative}
/* v1.7.8: Remove the Close X globally (Back button exists) */
.peridot-any-qv-close{display:none !important}
.peridot-any-qv-body{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.peridot-any-qv-gallery{display:flex;flex-direction:column;gap:8px}
.peridot-any-qv-main{border:1px solid var(--peri-line);border-radius:12px;overflow:hidden}
.peridot-any-qv-main img{width:100%;height:auto;display:block}
.peridot-any-qv-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.peridot-any-qv-thumbs img{width:100%;border:1px solid var(--peri-line);border-radius:8px;cursor:pointer;transition:transform .16s}
.peridot-any-qv-thumbs img:hover{transform:scale(1.02)}
.peridot-any-qv-info h3{margin:.2rem 0 .4rem}
.peridot-any-qv-attrs label{display:block;margin-bottom:8px}
.peridot-any-qv-attrs select{width:100%;border:1px solid var(--peri-line);border-radius:10px;padding:.5rem .6rem}
.peridot-any-qv-desc{margin-top:10px;font-size:.92rem;line-height:1.5;color:#222}
.peridot-any-qv-desc h4{margin:.3rem 0 .2rem;font-size:.95rem}
.peridot-any-qv-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

.peridot-any-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:10010}
.peridot-any-toast .toast{background:var(--peri-bg);color:var(--peri-ink);padding:.65rem .9rem;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.22);opacity:0;transform:translateY(10px);transition:opacity .2s, transform .2s}

@media (max-width: 768px) {
  .peridot-any-modal, .peridot-any-quickview { margin: 0 20px; width: auto !important; max-width: calc(100% - 40px); }
  /* On mobile, display one product per row for better touch targets */
  .peridot-any-grid{grid-template-columns:1fr}
  .peridot-any-qv-body{grid-template-columns:1fr}
}

/* Body-level toast to ensure visibility over modals */
.peri-toast-global{position:fixed;z-index:999999;pointer-events:none}
/* Elegant toast animation */
.peri-toast-global .toast{
  background: var(--peri-bg);
  color: var(--peri-ink);
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .28s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1);
  font-size:.95rem;
  white-space:nowrap;
  max-width:calc(100vw - 40px);
  text-overflow:ellipsis;
  overflow:hidden;
  will-change: opacity, transform;
}
.peri-toast-global .toast.show{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Reduce toast font size on small screens so long messages fit better */
@media (max-width: 768px) {
  .peri-toast-global .toast{
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 8px 12px;
  }
  /* Also adjust peridot-any-toast fallback if used */
  .peridot-any-toast .toast{
    font-size: 0.75rem;
    line-height: 1.2;
    padding: 8px 12px;
  }
}

/* === QV mobile robust scroll === */
.peridot-any-quickview{position:fixed; inset:0; display:flex; align-items:center; justify-content:center;}
.peridot-any-qv-inner{
  display:flex; flex-direction:column;
  /* On desktop, limit width similarly to older layout; later override for mobile */
  width:100%;
  /* χρησιμοποιούμε custom --vh για σταθερό ύψος με mobile bars */
  max-height:calc(var(--peri_vh, 1vh) * 92);
  overflow:hidden;               /* το σώμα θα κάνει scroll */
  border-radius:18px;
}
.peridot-any-qv-body{
  flex:1 1 auto;
  min-height:0;                  /* ΚΡΙΣΙΜΟ σε flex child για να δουλέψει το overflow */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;            /* επιτρέπει κάθετη κύλιση */
  padding-right:6px;             /* χώρος για native scrollbar */
}
.peridot-any-qv-actions{
  position:sticky; bottom:0;
  background:linear-gradient(to top, rgba(255,255,255,.98), rgba(255,255,255,.86) 70%, rgba(255,255,255,0));
  padding-top:10px;
}
.peridot-any-quickview[aria-hidden="false"]{ overscroll-behavior:contain; }

/* Fallback όπου δεν υποστηρίζεται custom prop (παλαιότερα mobile) */
@supports not (height: 1dvh){
  .peridot-any-qv-inner{ max-height:92vh; }
}

@media (max-width:768px){
  .peridot-any-qv-inner{ width:calc(100vw - 40px); }
}

/* === v1.8.8 QV scroll enhancement === */
/*
 * Add vertical scrolling to the Quick View modal. The quick view
 * container becomes a flexible column with a constrained height
 * relative to the viewport. The main body of the quick view scrolls
 * independently while the action bar stays pinned at the bottom.
 */
.peridot-any-qv-inner{
  display:flex;
  flex-direction:column;
  /* Limit the width on larger screens and fall back to full width on small screens */
  width:min(96vw, 980px);
  max-width:980px;
  /* Constrain the height so content doesn’t overflow outside the viewport */
  max-height: min(92vh, 860px);
}

/* Allow vertical scrolling within the quick view body */
.peridot-any-qv-body{
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px; /* reserve space for native scrollbars */
  flex:1 1 auto;
}

/* Keep the action buttons visible at the bottom as you scroll */
.peridot-any-qv-actions{
  position: sticky;
  bottom: 0;
  /* subtle gradient to differentiate the sticky footer from the content */
  background: linear-gradient(to top, rgba(255,255,255,.98), rgba(255,255,255,.86) 70%, rgba(255,255,255,0));
  padding-top: 10px;
}

/* Use dynamic viewport units when supported for more accurate heights */
@supports(height: 1dvh){
  .peridot-any-qv-inner{ max-height: 92dvh; }
}

@media (max-width: 768px){
  .peridot-any-qv-inner{
    /* On smaller screens allow the modal to span the full width minus margin */
    width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
  }
}

/* Prevent the background from scrolling when the quick view is open */
.peridot-any-quickview[aria-hidden="false"]{
  overscroll-behavior: contain;
}

/* === Custom override: maintain original quick view width on desktop === */
@media (min-width: 769px){
  /* Limit quick view container to a max width reminiscent of earlier design */
  .peridot-any-qv-inner{
    max-width:720px;
    width:100%;
  }
}

/* === Peridot Mobile Fixes - QV scroll hotfix (2025-09-09) === */
/*
 * Additional overrides specifically for mobile to ensure the quick view scrolls
 * properly even when the browser chrome (address bar) appears/disappears.
 * Use svh/dvh units when available. Without dynamic viewport units, fall back to vh.
 * Set overflow hidden on the container so that the scrollable child (qv-body) handles the scrolling.
 * Apply min-height:0 to the qv-body so it can shrink inside a flexbox and enable overflow.
 */
.peridot-any-qv-inner{
  height:92svh;
  max-height:92dvh;
  overflow:hidden;
}
@supports not (height: 1svh){
  .peridot-any-qv-inner{
    height:92vh;
    max-height:92vh;
  }
}
.peridot-any-qv-body{
  min-height:0;
  touch-action: pan-y;
}
@media (prefers-reduced-motion: reduce){
  .peri-toast-global .toast{ transition: none; transform: none !important; }
}


/* Toast position modifiers */
.peri-toast-global--bottom-center{left:50%;transform:translateX(-50%);bottom:20px}
.peri-toast-global--top-right{right:12px;top:12px}


/* Toast position modifiers (extended) */
.peri-toast-global--bottom-center{left:50%;transform:translateX(-50%);bottom:20px}
.peri-toast-global--top-right{right:12px;top:12px}
.peri-toast-global--top-center{left:50%;transform:translateX(-50%);top:12px}
.peri-toast-global--top-left{left:12px;top:12px}
.peri-toast-global--bottom-right{right:12px;bottom:20px}
.peri-toast-global--bottom-left{left:12px;bottom:20px}



/* === Peridot Mobile Fixes v1.8.6 (2025-09-08) === */
@media (max-width: 575px) {

  /* Close button smaller and offset from title */
  .peridot-any-modal .peridot-any-close,
  #peridot-any-modal .peridot-any-close {
    width: 28px;
    height: 28px;
    top: 10px;
    right: 10px;
    font-size: 14px;
    line-height: 28px;
  }
  .peridot-any-modal .peridot-any-close svg,
  #peridot-any-modal .peridot-any-close svg {
    width: 16px;
    height: 16px;
  }
  .peridot-any-modal .peridot-any-title,
  #peridot-any-modal .peridot-any-title {
    margin-right: 40px;
    font-size: 22px;
    line-height: 1.2;
  }

  /* Toolbar one column, full-width controls */
  .peridot-any-toolbar,
  #peridot-any-modal .peridot-any-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 8px;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .peridot-any-toolbar .peridot-any-category,
  #peridot-any-modal .peridot-any-category,
  .peridot-any-toolbar select.peridot-any-category,
  #peridot-any-modal select.peridot-any-category {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* Price row compact - prevent horizontal scroll */
  .peridot-any-toolbar .peridot-any-price-row,
  #peridot-any-modal .peridot-any-price-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    grid-column-gap: 8px;
    align-items: center;
    width: 100%;
  }
  .peridot-any-price-row .peridot-any-min,
  .peridot-any-price-row .peridot-any-max {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 14px;
  }
  .peridot-any-price-row .peridot-any-apply {
    padding: 8px 12px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* Ensure modal panel never overflows viewport width */
  #peridot-any-modal .peridot-any-modal-panel,
  .peridot-any-modal .peridot-any-modal-panel {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* Quick View: scrollable content with sticky footer */
.peridot-any-qv,
#peridot-any-modal .peridot-any-qv {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  overflow: hidden;
}
.peridot-any-qv .peridot-any-qv-body,
#peridot-any-modal .peridot-any-qv .peridot-any-qv-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
}
.peridot-any-qv .peridot-any-qv-footer,
#peridot-any-modal .peridot-any-qv .peridot-any-qv-footer {
  position: sticky;
  bottom: 0;
  padding: 10px 16px;
  background: var(--peri-bg, #fff);
  border-top: 1px solid var(--peri-border, rgba(0,0,0,.08));
  display: flex;
  gap: 8px;
  z-index: 2;
}
@media (max-width: 575px) {
  .peridot-any-qv,
  #peridot-any-modal .peridot-any-qv {
    max-height: 90vh;
  }
  .peridot-any-qv .peridot-any-qv-footer button {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* General safety for box sizing and background scroll lock (mobile) */
@media (max-width: 575px) {
  #peridot-any-modal,
  #peridot-any-modal * {
    box-sizing: border-box;
  }
  body.peridot-any--modal-open {
    overflow: hidden;
  }
}


/* === Peridot Mobile Safe-Area Tweaks v1.8.6.1 (2025-09-08) === */

/* Respect iOS safe areas for modal panel */
@supports(padding: max(0px)) {
  @media (max-width: 575px) {
    #peridot-any-modal .peridot-any-modal-panel,
    .peridot-any-modal .peridot-any-modal-panel {
      margin-top: calc(12px + env(safe-area-inset-top, 0px));
      margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
    }
  }
}

/* QV: ensure content never hides behind iOS bottom bar */
.peridot-any-qv .peridot-any-qv-footer,
#peridot-any-modal .peridot-any-qv .peridot-any-qv-footer {
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  min-height: 48px;
}

/* Make QV body scrolling smoother and self-contained */
.peridot-any-qv .peridot-any-qv-body,
#peridot-any-modal .peridot-any-qv .peridot-any-qv-body {
  overscroll-behavior: contain;
}

/* Sanity: QV images responsive */
#peridot-any-modal .peridot-any-qv img,
.peridot-any-qv img {
  max-width: 100%;
  height: auto;
}

/* Very small phones: reduce title size a bit more */
@media (max-width: 360px) {
  .peridot-any-modal .peridot-any-title,
  #peridot-any-modal .peridot-any-title {
    font-size: 20px;
    margin-right: 44px;
  }
}

/*
 * === Final desktop/mobile overrides ===
 * Ensure the Quick View panel remains compact on larger screens and
 * full width (with margin) on smaller devices. These rules appear
 * at the end of the stylesheet so they override any previous
 * declarations of .peridot-any-qv-inner.
 */
@media (min-width: 769px){
  .peridot-any-qv-inner{
    /* restore the original compact width on desktop */
    max-width:720px;
    width:100%;
  }
}

@media (max-width: 768px){
  .peridot-any-qv-inner{
    /* ensure full‑width minus margins on tablets/phones */
    width:calc(100vw - 40px);
  }
}

/*
 * Quick View height fix
 * Allow the quick view panel to size automatically on desktop with a sensible max height.
 * On mobile, retain the dynamic viewport height to prevent content from overflowing
 * off-screen while keeping actions sticky.
 */
@media (min-width: 769px){
  .peridot-any-qv-inner{
    height:auto !important;
    max-height:85vh !important;
  }
  .peridot-any-quickview{
    /* center the quick view vertically on desktop rather than sticking to the top */
    align-items:center;
  }
}

@media (max-width: 768px){
  .peridot-any-qv-inner{
    height:92svh !important;
    max-height:92dvh !important;
  }
  @supports not (height: 1svh){
    .peridot-any-qv-inner{
      height:92vh !important;
      max-height:92vh !important;
    }
  }
}


/* === Peridot Mobile Toolbar Hard Fixes v1.8.6.2 (2025-09-08) === */
@media (max-width: 575px) {
  /* Force one-column layout for the toolbar and prevent overflow */
  #peridot-any-modal .peridot-any-toolbar,
  .peridot-any-modal .peridot-any-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-row-gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding-right: 0 !important;
  }
  /* Every direct child takes full width unless we compact inside rows */
  #peridot-any-modal .peridot-any-toolbar > *,
  .peridot-any-modal .peridot-any-toolbar > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* Category select: full width regardless of class */
  #peridot-any-modal .peridot-any-toolbar select,
  .peridot-any-modal .peridot-any-toolbar select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }
  /* Price row: 2 inputs + compact button */
  #peridot-any-modal .peridot-any-toolbar .peridot-any-price-row,
  .peridot-any-modal .peridot-any-toolbar .peridot-any-price-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr minmax(90px,auto) !important;
    grid-column-gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Inputs */
  .peridot-any-price-row input[type="number"],
  .peridot-any-price-row input[type="text"],
  .peridot-any-price-row .peridot-any-min,
  .peridot-any-price-row .peridot-any-max {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
  }
  /* Apply button - identify generically: button inside price row, last-child */
  .peridot-any-price-row button,
  .peridot-any-price-row .peridot-any-apply {
    justify-self: end !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: 90px !important;
    max-width: 100% !important;
  }

  /* Kill any accidental horizontal scroll inside panel */
  #peridot-any-modal .peridot-any-modal-panel {
    overflow-x: hidden !important;
  }

/* === QV mobile robust scroll === */
/*
 * These overrides ensure the Quick View (QV) modal scrolls correctly on mobile
 * devices. The container uses a custom CSS variable (--peri_vh) set via
 * JavaScript to account for browser chrome (address bar) height changes. The
 * body of the QV scrolls independently, while the action bar stays sticky
 * at the bottom. Fallbacks to vh units are provided for older browsers.
 */
.peridot-any-quickview{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.peridot-any-qv-inner{
  display:flex;
  flex-direction:column;
  /* Limit width on desktop to maintain a compact quick view */
  width:min(96vw, 720px);
  max-height:calc(var(--peri_vh, 1vh) * 92);
  overflow:hidden;
  border-radius:18px;
}
.peridot-any-qv-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  padding-right:6px;
}
.peridot-any-qv-actions{
  position:sticky;
  bottom:0;
  background:linear-gradient(to top, rgba(255,255,255,.98), rgba(255,255,255,.86) 70%, rgba(255,255,255,0));
  padding-top:10px;
}
.peridot-any-quickview[aria-hidden="false"]{
  overscroll-behavior:contain;
}
@supports not (height: 1dvh){
  .peridot-any-qv-inner{ max-height:92vh; }
}
@media (max-width:768px){
  .peridot-any-qv-inner{ width:calc(100vw - 40px); }
}
}

/* Lock body scroll when modal or quick view is open */
body.peridot-modal-open {
  overflow: hidden;
}


/* Unify ALL sale badges within plugin modal/QV */
.peridot-any-root .onsale,
.peridot-any-root .woocommerce span.onsale,
.peridot-any-root .sale-badge,
.peridot-any-root .badge-sale,
.peridot-any-root .peridot-any-badge,
.peridot-any-root .peri-badge,
.peridot-any-modal .onsale,
.peridot-any-modal .sale-badge,
.peridot-any-modal .badge-sale,
.peridot-any-modal .peridot-any-badge,
.peridot-any-modal .peri-badge {
  background: #c0232b !important;
  border-color: #c0232b !important;
  color: #fff !important;
}


.peri-btn .peri-btn-icon{ color: var(--peri-icon, currentColor); }

.peri-btn--filled:hover{color:var(--peri-ink-hover, var(--peri-ink))}

.peri-btn .peri-btn-icon svg{color:var(--peri-icon, currentColor);fill:currentColor}