@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&family=Playfair+Display:wght@400;500&display=swap');

/* ════════════════════════════════════════════════════════════════
   HQV CUSTOM GRID  (used by both custom page templates)
   .hqv-grid  — the grid container
   .hqv-card  — one product / colour-variation card
   ════════════════════════════════════════════════════════════════ */

.hqv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100%;
}

@media (max-width: 1024px) {
  .hqv-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .hqv-grid { grid-template-columns: repeat(2, 1fr); }
}

.hqv-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #f5f5f5;
  border: solid 1px #e3e3e3;
  /*aspect-ratio: 3 / 4;*/
  transition: all .4s;
}
.hqv-grid .hqv-card:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.hqv-card:before {
    content: "\f10a";
    font-family: 'theme-icons';
    font-size: 20px;
    position: absolute;
    bottom: 10px;
    right: 15px;
    z-index: 1;
    cursor: pointer;
}

.hqv-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.hqv-card:hover img {
  transform: scale(1.04);
}



/* ════════════════════════════════════════════════════════════════
   BACKDROP
   ════════════════════════════════════════════════════════════════ */
#hqv-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.38);
  z-index: 99998;
  opacity: 0;
  transition: opacity .32s ease;
  cursor: pointer;
}
#hqv-backdrop:not([hidden]) { opacity: 1; }
#hqv-backdrop[hidden]        { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   SLIDE PANEL
   ════════════════════════════════════════════════════════════════ */
#hqv-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(780px, 96vw);
  background: #fff;
  z-index: 9999999;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,.14);
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  font-family: 'DM Sans', sans-serif;
}
#hqv-panel:not([hidden]) { transform: translateX(0); }
#hqv-panel[hidden]        { display: none !important; }

/* Inner layout: gallery left + info right */
#hqv-panel-inner {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ── Close button ───────────────────────────────────────────── */
#hqv-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px; height: 36px;
  border: 1px solid #e0e0e0;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  transition: background .15s, border-color .15s;
  color: #444;
}
#hqv-close:hover { background: #f5f5f5; border-color: #bbb; }

/* ════════════════════════════════════════════════════════════════
   GALLERY (left half of panel)
   ════════════════════════════════════════════════════════════════ */
#hqv-gallery {
  width: 52%;
  display: flex;
  gap: 0;
  background: #f5f3f0;
  overflow: hidden;
  flex-shrink: 0;
}

/* Vertical thumbnail strip */
#hqv-thumbs-wrap {
  width: 72px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  background: #edeae6;
}
#hqv-thumbs-wrap::-webkit-scrollbar       { width: 3px; }
#hqv-thumbs-wrap::-webkit-scrollbar-thumb { background: #bbb; border-radius: 4px; }

#hqv-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hqv-thumb {
  width: 52px; height: 62px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s, opacity .15s;
  opacity: .7;
}
.hqv-thumb:hover { opacity: 1; }
.hqv-thumb.active { border-color: #1a1a1a; opacity: 1; }
.hqv-thumb img    { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Main image area */
#hqv-main-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #f0ece6;
  display: flex; align-items: center; justify-content: center;
}
#hqv-main-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: opacity .18s ease;
}
#hqv-loader {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: #f0ece6;
  z-index: 2;
}
#hqv-loader::after {
  content: '';
  width: 30px; height: 30px;
  border: 2px solid #d0d0d0;
  border-top-color: #555;
  border-radius: 50%;
  animation: hqv-spin .7s linear infinite;
}
@keyframes hqv-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   INFO (right half of panel)
   ════════════════════════════════════════════════════════════════ */
#hqv-info {
  flex: 1;
  padding: 56px 28px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #e0e0e0 transparent;
}

#hqv-cat {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #999;
  margin: 0 0 6px;
  display: none;
}
#hqv-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #111;
  margin: 0 0 10px;
  letter-spacing: 0.5px;
}
#hqv-meta {
  font-size: 14px;
  color: #353535;
  margin: 0 0 7px;
  font-weight: 500;
}

/* Price */
#hqv-price-row {
  color: #000;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e7e5e5;
  font-family: 'Poppins', sans-serif;
}
#hqv-price-row del {
    opacity: 0.5;
}
#hqv-price-row .price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
}
#hqv-price-row .price ins {
  font-size: 16px; font-weight: 600; color: #000; text-decoration: none;
}
#hqv-price-row .price del { opacity: 0.5; }
#hqv-price-row .price bdi { font-size: inherit; }

/* Section label */
.hqv-section-label {
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  color: #212121;
  margin-bottom: 5px;
}

/* Variation groups */
.hqv-attr-group { margin-bottom: 15px; }
.hqv-options    { display: flex; flex-wrap: wrap; gap: 7px; }

.hqv-opt {
  min-height: 30px;
  min-width: 60px;
  padding: 0 7px;
  border: 1px solid #c1bebe;
  background: #fff;
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  color: #111;
  letter-spacing: .03em;
  transition: all .3s;
  text-transform: uppercase;
}
.hqv-opt:hover  { border-color: #999; background: #fafafa; }
.hqv-opt.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

.hqv-opt.swatch {
  width: 24px;
  height: 24px;
  min-height: 24px;
  min-width: 24px;
  padding: 0;
  border-radius: 50%;
  outline: 2px solid transparent;
  outline-offset: 3px;
}
.hqv-opt.swatch.active { outline: 2px solid #1a1a1a; }

/* Qty */
#hqv-qty-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 15px;
}
#hqv-qty-ctrl {
  display: flex;
  align-items: center;
  border: 1px solid #c1bebe;
  border-radius: 0;
  overflow: hidden;
}
#hqv-qty-minus, #hqv-qty-plus {
  width: 36px; height: 36px;
  background: none; border: none;
  font-size: 20px; cursor: pointer; color: #333;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
#hqv-qty-minus:hover, #hqv-qty-plus:hover { background: #f5f5f5; }
#hqv-qty-val {
  min-width: 36px; text-align: center;
  font-size: 14px; font-weight: 500; color: #111;
  border-left: 1px solid #eee; border-right: 1px solid #eee;
  line-height: 36px;
}

/* CTA */
#hqv-cta {     
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
  margin: 0 0 20px; 
}

#hqv-cta-top { display: flex; gap: 8px; }

#hqv-atc {
  flex: 1;
  height: 45px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: all .3s;
}
#hqv-atc:hover    { background: #2d2d2d; }
#hqv-atc:disabled { background: #ccc; cursor: not-allowed; }

#hqv-wish {
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  background: #1a1a1a;
  border: 1px solid #1a1a1a;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s;
  color: #fff;
}
#hqv-wish:hover      { border-color: #999; }
#hqv-wish.wished     { border-color: #d9534f; color: #d9534f; }
#hqv-wish.wished svg { stroke: #d9534f; fill: #d9534f; }

#hqv-view-link {
  display: block;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  color: #121212;
  font-weight: 500;
  border: 1px solid #949393;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0;
  transition: all .3s;
  text-transform: uppercase;
  margin-top: 5px;
}
#hqv-view-link:hover { color: #111; border-color: #bbb; }

/* Trust */
#hqv-trust {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 18px; border-top: 1px solid #f0f0f0; margin-top: 16px;
  display: none;
}
.hqv-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: #999;
}

/* Toast */
#hqv-toast {
  position: absolute; bottom: 20px; right: 20px;
  background: #1a1a1a; color: #fff;
  padding: 9px 20px; border-radius: 6px;
  font-size: 12px; font-family: 'DM Sans', sans-serif;
  opacity: 0; transition: opacity .25s;
  pointer-events: none; white-space: nowrap; z-index: 20;
  letter-spacing: .03em;
}
#hqv-toast.show { opacity: 1; }
body #page .c-product-grid__item .c-product-grid__badges, body #page .c-product-grid__item .c-product-grid__thumb-button-list, body #page .c-product-grid__item .c-product-grid__atc-block, body #page .c-product-grid__item .c-product-grid__details { display: none !important; }
body #page .c-product-grid__item:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); z-index: 2; }
body #page .c-product-grid__item:hover::after { border-color: transparent; }
/* ── HQV Wishlist button additions (append to hqv.css) ───────────────────── */
/* Both SVG icons live inside the button; toggle visibility with .wished class */
#hqv-wish .hqv-wish-icon--in  { display: none;  }
#hqv-wish .hqv-wish-icon--out { display: block; }
#hqv-wish.wished .hqv-wish-icon--out { display: none; }
#hqv-wish.wished .hqv-wish-icon--in  { display: block; color: #e63950; }
/* Smooth scale on click */
#hqv-wish {transition: transform .15s ease, color .15s ease;}
#hqv-wish:active { transform: scale(0.88);}
/* Filled heart colour */
#hqv-wish.wished { color: #e63950;}
/* Loading spinner while AJAX is in flight */
#hqv-wish.hqv-wish--loading {opacity: 0.5; pointer-events: none;}
/* Pop animation when adding to wishlist */
@keyframes hqv-wish-pop {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.9);  }
  100% { transform: scale(1);    }
}
#hqv-wish.wished { animation: hqv-wish-pop .35s ease forwards;}
.hqv-opt.hqv-swatch--color { background-color: var(--swatch-color, #ccc) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.tax-product_cat[style="overflow: hidden;"] { height: 100vh; }
body #page .c-product-grid__item .c-product-grid__thumb-wrap > a:before { content: "\f10a"; font-family: 'theme-icons'; font-size: 20px; position: absolute; bottom: 10px; right: 15px; z-index: 1; cursor: pointer; }
.c-page-header__row-2.l-section__container-wide { display: none; }
#hqv-filter-form .widget-title { margin: 0; }
#hqv-filter-form label {font-size: 14px; font-weight: 400; }
#hqv-filter-form .catcheckboxcol label strong { font-weight: 400; }
.c-sidebar__wrap .filterprice_row { max-height: 0px; overflow: hidden; transition: 1s linear; }
.c-sidebar__wrap .widget_price_filter.expanded .filterprice_row { max-height: 200px; }


#price-range { margin-top: 20px; } 
.filterprice_row .ui-slider { height: 4px; background: #000; border: none; border-radius: 10px; } 
.filterprice_row .ui-slider-range { background: #000; } 
.filterprice_row .ui-slider-handle { width: 16px !important; height: 16px !important; background: #000 !important; border-radius: 50%; border: none !important; cursor: pointer; top: -6px !important; }











/* RESPONSIVE — mobile: panel is 100% width bottom sheet style */
@media (min-width: 1190px) {
body #page .l-section--with-sidebar {display: block; flex-wrap: wrap; }
body #page .l-section__sidebar--4-per-row { width: 100%; }
body #page .l-section__content--with-sidebar { min-width: 100%; }
body #page .c-page-header__row-1-col.c-page-header__row-1-col--ordering .c-page-header__filter { opacity: 1; margin: 0; pointer-events: auto; position: relative; z-index: 9; display: block !important;}
body #page .c-shop-sidebar { z-index: 99999999 !important; position: fixed !important; left: 0; top: 0; width: 360px; max-width: 100%; height: 100%; visibility: hidden; opacity: 0; transition: all 0.3s; }
body #page .c-shop-sidebar__wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #ffffff; transition: all 0.3s cubic-bezier(0.86,0,0.07,1); transform: translateX(-100%); box-shadow: -5px 0 90px rgba(0, 0, 0, 0.15); }
.h-ltr .h-close-button { right: 0; }
body #page .c-shop-sidebar__content { padding-left: 30px; padding-right: 30px; display: inline-block; width: 100%; clear: both; position: absolute; left: 0; right: 0; top: 61px; bottom: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #ccc transparent; }
html.hidebar { overflow: hidden; }
body #page .c-shop-sidebar__content::-webkit-scrollbar { width: 3px; }
body #page .c-shop-sidebar__content::-webkit-scrollbar-thumb { background: #bbb; border-radius: 4px; }
body #page .c-shop-sidebar--desktop-sidebar .js-filter-close-button { display: inline-block; right: 12px; }
body #page .c-shop-sidebar__shadow { z-index: 99999; background-color: rgba(0, 0, 0, 0.3); }
body #page .c-shop-sidebar.baractive { opacity: 1; visibility: visible; }
body #page .c-shop-sidebar.baractive .c-shop-sidebar__wrap { transform: translateX(0); }
body .baractive + .c-shop-sidebar__shadow { visibility: visible; opacity: 1; }


}


@media (max-width: 600px) {
#hqv-panel { width: 100%; top: auto; height: 92vh; border-radius: 0; transform:translateY(100%); z-index:99999999; }
#hqv-backdrop { z-index: 99999998; }
#hqv-panel:not([hidden]) { transform: translateY(0); }
#hqv-panel-inner { display: block; width: 100%; height: 100%; max-height: 100vh; overflow: auto;}
#hqv-gallery { width: 100%; height: 55%; }
#hqv-main-wrap { background: #fff; }
#hqv-thumbs-wrap { width: 58px; padding: 10px 8px; }
.hqv-thumb { width: 42px; height: 52px; }
#hqv-info { padding: 20px 20px 24px; overflow: hidden; }
#hqv-main-img { object-fit: contain; }


}

/* ── Price range slider ── */
#hqv-price-range {
  margin: 14px 0 10px;
  height: 3px;
  background: #ddd;
  border: none;
  border-radius: 3px;
  position: relative;
}
#hqv-price-range .ui-slider-range {
  background: #000;
  border-radius: 3px;
  height: 3px;
  top: 0;
}
#hqv-price-range .ui-slider-handle {
  width: 14px;
  height: 14px;
  background: #000;
  border: none;
  border-radius: 50%;
  top: -6px;
  margin-left: -7px;
  cursor: pointer;
  outline: none;
  position: absolute;
}
#hqv-price-range .ui-slider-handle:focus,
#hqv-price-range .ui-slider-handle:hover {
  background: #333;
}
.pricenewcol {
  font-size: 13px;
  margin-top: 6px;
  color: #333;
}
.price_slider_wrapper.custompriceslider {  margin-left: 5px; margin-right: 10px; }

/* end hqv.css */