/* ============================================================
   Vedere Commerce
   Swatches and shop filters. Inherits the theme's tokens when the
   Vedere theme is active, and falls back to sane values when it is
   not, so the plugin is usable on any theme.
   ============================================================ */

.vc-swatch-group,
.vedere-filter,
.vedere-active-filters{
  --vc-ink:var(--ink,#141310);
  --vc-line:var(--hair,#E2DED6);
  --vc-muted:var(--grey,#A5A099);
  --vc-surface:var(--paper-2,#F1EEE8);
  --vc-accent:var(--ink,#141310);
  --vc-paper:var(--paper,#F7F5F1);
  --vc-ease:var(--e,cubic-bezier(.16,1,.3,1));
}

/* ---------- progressive enhancement ----------
   Swatches are hidden and the native <select> is shown by default.
   The theme flags the document with .vc-js before first paint, so the
   swap happens without a flash. JavaScript off = working dropdowns. */
.vc-swatch-group{display:none}
.vc-js .vc-swatch-group{display:block;margin-bottom:22px}
.vc-js .woocommerce div.product form.cart .variations select[data-vc-enhanced]{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
/* Woo prints the attribute name in the row header; the swatch group has
   its own heading, so hide the duplicate once swatches are showing. */
.vc-js .woocommerce div.product form.cart .variations th.label,
.vc-js .woocommerce div.product form.cart .variations label[for]{display:none}

/* ---------- the swatches themselves ---------- */
.vc-swatch-group .opt-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-bottom:11px;
}
.vc-swatch-group .opt-head h3{
  font-family:var(--sans,inherit);font-size:10.5px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--vc-muted);margin:0;
}
.vc-swatch-group .opt-head .chosen{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--vc-ink);
}

.vc-swatches{display:flex;flex-wrap:wrap;gap:14px}

.vc-swatch{
  position:relative;display:block;background:none;border:0;
  border-radius:0;cursor:pointer;padding:0;font:inherit;color:inherit;
  width:58px;height:58px;
}
.vc-swatch::after{
  content:"";position:absolute;inset:-5px;border:1px solid transparent;
  transition:border-color .3s var(--vc-ease);
}
.vc-swatch:hover::after{border-color:var(--vc-line)}
.vc-swatch[aria-checked="true"]::after,.vc-swatch.is-selected::after{border-color:var(--vc-ink)}
.vc-swatch:focus-visible{outline:2px solid var(--vc-accent);outline-offset:2px}

/* text-only swatch reads as a pill button */
.vc-swatch--text{
  width:auto;height:auto;padding:11px 20px;border:1px solid var(--vc-line);font-size:13px;
}
.vc-swatch--text::after{display:none}
.vc-swatch--text.is-selected{background:var(--vc-ink);color:var(--vc-paper);border-color:var(--vc-ink)}

/* image and colour swatches: the art is the control, label sits beside it */
.vc-swatch__art{
  display:block;width:100%;height:100%;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* The label is read by assistive tech and shown as the chosen value
   in the group header, so it is not repeated beside every swatch. */
.vc-swatch--image .vc-swatch__label,
.vc-swatch--color .vc-swatch__label{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
}

/* unavailable for the current combination */
.vc-swatch.is-disabled{opacity:.3;cursor:not-allowed}
.vc-swatch.is-disabled::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top left,
    transparent calc(50% - .5px),var(--vc-ink) calc(50% - .5px),
    var(--vc-ink) calc(50% + .5px),transparent calc(50% + .5px));
}

/* compact variant for narrow columns */
@media (max-width:640px){
  .vc-swatch__art{width:40px;height:40px}
  .vc-swatch__label{font-size:12px}
}

/* ---------- sidebar swatch filter ---------- */
.vedere-filter .swatches{display:flex;flex-wrap:wrap;gap:12px}
.vedere-filter .swatch{
  display:block;width:44px;height:44px;position:relative;
  background-size:cover;background-position:center;
}
.vedere-filter .swatch::after{
  content:"";position:absolute;inset:-5px;border:1px solid transparent;
  transition:border-color .3s var(--vc-ease);
}
.vedere-filter .swatch:hover::after{border-color:var(--vc-line)}
.vedere-filter .swatch.is-active::after{border-color:var(--vc-ink)}
.vedere-filter .swatch--text{
  width:auto;height:auto;padding:6px 11px;font-size:12px;font-weight:600;
  background:var(--vc-surface);
}
.vedere-filter .swatch--text.is-active{background:var(--vc-ink);color:var(--vc-paper);border-color:var(--vc-ink)}

/* counted list */
.vedere-filter ul{list-style:none;margin:0;padding:0}
.vedere-filter li a{
  display:flex;justify-content:space-between;gap:10px;padding:7px 0;
  font-size:14px;color:var(--vc-ink);font-weight:300;text-decoration:none;
  transition:color .25s var(--vc-ease);
}
.vedere-filter li a:hover,
.vedere-filter li.is-active a{color:var(--vc-accent)}
.vedere-filter li.is-active a{font-weight:600}
.vedere-filter li a span{color:var(--vc-muted);font-size:12.5px;font-weight:300}

/* ---------- price form ---------- */
.vedere-price-form .range{display:flex;align-items:center;gap:10px}
.vedere-price-form input[type="number"]{
  width:100%;border:1px solid var(--vc-line);background:var(--vc-surface);
  padding:10px 12px;font-size:14px;border-radius:0;
}
.vedere-price-form input[type="number"]:focus{outline:none;border-color:var(--vc-ink)}

/* ---------- active filter chips ---------- */
.vedere-active-filters .active-chips{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:clamp(28px,5vh,52px)}
.vedere-active-filters .chip{
  display:inline-flex;align-items:center;gap:8px;border:0;
  border-bottom:1px solid var(--vc-line);background:none;padding:0 0 3px;
  font-size:12px;font-weight:400;text-decoration:none;color:var(--vc-ink);
  transition:border-color .25s var(--vc-ease);
}
.vedere-active-filters .chip:hover{border-bottom-color:var(--vc-ink)}
.vedere-active-filters .chip__x{font-size:15px;line-height:1;color:var(--vc-muted)}
.vedere-active-filters .chip:hover .chip__x{color:var(--vc-accent)}
.vedere-active-filters .chip--clear{border-bottom-color:transparent;color:var(--vc-muted)}
.vedere-active-filters .chip--clear:hover{color:var(--vc-accent);border-color:var(--vc-accent)}

.vedere-active-filters .screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  .vc-swatch,.vedere-filter .swatch,.vedere-active-filters .chip{transition:none}
}

/* ---------- saved items ---------- */
.vc-wish{
  --vc-ink:var(--ink,#15161A);
  --vc-line:var(--line,#DEDEDA);
  --vc-accent:var(--accent,#2438C8);
  --vc-paper:var(--paper,#F1F1EE);
  display:grid;place-items:center;background:transparent;cursor:pointer;
  border:1px solid var(--vc-ink);color:var(--vc-ink);border-radius:0;padding:0;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
/* width:auto is explicit: the theme's own .wish class pins 52px, and this
   button carries both classes. */
.vc-wish{border:0;color:var(--vc-ink)}
.vc-wish--single{
  display:inline-flex;align-items:center;gap:9px;width:auto;height:auto;
  padding:0 0 4px;border-bottom:1px solid var(--vc-line);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--vc-muted);margin-top:16px;white-space:nowrap;
}
.vc-wish--single i{font-size:16px}
.vc-wish--single:hover,.vc-wish--single.is-saved{color:var(--vc-ink);border-bottom-color:var(--vc-ink);background:none}

/* On a card the heart floats over the image, so it needs its own plate. */
.vc-wish--loop{
  position:absolute;top:0;right:0;z-index:3;width:34px;height:34px;font-size:17px;
  background:none;opacity:0;translate:0 -4px;
  transition:opacity .35s ease,translate .35s ease;
}
.tile:hover ~ .vc-wish--loop,
.woocommerce li.product:hover .vc-wish--loop,
.woocommerce li.product:focus-within .vc-wish--loop,
.vc-wish--loop:focus-visible,
.vc-wish--loop.is-saved{opacity:1;translate:0 0}
.vc-wish--loop:hover{opacity:1}

@media (hover:none){
  .vc-wish--loop{opacity:1;translate:0 0}
}
@media (prefers-reduced-motion:reduce){
  .vc-wish{transition:none}
  .vc-wish--loop{translate:0 0}
}