/* =============================================================================
   Shop / Product Archive
   Styles for archive-product.php and the .pcard--full catalog card.
   Card component itself lives in assets/css/components/product-card.css.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Page scaffold
   ----------------------------------------------------------------------------- */
.shop-main {
  background: var(--ovelia-colors-semantic-surface);
}

/* -----------------------------------------------------------------------------
   Page header (title + category description)
   ----------------------------------------------------------------------------- */
.shop-page-header {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  padding:        2.44rem var(--ovelia-layout-side-padding) 2rem;
}

.shop-page-header__title {
  font-family:    var(--ovelia-typography-fontfamily-serif);
  font-size:      2.25rem; /* 36px mobile */
  font-weight:    400;
  line-height:    1.1;
  letter-spacing: -0.02em;
  color:          var(--ovelia-colors-semantic-text);
  margin:         0;
}

.shop-page-header__description {
  font-size:   var(--ovelia-typography-fontsize-base);
  line-height: 1.5;
  color:       var(--ovelia-colors-semantic-text-subtle);
  max-width:   20rem;
  margin:      0;
}

/* -----------------------------------------------------------------------------
   Breadcrumb (sub-category pages only)
   ----------------------------------------------------------------------------- */
.shop-breadcrumbs {
  padding: 2rem var(--ovelia-layout-side-padding) 0;
}

.shop-breadcrumbs .woocommerce-breadcrumb {
  display:        flex;
  align-items:    center;
  flex-wrap:      wrap;
  gap:            0.5rem;
  font-size:      var(--ovelia-typography-fontsize-xs);
  font-weight:    var(--ovelia-typography-fontweight-medium);
  letter-spacing: 0.05em;
  line-height:    1.4;
  text-transform: uppercase;
  color:          var(--ovelia-colors-semantic-text-subtle);
}

.shop-breadcrumbs .woocommerce-breadcrumb a {
  color:           var(--ovelia-colors-semantic-text-subtle);
  text-decoration: none;
}

.shop-breadcrumbs .woocommerce-breadcrumb a:hover {
  color: var(--ovelia-colors-semantic-text);
}

.shop-breadcrumbs .woocommerce-breadcrumb .sep {
  color:     var(--ovelia-colors-semantic-border-strong);
  font-size: var(--ovelia-typography-fontsize-xs);
}

/* -----------------------------------------------------------------------------
   Mobile filter chips (ΣΥΛΛΟΓΕΣ + ΚΑΤΗΓΟΡΙΕΣ horizontal scroll)
   Hidden on desktop.
   ----------------------------------------------------------------------------- */
.shop-filter-chips {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  padding:        1.5rem 0;
  background:     var(--ovelia-colors-semantic-surface-elevated);
}

.shop-filter-chips__section {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.shop-filter-chips__label {
  display:        block;
  padding:        0 var(--ovelia-layout-side-padding) 0.75rem;
  font-family:    var(--ovelia-typography-fontfamily-sans);
  font-size:      var(--ovelia-typography-fontsize-sm);
  font-weight:    600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--ovelia-colors-semantic-text);
}

.shop-filter-chips__scroll {
  display:          flex;
  align-items:      baseline;
  gap:              0.75rem;
  padding:          0 var(--ovelia-layout-side-padding);
  overflow-x:       auto;
  scrollbar-width:  none;
  -ms-overflow-style: none;
}

.shop-filter-chips__scroll::-webkit-scrollbar {
  display: none;
}

.shop-filter-chips__chip {
  display:         flex;
  align-items:     baseline;
  gap:             0.5rem;
  flex-shrink:     0;
  padding:         0.25rem 0.5rem;
  background:      var(--ovelia-colors-semantic-surface);
  border-radius:   4px;
  text-decoration: none;
  color:           var(--ovelia-colors-semantic-text-subtle);
  transition:      background 0.2s;
}

.shop-filter-chips__chip.is-active,
.shop-filter-chips__chip:hover {
  background: var(--ovelia-colors-semantic-surface-overlay);
  color:      var(--ovelia-colors-semantic-text);
}

.shop-filter-chips__chip.is-active {
  font-weight: var(--ovelia-typography-fontweight-semibold);
}

.shop-filter-chips__chip-name {
  font-size:   var(--ovelia-typography-fontsize-base);
  line-height: 1.5;
}

.shop-filter-chips__chip-count {
  font-size:   var(--ovelia-typography-fontsize-xs);
  line-height: 1.25;
}

.shop-filter-chips__back-arrow {
  flex-shrink: 0;
  width:       14px;
  height:      14px;
}

/* -----------------------------------------------------------------------------
   Mobile sticky filter bar
   ----------------------------------------------------------------------------- */
.shop-filter-bar {
  position:         sticky;
  top:              var(--ovelia-header-h, 5.5625rem);
  z-index:          10;
  display:          flex;
  justify-content:  space-between;
  align-items:      center;
  padding:          0.75rem 0;
  background:       rgba(255, 249, 244, 0.85);
  backdrop-filter:  blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:    1px solid var(--ovelia-colors-semantic-border);
  transition:       top 250ms ease;
}

/* Header auto-hides on scroll — collapse the offset so no gap opens above the bar */
body.has-hidden-header .shop-filter-bar {
  top: 0;
}

.shop-filter-bar__filter-btn {
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
  padding:       0.5rem 0.75rem 0.5rem 0.25rem;
  background:    transparent;
  border:        none;
  border-radius: 0.75rem;
  cursor:        pointer;
  font-family:   var(--ovelia-typography-fontfamily-sans);
  font-size:     var(--ovelia-typography-fontsize-sm);
  font-weight:   600;
  letter-spacing: 0;
  text-transform: uppercase;
  color:          var(--ovelia-colors-semantic-text);
}

.shop-filter-bar__filter-btn:hover {
  background: var(--ovelia-colors-semantic-surface-elevated);
}

.shop-filter-bar__right {
  display:     flex;
  align-items: center;
  gap:         1rem;
}

.shop-filter-bar__count {
  font-size:      var(--ovelia-typography-fontsize-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--ovelia-colors-semantic-text-subtle);
}

.shop-filter-bar__filter-btn svg {
  display:     block;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   Size filter row — used in desktop sidebar and mobile filter drawer
   Mirrors .shop-color-filter but without a swatch element.
   ----------------------------------------------------------------------------- */
.shop-size-filter {
  display:         flex;
  align-items:     center;
  gap:             0.75rem;
  padding:         0.375rem 0;
  text-decoration: none;
  color:           var(--ovelia-colors-semantic-text-subtle);
  transition:      color 0.2s;
}

.shop-size-filter:hover,
.shop-size-filter.is-active {
  color: var(--ovelia-colors-semantic-text);
}

.shop-size-filter.is-zero {
  opacity:        0.35;
  pointer-events: none;
}

.shop-size-filter__check {
  flex-shrink:   0;
  width:         1rem;
  height:        1rem;
  border:        1.5px solid var(--ovelia-colors-semantic-border-strong);
  border-radius: 3px;
  background:    transparent;
  transition:    background 0.15s, border-color 0.15s;
}

.shop-size-filter.is-active .shop-size-filter__check {
  background:          var(--ovelia-colors-stone-700);
  border-color:        var(--ovelia-colors-stone-700);
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5L4 7.5L8.5 2' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     0.625rem;
}

.shop-size-filter__label {
  flex:        1;
  font-size:   var(--ovelia-typography-fontsize-base);
  line-height: 1.5;
}

.shop-size-filter__count,
.shop-color-filter__count {
  flex-shrink: 0;
  font-size:   var(--ovelia-typography-fontsize-xs);
  line-height: 1.25;
}

/* -----------------------------------------------------------------------------
   Mobile filter drawer
   ----------------------------------------------------------------------------- */
body.has-open-filters {
  overflow:    hidden;
  user-select: none;
}

.shop-filter-drawer {
  position:       fixed;
  top:            0;
  left:           0;
  z-index:        80;
  display:        flex;
  flex-direction: column;
  width:          min(100vw, 22rem);
  height:         100vh;
  height:         100dvh;
  overflow:       hidden;
  padding:        1.75rem 1.5rem 0;
  background:     var(--ovelia-colors-semantic-surface);
  box-shadow:     none;
  transform:      translateX(-105%);
  transition:     transform 280ms ease, box-shadow 280ms ease;
  will-change:    transform;
}

.shop-filter-drawer__body {
  flex:       1;
  overflow-y: auto;
  padding-bottom: 1rem;
}

.shop-filter-drawer__backdrop {
  position:        fixed;
  inset:           0;
  z-index:         70;
  display:         block;
  padding:         0;
  border:          0;
  background:      rgb(10 9 7 / 18%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 280ms ease;
  cursor:          default;
  user-select:     none;
}

body.has-open-filters .shop-filter-drawer {
  transform:  translateX(0);
  box-shadow: 24px 0 60px rgb(0 0 0 / 14%);
}

body.has-open-filters .shop-filter-drawer__backdrop {
  opacity:        1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .shop-filter-drawer,
  .shop-filter-drawer__backdrop {
    transition: none;
  }
}

.shop-filter-drawer__top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   2rem;
}

.shop-filter-drawer__title {
  font-family:    var(--ovelia-font-serif);
  font-size:      var(--ovelia-typography-fontsize-lg);
  font-weight:    400;
  letter-spacing: 0.15em;
  line-height:    1;
  text-transform: uppercase;
  color:          var(--ovelia-colors-semantic-text);
}

.shop-filter-drawer__close {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           2rem;
  height:          2rem;
  padding:         0;
  background:      transparent;
  border:          none;
  border-radius:   0.25rem;
  cursor:          pointer;
}

.shop-filter-drawer__close:hover {
  background: var(--ovelia-colors-semantic-surface-elevated);
}

.shop-filter-drawer__section {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  padding:        1.5rem 0;
  border-bottom:  1px solid var(--ovelia-colors-semantic-border);
}

.shop-filter-drawer__heading {
  font-family:    var(--ovelia-typography-fontfamily-sans);
  font-size:      var(--ovelia-typography-fontsize-sm);
  font-weight:    600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--ovelia-colors-semantic-text);
  margin:         0;
}

.shop-filter-drawer .woocommerce-ordering select {
  font-size:      var(--ovelia-typography-fontsize-base);
  font-weight:    400;
  letter-spacing: 0;
  text-transform: none;
  color:          var(--ovelia-colors-semantic-text-subtle);
}

.shop-filter-drawer__list {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  list-style:     none;
  margin:         0;
  padding:        0;
}

.shop-filter-drawer__link {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  text-decoration: none;
  color:           var(--ovelia-colors-semantic-text-subtle);
  transition:      color 0.2s;
}

.shop-filter-drawer__link:hover,
.shop-filter-drawer__link.is-active {
  color: var(--ovelia-colors-semantic-text);
}

.shop-filter-drawer__link-name {
  font-size:   var(--ovelia-typography-fontsize-base);
  line-height: 1.5;
}

.shop-filter-drawer__link-count {
  font-size:   var(--ovelia-typography-fontsize-xs);
  line-height: 1.25;
}

.shop-filter-drawer__sizes {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.shop-filter-drawer__colors {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

/* -----------------------------------------------------------------------------
   Color filter row — used in both sidebar and filter drawer
   (does NOT affect .swatch on the product page)
   ----------------------------------------------------------------------------- */
.shop-color-filter {
  display:         flex;
  align-items:     center;
  gap:             0.75rem;
  padding:         0.375rem 0;
  text-decoration: none;
  color:           var(--ovelia-colors-semantic-text-subtle);
  transition:      color 0.2s;
}

.shop-color-filter:hover,
.shop-color-filter.is-active {
  color: var(--ovelia-colors-semantic-text);
}

.shop-color-filter.is-zero {
  opacity:        0.35;
  pointer-events: none;
}

.shop-color-filter__swatch {
  flex-shrink:   0;
  width:         1.25rem;
  height:        1.25rem;
  border-radius: 9999px;
  background:    var(--swatch-color, var(--ovelia-colors-semantic-surface-overlay));
  border:        1px solid rgb(0 0 0 / 12%);
}

.shop-color-filter__label {
  flex:        1;
  font-size:   var(--ovelia-typography-fontsize-base);
  line-height: 1.5;
}

.shop-color-filter__check {
  flex-shrink:  0;
  width:        1rem;
  height:       1rem;
  border:       1.5px solid var(--ovelia-colors-semantic-border-strong);
  border-radius: 3px;
  background:   transparent;
  transition:   background 0.15s, border-color 0.15s;
}

.shop-color-filter.is-active .shop-color-filter__check {
  background:       var(--ovelia-colors-stone-700);
  border-color:     var(--ovelia-colors-stone-700);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5L4 7.5L8.5 2' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     0.625rem;
}

.shop-filter-drawer__footer {
  flex-shrink: 0;
  display:     flex;
  gap:         0.75rem;
  padding:     1rem 0 max(1.75rem, env(safe-area-inset-bottom));
  border-top:  1px solid var(--ovelia-colors-semantic-border);
}

.shop-filter-drawer__clear {
  flex:            1;
  padding:         0.625rem 0.75rem;
  background:      transparent;
  border:          1px solid var(--ovelia-colors-semantic-border-strong);
  border-radius:   0.375rem;
  font-family:     var(--ovelia-typography-fontfamily-sans);
  font-size:       var(--ovelia-typography-fontsize-sm);
  font-weight:     600;
  letter-spacing:  0.05em;
  text-transform:  uppercase;
  color:           var(--ovelia-colors-semantic-text-subtle);
  cursor:          pointer;
  transition:      border-color 0.15s, color 0.15s;
}

.shop-filter-drawer__clear:hover {
  border-color: var(--ovelia-colors-semantic-text);
  color:        var(--ovelia-colors-semantic-text);
}

.shop-filter-drawer__apply {
  flex:            1;
  padding:         0.625rem 0.75rem;
  background:      var(--ovelia-colors-stone-700);
  border:          1px solid var(--ovelia-colors-stone-700);
  border-radius:   0.375rem;
  font-family:     var(--ovelia-typography-fontfamily-sans);
  font-size:       var(--ovelia-typography-fontsize-sm);
  font-weight:     600;
  letter-spacing:  0.05em;
  text-transform:  uppercase;
  color:           var(--ovelia-colors-semantic-text-inverse);
  cursor:          pointer;
  transition:      background 0.15s, border-color 0.15s;
}

.shop-filter-drawer__apply:hover {
  background:   var(--ovelia-colors-stone-800);
  border-color: var(--ovelia-colors-stone-800);
}

/* -----------------------------------------------------------------------------
   Layout (mobile: stacked, desktop: sidebar + grid-area)
   ----------------------------------------------------------------------------- */
.shop-layout {
  padding: 0 var(--ovelia-layout-side-padding) 2.5rem;
}

.shop-sidebar {
  display: none; /* shown at desktop */
}

/* -----------------------------------------------------------------------------
   Desktop toolbar (count + sort). Hidden on mobile.
   ----------------------------------------------------------------------------- */
.shop-toolbar {
  display: none;
}

/* -----------------------------------------------------------------------------
   Catalog product grid
   ----------------------------------------------------------------------------- */
.shop-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   2rem;
  list-style:            none;
  margin:                0;
  padding:               0;
}

/* -----------------------------------------------------------------------------
   Pagination wrapper — style woocommerce_pagination output
   ----------------------------------------------------------------------------- */
.shop-pagination {
  padding-top:    2.5rem;
  border-top:     1px solid var(--ovelia-colors-semantic-border);
  margin-top:     1px; /* visually detach from grid border-gap */
}

.shop-pagination .woocommerce-pagination {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             2rem;
}

.shop-pagination .woocommerce-pagination ul {
  display:     flex;
  align-items: center;
  gap:         1rem;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.shop-pagination .woocommerce-pagination ul li a,
.shop-pagination .woocommerce-pagination ul li span {
  display:         block;
  padding-bottom:  4px;
  font-family:     var(--ovelia-typography-fontfamily-sans);
  font-size:       var(--ovelia-typography-fontsize-base);
  line-height:     1.5;
  color:           var(--ovelia-colors-semantic-text-subtle);
  text-decoration: none;
  border-bottom:   1px solid transparent;
}

.shop-pagination .woocommerce-pagination ul li a:hover {
  color:        var(--ovelia-colors-semantic-text);
  border-color: var(--ovelia-colors-semantic-text);
}

.shop-pagination .woocommerce-pagination ul li span.current {
  color:        var(--ovelia-colors-semantic-text);
  border-color: var(--ovelia-colors-semantic-text);
}

/* prev / next buttons */
.shop-pagination .woocommerce-pagination .prev,
.shop-pagination .woocommerce-pagination .next {
  font-family:    var(--ovelia-typography-fontfamily-sans);
  font-size:      var(--ovelia-typography-fontsize-base);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--ovelia-colors-semantic-text-subtle);
  text-decoration: none;
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
}

.shop-pagination .woocommerce-pagination .prev:hover,
.shop-pagination .woocommerce-pagination .next:hover {
  color: var(--ovelia-colors-semantic-text);
}

/* WC ordering select — shared base (mobile + desktop) */
.woocommerce-ordering {
  margin: 0;
}

.woocommerce-ordering select {
  appearance:          none;
  -webkit-appearance:  none;
  background-color:    transparent;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%231F1915' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right center;
  background-size:     0.625rem auto;
  border:              none;
  padding:             0 1.25rem 0 0;
  font-family:         var(--ovelia-typography-fontfamily-sans);
  font-size:           var(--ovelia-typography-fontsize-sm);
  font-weight:         600;
  letter-spacing:      0.1em;
  text-transform:      uppercase;
  color:               var(--ovelia-colors-semantic-text);
  cursor:              pointer;
}

.woocommerce-ordering select:focus-visible {
  outline: 2px solid var(--ovelia-colors-semantic-text);
  outline-offset: 2px;
}

/* Customizable <select> — only on fine-pointer (non-touch) devices. Touch devices keep
   the native OS picker (e.g. iOS wheel picker), which is the better experience there;
   unsupported browsers (Firefox/Safari) keep the SVG-chevron closed control above. */
@media (pointer: fine) {
  @supports (appearance: base-select) {
    .woocommerce-ordering select,
    .woocommerce-ordering select::picker(select) {
      appearance: base-select;
    }

    .woocommerce-ordering select {
      background-image: none;
    }

    .woocommerce-ordering select::picker-icon {
      color: var(--ovelia-colors-semantic-text);
    }

    .woocommerce-ordering select::picker(select) {
      margin-top:  var(--ovelia-spacing-step-2);
      min-width:   0;
      width:       max-content;
      max-width:   min(24rem, 90vw);
      border:      1px solid var(--ovelia-color-border);
      background:  var(--ovelia-color-surface);
      box-shadow:  0 10px 40px 0 rgba(58, 54, 50, 0.05);
      padding:     var(--ovelia-spacing-step-2);
    }

    .woocommerce-ordering select option {
      padding: var(--ovelia-spacing-step-2) var(--ovelia-spacing-step-3);
      cursor:  pointer;
    }

    .woocommerce-ordering select option:hover,
    .woocommerce-ordering select option:focus {
      background: var(--ovelia-colors-semantic-surface-overlay);
    }

    .woocommerce-ordering select option:checked {
      font-weight: var(--ovelia-typography-fontweight-semibold);
      color:       var(--ovelia-color-ink);
    }

    .woocommerce-ordering select option::checkmark {
      color: var(--ovelia-color-ink);
    }
  }
}

/* =============================================================================
   Desktop overrides (≥ 1024px)
   ============================================================================= */
@media (min-width: 64em) {

  /* Page header */
  .shop-page-header {
    max-width:      var(--ovelia-layout-max-width);
    margin-inline:  auto;
    padding:        4rem var(--ovelia-layout-side-padding) 0;
  }

  .shop-page-header__title {
    font-size: 3rem; /* 48px */
  }

  .shop-page-header__description {
    max-width: 36rem;
  }

  .shop-breadcrumbs {
    max-width:     var(--ovelia-layout-max-width);
    margin-inline: auto;
    padding:       4rem var(--ovelia-layout-side-padding) 0;
  }

  .shop-breadcrumbs .woocommerce-breadcrumb .sep {
    font-size: var(--ovelia-typography-fontsize-sm);
  }

  /* Hide mobile-only elements */
  .shop-filter-chips,
  .shop-filter-bar {
    display: none;
  }

  /* Layout: sidebar + grid area side by side */
  .shop-layout {
    max-width:     var(--ovelia-layout-max-width);
    margin-inline: auto;
    display:       flex;
    align-items:   flex-start;
    gap:           4rem;
    padding:       4rem var(--ovelia-layout-side-padding) 4rem;
  }

  /* Desktop sidebar */
  .shop-sidebar {
    display:   block;
    flex:      0 0 16rem; /* 256px */
    position:  sticky;
    top:       2rem;
  }

  .shop-sidebar.is-sticky-disabled {
    position: static;
  }

  .shop-sidebar__inner {
    display:        flex;
    flex-direction: column;
    gap:            2.5rem;
  }

  .shop-sidebar__section {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
  }

  .shop-sidebar__heading {
    font-family:    var(--ovelia-typography-fontfamily-sans);
    font-size:      var(--ovelia-typography-fontsize-sm);
    font-weight:    600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:          var(--ovelia-colors-semantic-text);
    margin:         0;
    padding-bottom: 0.5rem;
    border-bottom:  1px solid var(--ovelia-colors-powder-200);
  }

  .shop-sidebar__back-arrow {
    flex-shrink: 0;
    width:       14px;
    height:      14px;
  }

  .shop-sidebar__list {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    list-style:     none;
    margin:         0;
    padding:        0;
  }

  .shop-sidebar__link {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    text-decoration: none;
    color:           var(--ovelia-colors-semantic-text-subtle);
    transition:      color 0.2s;
  }

  .shop-sidebar__link:hover,
  .shop-sidebar__link.is-active {
    color: var(--ovelia-colors-semantic-text);
  }

  .shop-sidebar__link.is-active {
    font-weight: var(--ovelia-typography-fontweight-semibold);
  }

  .shop-sidebar__link-name {
    font-size:   var(--ovelia-typography-fontsize-base);
    line-height: 1.5;
  }

  .shop-sidebar__link-count {
    font-size:   var(--ovelia-typography-fontsize-xs);
    line-height: 1.25;
  }

  /* Sale link in collections */
  .shop-sidebar__link[href*="sale"] .shop-sidebar__link-name {
    color: var(--ovelia-colors-semantic-sale);
  }

  /* Size filter rows */
  .shop-sidebar__sizes {
    display:        flex;
    flex-direction: column;
    gap:            0;
  }

  /* Color filter rows */
  .shop-sidebar__colors {
    display:        flex;
    flex-direction: column;
    gap:            0;
  }

  /* Hide filter drawer on desktop */
  .shop-filter-drawer,
  .shop-filter-drawer__backdrop {
    display: none;
  }

  /* Grid area */
  .shop-grid-area {
    flex:           1;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            2.5rem;
  }

  /* Desktop toolbar */
  .shop-toolbar {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
  }

  .shop-toolbar__count {
    font-family:    var(--ovelia-typography-fontfamily-sans);
    font-size:      var(--ovelia-typography-fontsize-base);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--ovelia-colors-semantic-text-subtle);
  }

  .shop-toolbar__sort {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
  }

  /* 2-column grid (sidebar has claimed space; 3-column waits for more room) */
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap:                   2.5rem 1.5rem;
  }
}

/* =============================================================================
   3-column grid — once the layout has room to breathe (matches the layout
   max-width token, 1280px), bump from 2 to 3 columns.
   ============================================================================= */
@media (min-width: 80em) {
  .shop-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =============================================================================
   Responsive: 2-column grid at mid-tablet before sidebar kicks in
   ============================================================================= */
@media (min-width: 36em) and (max-width: 63.9375em) {
  .shop-grid {
    grid-template-columns: 1fr 1fr;
    gap:                   2rem 0.25rem;
  }

  /* Columns sit close together; image touches the card edge, text keeps its own gutter */
  .shop-grid .pcard--full .pcard__link {
    padding: 1.5rem 0;
  }

  .shop-grid .pcard__info {
    padding-inline: 0.75rem;
  }
}

/* =============================================================================
   2-column grid on larger mobiles (before the 36em tablet breakpoint)
   Tighter card padding so the narrower columns don't feel cramped.
   ============================================================================= */
@media (min-width: 24em) and (max-width: 35.9375em) {
  .shop-grid {
    grid-template-columns: 1fr 1fr;
    gap:                   1.5rem 0.25rem;
  }

  /* Columns sit close together; image touches the card edge, text keeps its own gutter */
  .shop-grid .pcard--full .pcard__link {
    padding: 0.75rem 0;
  }

  .shop-grid .pcard__info {
    padding-inline: 0.5rem;
  }

  .shop-grid .pcard--full .pcard__title {
    font-size: var(--ovelia-typography-fontsize-lg);
  }
}