/* =============================================================================
   WMD COLLECTION TEMPLATE — page CSS for /collection/<slug>/ (product_tag archives).
   Self-contained: the template runs with Porto/Elementor stripped, so these plain
   class names can't collide with anything. The site header is the global header
   (.wmdh-* namespace, its own CSS) rendered above this content — nothing here
   targets .wmdh-*, so the two never interact.
   Filter engine + grid vocabulary is lifted from product-demo/search.php so the
   collection filter bar matches the search-results one exactly.
   ============================================================================= */
:root{
  --ink:#1a1a1a; --ink-soft:#4a4a4a; --c-line:#e6e2d9; --paper:#fff;
  /* --gold was #9a7b41, which is only 3.97:1 on white — Lighthouse failed every
     ".ref" line and the "Show more" link on /collection/rolex-3035-movement/.
     #846a38 is the same hue and saturation (H39 S41%), 6 points darker, and clears
     WCAG AA for normal text: 5.12:1 on #fff and 4.70:1 on the #f5f5f5 bar. */
  --gold:#846a38; --gold-soft:#bfa066; --c-green:#1f6b3b; --accent:#006cff;
  --sans:"Poppins",sans-serif; --ff-head:"Montserrat","Poppins",sans-serif; --ff-body:"Poppins",sans-serif;
  --maxw:1340px;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--ff-body);font-size:15px;line-height:1.5;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
/* Links inherit the text colour (incl. :visited) — matches wmd-shell.css. Without this
   the product-card <a> names render as the browser's blue link / purple visited colour. */
a,a:visited{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* Visible to screen readers only — used for the h2 that keeps the heading outline
   contiguous when a collection has no editor-written h2 of its own. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
h1,h2,h3,h4{margin:0;font-family:var(--ff-head);font-weight:600;line-height:1.15;letter-spacing:-.02em}
/* Match the original Porto shop container width (.container = max-width:calc(88% + 20px),
   i.e. ~88% fluid, NO cap) so the grid isn't boxed-in on large desktop monitors. */
.wrap{width:calc(88% + 20px);max-width:none;margin:0 auto}
.eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700}
section{padding:34px 0}

/* ---------- breadcrumb ---------- */
.bcbar{background:#f5f5f5}
.bc{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-family:var(--ff-head);font-size:11px;font-weight:500;color:#222;padding:9px 0}
.bc a{color:#222;text-decoration:none}
.bc a:hover{color:var(--accent)}
.bc .sep{color:#222;font-weight:700}
.bc .cur{color:#222}

/* ---------- collection intro (term description html: h1 + copy + show-more) ---------- */
.cintro{border-bottom:1px solid var(--c-line);padding-bottom:24px;margin-bottom:8px}
.cintro h1{font-size:32px;margin:6px 0 12px}
/* full .wrap width — same measure as the grid and the bottom SEO copy, no narrow cap */
.cintro-copy{color:var(--ink-soft);font-size:15px;line-height:1.7}
.cintro-copy a#toggle-more{color:var(--gold);font-weight:600;text-decoration:none;white-space:nowrap}
.cintro-copy a#toggle-more:hover{text-decoration:underline}
.cintro-copy #extra-content{display:none;margin-top:14px}
.cintro-copy.open #extra-content{display:block}
.cintro-copy h2,.cintro-copy h3{font-family:var(--ff-head);color:var(--ink);margin:22px 0 8px;font-size:20px}
.cintro-copy p{margin:0 0 12px}
.cintro-copy ul,.cintro-copy ol{margin:0 0 12px 20px}
.cintro-copy a{color:var(--gold)}

/* ---------- sort / result bar ---------- */
.rbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:22px 0 6px}
.rbar .meta{color:var(--ink-soft);font-size:14px}
.rbar .ctls{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto}
.rbar .ctl{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;color:var(--ink-soft)}
.rbar select{font-family:var(--sans);font-size:13px;padding:8px 10px;border:1px solid var(--c-line);border-radius:2px;background:#fff;color:var(--ink)}

/* active facet pills */
.applied{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 18px}
.applied a{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:12px;border:1px solid var(--c-line);border-radius:30px;padding:5px 12px;text-decoration:none;color:var(--ink);background:#fff}
.applied a:hover{border-color:var(--gold);color:var(--gold)}
.applied a b{font-weight:600}
.applied a span{font-size:15px;line-height:1;color:#999}
.applied .clearall{border-style:dashed}

/* ---------- shop grid + sidebar (shared vocabulary with search.php) ---------- */
.shop{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start}
.side{position:sticky;top:104px;background:#fff;border:1px solid var(--c-line);border-radius:4px;padding:6px 0;margin:0}
.side-head{display:none}
.fgroup{border-bottom:1px solid var(--c-line);padding:18px 20px}
.fgroup:last-child{border-bottom:none}
/* h3, not h4: the page runs H1 → H2 (grid heading) → facet headings, and jumping
   straight to h4 tripped Lighthouse's "sequentially-descending order" audit. The
   footer's h4 columns then follow an h3 correctly. */
.fgroup h3{font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.fgroup .opts{max-height:230px;overflow-y:auto}
.fgroup label{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-soft);padding:4px 0;cursor:pointer}
.fgroup label input{accent-color:var(--gold)}
.fgroup label .fc{margin-left:auto;color:var(--ink-soft);font-weight:500;font-size:12px}
.side-actions{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:16px 20px}
.apply-btn{background:var(--ink);color:#fff;border:none;border-radius:2px;padding:10px 20px;font-family:var(--sans);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:background .15s}
.apply-btn:hover{background:var(--gold)}
.side-actions .clear{font-family:var(--sans);font-size:12px;color:var(--ink-soft);text-decoration:underline}
.shop-main{min-width:0}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* product cards */
.pcard{background:#fff;border:1px solid var(--c-line);border-radius:4px;overflow:hidden;text-decoration:none;display:block;transition:.2s;position:relative}
.pcard:hover{box-shadow:0 12px 30px rgba(0,0,0,.08);transform:translateY(-3px)}
.pcard .ph{aspect-ratio:1;background:#f7f7f7;display:flex;align-items:center;justify-content:center}
.pcard .ph img{width:100%;height:100%;object-fit:contain;padding:16px;mix-blend-mode:multiply}
.pcard .ph i{width:42%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f4f2ec,#cfcabb);box-shadow:0 0 0 7px #c9b06a}
.pcard .pb{padding:16px}
.pcard .ref{font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700}
.pcard .nm{font-family:var(--ff-head);font-size:15px;margin:5px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .pr{font-weight:700;font-family:var(--sans)}
.pcard .pr del{color:#9a9a9a;font-weight:400;margin-left:6px}
.pcard .pr ins{text-decoration:none}
.pcard .pr-na{font-weight:500;font-size:13.5px;color:var(--ink-soft)}
.pcard .oos{position:absolute;top:12px;left:12px;font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;background:rgba(26,26,26,.86);color:#fff;border-radius:2px;padding:4px 9px}

/* empty state */
.empty{grid-column:1/-1;padding:40px;text-align:center;color:var(--ink-soft);border:1px dashed var(--c-line);border-radius:4px}
.empty a{color:var(--gold)}

/* pagination */
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:34px}
.pager .pg{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 13px;border:1px solid var(--c-line);border-radius:2px;background:#fff;color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:600;text-decoration:none;transition:.15s}
.pager a.pg:hover{border-color:var(--gold);color:var(--gold)}
.pager .pg.cur{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager .pg.gap{border:none;background:none;min-width:22px;color:var(--ink-soft)}

/* ---------- bottom SEO copy (below the grid) ---------- */
.cbottom{border-top:1px solid var(--c-line);margin-top:40px;padding-top:30px;color:var(--ink-soft);font-size:14.5px;line-height:1.7}
.cbottom h2,.cbottom h3{font-family:var(--ff-head);color:var(--ink);margin:22px 0 8px;font-size:20px}
.cbottom h2:first-child,.cbottom h3:first-child{margin-top:0}
.cbottom p{margin:0 0 12px}
.cbottom ul,.cbottom ol{margin:0 0 12px 20px}
.cbottom a{color:var(--gold)}
.cbottom table{border-collapse:collapse;margin:12px 0;font-size:13.5px}
.cbottom th,.cbottom td{border:1px solid var(--c-line);padding:8px 12px;text-align:left}

/* schema_review_code block: the [wmd_price_track] chart + the legacy .seo-review
   testimonial. The chart ships its own CSS; only the testimonial needs framing. */
.creview{border-top:none;margin-top:26px;padding-top:0}
.creview .seo-review{border-left:3px solid var(--gold);padding:2px 0 2px 16px;margin:0 0 26px}
.creview .seo-review p{margin:0 0 6px;font-style:italic}
.creview .seo-review [itemprop="author"] span{font-style:normal;font-weight:600;color:var(--ink)}
.creview hr{display:none}

/* ---------- mobile filters: floating toggle + bottom-sheet ---------- */
.filter-fab{display:none;position:fixed;bottom:88px;left:50%;transform:translateX(-50%);z-index:135;align-items:center;gap:9px;background:var(--ink);color:#fff;border:none;border-radius:40px;padding:14px 26px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 10px 28px rgba(0,0,0,.28);cursor:pointer}
.filter-fab svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.filter-fab .fcount{background:var(--gold);color:#fff;border-radius:20px;padding:1px 8px;font-size:11px}
.filter-scrim{position:fixed;inset:0;background:rgba(10,20,24,.5);z-index:139;opacity:0;visibility:hidden;transition:opacity .3s ease}
.filter-scrim.open{opacity:1;visibility:visible}

/* ---------- footer (matches the product template) ---------- */
.foot-strip{background:#fcf8f5;border-top:1px solid #ece6df;border-bottom:1px solid #ece6df}
.foot-strip .wrap{display:flex;justify-content:space-between;align-items:center;height:36px;padding:0}
.foot-strip .fs-item{display:flex;align-items:center;gap:13px;font-family:var(--ff-head);font-size:14px;font-weight:400;letter-spacing:-.28px;text-transform:uppercase;color:#494949}
.foot-strip svg{width:30px;height:30px;stroke:#333;fill:none;stroke-width:1.2}
footer.site{background:#fcf8f5;color:#222;padding:55px 0 0;font-family:var(--ff-body)}
footer.site .fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr 1.25fr;gap:30px;padding-bottom:55px}
.fcol .logo-img{height:60px;width:auto;display:block;margin-bottom:24px}
.fcol .addr{font-size:13px;font-weight:500;line-height:18px;color:#222}
.fcol .addr .hrs{margin-top:18px}
.fcol .q{font-family:var(--ff-head);font-size:16px;font-weight:500;line-height:25px;color:#3b3b3b;letter-spacing:-.5px;margin:26px 0 8px}
.fcol .phone{display:inline-block;font-family:var(--ff-head);font-size:22px;font-weight:500;line-height:22px;letter-spacing:-1.1px;color:#0c2328;text-decoration:none}
.fcol h4{font-family:var(--ff-head);font-size:16px;font-weight:500;letter-spacing:-.5px;color:#3b3b3b;margin:0 0 20px}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol ul a{display:block;font-family:var(--ff-body);font-size:13px;font-weight:400;color:#222;line-height:25px;text-decoration:none}
.fcol ul a:hover{color:#c5a059}
.fbot{background:#1a1a1a;text-align:center;padding:22px 0;font-family:var(--ff-head);font-size:13px;font-weight:500;color:#999}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .shop{grid-template-columns:1fr}
  section{padding:22px 0}
  .cintro h1{font-size:26px}
  .filter-fab.in-view{display:inline-flex}
  .side{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:140;max-height:82vh;overflow-y:auto;border-radius:16px 16px 0 0;transform:translateY(105%);transition:transform .3s ease;box-shadow:0 -12px 40px rgba(0,0,0,.2)}
  .side.open{transform:translateY(0)}
  .side-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--c-line);font-family:var(--ff-head);font-size:18px;position:sticky;top:0;background:#fff;z-index:1}
  .side-head button{background:none;border:none;font-size:28px;line-height:1;color:#777;cursor:pointer}
  footer.site .fcols{grid-template-columns:1fr 1fr}
  .foot-strip .wrap{flex-direction:column;gap:14px;height:auto;padding:18px 0}
}
@media(max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .pcard .pb{padding:12px}
  .pcard .nm{font-size:14px}
  .rbar{gap:10px}
  footer.site .fcols{grid-template-columns:1fr}
}