/* ==========================================================================
   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-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-grid-swatches { display: flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0 0.3rem; }
.omh-grid-sw { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--color-line); cursor: pointer; padding: 0; }
.omh-grid-sw.is-on { box-shadow: 0 0 0 1.5px var(--color-bg), 0 0 0 2.5px var(--color-ink); }
.omh-grid-sw-more { font-size: 0.68rem; color: var(--color-ink-soft); margin-left: 0.1rem; }
.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 { padding: 0 3rem 6rem; }

/* The actual <li> page numbers live inside <ul class="page-numbers">,
   two levels below the .omh-shop-pagination wrapper — flex has to go
   on THIS element (was previously on the wrapper, which only ever
   had the single <nav> as a child, so it did nothing: the <ul>'s own
   default list stacking is what was actually showing). */
.omh-shop-pagination ul.page-numbers {
  display: flex !important; justify-content: center; align-items: center; gap: 1.6rem;
  list-style: none; position: relative; white-space: normal !important; border: none !important; margin: 0 !important; padding: 0 !important;
}
.omh-shop-pagination ul.page-numbers::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--color-line); z-index: 0;
}
.omh-shop-pagination ul.page-numbers li {
  position: relative; z-index: 1; background: var(--color-bg) !important; border: none !important;
  float: none !important; padding: 0 !important; margin: 0 !important; display: block !important;
}
.omh-shop-pagination ul.page-numbers li a,
.omh-shop-pagination ul.page-numbers li span {
  display: block; padding: 0 0.3rem !important; font-family: var(--font-ui); font-size: 0.85rem;
  color: var(--color-ink-soft) !important; text-decoration: none; background: transparent !important;
  min-width: 0 !important; line-height: normal !important;
}
.omh-shop-pagination ul.page-numbers li span.current {
  color: var(--color-ink) !important; font-family: var(--font-display); font-size: 1.1rem;
}
.omh-shop-pagination ul.page-numbers li a:hover,
.omh-shop-pagination ul.page-numbers li a:focus { color: var(--color-ink) !important; background: transparent !important; }
.omh-shop-pagination ul.page-numbers li a.next,
.omh-shop-pagination ul.page-numbers li a.prev { font-size: 1rem; }

@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: 1rem 1.2rem 0.6rem; }
  .omh-shop-tagline { display: none; }
  .omh-shop-head .eyebrow { font-size: 0.62rem; margin-bottom: 0.3rem; }
  .omh-shop-head h1 { font-size: 1.5rem; }
  .omh-shop-card .name { font-size: 0.84rem; }
}

/* ==========================================================================
   Activewear — desktop unified utility row (count + Χρώμα/Μέγεθος/
   Τιμή + Ταξινόμηση, all in one thin line). Editorial collection
   page, not a WooCommerce filter panel — no borders around this row
   itself, generous surrounding whitespace, everything understated.
   ========================================================================== */
.omh-desktop-util-row{
  display:flex; align-items:center; justify-content:center; gap:1.6rem;
  padding:1.1rem 2rem; border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line);
  max-width:1400px; margin:0 auto 3.5rem;
}
.omh-desktop-count{ font-size:0.76rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--color-ink-soft); white-space:nowrap; }
.omh-desktop-util-sep{ width:1px; height:14px; background:var(--color-line); flex-shrink:0; }
.omh-desktop-util-row #omh-filter-form{ display:flex; gap:1.6rem; }
.omh-desktop-util-row .c3-dd-btn{ border:none; padding:0; font-size:0.76rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--color-ink); background:none; }
.omh-desktop-util-row .woocommerce-ordering{ display:inline-block; }
.omh-desktop-util-row .woocommerce-ordering select{
  border:none; background:none; font-family:var(--font-ui); font-size:0.76rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--color-ink); cursor:pointer;
}

.omh-shop-tagline{ font-family:var(--font-display); font-style:italic; font-size:0.95rem; color:var(--color-ink-soft); margin-top:0.7rem; }

/* Shop's head has one more line (the tagline above) than every other
   category's — Activewear's own .omh-shop-head never has it. The
   fixed 1.8rem bottom padding on .omh-shop-head (baseline, tuned for
   the h1-only case) stayed the same regardless, so the extra tagline
   line effectively ate into the breathing room before the subnav
   instead of the section gaining any. Restoring that same "resting"
   feel just means a bit more bottom padding here specifically —
   2.2rem, not a new number: it's the exact value already used for
   the subnav row's own bottom padding just below (see
   .omh-subnav-category / .omh-subnav-shop). Scoped to :has() so
   Activewear and every other tagline-less category are untouched,
   and to min-width:481px so mobile (where the tagline is display:none
   below 480px, see the media query further down) is untouched too. */
@media (min-width:481px){
  .omh-shop-head:has(.omh-shop-tagline){ padding-bottom:2.2rem; }
}

/* Curated sub-navigation — one shared row (#omh-subnav-row), two
   visual treatments depending on context. Category pages (e.g.
   Activewear's Leggings/Sports Bras/Tops/Shorts/Jumpsuits): subtle
   pill only on the active item, no border on the others. The
   general /shop/ page's own curated top-level list: even more
   minimal — plain text tabs with a thin underline on the active
   item, no pill/background at all. Desktop only (min-width:901px);
   mobile keeps the established bordered-pill treatment for both,
   unchanged, per direct instruction. */
@media (min-width:901px){
  .omh-subnav-category{ justify-content:center; gap:0.6rem; padding-bottom:2.2rem !important; }
  .omh-subnav-category .omh-type-pill{
    background:none; border:none; border-radius:20px; padding:0.5rem 1.1rem; color:var(--color-ink-soft); font-size:0.86rem;
  }
  .omh-subnav-category .omh-type-pill.is-active{ background:var(--color-bg-alt,#EFEBE4); color:var(--color-ink); }

  .omh-subnav-shop{ justify-content:center; gap:2.2rem; padding-bottom:2.2rem !important; }
  .omh-subnav-shop .omh-type-pill{
    background:none; border:none; border-bottom:1px solid transparent; border-radius:0; padding:0 0 0.5rem; color:var(--color-ink-soft); font-size:0.88rem;
  }
  .omh-subnav-shop .omh-type-pill.is-active{ background:none; color:var(--color-ink); border-bottom-color:var(--color-ink); }
}

@media (max-width:900px){
  /* On mobile this wrapper carries no chrome of its own — its only
     job there is to let #omh-filter-form (its child) keep receiving
     the existing bottom-sheet treatment unchanged. The count/sep/
     sort-select siblings are desktop-only; mobile already has its
     own (omh-mobile-util-row, the sort bottom sheet). */
  .omh-desktop-util-row{ display:block; padding:0; border:none; margin:0; }
  .omh-desktop-count, .omh-desktop-util-sep, .omh-desktop-util-row .woocommerce-ordering{ display:none; }
}

.omh-type-row{
  display:flex; gap:0.5rem; overflow-x:auto; padding:0 1.5rem 1rem; scrollbar-width:none; justify-content:center;
}
.omh-type-row::-webkit-scrollbar{ display:none; }
.omh-type-pill{
  flex-shrink:0; background:none; border:1px solid var(--color-line); padding:0.55rem 1.05rem;
  font-family:var(--font-ui); font-size:0.78rem; color:var(--color-ink-soft); text-decoration:none; white-space:nowrap; border-radius:20px;
}
.omh-type-pill.is-active{ background:var(--color-ink); color:var(--color-bg); border-color:var(--color-ink); }

/* Mobile-only utility row + sheet triggers/CTA — hidden on desktop */
.omh-mobile-util-row,
.omh-mobile-filter-cta-wrap,
.sheet-overlay,
.omh-sort-sheet{ display:none; }

@media (max-width:900px){
  .omh-type-row{ justify-content:flex-start; padding:0 1.2rem 1rem; }

  /* Redundant once the utility row already states "58 Προϊόντα" —
     kept on desktop (its only count indicator there), removed here.
     This is what lets the grid start ~50-60px higher on mobile. */
  .omh-shop-count{ display:none; }

  .omh-mobile-util-row{
    display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.9rem 1rem;
    border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line);
    font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--color-ink-soft);
  }
  .omh-mobile-util-row button{ background:none; border:none; font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--color-ink); cursor:pointer; padding:0; font-family:var(--font-ui); }
  .omh-mobile-util-sep{ color:var(--color-line); }

  /* The existing desktop dropdown row (Χρώμα/Νούμερο/Τιμή) — on
     mobile this whole thing becomes a full-height bottom sheet,
     opened by the "Φίλτρα" button above rather than shown inline. */
  #omh-filter-form{
    display:none; position:fixed; left:0; right:0; bottom:0; top:auto; height:82vh; z-index:901;
    background:var(--color-bg); border-radius:14px 14px 0 0; box-shadow:0 -10px 40px rgba(20,19,17,0.2);
    flex-direction:column; padding:1.4rem 1.2rem 0; overflow-y:auto;
    transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);
  }
  #omh-filter-form.is-open{ display:flex; transform:translateY(0); }

  #omh-filter-form .c3-dd-wrap{ display:block; width:100%; border-bottom:1px solid var(--color-line); }
  #omh-filter-form .c3-dd-btn{
    display:flex; align-items:center; justify-content:space-between; width:100%; border:none; padding:1.1rem 0;
    font-size:0.92rem; text-align:left;
  }
  /* Accordion, not one-at-a-time: several sections can be open
     together on mobile, unlike the desktop anchored dropdowns. */
  #omh-filter-form .c3-dd-popover{
    display:none; position:static; box-shadow:none; border:none; padding:0 0 1.2rem; min-width:0;
  }
  #omh-filter-form .c3-dd-wrap.mobile-open .c3-dd-popover{ display:block; }

  .omh-mobile-filter-sheet-title{
    font-family:var(--font-display); font-size:1.15rem; text-align:center; padding-bottom:1rem; margin-bottom:0.4rem; border-bottom:1px solid var(--color-line);
  }

  .omh-mobile-filter-cta-wrap{
    display:none; position:fixed; left:0; right:0; bottom:0; z-index:902; background:var(--color-bg);
    padding:1rem 1.2rem; border-top:1px solid var(--color-line);
  }
  #omh-filter-form.is-open ~ .omh-mobile-filter-cta-wrap{ display:block; }
  .omh-mobile-filter-cta{
    display:block; width:100%; background:var(--color-ink); color:var(--color-bg); border:none; padding:1rem;
    font-family:var(--font-ui); font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; cursor:pointer;
  }

  /* Sort bottom sheet */
  .sheet-overlay{
    display:block; position:fixed; inset:0; background:rgba(26,26,24,0.4); z-index:899; opacity:0; pointer-events:none; transition:opacity 0.25s ease;
  }
  .sheet-overlay.is-open{ opacity:1; pointer-events:auto; }
  .omh-sort-sheet{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:901; background:var(--color-bg);
    border-radius:14px 14px 0 0; padding-bottom:1.6rem; transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);
  }
  .omh-sort-sheet.is-open{ transform:translateY(0); }
  .sheet-handle{ width:36px; height:4px; background:var(--color-line); border-radius:4px; margin:0.7rem auto 0.4rem; }
  .sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:0.6rem 1.2rem 1rem; border-bottom:1px solid var(--color-line); }
  .sheet-head h3{ font-family:var(--font-display); font-weight:400; font-size:1.15rem; }
  .sheet-close{ background:none; border:none; font-size:1.3rem; color:var(--color-ink); }
  .sheet-body{ padding:0 1.2rem; }
  .omh-sort-option{
    display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none;
    padding:1rem 0; border-bottom:1px solid var(--color-line); font-size:0.9rem; color:var(--color-ink); font-family:var(--font-ui); text-align:left; cursor:pointer;
  }
  .omh-sort-option:last-child{ border-bottom:none; }
  .omh-sort-option .dot{ width:16px; height:16px; border-radius:50%; border:1.5px solid var(--color-line); flex-shrink:0; }
  .omh-sort-option.is-on .dot{ border-color:var(--color-ink); background:radial-gradient(circle,var(--color-ink) 0 40%,transparent 42%); }

  /* WooCommerce's own ordering <select> stays functional but hidden
     — the sort sheet's buttons drive it programmatically (see
     shop-filters.js) so its native onchange auto-submit still fires. */
  .woocommerce-ordering{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
}