/* ============================================================
   RoidOcean — Shop / category / brand / warehouse archives + search
   Consumes ro-tokens.css + ro-card.css. Grid matches source:
   grid-cols-1 · md:2 · lg:5, 12/page, with a 280px filter rail.
   ============================================================ */

/* ---- Hero / archive head ---- */
.ro-shop-hero {
  background: var(--ro-section-bg);
  border-bottom: 1px solid var(--ro-line-soft);
  padding: 26px 0 22px;
  margin-bottom: 24px;
}
.ro-breadcrumb {
  font-size: var(--ro-fs-xs);
  color: var(--ro-muted);
  margin-bottom: 10px;
}
.ro-breadcrumb a { color: var(--ro-muted); }
.ro-breadcrumb a:hover { color: var(--ro-orange); }
.ro-crumb-sep { margin: 0 7px; color: #cbd5e1; }
.ro-shop-h1 {
  font-size: var(--ro-fs-2xl);
  color: var(--ro-navy);
  margin: 0;
  line-height: 1.15;
}
@media (max-width: 640px){ .ro-shop-h1 { font-size: var(--ro-fs-xl); } }
.ro-shop-intro {
  margin-top: 10px;
  max-width: 820px;
  color: var(--ro-ink-soft);
  font-size: var(--ro-fs-sm);
}
.ro-shop-intro p { margin: 0; }

/* ---- Toolbar ---- */
.ro-shop-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.ro-shop-count { margin: 0; font-size: var(--ro-fs-sm); color: var(--ro-muted); }
.ro-shop-tools { display: flex; align-items: center; gap: 12px; }
.ro-shop-sort { margin: 0; }
.ro-shop-sort select {
  font-family: var(--ro-font);
  font-size: var(--ro-fs-sm);
  color: var(--ro-navy);
  font-weight: var(--ro-fw-medium);
  background: #fff;
  border: 1px solid var(--ro-line);
  border-radius: var(--ro-radius-sm);
  padding: 9px 34px 9px 14px;
  min-width: 190px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23103178' d='M6 8 0 2 1.5.5 6 5l4.5-4.5L12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.ro-shop-sort select:focus { outline: none; border-color: var(--ro-orange); box-shadow: 0 0 0 2px rgba(245,158,11,.35); }
.ro-filter-toggle { display: none; }

/* ---- Layout: 280px rail + fluid grid ---- */
.ro-shop-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.ro-shop-aside {
  position: sticky; top: 84px;
  background: #fff;
  border: 1px solid var(--ro-line-soft);
  border-radius: var(--ro-radius);
  box-shadow: var(--ro-shadow-sm);
  padding: 18px;
}
.ro-aside-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ro-aside-title { font-size: var(--ro-fs-md); color: var(--ro-navy); margin: 0; display: flex; align-items: center; gap: 8px; }
.ro-aside-title i { color: var(--ro-orange); font-size: 14px; }
.ro-aside-close { display: none; }

/* ---- Filter groups ---- */
.ro-filter-group { border-bottom: 1px solid var(--ro-line-soft); padding-bottom: 16px; margin-bottom: 16px; }
.ro-filter-title { font-size: var(--ro-fs-sm); font-weight: var(--ro-fw-semi); color: var(--ro-ink); margin: 0 0 10px; }
.ro-filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ro-filter-opt { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--ro-fs-sm); color: var(--ro-ink-soft); }
.ro-filter-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ro-filter-radio, .ro-filter-check {
  width: 17px; height: 17px; flex-shrink: 0;
  border: 2px solid #cbd5e1; background: #fff;
  display: inline-block; position: relative; transition: border-color .15s, background .15s;
}
.ro-filter-radio { border-radius: 50%; }
.ro-filter-check { border-radius: 4px; }
.ro-filter-opt input:checked + .ro-filter-radio { border-color: var(--ro-orange); }
.ro-filter-opt input:checked + .ro-filter-radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ro-orange);
}
.ro-filter-opt input:checked + .ro-filter-check { border-color: var(--ro-orange); background: var(--ro-orange); }
.ro-filter-opt input:checked + .ro-filter-check::after {
  content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ro-filter-opt:hover .ro-filter-label { color: var(--ro-navy); }
.ro-filter-opt input:focus-visible + .ro-filter-radio,
.ro-filter-opt input:focus-visible + .ro-filter-check { box-shadow: 0 0 0 3px rgba(245,158,11,.3); }

.ro-filter-price { display: flex; align-items: center; gap: 8px; }
.ro-filter-price input {
  width: 100%; min-width: 0;
  font-family: var(--ro-font); font-size: var(--ro-fs-sm);
  padding: 8px 10px; border: 1px solid var(--ro-line); border-radius: var(--ro-radius-sm);
}
.ro-filter-price input:focus { outline: none; border-color: var(--ro-orange); }
.ro-filter-dash { color: var(--ro-muted); }

.ro-filter-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ro-filter-clear { font-size: var(--ro-fs-xs); color: var(--ro-muted); }
.ro-filter-clear:hover { color: var(--ro-orange); }

/* ---- Product grid (source: cols 1 / md 2 / lg 5) ---- */
.ro-shop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1240px){ .ro-shop-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 860px){ .ro-shop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } }
@media (max-width: 460px){ .ro-shop-grid { grid-template-columns: 1fr; } }

/* Without the sidebar (search results / warehouse) allow 5 across like the source shop. */
.ro-shop-search .ro-shop-layout,
.ro-shop-layout.ro-nolayout { grid-template-columns: 1fr; }
.ro-shop-search .ro-shop-aside { display: none; }
.ro-shop-search .ro-shop-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 1240px){ .ro-shop-search .ro-shop-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 1000px){ .ro-shop-search .ro-shop-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px){ .ro-shop-search .ro-shop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px){ .ro-shop-search .ro-shop-grid { grid-template-columns: 1fr; } }

/* ---- Empty state ---- */
.ro-shop-empty { text-align: center; padding: 60px 20px; color: var(--ro-muted); }
.ro-shop-empty i { font-size: 40px; color: var(--ro-line); margin-bottom: 14px; }
.ro-shop-empty h2 { color: var(--ro-navy); margin: 0 0 8px; }
.ro-shop-empty p { margin: 0 0 20px; }

/* ---- Pagination (1,2,3,4 … Next) ---- */
.ro-pagination { margin: 40px 0 8px; display: flex; justify-content: center; }
.ro-page-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.ro-page-list .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--ro-line); border-radius: var(--ro-radius-sm);
  background: #fff; color: var(--ro-navy); font-weight: var(--ro-fw-medium);
  font-size: var(--ro-fs-sm); transition: background .15s, color .15s, border-color .15s;
}
.ro-page-list a.page-numbers:hover { border-color: var(--ro-orange); color: var(--ro-orange); }
.ro-page-list .page-numbers.current {
  background: var(--ro-navy); border-color: var(--ro-navy); color: #fff;
}
.ro-page-list .page-numbers.dots { border: 0; background: transparent; min-width: auto; }
.ro-page-list .prev, .ro-page-list .next { font-weight: var(--ro-fw-semi); }
@media (max-width: 520px){ .ro-page-word { display: none; } }

/* ---- Long-form category SEO copy ---- */
.ro-cat-seo {
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--ro-line-soft);
}
.ro-prose { color: var(--ro-ink-soft); font-size: var(--ro-fs-base); line-height: 1.7; }
.ro-prose h2, .ro-prose h3 { color: var(--ro-navy); margin: 1.2em 0 .5em; }
.ro-prose h2 { font-size: var(--ro-fs-lg); }
.ro-prose h3 { font-size: var(--ro-fs-md); }
.ro-prose p { margin: 0 0 1em; }
.ro-prose a { color: var(--ro-orange); }
.ro-prose ul, .ro-prose ol { margin: 0 0 1em 1.2em; }

/* ---- Mobile: filter becomes a slide-in drawer ---- */
@media (max-width: 1024px){
  .ro-shop-layout { grid-template-columns: 1fr; }
  .ro-filter-toggle { display: inline-flex; }
  .ro-aside-close { display: inline-flex; }
  .ro-shop-aside {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1200;
    width: 86%; max-width: 340px; border-radius: 0;
    transform: translateX(-100%); transition: transform .28s ease;
    overflow-y: auto; box-shadow: 0 0 40px rgba(16,49,120,.25);
  }
  .ro-shop-aside.is-open { transform: translateX(0); }
  body.ro-aside-open { overflow: hidden; }
  body.ro-aside-open::before {
    content: ""; position: fixed; inset: 0; z-index: 1100;
    background: rgba(16,49,120,.55); backdrop-filter: blur(2px);
  }
}