/* eThobe collection pages.
   Loaded after home.css: the shared primitives (container, section, band,
   eyebrow, btn, trust, faq, rcard, pcard …) come from there, so the page is
   wrapped in .eth-home as well and only the collection-specific pieces live
   here. */

/* ---- banner ----------------------------------------------------------- */

.eth-coll .coll-hero{padding-block:34px 0}
.eth-coll .coll-hero-inner{background:var(--panel);display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center;padding:48px 52px;overflow:hidden}
.eth-coll .coll-hero h1{font-size:clamp(30px,4vw,46px);margin:0}
.eth-coll .coll-hero .lede{margin:16px 0 0;color:#55492f;font-size:16.5px;max-width:58ch}

.eth-coll .coll-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.eth-coll .coll-meta span{border:1px solid var(--accent);color:var(--accent-deep);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;background:rgba(255,255,255,.45)}

.eth-coll .coll-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;align-items:center}

.eth-coll .coll-hero-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-self:stretch}
.eth-coll .coll-hero-imgs img{width:100%;height:100%;object-fit:cover;border:1px solid var(--line);background:var(--card);min-height:280px}
.eth-coll .coll-hero-imgs img:last-child{transform:translateY(22px)}
/* One image fills the panel rather than leaving a gap where the second would be. */
.eth-coll .coll-hero-imgs.is-single{grid-template-columns:1fr}
.eth-coll .coll-hero-imgs.is-single img:last-child{transform:none}

/* ---- sub-collection links ---------------------------------------------- */

.eth-coll .subcats{display:flex;flex-wrap:wrap;gap:10px;padding-block:26px 0}
.eth-coll .subcats a{border:1px solid var(--line);background:var(--card);padding:9px 18px;font-size:13.5px;font-weight:500;letter-spacing:.04em;transition:border-color .2s,color .2s}
.eth-coll .subcats a:hover{border-color:var(--accent);color:var(--accent-deep)}

/* ---- the long description ---------------------------------------------- */

/* The description is written in BigCommerce and arrives with its own
   alignment, some of it centred. Everything reads left here, with the prose
   justified. */
.eth-coll .seo-copy,
.eth-coll .seo-copy *{text-align:left}
.eth-coll .seo-copy p{text-align:justify;text-justify:inter-word;hyphens:auto}
.eth-coll .seo-copy h2{font-size:clamp(24px,3vw,34px);margin:0 0 18px}
.eth-coll .seo-copy h3{font-size:19px;margin:22px 0 10px}
.eth-coll .seo-copy p,
.eth-coll .seo-copy li{margin:0 0 14px;color:var(--muted);font-size:15px}
.eth-coll .seo-copy ul,
.eth-coll .seo-copy ol{margin:0 0 18px;padding-left:20px}
.eth-coll .seo-copy a{color:var(--accent-deep);border-bottom:1px solid var(--accent)}
.eth-coll .seo-copy a:hover{color:var(--ink);border-color:var(--ink)}
.eth-coll .seo-copy > :first-child{margin-top:0}

/* The description is written elsewhere and can run long, so it opens to a
   readable height and the rest is behind a toggle rather than scrolled past. */
.eth-coll .seo-body{position:relative;max-height:30em;overflow:hidden}
.eth-coll .seo-body.is-open{max-height:none}
.eth-coll .seo-body:not(.is-open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7em;background:linear-gradient(to bottom,rgba(250,247,241,0),var(--bg))}
.eth-coll .seo-more{margin-top:10px;background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--accent-deep);cursor:pointer;border-bottom:1px solid var(--accent)}
.eth-coll .seo-more:hover{color:var(--ink);border-color:var(--ink)}

/* ---- pagination --------------------------------------------------------- */

.eth-coll .pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:46px;flex-wrap:wrap}
.eth-coll .pagination a,
.eth-coll .pagination .is-current{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);font-size:14px;font-weight:500;padding:0 12px;transition:.2s}
.eth-coll .pagination a:hover{border-color:var(--accent);color:var(--accent-deep)}
.eth-coll .pagination .is-current{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---- empty state -------------------------------------------------------- */

.eth-coll .coll-empty{text-align:center;padding:60px 20px;color:var(--muted)}


/* ---- guides and resources ----------------------------------------------- */

.eth-coll .res-head{text-align:center;margin-bottom:38px}
.eth-coll .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.eth-coll .res-card{background:var(--card);border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:12px}
.eth-coll .res-card svg{width:27px;height:27px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.eth-coll .res-card h3{font-size:19px;margin:0}
.eth-coll .res-card h3 a:hover{color:var(--accent-deep)}
.eth-coll .res-card p{margin:0;color:var(--muted);font-size:14.5px;flex:1}
.eth-coll .res-card .link-arrow{align-self:flex-start}

@media (max-width:1060px){
  .eth-coll .res-grid{grid-template-columns:1fr 1fr}
  .eth-coll .coll-hero-inner{grid-template-columns:1fr;padding:38px 32px}
  .eth-coll .coll-hero-imgs{max-width:560px}
  .eth-coll .seo-cols{grid-template-columns:1fr;gap:24px}
}

@media (max-width:760px){
  .eth-coll .res-grid{grid-template-columns:1fr}
  .eth-coll .coll-hero{padding-top:20px}
  .eth-coll .coll-hero-inner{padding:28px 20px;gap:28px}
  .eth-coll .coll-hero-imgs img{min-height:200px}
  .eth-coll .coll-hero-imgs img:last-child{transform:translateY(12px)}
}

/* The collection you are on stays in the row, marked rather than removed, so
   the chips don't reflow as you move between them. */
.eth-coll .subcats a.is-current{background:var(--ink);border-color:var(--ink);color:var(--bg);cursor:default}
.eth-coll .subcats a.is-current:hover{color:var(--bg)}