/* =====================================================================
   Luna Dao — premium line-icon styling + 3D luopan upgrades (v8.5)
   Icons inherit currentColor; size is driven by font-size on the wrapper.
   ===================================================================== */
.ico { display:inline-block; vertical-align:-.14em; width:1em; height:1em; }

/* Hero / buttons / trust badges */
.btn .btn-ico { width:1.05em; height:1.05em; vertical-align:-.18em; margin-right:.34em; }
.btn-primary .btn-ico { color: #f6e3a1; }
.hero-trust span { display:inline-flex; align-items:center; gap:7px; }
.trust-ico { width:1.18em; height:1.18em; color:var(--gold, #c9a84c); opacity:.92; }

/* Mood cards */
.mood-emoji { display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; margin:0 auto 12px; border-radius:50%;
  font-size:1.7rem; color:var(--gold-light, #e6cf86);
  background:radial-gradient(circle at 50% 38%, hsla(42,80%,62%,.16), hsla(262,55%,20%,.12) 72%, transparent);
  border:1px solid hsla(42,80%,62%,.22);
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s, border-color .45s; }
.mood-card:hover .mood-emoji { transform:translateY(-4px) rotate(-4deg) scale(1.06);
  border-color:hsla(42,80%,62%,.5); box-shadow:0 12px 30px hsla(42,80%,55%,.18); }
.mood-ico { width:1em; height:1em; }

/* Intention / category cards */
.cat-icon { display:inline-flex; align-items:center; justify-content:center;
  width:70px; height:70px; margin:0 auto 14px; border-radius:20px; font-size:1.9rem;
  color:var(--cat-color, var(--gold-light, #e6cf86));
  background:linear-gradient(160deg, hsla(0,0%,100%,.06), hsla(0,0%,0%,.18));
  border:1px solid color-mix(in srgb, var(--cat-color, #c9a84c) 32%, transparent);
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s; }
.cat-card:hover .cat-icon { transform:translateY(-5px) scale(1.05);
  box-shadow:0 16px 36px color-mix(in srgb, var(--cat-color, #c9a84c) 22%, transparent); }
.cat-ico { width:1em; height:1em; }

/* Compass intention icons (page) */
.intention-icon .intention-ico { width:1em; height:1em; }

/* ===================== 3D mini luopan (home gateway) ===================== */
/* (v8.7) unified with the full 5D luopan — ticks/trigrams/depth come from
   the shared .luopan-stage block below; mini only adjusts perspective. */
.luopan-stage.mini { perspective: 1200px; }
.luopan-stage.mini .luopan-float {
  transform-style:preserve-3d;
  animation: lpBob 8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .luopan-stage.mini .luopan-float { animation:none !important; }
}

/* Story / value props */
.value-icon { display:inline-flex; align-items:center; justify-content:center; font-size:1.7rem; color:var(--gold-light,#e6cf86); }
.value-ico { width:1em; height:1em; }
.story-crystal { display:inline-flex; color:var(--gold-light,#e6cf86); opacity:.9; }
.story-gem-ico { width:3.2rem; height:3.2rem; filter:drop-shadow(0 0 22px hsla(42,85%,62%,.4)); }

/* Community benefits */
.community-benefits li { display:flex; align-items:center; gap:10px; }
.ben-ico { width:1.15em; height:1.15em; flex:0 0 auto; color:#7ec8a0; }
.btn-whatsapp .btn-ico { color:#fff; }

/* Placeholders / instagram / blog */
.crystal-emoji, .insta-emoji, .blog-card-image span { display:inline-flex; align-items:center; justify-content:center; color:var(--gold-light,#e6cf86); }
.ph-ico { width:2.4rem; height:2.4rem; opacity:.55; }
.insta-ico { width:2rem; height:2rem; opacity:.5; }
.blog-card-ico { display:inline-flex; }
.blog-ico { width:1.8rem; height:1.8rem; opacity:.85; }

/* Footer social + payment + popup + floating */
.footer-social a { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; font-size:1.12rem; color:#d8cbe6; border:1px solid hsla(42,40%,75%,.22); background:hsla(0,0%,100%,.04); transition:color .3s, transform .3s, border-color .3s, box-shadow .3s; }
.footer-social a:hover { color:var(--gold-light,#f0dc9a); border-color:hsla(42,80%,65%,.55); transform:translateY(-2px); box-shadow:0 8px 22px hsla(42,80%,55%,.18); }
.soc-ico { width:1.15em; height:1.15em; }
.popup-icon { display:flex; justify-content:center; font-size:1.9rem; color:var(--gold-light,#e6cf86); margin-bottom:6px; }
.popup-ico { width:1em; height:1em; }
.payment-icons { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pay-chip { display:inline-flex; align-items:center; gap:5px; font-size:.74rem; letter-spacing:.04em; color:var(--text-dim,#b9aec9);
  border:1px solid hsla(42,30%,70%,.18); border-radius:8px; padding:4px 9px; background:hsla(0,0%,100%,.03); }
.pay-ico { width:1.05em; height:1.05em; opacity:.8; }
.floating-whatsapp { display:flex; align-items:center; justify-content:center; }
.float-wa-ico { width:30px; height:30px; color:#fff; }
.whatsapp-join-btn { display:inline-flex; align-items:center; gap:8px; }

/* ============ Support dock (FAQ + WhatsApp + email) ============ */
.support-dock { position:fixed; right:22px; bottom:22px; z-index:1400; font-family:inherit; }
.support-launcher { position:relative; width:60px; height:60px; border-radius:50%; border:1px solid hsla(42,80%,68%,.55);
  background:radial-gradient(circle at 32% 28%, #f0dc9a, #c9a84c 60%, #a07f33); color:#241a08; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 14px 40px hsla(42,85%,45%,.4), inset 0 1px 2px hsla(0,0%,100%,.6);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
.support-launcher:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 18px 50px hsla(42,90%,50%,.5); }
.support-launcher-ico { position:relative; width:26px; height:26px; display:flex; align-items:center; justify-content:center; }
.support-launcher-ico svg { position:absolute; width:26px; height:26px; transition:opacity .3s, transform .35s; }
.sl-ico-close { opacity:0; transform:rotate(-90deg) scale(.6); }
.support-dock.is-open .sl-ico-open { opacity:0; transform:rotate(90deg) scale(.6); }
.support-dock.is-open .sl-ico-close { opacity:1; transform:rotate(0) scale(1); }
.support-launcher-pulse { position:absolute; inset:0; border-radius:50%; border:1px solid hsla(42,85%,68%,.7);
  animation:spPulse 2.6s ease-out infinite; }
@keyframes spPulse { 0%{transform:scale(1);opacity:.7;} 70%{transform:scale(1.55);opacity:0;} 100%{opacity:0;} }
.support-dock.is-open .support-launcher-pulse { animation:none; opacity:0; }

.support-panel { position:absolute; right:0; bottom:76px; width:min(350px, calc(100vw - 32px));
  max-height:min(74vh, 620px); overflow-y:auto;
  background:linear-gradient(165deg, hsla(262,48%,15%,.97), hsla(258,50%,8%,.98));
  border:1px solid hsla(42,60%,70%,.28); border-radius:20px; padding:18px 18px 16px;
  box-shadow:0 30px 90px hsla(260,70%,3%,.65), inset 0 0 50px hsla(42,85%,60%,.04);
  backdrop-filter:blur(18px); color:#e9e2f3;
  opacity:0; transform:translateY(16px) scale(.97); pointer-events:none; transition:opacity .28s, transform .32s cubic-bezier(.34,1.4,.64,1); }
.support-dock.is-open .support-panel { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.sp-head { display:flex; gap:12px; align-items:center; padding-bottom:14px; margin-bottom:12px; border-bottom:1px solid hsla(42,50%,70%,.14); }
.sp-head-ico { width:42px; height:42px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  background:hsla(42,85%,60%,.12); border:1px solid hsla(42,70%,65%,.3); color:#e6cf86; }
.sp-moon { width:22px; height:22px; }
.sp-head h3 { margin:0; font-size:1rem; color:#f3ead6; letter-spacing:.01em; }
.sp-head p { margin:2px 0 0; font-size:.78rem; color:#b3a7c6; }
.sp-label { display:flex; align-items:center; gap:6px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#c9a84c; margin:12px 0 8px; }
.sp-label-ico { width:13px; height:13px; }
.sp-item { border:1px solid hsla(42,45%,70%,.12); border-radius:12px; margin-bottom:8px; background:hsla(0,0%,100%,.03); overflow:hidden; }
.sp-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 13px; font-size:.85rem; color:#e7def2; font-weight:500; }
.sp-item summary::-webkit-details-marker { display:none; }
.sp-chevron { width:8px; height:8px; flex:0 0 auto; border-right:1.6px solid #c9a84c; border-bottom:1.6px solid #c9a84c; transform:rotate(45deg); transition:transform .25s; margin-top:-3px; }
.sp-item[open] .sp-chevron { transform:rotate(-135deg); margin-top:3px; }
.sp-answer { padding:0 13px 12px; }
.sp-answer p { margin:0 0 7px; font-size:.8rem; line-height:1.55; color:#b3a7c6; }
.sp-answer a { color:#e6cf86; font-size:.78rem; text-decoration:none; }
.sp-answer a:hover { text-decoration:underline; }
.sp-cta { margin-top:14px; }
.sp-btn { display:flex; align-items:center; gap:10px; text-decoration:none; border-radius:12px; padding:11px 14px; font-size:.86rem; font-weight:600;
  transition:transform .25s, box-shadow .25s, background .25s; }
.sp-btn-ico { width:18px; height:18px; flex:0 0 auto; }
.sp-btn-wa { background:linear-gradient(135deg,#34b77a,#1f9d63); color:#fff; box-shadow:0 10px 26px hsla(150,70%,40%,.35); }
.sp-btn-wa:hover { transform:translateY(-2px); box-shadow:0 14px 34px hsla(150,70%,40%,.45); color:#fff; }
.sp-btn-wa small { display:block; font-weight:400; font-size:.72rem; opacity:.9; }
.sp-btn-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.sp-btn-ghost { justify-content:center; background:hsla(0,0%,100%,.05); border:1px solid hsla(42,50%,70%,.2); color:#e7def2; font-size:.8rem; }
.sp-btn-ghost:hover { background:hsla(42,85%,60%,.12); border-color:hsla(42,70%,65%,.45); color:#f3ead6; }
@media (max-width:640px){ .support-dock{ right:16px; bottom:16px;} .support-launcher{width:54px;height:54px;} }

/* Cart / generic placeholder icons */
.empty-icon { display:flex; align-items:center; justify-content:center; }
.empty-gem-ico { width:64px; height:64px; color:var(--gold-light,#e6cf86); opacity:.85; filter:drop-shadow(0 0 24px hsla(42,85%,62%,.35)); }
.free-shipping-bar [data-freeship-msg] { display:inline-flex; align-items:center; gap:7px; }
.fs-ico { width:16px; height:16px; color:var(--gold-light,#e6cf86); flex:0 0 auto; }
.product-img-placeholder span, .addon-thumb span { display:inline-flex; align-items:center; justify-content:center; }
.ph-gem-ico { width:30px; height:30px; color:var(--gold-light,#e6cf86); opacity:.55; }
.addon-thumb .ph-gem-ico { width:24px; height:24px; }
.cart .payment-methods, .cart-section .payment-methods { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

/* Header icons */
.announcement-track span { display:inline-flex; align-items:center; gap:6px; }
.ann-ico { width:13px; height:13px; color:var(--gold-light,#e6cf86); flex:0 0 auto; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; }
.icon-btn .hd-ico { width:20px; height:20px; }
.search-btn, .lang-btn { display:inline-flex; align-items:center; justify-content:center; }
.search-btn .hd-ico, .lang-btn .hd-ico { width:18px; height:18px; }
.cart-icon { position:relative; }
.cart-icon .bag-ico { width:21px; height:21px; }

/* Checkout icons */
.co-trust-bar { display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:center; }
.co-trust-bar span { display:inline-flex; align-items:center; gap:7px; }
.co-trust-ico { width:17px; height:17px; color:var(--gold-light,#e6cf86); flex:0 0 auto; }
.paytab-ico { width:17px; height:17px; margin-right:6px; vertical-align:-3px; }
.place-ico { width:17px; height:17px; margin-right:7px; vertical-align:-3px; color:inherit; }
.co-fs-ico { display:inline-flex; }
.co-truck-ico { width:22px; height:22px; color:var(--gold-light,#e6cf86); }

/* Products / no-results icons */
.nr-emoji { display:flex; justify-content:center; color:var(--gold-light,#e6cf86); }
.nr-ico { width:56px; height:56px; opacity:.85; filter:drop-shadow(0 0 22px hsla(42,85%,62%,.35)); }
.product-placeholder { display:flex; align-items:center; justify-content:center; }

/* Product detail icons */
.detail-trust div { display:flex; align-items:center; gap:8px; }
.dt-ico { width:18px; height:18px; color:var(--gold-light,#e6cf86); flex:0 0 auto; }
.arrives-note, .whatsapp-contact { display:flex; align-items:center; gap:8px; }
.wishlist-btn { display:inline-flex; align-items:center; gap:8px; }
.energy-card-head .fs-ico, .healing-list .fs-ico { width:15px; height:15px; }
.rs-ico .icon, .dm-time .icon { width:1.05em; height:1.05em; vertical-align:-2px; }
.fbt-emoji { display:flex; align-items:center; justify-content:center; }

/* ============================================================
   5D Luopan — premium layered talisman (v8.7)
   Mouse-driven tilt + depth layers + metallic/glass materials
   ============================================================ */
.luopan-stage {
  --rx: 8deg; --ry: 0deg; --mx: 30%; --my: 24%;
  --R: min(186px, 40vw);
  width: min(380px, 80vw); height: min(380px, 80vw);
  perspective: 1100px;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .18s ease-out;
  will-change: transform;
}
.luopan-stage.mini { --R: min(160px, 35vw); width: min(330px, 72vw); height: min(330px, 72vw); }
.luopan-floor {
  position:absolute; left:50%; bottom:-7%; width:82%; height:16%;
  transform: translateX(-50%) rotateX(72deg);
  background: radial-gradient(ellipse, hsla(42,90%,60%,.32), hsla(268,80%,50%,.12) 45%, transparent 72%);
  filter: blur(9px); opacity:.85; pointer-events:none;
}
.luopan-stage .luopan-float {
  animation: lpBob 7.5s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes lpBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.luopan-stage .lp-ring { position:absolute; top:50%; left:50%; border-radius:50%; transform-style:preserve-3d; }

/* outermost engraved tick ring */
.luopan-stage .r0 {
  width:106%; height:106%;
  background:
    repeating-conic-gradient(from 0deg,
      hsla(44,95%,80%,.85) 0deg .5deg, transparent .5deg 11.25deg,
      hsla(44,90%,72%,.4) 0deg .22deg, transparent .22deg 11.25deg);
  -webkit-mask: radial-gradient(circle, transparent 60.5%, #000 61%, #000 63.4%, transparent 64%);
          mask: radial-gradient(circle, transparent 60.5%, #000 61%, #000 63.4%, transparent 64%);
  animation: lpSpinZ 110s linear infinite; --z: 6px;
  filter: drop-shadow(0 0 5px hsla(42,90%,66%,.4));
}
/* rotating eight-trigram ring */
.lp-trigrams { position:absolute; inset:0; transform-style:preserve-3d; animation: lpTriSpin 96s linear infinite; }
@keyframes lpTriSpin { from{transform:translateZ(26px) rotate(0)} to{transform:translateZ(26px) rotate(360deg)} }
.lp-trigrams span {
  position:absolute; top:50%; left:50%; width:1.5em; height:1.5em; margin:-.75em 0 0 -.75em;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(.95rem,3.3vw,1.3rem); color:hsla(44,95%,78%,.9);
  text-shadow:0 0 10px hsla(42,92%,62%,.8), 0 0 22px hsla(268,80%,60%,.4);
  transform: rotate(var(--a)) translateY(calc(var(--R) * -1));
}

/* outer metallic rim */
.luopan-stage .r1 {
  width:96%; height:96%;
  border:1.5px solid hsla(44,90%,70%,.7);
  background:
    conic-gradient(from 0deg, hsla(44,95%,74%,.5), hsla(205,80%,74%,.16) 26%, transparent 48%, hsla(44,95%,72%,.42) 72%, hsla(268,80%,72%,.22) 100%);
  -webkit-mask: radial-gradient(circle, transparent 85.5%, #000 86.5%, #000 99.5%, transparent 100%);
          mask: radial-gradient(circle, transparent 85.5%, #000 86.5%, #000 99.5%, transparent 100%);
  box-shadow:
    0 0 0 1px hsla(268,70%,30%,.5),
    inset 0 0 26px hsla(42,85%,60%,.22),
    0 0 54px hsla(42,85%,58%,.2), 0 0 90px hsla(268,75%,55%,.18);
  animation: lpSpinZ 56s linear infinite; --z:18px;
}
/* dashed inner ring */
.luopan-stage .r2 {
  width:76%; height:76%;
  border:1px dashed hsla(196,85%,78%,.4);
  box-shadow: inset 0 0 18px hsla(205,80%,70%,.12);
  animation: lpSpinZRev 40s linear infinite; --z:30px;
}
/* glass dome inner disc (held still so the pointer sheen stays put) */
.luopan-stage .r3 {
  width:58%; height:58%;
  border:1px solid hsla(44,88%,72%,.6);
  background:
    radial-gradient(circle at 36% 28%, hsla(272,70%,46%,.95), hsl(258,62%,12%) 76%);
  box-shadow:
    inset 0 10px 30px hsla(270,95%,74%,.34),
    inset 0 -16px 34px hsla(256,94%,3%,.8),
    inset 0 2px 7px hsla(44,100%,90%,.4),
    0 0 46px hsla(42,85%,58%,.24);
  animation: lpHold 1s linear infinite; --z:40px;
  overflow:hidden;
}
@keyframes lpHold { from,to{transform:translate(-50%,-50%) translateZ(var(--z,0px))} }
.luopan-stage .r3::before {
  content:''; position:absolute; inset:9%; border-radius:50%;
  border:1px solid hsla(44,90%,78%,.22);
  box-shadow: inset 0 0 18px hsla(268,90%,70%,.18);
}
.luopan-stage .r3::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 0deg, transparent 60%, hsla(46,100%,90%,.20) 71%, transparent 85%);
  animation: lpLocalSpin 9s linear infinite;
}
@keyframes lpLocalSpin { to{ transform:rotate(360deg);} }
.lp-sheen {
  position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:3;
  background: radial-gradient(circle at var(--mx) var(--my),
    rgba(255,255,255,.34), rgba(255,255,255,.07) 30%, transparent 52%);
  mix-blend-mode: screen;
}
/* central hub with glowing taiji */
.luopan-stage .r4 {
  width:37%; height:37%;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: radial-gradient(circle at 40% 30%, hsl(270,62%,24%), hsl(256,72%,7%) 76%);
  box-shadow:
    0 0 0 2px hsla(44,92%,70%,.85),
    0 0 0 5px hsla(268,70%,30%,.4),
    0 10px 30px hsla(42,85%,48%,.42),
    inset 0 5px 16px hsla(268,90%,70%,.4),
    inset 0 -10px 20px hsla(256,95%,3%,.85);
  animation: lpSpinZ 26s linear infinite; --z:54px;
}
.lp-hubglow {
  position:absolute; inset:-48%; border-radius:50%; pointer-events:none; z-index:0;
  background: radial-gradient(circle, hsla(44,96%,72%,.30) 0%, hsla(268,90%,70%,.18) 38%, transparent 66%);
  filter: blur(14px); animation: lpHalo 5s ease-in-out infinite;
}
@keyframes lpHalo { 0%,100%{opacity:.7; transform:scale(.95)} 50%{opacity:1; transform:scale(1.07)} }
.luopan-stage .lp-taiji {
  position:relative; z-index:2;
  font-size: clamp(2.1rem, 9vw, 3.1rem); line-height:1;
  background: linear-gradient(160deg, #fff4d0, #e8c878 45%, #b8862f 75%, #f6e2a2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 14px hsla(44,95%,68%,.85)) drop-shadow(0 0 30px hsla(268,90%,66%,.5));
  animation: lpTaijiPulse 4.5s ease-in-out infinite;
}
@keyframes lpTaijiPulse { 0%,100%{ transform:scale(1); filter:drop-shadow(0 0 12px hsla(44,95%,68%,.8)) drop-shadow(0 0 26px hsla(268,90%,66%,.45));} 50%{ transform:scale(1.07); filter:drop-shadow(0 0 20px hsla(44,95%,74%,.95)) drop-shadow(0 0 44px hsla(268,90%,70%,.6));} }

@keyframes lpSpinZ { from{transform:translate(-50%,-50%) translateZ(var(--z,0px)) rotate(0)} to{transform:translate(-50%,-50%) translateZ(var(--z,0px)) rotate(360deg)} }
@keyframes lpSpinZRev { from{transform:translate(-50%,-50%) translateZ(var(--z,0px)) rotate(0)} to{transform:translate(-50%,-50%) translateZ(var(--z,0px)) rotate(-360deg)} }

/* casting states keep working with new keyframes */
.luopan-stage.is-casting .r0{animation-duration:8s}
.luopan-stage.is-casting .r1{animation-duration:3.2s}
.luopan-stage.is-casting .r2{animation-duration:2.3s}
.luopan-stage.is-casting .r3{animation-duration:1.6s}
.luopan-stage.is-casting .r4{animation-duration:1.1s}
.luopan-stage.is-done .luopan-float .lp-ring,
.luopan-stage.is-done .lp-trigrams,
.luopan-stage.is-done .lp-hubglow,
.luopan-stage.is-done .lp-taiji { animation-play-state: paused; }

/* lock-list icon sizing */
.lock-ic .icon, .lock-ico { width:26px; height:26px; }
.lock-ic { display:flex; align-items:center; justify-content:center; }

@media (max-width:600px){
  .luopan-stage{ --R:min(150px,42vw); width:min(300px,82vw); height:min(300px,82vw); }
  .luopan-stage.mini{ --R:min(132px,38vw); width:min(250px,74vw); height:min(250px,74vw); }
}
@media (prefers-reduced-motion: reduce){
  .luopan-stage{ transform:none; }
  .luopan-stage .luopan-float, .luopan-stage .lp-ring, .lp-trigrams, .lp-hubglow, .luopan-stage .lp-taiji{ animation:none !important; }
}

/* v8.7 secondary-page SVG icon alignment */
.rs-ico .rs-svg { width:34px; height:34px; color:var(--gold-light,#f0d98c); }
.nr-emoji .nr-svg { width:56px; height:56px; color:var(--gold,#d8b45a); }
.ct-ico { display:inline-flex; vertical-align:-3px; margin-right:6px; color:var(--gold,#d8b45a); }
.ct-ico svg { width:18px; height:18px; }
a.ct-social { display:inline-flex; align-items:center; gap:8px; }
.ct-social svg { width:18px; height:18px; color:var(--gold-light,#f0d98c); }
.h1-ico { display:inline-flex; vertical-align:-3px; } .h1-ico svg { width:28px; height:28px; color:var(--gold,#d8b45a); }
.author-avatar-lg svg { width:64px; height:64px; color:var(--gold-light,#f0d98c); }
.product-placeholder svg { width:48px; height:48px; color:var(--gold,#d8b45a); }
.thumb-play svg { width:22px; height:22px; }

/* v8.7 blog/guide category + attribute icons */
.cat-ico { display:inline-flex; } .cat-ico svg { width:30px; height:30px; color:var(--gold-light,#f0d98c); filter:drop-shadow(0 0 8px hsla(44,90%,66%,.5)); }
.guide-icon { display:inline-flex; } .guide-icon svg { width:30px; height:30px; color:var(--gold-light,#f0d98c); }
.attr-ico { width:15px; height:15px; vertical-align:-2px; margin-right:3px; color:var(--gold,#d8b45a); }
.encyc-badge .attr-ico { width:15px; height:15px; }

/* v8.7 topic hub + collection index card icons */
.topic-emoji { display:inline-flex; } .topic-emoji svg { width:38px; height:38px; color:var(--gold-light,#f0d98c); filter:drop-shadow(0 0 12px hsla(44,92%,66%,.55)); }
.cc-icon { display:inline-flex; } .cc-icon svg { width:40px; height:40px; color:var(--gold-light,#f0d98c); filter:drop-shadow(0 0 10px hsla(44,92%,66%,.5)); }