/* ==========================================================================
   OMONYMA — Shop / Category archive
   Classic, uniform grid — approved direction: same treatment for every
   product, no varied editorial rhythm. 4 columns desktop, always 2 on
   mobile regardless of product count.
   ========================================================================== */

.omh-shop-head { padding: 4rem 3rem 1.8rem; text-align: center; }
.omh-shop-head .eyebrow { font-size: 0.72rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: 0.8rem; }
.omh-shop-head h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 1.8rem + 2vw, 3.4rem); }

.omh-shop-filters {
  position: sticky; top: var(--header-h, 90px); z-index: 90; background: var(--color-bg);
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 3rem; border-bottom: 1px solid var(--color-line);
  flex-wrap: wrap; gap: 1rem;
}
.omh-filter-pills { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.omh-filter-pill {
  font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500;
  background: none; border: 1px solid var(--color-line); color: var(--color-ink-soft);
  padding: 0.5rem 1rem; cursor: pointer; transition: all 0.25s var(--ease); text-decoration: none; display: inline-block;
}
.omh-filter-pill.is-active { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }

/* WooCommerce's own native ordering dropdown — restyled, not replaced */
.omh-shop-filters .woocommerce-ordering { margin: 0; }
.omh-shop-filters select.orderby {
  font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
  background: none; border: 1px solid var(--color-line); color: var(--color-ink-soft);
  padding: 0.5rem 0.8rem; cursor: pointer;
}

.omh-shop-count { padding: 1.4rem 3rem 0; font-size: 0.72rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-soft); }

/* ============ Size / Price filter dropdowns (Activewear, T-Shirts, Sales only) ============ */
.omh-shop-filter-form { display: flex; align-items: center; gap: 0.6rem; margin: 0 3rem 0; flex-wrap: wrap; }
.omh-swatch-grid { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1rem; max-width: 180px; }
.omh-swatch {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 1px var(--color-line) inset; transition: border-color 0.2s var(--ease);
}
.omh-swatch.on { border-color: var(--color-ink); }
.c3-dd-wrap { position: relative; }
.c3-dd-btn {
  font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500;
  background: none; border: 1px solid var(--color-line); color: var(--color-ink-soft);
  padding: 0.5rem 1rem; cursor: pointer; transition: all 0.2s var(--ease);
}
.c3-dd-btn.on { border-color: var(--color-ink); color: var(--color-ink); }
.c3-dd-popover {
  position: absolute; top: 110%; left: 0; z-index: 60; display: none;
  background: var(--color-bg); border: 1px solid var(--color-line); box-shadow: 0 12px 30px rgba(0,0,0,0.1);
  padding: 1.2rem; min-width: 220px;
}
.c3-dd-popover.is-open { display: block; }
.fcheck { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; margin-bottom: 0.7rem; cursor: pointer; }
.fcheck input { width: 15px; height: 15px; accent-color: var(--color-ink); }
.flabel { font-size: 0.72rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: 0.6rem; }
.frange { width: 100%; accent-color: var(--color-ink); margin-bottom: 0.9rem; }
.fapply { width: 100%; background: var(--color-ink); color: var(--color-bg); border: none; padding: 0.8rem; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 900px) {
  .omh-shop-filter-form { margin: 0 1.2rem; }
  .c3-dd-popover { position: fixed; left: 5%; right: 5%; top: auto; bottom: 5%; min-width: auto; }
}

/* ============ THE GRID ============ */
.omh-shop-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 3rem 1.6rem !important;
  padding: 1.5rem 3.5rem 6rem !important;
  list-style: none !important;
  max-width: none !important;
  /* Confirmed live: this element was intermittently rendering ~300px
     narrower than its full available width, offset to the right,
     leaving a persistent empty gap on the left — reproducible visually
     but the exact source kept reporting differently between
     measurements (classic sign of something outside this stylesheet
     interfering unpredictably, quite possibly a WooCommerce core
     layout rule meant for its own default sidebar templates, which
     this theme's fully-custom archive-product.php doesn't use).
     Forcing these explicitly, unconditionally, removes the ambiguity
     regardless of the exact external cause. */
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}
.omh-shop-filters,
.omh-shop-filter-form,
.omh-shop-count {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}
.omh-shop-card { display: block; text-decoration: none; color: inherit; }
.omh-shop-card .omh-shop-img {
  position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--color-bg-alt);
}
.omh-shop-card .omh-shop-img img {
  width: 100% !important; height: 100% !important; aspect-ratio: 4/5 !important;
  object-fit: cover !important; display: block; transition: transform 0.5s var(--ease);
}
.omh-shop-card:hover .omh-shop-img img { transform: scale(1.03); }
.omh-shop-card .name { font-size: 0.92rem; margin-top: 0.9rem; font-family: var(--font-ui); color: var(--color-ink); }
.omh-shop-card .price { font-size: 0.88rem; color: var(--color-ink-soft); margin-top: 0.2rem; }
.omh-shop-card .price ins { text-decoration: none; color: var(--color-ink); }
.omh-shop-card .price del { opacity: 0.55; margin-right: 0.4em; }

.omh-shop-empty { padding: 6rem 3rem; text-align: center; color: var(--color-ink-soft); }

.omh-shop-pagination { display: flex; justify-content: center; gap: 0.6rem; padding: 0 3rem 6rem; }
.omh-shop-pagination .page-numbers {
  font-family: var(--font-ui); font-size: 0.78rem; text-decoration: none; color: var(--color-ink-soft);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
}
.omh-shop-pagination .page-numbers.current { color: var(--color-ink); border: 1px solid var(--color-line); }

@media (max-width: 900px) {
  .omh-shop-head, .omh-shop-filters, .omh-shop-count, .omh-shop-grid, .omh-shop-pagination { padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
  .omh-shop-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.8rem 1rem !important; }
}
@media (max-width: 480px) {
  .omh-shop-head { padding: 2.5rem 1.2rem 1.4rem; }
  .omh-shop-card .name { font-size: 0.84rem; }
}