/* ============================================================
   Zelmora MAIN — Premium theme layer (main-premium.css)
   ADDITIVE. Brings the Shop's premium dark-purple + gold glass
   aesthetic to the marketing site & blog, plus mobile edge-to-edge
   spacing and a slight fluid downscale on phones.
   Loaded LAST → cleanly overrides base styles.css. Unlink to revert.
   Reuses base :root tokens (--bg,--surface,--gold,--lavender …).
   ============================================================ */
:root{
  --pad-x:      clamp(.9rem,4vw,1.75rem);
  --mp-glass:   rgba(37,35,43,.66);
  --mp-glassbd: rgba(138,127,162,.20);
  --mp-gold2:   #e4c98f;
  --mp-lift:    0 26px 60px -20px rgba(0,0,0,.7), 0 10px 24px -14px rgba(0,0,0,.55);
  --mp-ease:    cubic-bezier(.16,1,.3,1);
}

/* ---- Edge-to-edge containers + overflow safety ---- */
.container,.container-sm{padding-left:var(--pad-x);padding-right:var(--pad-x);box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%;height:auto}

/* ---- Premium ambient glow behind the top of every page ---- */
body{
  background:
    radial-gradient(58% 42% at 85% -6%,rgba(107,95,134,.20),transparent 60%),
    radial-gradient(46% 36% at 6% 1%,rgba(75,63,88,.16),transparent 62%),
    var(--bg);
  background-attachment:fixed;
}

/* ---- Gold eyebrow / section labels (match shop .zh-eyebrow) ---- */
.section-label{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);
  background:linear-gradient(135deg,rgba(201,169,110,.15),rgba(201,169,110,.04));
  border:1px solid rgba(201,169,110,.38);
  padding:.4rem .8rem;border-radius:999px;
}

/* ---- Glass cards with lift ---- */
.card{
  background:linear-gradient(160deg,var(--surface2),var(--surface));
  border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--mp-lift);
  transition:transform .3s var(--mp-ease),border-color .3s ease,box-shadow .3s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--mp-glassbd);
  box-shadow:0 30px 66px -22px rgba(0,0,0,.75),0 0 0 1px rgba(138,127,162,.14)}

/* ---- Blog cards ---- */
.blog-card{overflow:hidden}
.blog-card .card-img-wrap{overflow:hidden;position:relative}
.blog-card .card-img-wrap::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(22,21,28,.55));pointer-events:none}
.blog-card img{transition:transform .55s var(--mp-ease)}
.blog-card:hover img{transform:scale(1.06)}
.cat-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);background:rgba(201,169,110,.12);
  border:1px solid rgba(201,169,110,.3);padding:.24rem .6rem;border-radius:999px;
}
.blog-meta{color:var(--lavender);font-size:.8rem}
.read-more{color:var(--gold);font-weight:600;display:inline-flex;align-items:center;gap:.4rem;transition:gap .2s var(--mp-ease),color .2s ease}
.read-more:hover{gap:.65rem;color:var(--mp-gold2)}

/* ---- Buttons ---- */
.btn-primary{
  background:linear-gradient(135deg,var(--purple2),var(--purple));border:none;color:#fff;
  box-shadow:0 14px 30px -12px rgba(107,95,134,.75);
  transition:transform .25s var(--mp-ease),box-shadow .3s ease,filter .25s ease;
}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.07);
  box-shadow:0 20px 40px -12px rgba(107,95,134,.9)}
.btn-outline{border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--soft);
  transition:transform .25s var(--mp-ease),border-color .25s ease,color .25s ease,background-color .25s ease}
.btn-outline:hover{transform:translateY(-2px);border-color:var(--lavender);color:var(--white);background:rgba(138,127,162,.1)}

/* ---- Search bar (blog) glass treatment ---- */
.search-bar,.form-input{
  background:var(--mp-glass);border:1px solid var(--mp-glassbd);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--white);border-radius:12px;
}
.form-input:focus{outline:none;border-color:rgba(138,127,162,.55);
  box-shadow:0 0 0 3px rgba(138,127,162,.16)}

/* ---- Newsletter block ---- */
.newsletter-section{
  background:linear-gradient(160deg,var(--surface2),var(--surface));
  border:1px solid var(--mp-glassbd);border-radius:22px;
  padding:clamp(1.8rem,4vw,3rem);position:relative;overflow:hidden;box-shadow:var(--mp-lift);
}
.newsletter-section::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(50% 60% at 80% 0%,rgba(138,127,162,.18),transparent 60%);pointer-events:none}
.newsletter-section>*{position:relative;z-index:1}

/* ---- FAQ ---- */
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .25s ease}
.faq-item:hover{border-color:var(--mp-glassbd)}
.faq-btn{color:var(--white);font-weight:600}
.faq-icon{color:var(--gold)}

/* ---- Pagination ---- */
.page-link{border:1px solid var(--border);border-radius:10px;color:var(--soft);transition:all .2s ease}
.page-link:hover{border-color:var(--lavender);color:var(--white);background:rgba(138,127,162,.1)}
.page-link.active{background:linear-gradient(135deg,var(--purple2),var(--purple));color:#fff;border-color:transparent}

/* ---- Footer subtle top border glow ---- */
footer{border-top:1px solid var(--border)}

/* ============================================================
   MOBILE — edge-to-edge + fluid downscale (every main/blog page)
   ============================================================ */
@media (max-width:768px){
  :root{--pad-x:18px}
  .section{padding:3.25rem 0}
  .section-sm{padding:2.25rem 0}
}
@media (max-width:560px){
  :root{--pad-x:14px}
  html{font-size:15.5px}
  .section{padding:2.6rem 0}
  .section-sm{padding:1.9rem 0}
  .newsletter-section{border-radius:18px}
  .card{border-radius:15px}
}
@media (max-width:400px){
  :root{--pad-x:11px}
  html{font-size:15px}
}