/* Petit Lomi — product archives and filters. */

/* ---------- Header ---------- */
.pl-shop-header {
  margin-bottom: var(--pl-space-6);
}

.pl-shop-header .page-title {
  margin: 0 0 var(--pl-space-2);
}

.pl-shop-desc {
  max-width: 72ch;
  color: var(--pl-text-muted);
}

.pl-shop-desc > *:last-child {
  margin-bottom: 0;
}

/* Long descriptions fold (filters.js adds the toggle). */
.pl-shop-desc.is-collapsible:not(.is-expanded) .term-description,
.pl-shop-desc.is-collapsible:not(.is-expanded) .page-description {
  max-height: 4.8em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}

.pl-shop-desc__toggle {
  margin-top: var(--pl-space-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--pl-primary);
  font-weight: var(--pl-font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- Chips ---------- */
.pl-chips ul {
  display: flex;
  gap: var(--pl-space-2);
  margin: var(--pl-space-4) 0 0;
  padding: 0 0 var(--pl-space-1);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.pl-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--pl-space-1);
  min-height: 44px;
  padding: 0 var(--pl-space-4);
  border: 1.5px solid var(--pl-border-strong);
  border-radius: var(--pl-radius-pill);
  background: var(--pl-white);
  color: var(--pl-text);
  font-size: var(--pl-text-sm);
  font-weight: var(--pl-font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--pl-duration-base), border-color var(--pl-duration-base), color var(--pl-duration-base);
}

.pl-chip:hover {
  border-color: var(--pl-primary);
  color: var(--pl-primary);
}

.pl-chip.is-active {
  border-color: var(--pl-primary);
  background: var(--pl-primary);
  color: var(--pl-text-on-primary);
}

.pl-chip__count {
  color: var(--pl-text-muted);
  font-weight: var(--pl-font-weight-regular);
}

.pl-size-chips ul {
  margin: 0 0 var(--pl-space-4);
}

/* ---------- Layout ---------- */
.pl-shop-layout {
  display: block;
}

@media (min-width: 1024px) {
  .pl-shop-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--pl-space-8);
    align-items: start;
  }
}

.pl-shop-main {
  min-width: 0;
  transition: opacity var(--pl-duration-base);
}

.pl-shop-main.is-loading {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- Toolbar ---------- */
.pl-shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pl-space-2) var(--pl-space-3);
  margin-bottom: var(--pl-space-4);
}

.pl-shop-toolbar .woocommerce-notices-wrapper {
  flex-basis: 100%;
  order: -2;
}

.pl-shop-toolbar .woocommerce-notices-wrapper:empty {
  display: none;
}

.pl-shop-toolbar .woocommerce-result-count {
  flex: 1;
  margin: 0;
  color: var(--pl-text-muted);
  font-size: var(--pl-text-sm);
}

.pl-shop-toolbar .woocommerce-ordering {
  float: none;
  margin: 0;
}

.pl-shop-toolbar .orderby {
  min-height: 44px;
  padding: 0 var(--pl-space-10) 0 var(--pl-space-4);
  border: 1.5px solid var(--pl-border-strong);
  border-radius: var(--pl-radius-pill);
  background: var(--pl-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance: none;
  color: var(--pl-text);
  font-size: var(--pl-text-sm);
  font-weight: var(--pl-font-weight-bold);
}

.pl-shop-toolbar__filter {
  order: -1;
}

.pl-shop-toolbar__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-primary);
  color: var(--pl-text-on-primary);
  font-size: var(--pl-text-xs);
}

@media (max-width: 1023px) {
  .pl-shop-toolbar .woocommerce-result-count {
    order: 3;
    flex-basis: 100%;
  }
}

@media (min-width: 1024px) {
  .pl-shop-toolbar__filter {
    display: none;
  }
}

/* ---------- Active filters ---------- */
.pl-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pl-space-2);
  margin-bottom: var(--pl-space-5);
}

.pl-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--pl-space-1);
  min-height: 44px;
  padding: 0 var(--pl-space-3);
  border-radius: var(--pl-radius-pill);
  background: var(--pl-tint-100);
  color: var(--pl-text);
  font-size: var(--pl-text-sm);
  font-weight: var(--pl-font-weight-bold);
  text-decoration: none;
}

.pl-filter-tag:hover {
  background: var(--pl-tint-200);
  color: var(--pl-text);
}

.pl-filter-clear {
  font-size: var(--pl-text-sm);
  font-weight: var(--pl-font-weight-bold);
}

/* ---------- Filter panel ---------- */
.pl-filters__head,
.pl-filters__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-space-3);
}

.pl-filters__title {
  margin: 0;
  font-family: var(--pl-font-heading);
  font-weight: var(--pl-font-weight-heading);
  font-size: var(--pl-text-h4);
}

.pl-filter-group {
  border-bottom: 1px solid var(--pl-border);
}

.pl-filter-group__title {
  display: flex;
  align-items: center;
  gap: var(--pl-space-2);
  min-height: 52px;
  cursor: pointer;
  font-weight: var(--pl-font-weight-bold);
  list-style: none;
}

.pl-filter-group__title::-webkit-details-marker {
  display: none;
}

.pl-filter-group__title::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--pl-duration-base);
}

.pl-filter-group[open] > .pl-filter-group__title::after {
  transform: rotate(-135deg) translateY(-2px);
}

.pl-filter-group__badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--pl-radius-pill);
  background: var(--pl-primary);
  color: var(--pl-text-on-primary);
  font-size: var(--pl-text-xs);
}

.pl-filter-group__options {
  display: grid;
  gap: var(--pl-space-1);
  margin: 0;
  padding: 0 0 var(--pl-space-4);
  border: 0;
  max-height: 320px;
  overflow-y: auto;
}

.pl-filter-group__links {
  margin: 0;
  padding: 0 0 var(--pl-space-4);
  list-style: none;
}

.pl-filter-group__links a {
  display: flex;
  justify-content: space-between;
  gap: var(--pl-space-2);
  padding: var(--pl-space-2) 0;
  color: var(--pl-text);
  text-decoration: none;
}

.pl-filter-group__links a:hover {
  color: var(--pl-primary);
}

.pl-filter-option {
  display: flex;
  align-items: center;
  gap: var(--pl-space-3);
  min-height: 44px;
  cursor: pointer;
}

.pl-filter-option input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--pl-primary);
}

.pl-filter-option__label {
  flex: 1;
}

.pl-filter-count {
  color: var(--pl-text-muted);
  font-size: var(--pl-text-xs);
}

.pl-filter-option__swatch {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
}

.pl-filter-option__swatch.is-unknown {
  background: repeating-linear-gradient(45deg, var(--pl-surface-muted) 0 3px, var(--pl-border) 3px 6px);
}

.pl-filter-price {
  grid-template-columns: 1fr 1fr;
  gap: var(--pl-space-2) var(--pl-space-3);
  overflow: visible;
}

.pl-filter-price label {
  display: grid;
  gap: var(--pl-space-1);
  font-size: var(--pl-text-xs);
  color: var(--pl-text-muted);
}

.pl-filter-price .pl-input {
  min-height: 42px;
}

.pl-filter-price .pl-btn {
  grid-column: 1 / -1;
  justify-self: start;
}

.pl-filter-group--stock {
  padding: var(--pl-space-3) 0;
}

/* Desktop: static sidebar */
@media (min-width: 1024px) {
  .pl-filters {
    position: sticky;
    top: var(--pl-space-4);
    max-height: calc(100vh - 2 * var(--pl-space-4));
    max-height: calc(100dvh - 2 * var(--pl-space-4));
    overflow-y: auto;
    padding-right: var(--pl-space-2);
  }

  /* main.js may set [hidden] after a mobile close; the sidebar always shows on desktop. */
  .pl-filters[hidden] {
    display: block !important;
  }

  .pl-filters__head .pl-filters__close,
  .pl-filters__apply {
    display: none;
  }

  .pl-filters__head {
    padding-bottom: var(--pl-space-2);
    border-bottom: 2px solid var(--pl-tint-100);
  }

  .pl-filters__foot {
    padding-top: var(--pl-space-4);
  }
}

/* Mobile: full-screen drawer (opened by main.js via data-pl-open="pl-filters") */
@media (max-width: 1023px) {
  .pl-filters {
    position: fixed;
    inset: 0;
    z-index: var(--pl-z-drawer);
    display: flex;
    flex-direction: column;
    background: var(--pl-surface);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--pl-duration-slow) var(--pl-ease-out), visibility 0s linear var(--pl-duration-slow);
  }

  .pl-filters.is-open {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }

  .pl-filter-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }

  .pl-filters__head {
    padding: var(--pl-space-2) var(--pl-space-2) var(--pl-space-2) var(--pl-space-5);
    border-bottom: 1px solid var(--pl-border);
  }

  .pl-filters__body {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--pl-space-5);
  }

  .pl-filters__foot {
    padding: var(--pl-space-3) var(--pl-space-5) calc(var(--pl-space-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--pl-border);
    box-shadow: 0 -8px 20px -12px rgb(var(--pl-shadow-rgb) / 0.3);
  }

  .pl-filters__apply {
    flex: 1;
  }

  .pl-filter-group__options {
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-filters {
    transition: none;
  }
}

/* ---------- Grid & pagination ---------- */
.pl-shop-main ul.products {
  margin-bottom: var(--pl-space-10);
}

@media (min-width: 1024px) {
  .woocommerce .pl-shop-main ul.products,
  .woocommerce-page .pl-shop-main ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.woocommerce nav.woocommerce-pagination {
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pl-space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  float: none;
  border: 0;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--pl-space-3);
  border-radius: var(--pl-radius-pill);
  color: var(--pl-text);
  font-weight: var(--pl-font-weight-bold);
  text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
  background: var(--pl-tint-100);
  color: var(--pl-primary);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--pl-primary);
  color: var(--pl-text-on-primary);
}

/* ---------- Empty state ---------- */
.pl-shop-empty {
  display: grid;
  justify-items: center;
  gap: var(--pl-space-3);
  padding: var(--pl-space-12) var(--pl-space-4);
  border: 1.5px dashed var(--pl-border-strong);
  border-radius: var(--pl-radius-lg);
  text-align: center;
  color: var(--pl-text-muted);
}

.pl-shop-empty .pl-icon {
  color: var(--pl-tint-200);
}

.pl-shop-empty__title {
  margin: 0;
  color: var(--pl-text);
  font-family: var(--pl-font-heading);
  font-weight: var(--pl-font-weight-heading);
  font-size: var(--pl-text-h4);
}

.pl-shop-empty p {
  margin: 0;
}

@media (max-width: 1023px) {
  .pl-filters__body {
    overscroll-behavior: contain;
  }

  .pl-filters {
    height: 100vh;
    height: 100dvh;
    bottom: auto;
  }
}