/* ==========================================================================
   GEMHUB & CO. — collection (product category archive) page
   Scope: .gh-collection*  — loads after theme.css and uses its variables
   (--gold, --gold-d, --teal, --cream, --sand, --ink, --muted, --line,
    --serif, --sans, --accent, --wrap, --gap, --ease).
   Layout mirrors gemhub.in/collections/*: breadcrumb → title+count | sort →
   intro → category chips → [aside 280px | grid 4/3/2] → load more + numbered
   pagination → SEO guide → FAQ.  Mobile: fixed "Sort By | Filter" bar.
   ========================================================================== */

.gh-collection{
  --gh-collection-aside:280px;
  --gh-collection-gap:32px;
  --gh-collection-mobile-bar:52px;
  padding:22px 0 72px;
}
.gh-collection *{min-width:0}

/* ---------- breadcrumb ("HOME › Rings") ---------- */
.gh-collection .gh-collection-crumbs,
.gh-collection .woocommerce-breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 2px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin:0 0 18px; line-height:1.5;
}
.gh-collection-crumbs a{color:var(--muted); padding:6px 0; transition:color .2s var(--ease)}
.gh-collection-crumbs a:hover{color:var(--gold-d)}
.gh-collection-crumbs__sep{margin:0 8px; color:#bbb; font-size:14px; line-height:1}
.gh-collection-crumbs__item:last-child{color:var(--ink); font-weight:600; letter-spacing:.1em}

/* ---------- header row: title + count | sort ---------- */
.gh-collection-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
  margin:0 0 18px;
}
.gh-collection-kicker{margin-bottom:6px}
.gh-collection-title{font-size:clamp(30px,3.4vw,46px); font-weight:600; letter-spacing:-.005em; line-height:1.05; color:var(--teal)}
.gh-collection-count{
  margin:8px 0 0; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.gh-collection-tools{display:flex; align-items:center; gap:12px; padding-bottom:6px}
.gh-collection-sort{display:flex; align-items:center; gap:10px}
.gh-collection-sort__label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.gh-collection-sort .woocommerce-ordering{margin:0}
.gh-collection-sort select.orderby,
.gh-collection-sort select{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  padding:10px 38px 10px 16px; font-family:var(--sans); font-size:13px; color:var(--ink);
  cursor:pointer; min-width:190px; letter-spacing:.01em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%231C1C1C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  transition:border-color .2s var(--ease);
}
.gh-collection-sort select:hover,.gh-collection-sort select:focus-visible{border-color:var(--gold); outline:none}

/* toolbar "Filter" button — mobile/tablet only (aside is hidden there) */
.gh-collection-filter-btn{
  display:none; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink);
  padding:10px 16px; font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.gh-collection-filter-btn:hover{border-color:var(--gold); background:var(--cream)}
.gh-collection-filter-btn svg{width:15px; height:15px}
.gh-collection-filter-btn__count[hidden]{display:none}
.gh-collection-filter-btn__count{
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--gold); color:#fff; font-size:10px; font-weight:600; letter-spacing:0;
}

/* ---------- intro (collection description, above the grid) ---------- */
.gh-collection-intro{max-width:860px; margin:0 0 20px; font-size:14.5px; line-height:1.75; color:var(--body)}
.gh-collection-intro p{margin:0 0 10px}
.gh-collection-intro a{color:var(--teal); text-decoration:underline; text-underline-offset:2px}
.gh-collection-intro strong{color:var(--ink)}

/* ---------- "Shop by category" chips ---------- */
.gh-collection-related{margin:4px 0 22px}
.gh-collection-related__label{margin:0 0 10px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color:var(--gold-d)}
.gh-collection-related__list{list-style:none; margin:0; padding:0 0 4px; display:flex; flex-wrap:wrap; gap:8px}
.gh-collection-related__list li{margin:0; flex:0 0 auto}
.gh-collection-related__chip{
  display:inline-flex; align-items:center; min-height:42px; padding:0 18px;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  font-family:var(--serif); font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  white-space:nowrap; transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.gh-collection-related__chip:hover,.gh-collection-related__chip:focus-visible{border-color:var(--gold); color:var(--teal); background:var(--cream)}

/* ---------- two-column layout ---------- */
.gh-collection-layout{
  display:grid; grid-template-columns:var(--gh-collection-aside) minmax(0,1fr);
  gap:var(--gh-collection-gap); align-items:start;
}
.gh-collection-aside{
  position:sticky; top:96px; max-height:calc(100vh - 116px); overflow-y:auto; overscroll-behavior:contain;
  padding-right:6px; scrollbar-width:thin; scrollbar-color:rgba(201,168,76,.45) transparent;
}
.gh-collection-aside::-webkit-scrollbar{width:6px}
.gh-collection-aside::-webkit-scrollbar-thumb{background:rgba(201,168,76,.45); border-radius:3px}
.gh-collection-aside__placeholder{
  display:grid; place-items:center; min-height:420px; border:1px dashed var(--line); border-radius:2px;
  background:var(--cream); color:var(--muted); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.gh-collection-main{min-width:0}

/* ---------- product grid ---------- */
.gh-collection .woocommerce ul.products,
.gh-collection ul.products{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap) 22px;
}
.gh-collection ul.products::before,.gh-collection ul.products::after{display:none}
.gh-collection ul.products li.product{margin:0!important; width:auto!important; float:none!important; text-align:left}

/* ---------- card extensions (base .gh-card lives in theme.css) ---------- */
.gh-card-media{position:relative; display:block; background:var(--cream); overflow:hidden}
.gh-card-img{display:block; position:relative; aspect-ratio:1/1}
.gh-card-img img{width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .7s var(--ease), opacity .45s var(--ease)}
.gh-card-img__hover{position:absolute; inset:0; opacity:0}
@media (hover:hover){
  .gh-card--has-hover:hover .gh-card-img__main{opacity:0}
  .gh-card--has-hover:hover .gh-card-img__hover{opacity:1; transform:scale(1.05)}
}

/* badges */
.gh-card .gh-badge{
  position:absolute; top:10px; left:10px; z-index:2; border-radius:3px;
  font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.08em; line-height:1.3; padding:5px 9px;
}
.gh-badge--mto{background:#fff; color:var(--teal); border:1px solid var(--line); box-shadow:0 1px 3px rgba(0,0,0,.06)}
.gh-badge--sale{
  left:auto; right:10px; background:var(--gold); color:#fff; border-radius:50%;
  width:40px; height:40px; display:grid; place-items:center; padding:0; font-size:11px; letter-spacing:0;
}

/* video play badge — same class as gemhub.in (.ghc-card__play) */
.ghc-card__play{
  position:absolute; right:10px; bottom:10px; z-index:2; width:30px; height:30px; border-radius:50%;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.18); display:grid; place-items:center; pointer-events:none;
  transition:transform .25s var(--ease);
}
.ghc-card__play svg{width:11px; height:13px; fill:var(--teal); margin-left:2px}
.gh-card:hover .ghc-card__play{transform:scale(1.08)}

/* body */
.gh-collection .gh-card-body{padding:14px 14px 16px; gap:6px}
.gh-collection .gh-card-title{
  font-size:16.5px; line-height:1.3; min-height:calc(2 * 1.3em);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.gh-card-swatches{list-style:none; margin:0; padding:0; display:flex; gap:6px}
.gh-card-swatch{
  width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.12); box-shadow:inset 0 0 0 1.5px #fff;
  background:#d9d4cc;
}
.gh-card-swatch--rose-gold{background:linear-gradient(135deg,#f4c9b2,#d99a7c 60%,#f7d9c8)}
.gh-card-swatch--yellow-gold,.gh-card-swatch--gold{background:linear-gradient(135deg,#f6e3a4,#d4a93a 60%,#f8e7b3)}
.gh-card-swatch--white-gold,.gh-card-swatch--platinum,.gh-card-swatch--silver,.gh-card-swatch--white{background:linear-gradient(135deg,#ffffff,#c9ccd1 60%,#f2f3f5)}
.gh-card-swatch--black{background:#2b2b2b}
.gh-card-swatch--blue{background:#2f4fa2}
.gh-card-swatch--green{background:#2e7d5b}
.gh-card-swatch--red{background:#b3323a}
.gh-card-swatch--pink{background:#e59ab5}

.gh-collection .gh-card-price{font-family:var(--accent); font-size:15px; font-weight:500; color:var(--teal); display:flex; flex-wrap:wrap; align-items:baseline; gap:0 6px}
.gh-card-price__from{font-size:12px; color:var(--muted); font-weight:400}
.gh-collection .gh-card-price del{color:var(--muted); font-weight:400; opacity:.75; margin:0}
.gh-collection .gh-card-price ins{text-decoration:none; color:var(--gold-d); font-weight:600}

/* CTA: filled teal like gemhub.in (theme base is outline) */
.gh-collection .gh-card-cta{padding-top:10px}
.gh-collection .gh-card-cta .button,.gh-collection .gh-card-cta a.button{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--teal); border:1px solid var(--teal); color:#fff;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; padding:12px 10px; border-radius:3px;
}
.gh-collection .gh-card-cta .button::before{
  content:''; width:14px; height:14px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.gh-collection .gh-card-cta .button:hover{background:var(--teal-2); border-color:var(--teal-2)}
.gh-collection .gh-card--mto .gh-card-cta .button{background:#fff; color:var(--teal); border-color:var(--line)}
.gh-collection .gh-card--mto .gh-card-cta .button::before{filter:invert(1) brightness(.35)}
.gh-collection .gh-card--mto .gh-card-cta .button:hover{border-color:var(--gold); background:var(--cream)}
.gh-collection .gh-card-cta .added_to_cart{display:none}

/* ---------- load more + numbered pagination ---------- */
.gh-collection-more{display:flex; flex-direction:column; align-items:center; gap:10px; margin:36px 0 8px; min-height:1px}
.gh-collection-more__sentinel{width:100%; height:1px}
.gh-collection-more__btn{position:relative; min-width:220px}
.gh-collection-more__spinner{
  display:none; width:16px; height:16px; border:2px solid rgba(13,59,62,.25); border-top-color:var(--teal); border-radius:50%;
  animation:gh-collection-spin .8s linear infinite;
}
.gh-collection-more__btn.is-loading .gh-collection-more__label{visibility:hidden}
.gh-collection-more__btn.is-loading .gh-collection-more__spinner{display:block; position:absolute; left:50%; top:50%; margin:-8px 0 0 -8px}
.gh-collection-more__end{margin:0; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
@keyframes gh-collection-spin{to{transform:rotate(360deg)}}

.gh-collection-pagination{margin-top:18px}
.gh-collection-pagination .woocommerce-pagination ul.page-numbers{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; list-style:none; margin:0; padding:0; border:0;
}
.gh-collection-pagination .woocommerce-pagination ul li{border:0!important; margin:0!important; display:block}
.gh-collection-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 12px;
  border:1px solid var(--line); border-radius:6px; background:#fff; font-size:14px; color:var(--ink);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.gh-collection-pagination a.page-numbers:hover,.gh-collection-pagination a.page-numbers:focus-visible{border-color:var(--gold); color:var(--teal)}
.gh-collection-pagination .page-numbers.current{background:var(--teal); border-color:var(--teal); color:#fff; font-weight:600}
.gh-collection-pagination .page-numbers.dots{border-color:transparent; min-width:28px; padding:0}
.gh-collection-pagination .page-numbers.next,.gh-collection-pagination .page-numbers.prev{font-size:16px}

/* ---------- empty state ---------- */
.gh-collection-empty{text-align:center; padding:70px 20px; color:var(--muted)}
.gh-collection-empty__title{margin-bottom:8px; color:var(--ink)}
.gh-collection-empty .gh-btn{margin-top:18px}

/* ---------- SEO guide + FAQ (below the grid, centred 900px) ---------- */
.gh-collection-seo{
  max-width:900px; margin:56px auto 0; padding:34px 0 0; border-top:1px solid var(--line);
  font-size:15px; line-height:1.8; color:var(--body);
}
.gh-collection-seo h2{font-size:30px; font-weight:600; line-height:1.2; margin:0 0 14px; color:var(--ink)}
.gh-collection-seo h3{font-size:22px; font-weight:600; margin:26px 0 8px; color:var(--ink)}
.gh-collection-seo p{margin:0 0 14px}
.gh-collection-seo ul,.gh-collection-seo ol{margin:0 0 14px 20px; padding:0}
.gh-collection-seo li{margin:0 0 6px}
.gh-collection-seo a{color:var(--teal); text-decoration:underline; text-underline-offset:2px}

.gh-collection-faq{max-width:900px; margin:40px auto 0}
.gh-collection-faq__title{font-size:28px; font-weight:600; margin:0 0 12px; color:var(--ink)}
.gh-collection-faq__item{border-bottom:1px solid var(--line)}
.gh-collection-faq__item:first-of-type{border-top:1px solid var(--line)}
.gh-collection-faq__q{
  cursor:pointer; list-style:none; position:relative; padding:16px 36px 16px 0;
  font-size:15px; font-weight:600; color:var(--ink);
}
.gh-collection-faq__q::-webkit-details-marker{display:none}
.gh-collection-faq__q::after{
  content:'+'; position:absolute; right:4px; top:10px; font-size:24px; font-weight:300; color:var(--gold-d);
  transition:transform .25s var(--ease);
}
.gh-collection-faq__item[open] .gh-collection-faq__q::after{transform:rotate(45deg)}
.gh-collection-faq__a{padding:0 0 16px; font-size:14.5px; line-height:1.75; color:var(--body)}
.gh-collection-faq__a p{margin:0 0 8px}

/* ---------- mobile fixed bar + sort sheet ---------- */
.gh-collection-mobile-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:60; height:var(--gh-collection-mobile-bar);
  background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,.06);
  padding-bottom:env(safe-area-inset-bottom);
}
.gh-collection-mobile-bar__btn{
  flex:1 1 50%; display:flex; align-items:center; justify-content:center; gap:8px;
  background:#fff; border:0; color:var(--ink); font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; height:100%;
}
.gh-collection-mobile-bar__btn + .gh-collection-mobile-bar__btn{border-left:1px solid var(--line)}
.gh-collection-mobile-bar__btn svg{width:18px; height:18px}

.gh-collection-sort-sheet{position:fixed; inset:0; z-index:90}
.gh-collection-sort-sheet[hidden]{display:none}
.gh-collection-sort-sheet__backdrop{position:absolute; inset:0; background:rgba(20,20,20,.44)}
.gh-collection-sort-sheet__panel{
  position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:14px 14px 0 0;
  padding:6px 20px calc(18px + env(safe-area-inset-bottom)); max-height:80vh; overflow:auto;
  animation:gh-collection-sheet .28s var(--ease);
}
@keyframes gh-collection-sheet{from{transform:translateY(100%)} to{transform:none}}
.gh-collection-sort-sheet__head{display:flex; align-items:center; justify-content:space-between; padding:12px 0 8px; border-bottom:1px solid var(--line)}
.gh-collection-sort-sheet__title{font-size:22px; font-weight:600}
.gh-collection-sort-sheet__close{background:none; border:0; padding:8px; margin-right:-8px; cursor:pointer; color:var(--ink)}
.gh-collection-sort-sheet__close svg{width:20px; height:20px}
.gh-collection-sort-sheet__list{list-style:none; margin:0; padding:6px 0 0}
.gh-collection-sort-sheet__item{display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--sand); font-size:14.5px; cursor:pointer}
.gh-collection-sort-sheet__item input{accent-color:var(--teal); width:18px; height:18px; margin:0}
.gh-collection-sort-sheet__item.is-active{color:var(--teal); font-weight:600}

body.gh-collection-sheet-open{overflow:hidden}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .gh-collection ul.products{grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 18px}
}
@media (max-width:980px){
  .gh-collection{--gh-collection-aside:0px; padding-bottom:calc(60px + var(--gh-collection-mobile-bar))}
  .gh-collection-layout{grid-template-columns:minmax(0,1fr); gap:0}
  .gh-collection-aside{display:none}          /* the .gh-filter drawer takes over */
  .gh-collection-aside.is-open{display:block; position:static; max-height:none; overflow:visible; padding:0; margin-bottom:24px}
  .gh-collection-filter-btn{display:inline-flex}
  .gh-collection-sort{display:none}           /* sort moves into the bottom sheet */
  .gh-collection-mobile-bar{display:flex}
  .gh-collection-head{align-items:flex-start}
  .gh-collection-tools{padding-bottom:0}
  .gh-collection ul.products{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 14px}
}
@media (max-width:780px){
  .gh-collection{padding-top:14px}
  .gh-collection-title{font-size:28px}
  .gh-collection-count{font-size:11px; margin-top:6px}
  .gh-collection-filter-btn{display:none}     /* fixed bar has the Filter button on phones */
  .gh-collection-related__list{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -20px; padding:0 20px 6px}
  .gh-collection-related__list::-webkit-scrollbar{display:none}
  .gh-collection-related__chip{min-height:40px; font-size:13px; padding:0 15px}
  .gh-collection ul.products{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px}
  .gh-collection .gh-card-body{padding:10px 10px 12px; gap:5px}
  .gh-collection .gh-card-title{font-size:14.5px}
  .gh-collection .gh-card-price{font-size:14px}
  .gh-collection .gh-card-cta .button{font-size:10px; padding:10px 8px; letter-spacing:.12em}
  .gh-collection .gh-card-cta .button::before{width:12px; height:12px}
  .ghc-card__play{width:26px; height:26px; right:6px; bottom:6px}
  .ghc-card__play svg{width:9px; height:11px}
  .gh-card .gh-badge{top:8px; left:8px; font-size:9.5px; padding:4px 7px}
  .gh-badge--sale{left:auto; right:8px; width:34px; height:34px; font-size:10px}
  .gh-collection-seo{margin-top:36px; padding-top:24px}
  .gh-collection-seo h2,.gh-collection-faq__title{font-size:24px}
  .gh-collection-pagination .page-numbers{min-width:40px; min-height:40px; font-size:13px}
}
@media (max-width:430px){
  .gh-collection .gh-card-title{font-size:13.5px}
}

@media (prefers-reduced-motion:reduce){
  .gh-card-img img,.ghc-card__play,.gh-collection-sort-sheet__panel{transition:none; animation:none}
}