/* MU view: minimal layout; theme can override. */
.catalog { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
.product-filter { position: relative; display: block; }
/* Force filter column visible (theme may hide it). Use very high specificity to beat theme rules. */
html body #vr-catalog .catalog .product-filter{ display:block !important; }
html body #vr-catalog .catalog #vr-filter{ display:block !important; }

/* Never sticky and never scroll inside the filter column (prototype behavior). */
.product-filter__inner { position: static; top: auto; max-height: none; overflow: visible; padding-right: 0; }
.product-list.is-loading { opacity: .65; pointer-events: none; }

/* Heading */
.catalog-heading{ text-align:center; }

/* Top bar above results (sort). */
.catalog-topbar{ display:flex; align-items:center; gap:12px; margin: 0 0 16px; }
.catalog-topbar__spacer{ flex:1; }

/* Mobile filter toggle button (lives ABOVE the filter list; toggle collapses/expands the form). */
.product-filter__mobiletoggle{ display:inline-flex; width:100%; justify-content:center; padding: 12px 14px; border-radius: 999px; border: 1px solid rgba(0,0,0,.18); background: transparent; cursor:pointer; margin: 0 0 14px; }

.product-filter__section { margin: 0 0 18px; }
.product-filter__label, .product-filter__title { display: block; font-weight: 600; margin-bottom: 6px; }
.product-filter__search, .product-filter__listsearch, .product-filter__select { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,.15); }
.product-filter__select { background: #fff; }
.product-filter__checks { display: grid; gap: 8px; }
.product-filter__check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.product-filter__list { display: grid; gap: 8px; margin-top: 10px; }
.product-filter__more { margin-top: 10px; border: 0; background: transparent; text-decoration: underline; cursor: pointer; }


@media (max-width: 959px) {
  .catalog { grid-template-columns: 1fr; }
  /* Force the filter column itself to remain visible on mobile; only the form collapses.
     Theme CSS may hide .product-filter; override that here. */
  html body #vr-catalog .catalog .product-filter{ display:block !important; }
  html body #vr-catalog .catalog #vr-filter{ display:block !important; }
  /* Button is visible on mobile; the filter form is collapsed by default. */
  .product-filter__mobiletoggle{ display:inline-flex; }
  #vr-filter .product-filter__mobiletoggle{ display:inline-flex !important; }
  #vr-filter-form{ display:none; }
  #vr-catalog.is-filters-open #vr-filter-form{ display:block; }
}

/* Desktop: hide the mobile sort host placeholder. */
@media (min-width: 960px){
  .vr-sort-host--filter{ display:none; }
  .product-filter__mobiletoggle{ display:none !important; }
}

/* Classic pagination */
.vr-pagination{ display:flex; justify-content:center; margin: 24px 0 8px; }
.vr-pagination ul{ list-style:none; display:flex; gap:8px; padding:0; margin:0; }
.vr-pagination li{ display:inline-flex; }
.vr-pagination a, .vr-pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; border-radius:999px; border:1px solid rgba(0,0,0,.2); text-decoration:none; }
.vr-pagination .current{ background: rgba(0,0,0,.06); }

/* ===== Prototype-like product cards (scoped to catalog only) =====
/* Derived from the prototype styles, but scoped to avoid global conflicts. */
#vr-catalog.vr-proto .padding-0{ padding:0; }
#vr-catalog.vr-proto .small{ font-size:16px; }
#vr-catalog.vr-proto .bullet-separator{ list-style:none; }
#vr-catalog.vr-proto .bullet-separator li{ padding-inline-end: .5rem; }
#vr-catalog.vr-proto .bullet-separator li + li{ list-style: disc; }
#vr-catalog.vr-proto .bullet-separator li + li::marker{ color:#ccc; }

#vr-catalog.vr-proto .product-list{ display:flex; flex:1; flex-direction:column; }
#vr-catalog.vr-proto .product-list > ul{
  display:flex;
  flex-direction:column;
  padding-inline-start:0;
  gap:2rem;
}

#vr-catalog.vr-proto .product-list-item{
  display:flex;
  flex-direction:column;
  gap:1rem;
  word-break:break-all;
  justify-content:space-between;
}
#vr-catalog.vr-proto .product-list-item + .product-list-item{
  border-top:1px solid #dfdfdf;
  padding-block-start:2rem;
}
#vr-catalog.vr-proto .product-list-item > div{
  display:flex;
  gap:1rem;
  flex:1;
  flex-direction:column;
}
#vr-catalog.vr-proto .product-list-item .image{
  display:block;
  background-color:#f8f8f8;
  align-self:flex-start;
}
#vr-catalog.vr-proto .product-list-item .image img{ mix-blend-mode:multiply; }
#vr-catalog.vr-proto .product-list-item img{
  padding:.5rem;
  max-height:9rem;
  border-radius:4px;
  background-color:#fff;
}
#vr-catalog.vr-proto .product-list-item .name{ font-weight:400; }
#vr-catalog.vr-proto .product-list-item .info{ display:flex; flex:1; gap:1rem; }
#vr-catalog.vr-proto .product-list-item .offer{ display:flex; flex-direction:column; gap:1rem; }
#vr-catalog.vr-proto .product-list-item .offer > div{ display:flex; }
#vr-catalog.vr-proto .product-list-item .pricing{ text-align:right; }
#vr-catalog.vr-proto .product-list-item .price{ display:flex; align-items:center; }

/* Price typography (works with Woo price HTML too) */
#vr-catalog.vr-proto .price-now,
#vr-catalog.vr-proto .price-before,
#vr-catalog.vr-proto .woocommerce-Price-amount{
  font-size:1.5rem;
  white-space:nowrap;
}

/* Prototype diagonal strike + muted old price */
#vr-catalog.vr-proto .price-now{ margin-inline-end:1rem; font-weight:400; }
#vr-catalog.vr-proto .price-before{
  margin-inline-end:.5rem;
  background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
  color:#767676;
}

#vr-catalog.vr-proto .decimals,
#vr-catalog.vr-proto .decimals-separator{
  font-size:.7em;
  display:inline-block;
  transform: translateY(-5px);
}
#vr-catalog.vr-proto .decimals-separator{ margin-inline:.1rem; }

/* In case any Woo markup still produces <ins>/<del>, keep it neutral. */
#vr-catalog.vr-proto ins{ background: transparent; text-decoration:none; }
#vr-catalog.vr-proto del{ color:#767676; text-decoration:none; }

#vr-catalog.vr-proto .quantity input{
  width:4rem;
  height:3rem;
  text-align:center;
  padding:.5rem;
}
#vr-catalog.vr-proto .button-cart{
  width:4rem;
  height:3rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
#vr-catalog.vr-proto .button-cart svg{ height:1.5rem; }
#vr-catalog.vr-proto .product-list-item .cart{ display:flex; gap:1rem; }

@media screen and (min-width: 640px){
  #vr-catalog.vr-proto .product-list-item{ flex-direction:row; }
}

@media screen and (min-width: 1280px){
  #vr-catalog.vr-proto .product-list-item > div{ flex-direction:row; }
  #vr-catalog.vr-proto .product-list-item .cart{ flex-direction:column; }
  #vr-catalog.vr-proto .product-list-item .bullet-separator{ display:flex; }
  #vr-catalog.vr-proto .product-list-item .bullet-separator li{ margin-inline-end:1rem; }
}

/* r25: mobile filter must never disappear; only the form collapses */
#vr-catalog > #vr-filter.product-filter { display:block !important; }
#vr-catalog > #vr-filter.product-filter .product-filter__inner { display:block !important; }

@media (max-width: 959px) {
  /* Button must remain visible above lists; collapse only the form */
  #vr-catalog:not(.is-filters-open) #vr-filter-form { display:none !important; }
  #vr-catalog .product-filter__mobiletoggle { display:inline-flex !important; }
}

@media (min-width: 960px) {
  #vr-catalog #vr-filter-form { display:block !important; }
  #vr-catalog .product-filter__mobiletoggle { display:none !important; }
}

/* Cart icon cue on add-to-cart */
.vr-header-cart svg, .vr-header-cart svg path { transition: fill 150ms ease; }
.vr-header-cart.is-added svg, .vr-header-cart.is-added svg path { fill: #ff6a00 !important; }