/*
==================================================
 Care & Cure WooCommerce Archive (Mobile-First)
 Clean responsive grid + sticky bar + off-canvas filters
==================================================
*/

:root {
  --cc-gap: 16px;
  --cc-radius: 16px;
  --cc-pad: 12px;
  --cc-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  --cc-muted: #6b7280;
  --cc-border: #e5e7eb;
  --cc-bg: #ffffff;
  --cc-accent: #a8b144; /* Care & Cure brand green */
  --cc-text: #111827;
  --cc-sale: #ef4444;
}

/* ----- Shell ----- */
.cc-archive {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
}

/* ----- Sticky top bar ----- */
.cc-archive__bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--cc-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 4px;
}

.cc-archive__count {
  font-size: 13px;
  color: var(--cc-muted);
}

.cc-archive__orderby select {
  padding: 8px;
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  color: var(--cc-text);
}

/* ----- Buttons ----- */
.cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--cc-border);
  background: #fff;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cc-btn:hover {
  background: var(--cc-accent);
  color: #fff;
  border-color: var(--cc-accent);
}
.cc-btn--ghost {
  background: #fff;
}
.cc-icon {
  font-size: 14px;
}

/* ----- Off-canvas filters ----- */
.cc-filters {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(86vw, 380px);
  background: #fff;
  box-shadow: var(--cc-shadow);
  transform: translateX(110%);
  transition: transform 0.25s ease;
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.cc-filters.is-open {
  transform: translateX(0);
}
.cc-filters__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border-bottom: 1px solid var(--cc-border);
  font-weight: 600;
}
.cc-filters__widgets {
  padding: 14px;
  overflow: auto;
}
.cc-no-scroll {
  overflow: hidden;
}

/* ----- HARD RESET: kill theme floats & enforce grid ----- */
.cc-grid ul.products,
.woocommerce ul.products {
  display: grid !important;
  gap: var(--cc-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Ignore Woo column classes */
.woocommerce ul.products li.product {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* ----- Grid columns ----- */
.cc-grid ul.products,
.woocommerce ul.products {
  grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
}
@media (min-width: 640px) {
  .cc-grid ul.products,
  .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(200px, 1fr)) !important;
  }
}
@media (min-width: 1024px) {
  .cc-grid ul.products,
  .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
  }
}

/* ----- Product card ----- */
.woocommerce ul.products li.product {
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  background: var(--cc-bg);
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  transition: box-shadow 0.2s ease;
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--cc-shadow);
}

/* Image ratio */
.woocommerce ul.products li.product img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Card content */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px;
  line-height: 1.4;
  margin: 10px 12px 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: start;
}
.woocommerce ul.products li.product .price {
  margin: 0 12px 10px;
  font-weight: 600;
  color: var(--cc-accent);
}

/* Add to cart */
.woocommerce ul.products li.product .button {
  margin: 0 12px 12px;
  padding: 10px 12px;
  width: auto;
  display: block;
  text-align: center;
  border-radius: 12px;
  background: var(--cc-accent);
  color: #fff;
  font-weight: 500;
  transition: all 0.2s ease;
}
.woocommerce ul.products li.product .button:hover {
  background: #889224;
}

/* ----- Badges ----- */
.cc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--cc-text);
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 999px;
  z-index: 2;
}
.cc-badge--sale {
  background: var(--cc-sale);
}

/* ----- Pagination ----- */
.cc-pagination {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.cc-pagination .page-numbers {
  display: flex;
  gap: 8px;
}

/* ----- RTL Adjustments ----- */
html[dir="rtl"] .cc-archive__orderby select {
  direction: rtl;
  text-align: right;
}
html[dir="rtl"] ul.products li.product {
  text-align: right;
}
html[dir="rtl"] .cc-filters .widget {
  text-align: right;
}
html[dir="rtl"] .woocommerce-ordering .orderby {
  direction: rtl;
  text-align: right;
}

/* ===========================
   CC ARCHIVE – TOP BAR & FILTERS
   (scoped to .cc-archive)
=========================== */

/* wrapper width */
.cc-archive{max-width:1200px;margin-inline:auto;padding:8px 12px}

/* ---- sticky bar ---- */
.cc-archive__bar{
  position:sticky;top:64px; /* sit below header */
  display:grid;
  grid-template-columns:1fr auto 1fr; /* Filters | count | orderby */
  align-items:center;
  gap:12px;
  padding:10px 12px;
  background:#fff;
  border:1px solid #eef0f2;border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  z-index:20;
}

/* Filters button (ghost) */
.cc-archive__bar .cc-btn{
  justify-self:start;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:8px 12px;border:1px solid #e5e7eb;border-radius:12px;
  background:#fff;cursor:pointer;font-size:14px
}
.cc-archive__bar .cc-btn:hover{border-color:#a8b144;background:#f9fbf3;color:#283208}

/* Count is centered */
.cc-archive__count{justify-self:center;font-size:13px;color:#6b7280;white-space:nowrap}

/* Orderby at the far edge */
.cc-archive__orderby{justify-self:end}
.cc-archive__orderby .woocommerce-ordering{margin:0}
.cc-archive__orderby select{
  min-width:220px;
  padding:8px 12px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;font-size:14px
}

/* Arabic / RTL alignment */
html[dir="rtl"] .cc-archive__bar{grid-template-columns:1fr auto 1fr}
html[dir="rtl"] .cc-archive__orderby{justify-self:start}        /* select on the left for RTL */
html[dir="rtl"] .cc-archive__bar .cc-btn{justify-self:end}      /* Filters on the right */
html[dir="rtl"] .cc-archive__count{text-align:center}

/* Compact on small screens */
@media (max-width: 680px){
  .cc-archive__bar{
    top:56px;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "filters orderby"
      "count count";
    row-gap:8px
  }
  html[dir="rtl"] .cc-archive__bar{grid-template-areas:
    "orderby filters"
    "count count"}
  .cc-archive__bar .cc-btn{grid-area:filters;justify-self:start}
  html[dir="rtl"] .cc-archive__bar .cc-btn{justify-self:end}
  .cc-archive__orderby{grid-area:orderby;justify-self:end}
  html[dir="rtl"] .cc-archive__orderby{justify-self:start}
  .cc-archive__orderby select{min-width:unset;width:100%}
  .cc-archive__count{grid-area:count;justify-self:center}
}

/* ---- off-canvas filters ---- */
.cc-filters{
  position:fixed;inset:0 0 0 auto;width:min(88vw,380px);
  background:#fff;border-left:1px solid #eef0f2;
  transform:translateX(110%);transition:transform .25s ease;z-index:60;
  display:flex;flex-direction:column
}
.cc-filters.is-open{transform:translateX(0)}
.cc-filters__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #eef0f2;font-weight:600}
.cc-filters__widgets{padding:14px;overflow:auto}
.cc-filters .widget,.cc-filters [class*="wc-block-"]{font-size:14px}
.cc-filters h2,.cc-filters h3{font-size:15px;margin:10px 0}

/* RTL niceties */
html[dir="rtl"] .cc-filters{inset:0 auto 0 0;border-left:none;border-right:1px solid #eef0f2;transform:translateX(-110%)}
html[dir="rtl"] .cc-filters.is-open{transform:translateX(0)}

/* Prevent body scroll when drawer open */
body.cc-no-scroll{overflow:hidden}

/* ---- pagination spacing so bar shadow doesn’t collide ---- */
.cc-pagination{margin-top:18px}