/* ============================================================
   SKIN.CARE Services — front-end card grid
   Inherits the theme's olive tokens; falls back to brand hexes
   so it looks right even without the theme's Additional CSS.
============================================================ */

.scs-grid{
  --scs-olive:      var(--clinic-olive, #4e5322);
  --scs-olive-deep: var(--clinic-olive-deep, #383c17);
  --scs-sage:       var(--clinic-sage, #868b56);
  --scs-cream:      var(--clinic-cream, #f2efe2);
  --scs-ink:        var(--clinic-ink, #2a2c14);
  --scs-muted:      var(--clinic-muted, #5c5f3c);
  --scs-accent:     var(--scs-olive);

  display:grid;
  grid-template-columns:repeat(var(--scs-cols, 3), minmax(0, 1fr));
  grid-auto-rows:1fr;        /* every row equal height = uniform cards */
  align-items:stretch;       /* cards fill their row height */
  gap:1.6rem;
  width:100%;
  box-sizing:border-box;
}
.scs-grid *,
.scs-grid *::before,
.scs-grid *::after{ box-sizing:border-box; }

/* ---------- CARD ---------- */
.scs-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--scs-cream);
  border:1px solid rgba(78,83,34,.14);
  border-top:3px solid var(--scs-accent);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(53,58,29,.05);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1);
  will-change:transform, box-shadow;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.scs-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 44px rgba(53,58,29,.12);
}

/* ---------- MEDIA (optional) ---------- */
.scs-media{
  width:100%;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:rgba(78,83,34,.06);
}
.scs-media .scs-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  will-change:transform;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
/* graceful fallback for very old browsers without aspect-ratio */
@supports not (aspect-ratio: 1){
  .scs-media{ height:200px; }
}

/* ---------- BODY ---------- */
.scs-body{
  display:flex;
  flex-direction:column;
  padding:1.7rem;
  flex:1 1 auto;
}
.scs-card--noimg .scs-body{ padding-top:1.8rem; }

.scs-name{
  font-family:'Fraunces','Cormorant Garamond',serif;
  font-weight:400;
  font-size:1.45rem;
  line-height:1.25;
  color:var(--scs-ink);
  margin:0 0 .7rem;
}
.scs-desc{
  font-family:'Jost','Inter',system-ui,sans-serif;
  font-weight:300;
  font-size:1rem;
  line-height:1.75;
  color:var(--scs-muted);
  margin:0 0 1.2rem;
}

.scs-blend-label{
  font-family:'Jost','Inter',sans-serif;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--scs-sage);
  font-weight:500;
  margin-bottom:.3rem;
}
.scs-blend{
  font-family:'Jost','Inter',sans-serif;
  font-size:.92rem;
  font-weight:500;
  color:var(--scs-olive-deep);
  letter-spacing:.02em;
}

/* ---------- FOOTER (price + link, pinned to card bottom) ---------- */
.scs-foot{
  margin-top:auto;
  padding-top:1.2rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  align-items:flex-start;
}

/* ---------- PRICE ---------- */
.scs-price{
  font-family:'Fraunces',serif;
  font-size:1.3rem;
  font-weight:400;
  color:var(--scs-olive);
}
.scs-price--note{
  font-family:'Jost','Inter',sans-serif;
  font-size:.9rem;
  font-style:italic;
  font-weight:400;
  color:var(--scs-muted);
}

/* ---------- LINK (premium arrow link) ---------- */
.scs-link{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:'Jost','Inter',sans-serif;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--scs-olive);
  text-decoration:none;
  transition:gap .3s ease, color .3s ease;
}
.scs-link .scs-arrow{
  transition:transform .3s ease;
}
.scs-link:hover,
.scs-link:focus-visible{
  gap:.85em;
  color:var(--scs-olive-deep);
}
.scs-link:hover .scs-arrow,
.scs-link:focus-visible .scs-arrow{
  transform:translateX(3px);
}

/* ---------- BADGE ---------- */
.scs-badge{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  padding:.35em 1em;
  border-radius:999px;
  background:linear-gradient(120deg,var(--scs-olive),var(--scs-sage));
  color:#fff;
  font-family:'Jost','Inter',sans-serif;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 6px 16px rgba(53,58,29,.25);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .scs-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:600px){
  .scs-grid{ grid-template-columns:1fr; gap:1.2rem; }
  .scs-name{ font-size:1.35rem; }
}

/* ============================================================
   COLLECTION EXPLORER  [scs_explorer]
============================================================ */
.scs-explorer{
  --scs-olive:      var(--clinic-olive, #4e5322);
  --scs-olive-deep: var(--clinic-olive-deep, #383c17);
  --scs-sage:       var(--clinic-sage, #868b56);
  --scs-cream:      var(--clinic-cream, #f2efe2);
  --scs-ink:        var(--clinic-ink, #2a2c14);
  --scs-accent:     var(--scs-olive);
  width:100%;
  box-sizing:border-box;
}
.scs-explorer *,
.scs-explorer *::before,
.scs-explorer *::after{ box-sizing:border-box; }

/* ---- collection cards row ---- */
.scs-cats{
  display:grid;
  grid-template-columns:repeat(var(--scs-cols, 2), minmax(0, 1fr));
  gap:1.8rem;
}

/* ---- a single collection card ---- */
.scs-cat{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:none;
  margin:0;
  cursor:pointer;
  border-radius:20px;
  overflow:hidden;
  background:var(--scs-olive-deep);
  aspect-ratio:16 / 11;
  font-family:inherit;
  text-align:left;
  box-shadow:0 14px 40px rgba(53,58,29,.10);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
  will-change:transform, box-shadow;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-tap-highlight-color:transparent;
}
.scs-cat:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 60px rgba(53,58,29,.20);
}
.scs-cat-media{
  position:absolute;
  inset:0;
  display:block;
}
.scs-cat-media .scs-cat-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.scs-cat:hover .scs-cat-media .scs-cat-img{ transform:scale(1.06); }
.scs-cat--noimg .scs-cat-media{
  background:linear-gradient(135deg, var(--scs-olive), var(--scs-olive-deep));
}

/* readability overlay */
.scs-cat-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(42,44,20,0) 35%, rgba(42,44,20,.78) 100%);
}

/* text on the card */
.scs-cat-body{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:1.6rem 1.7rem;
  display:flex;
  flex-direction:column;
  gap:.25rem;
  color:#fff;
}
.scs-cat-sub{
  font-family:'Jost','Inter',sans-serif;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--scs-cream);
  opacity:.85;
}
.scs-cat-name{
  font-family:'Fraunces','Cormorant Garamond',serif;
  font-weight:400;
  font-size:clamp(1.5rem, 2.4vw, 2rem);
  line-height:1.15;
  color:#fff;
}
.scs-cat-cue{
  display:flex;
  align-items:center;
  gap:.6em;
  margin-top:.5rem;
  font-family:'Jost','Inter',sans-serif;
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--scs-cream);
}
.scs-cat-arrow{
  transition:transform .35s ease;
}
.scs-cat:hover .scs-cat-arrow{ transform:translateX(4px); }

/* active (selected) state */
.scs-cat.is-active{
  box-shadow:0 0 0 3px var(--scs-cream), 0 0 0 6px var(--scs-accent), 0 22px 54px rgba(53,58,29,.22);
}
.scs-cat.is-active .scs-cat-arrow{ transform:rotate(90deg); }

/* ---- revealed panel ---- */
.scs-panels{
  position:relative;
  margin-top:2.2rem;
}
.scs-panel{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1);
  will-change:opacity, transform;
}
.scs-panel[hidden]{
  display:none !important;
}
.scs-panel.is-open{
  opacity:1;
  transform:translateY(0);
}

/* ---- responsive ---- */
@media (max-width:760px){
  .scs-cats{ grid-template-columns:1fr; gap:1.2rem; }
  .scs-cat{ aspect-ratio:16 / 10; }
}

/* ---------- MOTION SAFETY ---------- */
@media (prefers-reduced-motion:reduce){
  .scs-card{ transition:none; }
  .scs-card:hover{ transform:none; }
  .scs-cat{ transition:none; }
  .scs-cat:hover{ transform:none; }
  .scs-cat:hover .scs-cat-media .scs-cat-img{ transform:none; }
  .scs-panel{ transition:none; }
}