/**
 * nn-home.css — native Flatsome homepage section styling.
 *
 * Ported (de-scoped) from the old template-g1-home.php #g1 <style> block.
 * ONLY the bits the native page still needs:
 *   - tokens, USP strip, section heads, Asia frame + line-art, Mix&Match band,
 *     mobile "View All" buttons, responsive.
 * The hero (g1-banner.html) is self-contained (own style/script) → no CSS here.
 * The product cards are the plugin-native [ux_products] override cards, styled by
 *   nn-pcd.css + Customizer NN-CARD — NOT here.
 *
 * Scope: every custom HTML block on the page carries class .nnh (Asia adds .nnh-asia).
 */

.nnh {
  --cream-light:#faf3e7; --cream:#f5e6d3; --cream-deep:#e8d4b0;
  --red-deep:#791f1f; --red-bright:#c9302c; --gold:#d4b26a; --gold-deep:#c9a961;
  --ink:#1a1a1a; --muted:#6a6a6a; --green:#2e8b57; --rule:#e8dcc2;
}
.nnh h2, .nnh h3, .nnh h4 { font-family:Georgia,"Times New Roman",serif; line-height:1.1; letter-spacing:-0.01em; margin:0; font-weight:700; }
.nnh .wrap { max-width:1280px; margin:0 auto; padding:0 32px; }

/* ===== USP strip (dark band, 4 items) ===== */
.nnh.usp-strip { background:var(--ink); color:#fff; padding:22px 0; }
.nnh .usp-row { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.nnh .usp-item { display:flex; align-items:center; gap:12px; font-size:13px; font-weight:600; color:#fff; }
.nnh .usp-item .ic { font-size:22px; flex-shrink:0; color:var(--gold); }
.nnh .usp-item strong { color:#fff; display:block; }
.nnh .usp-item small { color:rgba(255,255,255,.55); display:block; font-weight:500; font-size:11px; letter-spacing:.4px; margin-top:2px; }

/* ===== section head (eyebrow + H2 + lede + view-all) ===== */
.nnh .section-head-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:8px; flex-wrap:wrap; gap:16px; }
.nnh .section-head-row .left { flex:1; min-width:260px; }
.nnh .section-head-row .eyebrow { color:var(--red-deep); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; }
.nnh .section-head-row h2 { font-size:34px; margin-bottom:4px; line-height:1.1; }
.nnh .section-head-row h2 .gold { color:var(--gold-deep); font-style:italic; }
.nnh .section-head-row .lede { color:var(--muted); font-size:13px; margin-top:6px; max-width:640px; }
.nnh .section-head-row .right { display:flex; gap:10px; align-items:center; flex-shrink:0; }
.nnh .section-head-row .view-all { color:var(--red-deep); font-weight:700; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; padding-bottom:3px; border-bottom:1px solid var(--red-deep); white-space:nowrap; }
.nnh .section-head-row .view-all:hover { color:var(--red-bright); border-bottom-color:var(--red-bright); }

/* mobile "view all" pill (hidden desktop) */
.nnh .mobile-view-all { display:none; width:100%; margin-top:14px; padding:14px; border:1.5px dashed var(--red-deep); background:transparent; color:var(--red-deep); font-weight:700; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; border-radius:6px; text-align:center; cursor:pointer; align-items:center; justify-content:center; gap:8px; }
.nnh .mobile-view-all:hover { background:var(--red-deep); color:#fff; }

/* ===== TOP RATED / BeRocket ribbon — stable corner position =====
   BeRocket drops .br_alabel into .box-text; the global card CSS positions it
   with bottom:calc(100%+14px) which drifts (top:-114px) when box-text is tall
   (You-save badge). Pin it to the card's top-right corner instead — stable
   regardless of box-text height. */
.nnh .nn-card .product-small.box { position:relative !important; overflow:visible; }
/* BeRocket renders the ribbon inside .box-text (which is position:relative), so it
   anchors to the text block and drifts. Make box-text static → the ribbon anchors
   to .product-small.box and pins to the image's top-right corner, stable regardless
   of box-text height. Higher specificity (.nnh .nn-card … = 0,4,0) beats the global. */
.nnh .nn-card .box-text { position:static !important; }
.nnh .nn-card .box-text .br_alabel,
.nnh .nn-card .br_alabel.br_alabel_image,
.nnh .nn-card .br_alabel { position:absolute !important; top:0 !important; right:0 !important; bottom:auto !important; left:auto !important; transform:none !important; margin:0 !important; z-index:7 !important; }

/* ===== Asia Select — emerald + gold line-art frame ===== */
.nnh.nnh-asia { background:radial-gradient(125% 95% at 50% 0%, #234a3d 0%, #16352b 42%, #0b1a14 100%); position:relative; overflow:hidden; box-shadow:inset 0 0 220px 70px rgba(0,0,0,.5); border-top:1px solid rgba(217,189,107,.28); border-bottom:1px solid rgba(217,189,107,.28); }
.nnh.nnh-asia::before { content:""; position:absolute; right:-6%; top:50%; transform:translateY(-50%); width:46%; aspect-ratio:1; background:radial-gradient(circle,rgba(217,189,107,.13),transparent 66%); pointer-events:none; z-index:0; }
.nnh .nn-asia-art { position:absolute; z-index:0; pointer-events:none; height:auto; mix-blend-mode:screen; }
.nnh .nn-asia-art.clouds { left:-4%; top:-9%; width:min(540px,44%); opacity:.92; }
.nnh .nn-asia-art.dragon { right:-5%; bottom:-12%; width:min(560px,46%); opacity:.92; }
.nnh.nnh-asia .wrap { position:relative; z-index:2; }
.nnh .nn-asia-head { text-align:center; max-width:760px; margin:0 auto 38px; }
.nnh .nn-asia-eyebrow { font-family:'Cinzel',serif; font-weight:600; font-size:12px; letter-spacing:5px; text-transform:uppercase; color:#d9bd6b; margin-bottom:14px; }
.nnh.nnh-asia h2 { font-family:'Cinzel',serif !important; font-weight:900; font-size:clamp(34px,4vw,56px); color:#f1efe2; letter-spacing:1px; margin:0 0 10px; }
.nnh .nn-asia-tag { font-family:'Cormorant Garamond',serif; font-weight:500; font-style:italic; font-size:clamp(17px,1.6vw,24px); color:#d9bd6b; margin-bottom:14px; }
.nnh .nn-asia-div { width:64px; height:1px; background:linear-gradient(90deg,transparent,#d9bd6b,transparent); margin:0 auto 14px; }
.nnh .nn-asia-brands { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; font-family:'Cinzel',serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#9bb09e; }
.nnh .nn-asia-brands .dot { color:#d9bd6b; }
.nnh .nn-asia-viewall { display:block; text-align:center; margin-top:18px; font-family:'Cinzel',serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:#d9bd6b; }
.nnh .nn-asia-viewall:hover { color:#fff; }

/* ===== Mix & Match — "Build Your Box" band ===== */
.nnh.nnh-mm { background:radial-gradient(ellipse at 50% -10%,var(--cream) 0%,var(--cream-deep) 100%); padding:66px 0; text-align:center; position:relative; overflow:hidden; }
.nnh.nnh-mm::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:repeating-conic-gradient(from -34deg at 50% 0%, rgba(212,178,106,.10) 0deg 4deg, transparent 4deg 13deg); -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%); mask-image:linear-gradient(180deg,#000,transparent 70%); }
.nnh.nnh-mm .wrap { position:relative; z-index:2; }
.nnh .nn-mm-eyebrow { color:var(--red-deep); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; }
.nnh.nnh-mm h2 { font-size:clamp(28px,3.4vw,46px); font-weight:700; margin:0 auto 10px; max-width:820px; }
.nnh.nnh-mm h2 .gold { color:var(--gold-deep); font-style:italic; }
.nnh .nn-mm-sub { color:var(--muted); font-size:15px; max-width:580px; margin:0 auto 30px; line-height:1.6; }
.nnh .nn-mm-cta { display:inline-flex; align-items:center; gap:10px; background:var(--red-deep); color:#fff; padding:15px 40px; border-radius:999px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; font-size:13px; text-decoration:none; box-shadow:0 6px 20px rgba(121,31,31,.28); transition:transform .2s,background .2s; }
.nnh .nn-mm-cta:hover { background:var(--red-bright); transform:translateY(-2px); color:#fff; }

/* ===== responsive ===== */
@media (max-width:1100px){
  .nnh .section-head-row h2 { font-size:28px; }
}
@media (max-width:820px){
  .nnh .section-head-row { margin-bottom:6px; gap:10px; }
  .nnh .section-head-row h2 { font-size:22px; }
  .nnh .section-head-row .lede { display:none; }
  .nnh .section-head-row .right .view-all { display:none; }
  .nnh .usp-strip { padding:16px 0; }
  .nnh .usp-row { grid-template-columns:1fr 1fr; gap:14px; }
  .nnh .mobile-view-all { display:flex; }
  .nnh.nnh-asia { padding-bottom:150px; }            /* reveal dragon below cards on mobile */
  .nnh .nn-asia-head { margin-bottom:22px; }
  .nnh .nn-asia-art.clouds { width:250px; opacity:.82; left:-46px; top:-14px; }
  .nnh .nn-asia-art.dragon { width:min(320px,84%); opacity:.74; right:-14px; bottom:8px; }
  .nnh.nnh-mm { padding:40px 0; }
}