/* ============================================================================
   elite.css — typography & polish layer for SMURF MARKT
   Loaded AFTER pro.css/custom.css. Refines type hierarchy, spacing, cards,
   buttons and section rhythm to give an agency-grade, premium feel without
   touching the base theme files.
   ========================================================================== */

:root{
  --elite-ease:cubic-bezier(.22,.61,.36,1);
  --elite-radius:16px;
  --elite-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 12px 40px rgba(0,0,0,.35);
  --elite-shadow-hover:0 1px 0 rgba(255,255,255,.06) inset, 0 20px 60px rgba(0,0,0,.5);
  --elite-glow:0 0 0 1px rgba(var(--cl-accent-rgb),.25), 0 10px 40px rgba(var(--cl-accent-rgb),.22);
}

/* ---- Type system ---------------------------------------------------------- */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.011em;
  line-height:1.6;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,.sm-hero__title,.category-main-title,.sm-pcard__title{
  letter-spacing:-0.028em;
  line-height:1.12;
  font-weight:700;
}
h1,.sm-hero__title{font-weight:800;letter-spacing:-0.035em}
p{line-height:1.68}
.text-muted,.sm-hero__subtitle{letter-spacing:-0.006em}

/* Refined hero */
.sm-hero__title{
  background:linear-gradient(180deg,#ffffff 0%, rgba(255,255,255,.72) 140%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.sm-hero__subtitle{font-size:clamp(15px,1.6vw,18px);opacity:.9}
.sm-hero__badge{backdrop-filter:blur(6px)}
.sm-hero__stat-value{letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.sm-hero__stat-label{letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;opacity:.65}

/* ---- Section rhythm ------------------------------------------------------- */
.category-section{padding-top:2.2rem;padding-bottom:2.2rem}
.category-main-title{font-size:clamp(19px,2.4vw,26px)}
.category-subtitle-text{opacity:.6;letter-spacing:-0.005em}
.category-toggle-bar{
  border-radius:14px;
  transition:background .3s var(--elite-ease), box-shadow .3s var(--elite-ease);
}
.category-toggle-bar:hover{box-shadow:0 8px 30px rgba(0,0,0,.28)}

/* ---- Product cards -------------------------------------------------------- */
.sm-pcard{
  border-radius:var(--elite-radius)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015))!important;
  box-shadow:var(--elite-shadow);
  transition:transform .34s var(--elite-ease), border-color .34s var(--elite-ease), box-shadow .34s var(--elite-ease)!important;
}
.sm-pcard:hover{
  transform:translateY(-6px)!important;
  border-color:rgba(var(--cl-accent-rgb),.55)!important;
  box-shadow:var(--elite-shadow-hover), var(--elite-glow);
}
.sm-pcard__media{border-top-left-radius:var(--elite-radius);border-top-right-radius:var(--elite-radius)}
.sm-pcard__img{transition:transform .5s var(--elite-ease)}
.sm-pcard:hover .sm-pcard__img{transform:scale(1.06)}
.sm-pcard__title{font-size:14.5px;letter-spacing:-0.02em}
.sm-pcard__badge{
  backdrop-filter:blur(4px);
  font-weight:700;letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.sm-pcard__btn{
  font-weight:700;letter-spacing:.02em;
  box-shadow:0 8px 24px rgba(var(--cl-accent-rgb),.4);
}

/* ---- Buttons -------------------------------------------------------------- */
.btn{
  border-radius:12px;
  font-weight:600;
  letter-spacing:-0.01em;
  transition:transform .16s var(--elite-ease), box-shadow .22s var(--elite-ease), filter .2s var(--elite-ease)!important;
}
.btn-primary{
  box-shadow:0 8px 24px rgba(var(--cl-accent-rgb),.32), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06);
  box-shadow:0 14px 34px rgba(var(--cl-accent-rgb),.42), inset 0 1px 0 rgba(255,255,255,.16)}
.btn-primary:active{transform:translateY(0)}
.btn-lg{border-radius:14px}

/* ---- Navbar --------------------------------------------------------------- */
.sm-nav{backdrop-filter:blur(14px) saturate(1.2)}
.sm-nav__link{letter-spacing:-0.01em;font-weight:500;transition:color .2s var(--elite-ease)}
.sm-nav__brand{letter-spacing:-0.03em;font-weight:800}

/* ---- Feedback cards ------------------------------------------------------- */
.feedback-card{
  border-radius:var(--elite-radius);
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  transition:transform .3s var(--elite-ease), border-color .3s var(--elite-ease);
}
.feedback-card:hover{transform:translateY(-3px);border-color:rgba(var(--cl-accent-rgb),.35)}
.feedback-card .message{line-height:1.6;letter-spacing:-0.008em}

/* ---- Forms / inputs ------------------------------------------------------- */
.form-control,.form-select{
  border-radius:11px;
  transition:border-color .2s var(--elite-ease), box-shadow .2s var(--elite-ease);
}
.form-control:focus,.form-select:focus{
  box-shadow:0 0 0 3px rgba(var(--cl-accent-rgb),.18);
}

/* ---- Product page --------------------------------------------------------- */
.editor,.terms-content{line-height:1.72;letter-spacing:-0.006em}
.editor h1,.editor h2,.editor h3{letter-spacing:-0.02em;margin-top:1.4em}

/* ---- Cards / panels generic ---------------------------------------------- */
.card,.bg-gray{border-radius:var(--elite-radius)}
.bg-gray{border:1px solid rgba(255,255,255,.06)}

/* ---- Section titles ------------------------------------------------------- */
.section-title h1,.section-title h2{letter-spacing:-0.03em;font-weight:800}
.section-subtitle p{opacity:.62}

/* ---- Scrollbar ------------------------------------------------------------ */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:10px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2);background-clip:content-box}

/* ---- Selection ------------------------------------------------------------ */
::selection{background:rgba(var(--cl-accent-rgb),.35);color:#fff}

/* ---- Footer --------------------------------------------------------------- */
footer{letter-spacing:-0.008em}

/* ---- Subtle entrance for cards on load ------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  .sm-pcard,.feedback-card{will-change:transform}
}