/* Final collection parity fixes: restore the production theme variables that
 * WordPress normally injects from Anvogue's dynamic CSS. */
body {
  --pls-primary-font: "Instrument Sans";
  --pls-secondary-font: "Instrument Sans";
  --pls-font-size: 16px;
  --pls-font-weight: 400;
  --pls-line-height: 1.75;
  --pls-container-width: 1320px;
  --pls-grid-gap: 15px;
  --pls-primary-color: #2c2b2c;
  --pls-primary-inverse-color: #BA39D2;
  --pls-secondary-color: #000000;
  --pls-secondary-inverse-color: #FFFFFF;
  --pls-secondary-color2: #555555;
  --pls-heading-color: #000000;
  --pls-text-color: #696C70;
  --pls-body-background: #ffffff;
  --pls-link-color: #1F1F1F;
  --pls-link-hover-color: #1F1F1F;
  --pls-border-color: #E9E9E9;
  --pls-border-radius: 12px;
  --pls-border-radius-s: 8px;
  --pls-border-radius-xs: 4px;
  --pls-shop-cart-button-color: #1F1F1F;
  --pls-shop-cart-button-hover-color: #FFFFFF;
  --pls-shop-cart-button-bg-color: #FFFFFF;
  --pls-shop-cart-button-bg-hover-color: #1F1F1F;
  --pls-product-price-color: #1F1F1F;
  --pls-product-sale-price-color: #696C70;
  --pls-woocommece-sale-label-color: #dd3333;
}

/* The captured page uses a 1320px production container and 15px gutters.
 * Without these variables the theme's var(...) declarations become invalid,
 * which collapses the collection into the visibly broken edge-to-edge layout. */
.pls-site-container.container,
#page-title .container {
  max-width: var(--pls-container-width) !important;
}

#allProductsGrid > .product {
  padding-left: var(--pls-grid-gap) !important;
  padding-right: var(--pls-grid-gap) !important;
  margin-bottom: 28px !important;
  box-sizing: border-box !important;
}

#allProductsGrid .pls-product-image {
  border-radius: var(--pls-border-radius) !important;
  overflow: hidden !important;
}

#allProductsGrid .pls-product-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* Match the production three-column control shown in the reference. */
.pls-products-view a.grid-three-col,
.pls-products-view a.grid-three-col.active,
.pls-products-view [data-shopview="grid-three-col"] {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 5px !important;
  background: #000000 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.pls-products-view a.grid-three-col::before,
.pls-products-view a.grid-three-col.active::before,
.pls-products-view [data-shopview="grid-three-col"]::before {
  content: "" !important;
  width: 17px !important;
  height: 18px !important;
  display: block !important;
  background: linear-gradient(to right,
    #ffffff 0 3px, transparent 3px 7px,
    #ffffff 7px 10px, transparent 10px 14px,
    #ffffff 14px 17px) !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Desktop sorter: bordered pill-like select, not the theme's invisible
 * native overlay select. */
.pls-products-header-filters-right .woocommerce-ordering {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  gap: 8px !important;
}

.pls-products-header-filters-right .pls-ordering-label {
  margin: 0 !important;
  color: #111111 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}

.pls-products-header-filters-right select.orderby {
  position: static !important;
  width: 160px !important;
  height: 35px !important;
  min-height: 35px !important;
  padding: 0 34px 0 14px !important;
  border: 1px solid #e2e2e2 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-indent: 0 !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

/* Exact sidebar rhythm from the captured production page. */
#secondary .widget_product_categories .product-categories > li {
  padding: 10px 4px !important;
  background: transparent !important;
  border-radius: 0 !important;
}

#secondary .widget_product_categories .product-categories > li > a {
  font-size: 14.5px !important;
  font-weight: 600 !important;
}

#secondary .widget_product_categories .product-categories > li span.count {
  margin-left: auto !important;
  margin-right: 0 !important;
}

#secondary .cat-expand-btn {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  margin-left: 5px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #666666 !important;
  font-size: 12px !important;
}

#secondary .widget_stock_status ul.pls-stock-status-filter li {
  padding: 8px 0 !important;
}

#secondary .widget_stock_status ul.pls-stock-status-filter li a {
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

#secondary .widget_stock_status ul.pls-stock-status-filter li a::before {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 1px solid #dfe2e6 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

#secondary .widget_stock_status ul.pls-stock-status-filter li span.count {
  margin-left: auto !important;
  color: #777777 !important;
}

#secondary .widget_stock_status ul.pls-stock-status-filter li.active-stock-filter a::before {
  border-color: #2563eb !important;
  background: #2563eb !important;
}

#secondary .widget_stock_status ul.pls-stock-status-filter li.active-stock-filter a::after {
  content: "✓" !important;
  position: absolute !important;
  left: 5px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

@media (max-width: 1024px) {
  #allProductsGrid > .product {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


/* Mobile-only fix: keep the existing sort control, but restore the selected
 * option text hidden by the base theme's mobile select rule. */
@media (max-width: 767px) {
  /* The collection keeps only the real filter trigger on mobile. Hide the legacy
     static 3-column view control if any plugin/script injects it. */
  body.pls-catalog-page .pls-products-view {
    display: none !important;
  }

  body.pls-catalog-page .woocommerce-ordering select.orderby {
    text-indent: 0 !important;
    font-size: 11px !important;
    color: #111111 !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
  }
}

/* Collection viewport fix: category/shop pages must occupy the full viewport.
 * Some boxed-theme/runtime configurations can constrain #page itself, which
 * leaves the captured storefront rendered in only part of the browser. This
 * changes only the outer page canvas; the collection's internal geometry is
 * left untouched. */
body.pls-catalog-page,
body.pls-catalog-page #page.pls-site-wrapper,
body.pls-catalog-page .pls-site-wrapper {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.pls-catalog-page .pls-site-header,
body.pls-catalog-page .pls-site-content {
  width: 100% !important;
  max-width: none !important;
}


/* Mobile catalogue: do not clip long product names. The reference layout
 * intentionally uses three columns, so names must be allowed to wrap fully
 * instead of being cut to two lines by the base theme. */
@media (max-width: 767px) {
  body.pls-catalog-page #allProductsGrid .product-title,
  body.pls-catalog-page #allProductsGrid .product-title a {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }
}