/* ═══════════════════════════════════════════════════════════════════
   OZERA — Shop / Catalog (filter sidebar + product grid)
   ═══════════════════════════════════════════════════════════════════ */

.oz-shop-head { padding: 24px 0 10px; text-align: center; }
.oz-shop-head .woocommerce-breadcrumb { text-align: start; font-size: 13px; color: var(--ink60); margin-bottom: 18px; }
.oz-shop-head .woocommerce-breadcrumb a { color: var(--ink60); text-decoration: none; }
.oz-shop-title {
  font-family: var(--display) !important;
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 800 !important; color: var(--plum) !important;
  margin: 0 0 8px !important; text-transform: uppercase; letter-spacing: .01em;
}
.oz-shop-desc { color: var(--ink60); max-width: 720px; margin: 0 auto; font-size: 14px; line-height: 1.8; }

/* Two columns */
.oz-shop {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 34px;
  align-items: start;
  padding: 18px 0 50px;
}
@media (max-width: 1000px) { .oz-shop { grid-template-columns: 220px 1fr; gap: 22px; } }
@media (max-width: 760px)  { .oz-shop { grid-template-columns: 1fr; } .oz-shop__filters { order: 2; } }

/* ── Filters ── */
.oz-shop__filters { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 90px; }
@media (max-width: 760px) { .oz-shop__filters { position: static; } }
.oz-filter {
  background: var(--white); border: 1px solid #ececec; border-radius: var(--r-card);
  padding: 18px 18px 20px;
}
.oz-filter__title {
  font-family: var(--sans) !important; font-size: 13px !important; font-weight: 800 !important;
  letter-spacing: .08em; text-transform: uppercase; color: var(--plum) !important;
  margin: 0 0 14px !important; padding-bottom: 10px; border-bottom: 1px solid #f0eaf1;
}
.oz-filter select,
.oz-filter .orderby {
  width: 100%; padding: 11px 12px; border: 1px solid #e5e5e5; border-radius: 6px;
  background: #fff; font-family: var(--sans); font-size: 14px; color: var(--ink); cursor: pointer;
}
.oz-filter__cats { list-style: none; margin: 0; padding: 0; }
.oz-filter__cats li { margin: 0 0 2px; }
.oz-filter__cats a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 10px; border-radius: 6px; text-decoration: none;
  color: var(--ink); font-size: 14px; transition: var(--t);
}
.oz-filter__cats a:hover { background: var(--plum-light); color: var(--plum); }
.oz-filter__cats .count { color: var(--ink40); font-size: 12px; }

/* Price filter widget */
.oz-filter .price_slider_wrapper { margin-top: 4px; }
.oz-filter .price_slider_amount { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--ink60); }
.oz-filter .price_slider_amount .button {
  background: var(--plum) !important; color: #fff !important; border: 0 !important;
  border-radius: var(--r-pill) !important; padding: 9px 20px !important; font-size: 13px !important;
  font-weight: 700 !important; cursor: pointer; align-self: flex-start;
}
.oz-filter .ui-slider, .woocommerce .price_slider.ui-slider { background: #eaeaea !important; border: 0; border-radius: 999px; height: 5px; }
.oz-filter .ui-slider .ui-slider-range, .woocommerce .price_slider .ui-slider-range { background: #111 !important; }
.oz-filter .ui-slider .ui-slider-handle, .woocommerce .price_slider .ui-slider-handle { background: #111 !important; border: 2px solid #fff; border-radius: 50%; width: 16px; height: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }

/* Promo box */
.oz-filter__promo { background: var(--pinkpromo); border-color: #f6d8e6; text-align: center; }
.oz-filter__promo-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--plum2); margin: 0 0 6px; }
.oz-filter__promo-title { font-family: var(--display); font-weight: 800; color: var(--plum); font-size: 18px; margin: 0 0 14px; }

/* ── Product grid ── */
.oz-shop__bar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 14px; }
.oz-shop__bar .woocommerce-result-count { margin: 0; color: var(--ink60); font-size: 13px; }
.oz-shop__main ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px; list-style: none; margin: 0 !important; padding: 0 !important;
}
@media (max-width: 1200px) { .oz-shop__main ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .oz-shop__main ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px)  { .oz-shop__main ul.products { grid-template-columns: 1fr; } }
.oz-shop__main ul.products li.product,
.oz-shop__main ul.products li.oz-grid__item {
  width: auto !important; margin: 0 !important; float: none !important; padding: 0 !important;
}
.oz-shop__main ul.products li::before { display: none; }
/* Kill the theme/WC clearfix pseudo-elements — in a CSS grid they become empty cells */
.oz-shop__main ul.products::before,
.oz-shop__main ul.products::after { content: none !important; display: none !important; }
.oz-shop__main .oz-pcard { width: 100% !important; min-width: 0 !important; }

/* placeholder for missing image */
.oz-pcard__ph {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: var(--pinksoft); font-size: 4rem; color: rgba(77,41,82,.2); text-decoration: none;
}

/* Pagination */
.oz-shop__main .woocommerce-pagination { margin-top: 34px; text-align: center; }
.oz-shop__main .woocommerce-pagination ul { display: inline-flex; gap: 6px; list-style: none; margin: 0; padding: 0; border: 0; }
.oz-shop__main .woocommerce-pagination ul li { margin: 0; border: 0; }
.oz-shop__main .woocommerce-pagination ul li a,
.oz-shop__main .woocommerce-pagination ul li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px; border-radius: 8px;
  background: #fff; border: 1px solid #e5e5e5; color: var(--ink);
  font-weight: 700; font-size: 14px; text-decoration: none; transition: var(--t);
}
.oz-shop__main .woocommerce-pagination ul li a:hover { background: #f4f4f4; border-color: #111; color: #111; }
.oz-shop__main .woocommerce-pagination ul li span.current {
  background: var(--plum); border-color: var(--plum); color: #fff;
}
.oz-shop__empty { padding: 40px 0; text-align: center; color: var(--ink60); }

/* Mobile filters drawer (off-canvas) — opened by the bottom-bar Filters button */
@media (max-width: 1024px) {
  .oz-shop { grid-template-columns: 1fr !important; }
  .oz-shop__filters {
    position: fixed !important; top: 0; bottom: 0; inset-inline-start: 0; z-index: 1300;
    width: 86%; max-width: 330px; margin: 0 !important; padding: 20px 16px 80px;
    background: #fff; overflow-y: auto; box-shadow: 0 0 50px rgba(0,0,0,.25);
    transform: translateX(-105%); transition: transform .3s ease;
  }
  html[dir="rtl"] .oz-shop__filters { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(105%); }
  body.oz-filters-open .oz-shop__filters { transform: none !important; }
  body.oz-filters-open { overflow: hidden; }
}
.oz-filters-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1290; opacity: 0; visibility: hidden; transition: opacity .3s; }
body.oz-filters-open .oz-filters-overlay { opacity: 1; visibility: visible; }

/* ── Stronger overrides (beat parent-theme CSS) ───────────────────── */

/* Sort dropdown — parent theme renders it as a solid plum bar; reset it. */
.oz-shop .oz-filter form.woocommerce-ordering { margin: 0 !important; padding: 0 !important; }
.oz-shop .oz-filter select,
.oz-shop .oz-filter select.orderby {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  display: block !important; width: 100% !important; height: auto !important; max-width: none !important; min-height: 0 !important;
  margin: 0 !important; padding: 12px 14px 12px 38px !important;
  background-color: #fff !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%234D2952" stroke-width="2"/></svg>') !important;
  background-repeat: no-repeat !important; background-position: left 14px center !important; background-size: 12px 8px !important;
  border: 1px solid #e5e5e5 !important; border-radius: 8px !important; box-shadow: none !important;
  color: var(--ink) !important; font-family: var(--sans) !important; font-size: 14px !important; font-weight: 400 !important;
  line-height: 1.4 !important; text-align: start; cursor: pointer;
}
.oz-shop .oz-filter select option { color: var(--ink) !important; background: #fff !important; }

/* Category list — force visible (parent theme hides/recolors list items). */
.oz-shop .oz-filter__cats { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.oz-shop .oz-filter__cats li,
.oz-shop .oz-filter__cats li.cat-item {
  display: block !important; list-style: none !important; margin: 0 0 2px !important; padding: 0 !important;
  background: none !important; border: 0 !important; float: none !important; width: auto !important;
  color: var(--ink) !important; font-size: 14px !important;
}
.oz-shop .oz-filter__cats li::before,
.oz-shop .oz-filter__cats li::marker { content: none !important; display: none !important; }
.oz-shop .oz-filter__cats a {
  display: inline-flex !important; align-items: center; gap: 6px;
  padding: 8px 10px !important; border-radius: 6px; text-decoration: none !important;
  color: var(--ink) !important; background: none !important; font-size: 14px !important; font-weight: 600;
}
.oz-shop .oz-filter__cats a:hover { background: var(--plum-light) !important; color: var(--plum) !important; }

/* ════════════════════════════════════════════════════════════════
   Ozera fix (2026-06): الموبايل — منتجان في الصف بدل منتج واحد.
   كان عند ≤440px عمود واحد فتتمدّد الصورة المصغّرة وتظهر مبكسلة.
   عرض أصغر = الصورة المصغّرة تكفي = جودة أوضح.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 440px) {
  .oz-shop__main ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .oz-shop__main ul.products li.product .oz-pcard__name { font-size: 13px; }
  .oz-shop__main ul.products li.product .oz-pcard__brand { font-size: 11px; }
}