/* ============================================================================
   SARART · SHOP — values ported verbatim from the mockup (ShopView.tsx,
   ShopFilters.tsx, ProductGrid.tsx + the shop blocks of globals.css).
   The product-card rules live in home.css (shared by both pages).
   ============================================================================ */

.shop { padding-top: var(--nav-h); }
.shop__wrap { max-width: var(--wrap-narrow); margin: 0 auto; }

/* ─────────────── text header (compact) ─────────────── */
.shop__head { padding: clamp(28px, 5vw, 52px) clamp(20px, 6vw, 72px) clamp(16px, 3vw, 24px); }
.shop__crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #d2d2da; font-weight: 500; margin-bottom: 14px; }
.shop__crumbs[hidden] { display: none; }
.crumb { color: #d2d2da; text-decoration: none; }
.shop__crumb-sep { color: var(--text-muted); }
.shop__crumb-current { color: var(--gold); }
.shop__kicker { display: block; text-transform: uppercase; letter-spacing: .26em; font-size: 11px; font-weight: 600; color: var(--gold); margin-bottom: 10px; }
.shop__kicker[hidden] { display: none; }
.shop__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.3rem, 7vw, 3.8rem); margin: 0; line-height: 1.02; }
.shop__line { color: #9a9aa6; font-weight: 300; max-width: 60ch; margin: 12px 0 0; font-size: clamp(.98rem, 3.4vw, 1.1rem); line-height: 1.55; }

/* ─────────────── toolbar ─────────────── */
.shop__toolbar-wrap { padding: clamp(14px, 2.5vw, 24px) clamp(20px, 6vw, 72px) 0; }
.shop-toolbar {
  align-items: center; justify-content: space-between;
  gap: 14px 22px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.shop-toolbar__filters { display: flex; align-items: center; gap: 4px; }
.shop-toolbar__sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .14); margin: 0 14px; }

.filter-group { position: relative; }
.filter-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer; padding: 6px 2px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em; color: #e4e4ea;
  transition: opacity .2s ease;
}
.filter-trigger.is-active { color: var(--gold); }
@media (hover: hover) { .filter-trigger:hover { opacity: .8; } }
.filter-trigger__count { font-size: 11px; font-weight: 700; color: var(--gold-ink); background: var(--gold); border-radius: 10px; padding: 1px 7px; }
.filter-trigger__count[hidden] { display: none; }
.filter-chevron { transition: transform .25s ease; flex: none; }
.filter-group.is-open .filter-chevron,
.drawer-row__head[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); }

.filter-panel {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 40;
  min-width: 210px;
  background: rgba(24, 24, 30, .98);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  padding: 8px;
  box-shadow: 0 26px 54px rgba(0, 0, 0, .55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.filter-panel[hidden] { display: none; }

/* option rows (dropdowns + drawer) */
.filter-opt {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: none; border: none; cursor: pointer;
  padding: 10px 6px; border-radius: 8px;
  color: #cfcfd8; font-size: 14px; font-weight: 500; text-align: left;
  font-family: var(--font-sans);
}
.filter-opt.is-on { color: #fff; }
@media (hover: hover) { .filter-opt:hover { background: rgba(255, 255, 255, .05); } }
.filter-box {
  width: 18px; height: 18px; flex: none; border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, .28);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, border-color .18s ease;
}
.filter-box--radio { border-radius: 50%; }
.filter-opt.is-on .filter-box { background: var(--gold); border-color: var(--gold); }
.filter-tick { opacity: 0; }
.filter-opt.is-on .filter-tick { opacity: 1; }

.shop-toolbar__clear {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 12.5px; font-weight: 600;
  margin-left: 20px; text-decoration: underline; text-underline-offset: 3px;
  font-family: var(--font-sans);
}
.shop-toolbar__clear[hidden] { display: none; }

.shop-toolbar__sort { display: flex; align-items: center; gap: 10px; }
.shop-toolbar__sort-label { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.sortsel-wrap { position: relative; display: inline-flex; align-items: center; }
.sortsel {
  appearance: none; -webkit-appearance: none;
  background: var(--surface); color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  padding: 11px 38px 11px 16px;
  font-size: 13px; font-family: var(--font-sans); font-weight: 600;
  /* Form controls do NOT inherit line-height on their own. The mockup's reset
     (Tailwind preflight) gives them `line-height: inherit`, so its select
     computes 19.5px (13 × 1.5) and stands 43.5px tall; without this the browser
     default `normal` made ours 41px, and that 2.5px shifted the whole grid. */
  line-height: 1.5;
  cursor: pointer; outline: none;
}
.sortsel:focus { border-color: var(--gold); }
.sortsel-chevron { position: absolute; right: 12px; pointer-events: none; }

/* mobile bar */
.shop-mobilebar { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.shop-mobilebar__btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid rgba(255, 255, 255, .14); color: #fff;
  border-radius: var(--r-pill); padding: 11px 20px;
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font-sans);
}
.shop-mobilebar__count { font-size: 11px; font-weight: 700; color: var(--gold-ink); background: var(--gold); border-radius: 10px; padding: 1px 7px; }
.shop-mobilebar__count[hidden] { display: none; }

/* ─────────────── grid ─────────────── */
.shop__grid-wrap { padding: clamp(28px, 5vw, 48px) clamp(20px, 6vw, 72px) clamp(56px, 10vw, 96px); }
.cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 1080px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cat-grid[hidden] { display: none; }

/* empty state */
.shop__empty { text-align: center; padding: clamp(48px, 10vw, 110px) 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.shop__empty[hidden] { display: none; }
.shop__empty-title { font-family: var(--font-serif); font-size: clamp(1.5rem, 5vw, 2.1rem); font-weight: 500; }
.shop__empty-body { color: var(--text-muted); font-weight: 300; margin: 0; max-width: 40ch; line-height: 1.6; }
.shop__empty-btn { margin-top: 8px; border: 1px solid var(--gold); background: transparent; color: var(--gold); cursor: pointer; font-weight: 700; font-size: 14px; padding: 13px 30px; border-radius: var(--r-pill); font-family: var(--font-sans); }

/* ─────────────── mobile drawer ─────────────── */
.shop-drawer { position: fixed; inset: 0; z-index: 130; display: flex; align-items: flex-end; }
.shop-drawer[hidden] { display: none; }
.shop-drawer__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.shop-drawer__panel {
  position: relative; width: 100%; max-height: 88vh;
  background: #161620;
  border-top-left-radius: 20px; border-top-right-radius: 20px;
  display: flex; flex-direction: column;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, .5);
}
.shop-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
.shop-drawer__title { font-family: var(--font-serif); font-size: 22px; font-weight: 600; }
.shop-drawer__close { background: none; border: none; color: #fff; font-size: 26px; cursor: pointer; line-height: 1; width: 40px; height: 40px; }
.shop-drawer__body { overflow-y: auto; flex: 1; padding: 0 22px; overscroll-behavior: contain; }
.drawer-row { border-bottom: 1px solid var(--line); }
.drawer-row__head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; cursor: pointer; padding: 18px 2px;
  color: #fff; font-size: 16px; font-weight: 600; font-family: var(--font-sans);
}
.drawer-row__chev { color: var(--gold); display: inline-flex; }
.drawer-row__body { padding: 0 0 14px; display: flex; flex-direction: column; gap: 2px; }
.drawer-row__body[hidden] { display: none; }
.drawer-sort { padding: 16px 0 8px; }
.drawer-sort__label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-muted); font-size: 14px; font-weight: 600; }
.shop-drawer__foot { padding: 14px 22px 22px; border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: center; }
.shop-drawer__clear { background: none; border: none; color: #cfcfd8; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-family: var(--font-sans); }
.shop-drawer__clear[hidden] { display: none; }
.shop-drawer__view { flex: 1; background: var(--gold); color: var(--gold-ink); border: none; border-radius: var(--r-pill); padding: 16px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--font-sans); }

/* ─────────────── shop card hover (grid variant) ─────────────── */
.pcard .parrow { opacity: 0; transition: opacity .3s ease; }
@media (hover: hover) and (min-width: 880px) {
  .pcard:hover { border-color: rgba(211, 148, 7, .4); transform: translateY(-6px); box-shadow: 0 22px 44px rgba(0, 0, 0, .5); }
  .pcard:hover .parrow { opacity: 1; }
  .pcard:hover .padd { box-shadow: 0 12px 26px rgba(211, 148, 7, .4); transform: translateY(-2px); }
}