/* =====================================================
   TEMPE MAS BAYU — Buyer Page CSS v2
   Creative · Dynamic · Professional
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;0,800;1,700&display=swap');

/* ── Design Tokens ── */
:root {
  --c-dark:  #0D0400;
  --c-dark2: #1C0A02;
  --c-dark3: #2D0E00;
  --c-br:    #6B2D0A;
  --c-bm:    #A0400F;
  --c-bl:    #CD6B2F;
  --c-am:    #F59E0B;
  --c-al:    #FCD34D;
  --c-gr:    #16A34A;
  --c-bg:    #FFF8F0;
  --c-bg2:   #FEF3E8;
  --c-card:  #FFFFFF;
  --c-text:  #1C0A02;
  --c-muted: #7C4A2D;
  --c-wa:    #25D366;

  --g-hero:  linear-gradient(145deg,#0D0400 0%,#2D0E00 40%,#6B2D0A 80%,#9B4D1F 100%);
  --g-amber: linear-gradient(135deg,var(--c-am),var(--c-al));
  --g-brown: linear-gradient(135deg,var(--c-br),var(--c-bm));
  --g-green: linear-gradient(135deg,var(--c-gr),#22C55E);
  --g-wa:    linear-gradient(135deg,#25D366,#128C7E);

  --s-sm: 0 4px 20px rgba(107,45,10,.1);
  --s-md: 0 12px 44px rgba(107,45,10,.15);
  --s-lg: 0 28px 80px rgba(107,45,10,.2);
  --s-xl: 0 40px 100px rgba(0,0,0,.25);

  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  --t-fast: all .2s ease;
  --t-med:  all .35s cubic-bezier(.25,.8,.25,1);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Poppins',sans-serif;
  background:var(--c-bg); color:var(--c-text);
  overflow-x:hidden; line-height:1.6;
}
img { max-width:100%; display:block; }
a   { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:inherit; border:none; outline:none; }

/* ─────────────────────────────────────────
   LOADING SCREEN
───────────────────────────────────────── */
#loading-screen {
  position:fixed; inset:0; z-index:9999;
  background:var(--g-hero);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s ease, visibility .8s ease;
}
#loading-screen.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.ls-inner { text-align:center; }
.ls-logo {
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,6vw,3.5rem); font-weight:800; color:#fff;
  animation:lsPulse 1.5s ease-in-out infinite; margin-bottom:32px;
}
.ls-logo span { color:var(--c-am); }
@keyframes lsPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.8;transform:scale(.97)} }
.ls-bar {
  width:180px; height:3px; background:rgba(255,255,255,.12);
  border-radius:var(--r-pill); overflow:hidden; margin:0 auto 16px;
}
.ls-fill {
  height:100%; background:var(--g-amber); border-radius:var(--r-pill);
  animation:lsFill 2s ease forwards;
}
@keyframes lsFill { 0%{width:0} 60%{width:80%} 100%{width:100%} }
.ls-hint { color:rgba(255,255,255,.4); font-size:.8rem; letter-spacing:.1em; }

/* ─────────────────────────────────────────
   PARTICLES
───────────────────────────────────────── */
#particles { position:fixed; inset:0; pointer-events:none; z-index:0; }

/* ─────────────────────────────────────────
   FLOATING TEMPE
───────────────────────────────────────── */
#tempe-floats {
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  overflow:hidden;
}
.tempe-piece {
  position:absolute;
  bottom:-3rem;
  user-select:none;
  will-change:transform,opacity;
  filter:blur(.4px);
  animation:tempeFloat linear forwards;
}
@keyframes tempeFloat {
  0%   { transform:translateY(0)       translateX(0)                rotate(0deg);   opacity:inherit; }
  5%   { opacity:inherit; }
  92%  { opacity:inherit; }
  100% { transform:translateY(-108vh)  translateX(var(--drift,0px)) rotate(var(--spin,180deg)); opacity:0; }
}

/* ─────────────────────────────────────────
   NAVBAR
───────────────────────────────────────── */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:16px 0; transition:var(--t-med);
}
#navbar.scrolled {
  background:rgba(255,248,240,.95);
  backdrop-filter:blur(24px);
  box-shadow:0 4px 32px rgba(107,45,10,.1);
  padding:12px 0;
}
.nav-inner {
  max-width:1200px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-logo {
  font-family:'Playfair Display',serif;
  font-size:1.45rem; font-weight:800; color:#fff;
  display:flex; align-items:center; gap:6px;
  transition:var(--t-med); white-space:nowrap;
}
#navbar.scrolled .nav-logo { color:var(--c-br); }
.nav-logo span { color:var(--c-am); }
.nav-links { display:flex; gap:28px; list-style:none; align-items:center; }
.nav-links a {
  font-weight:500; font-size:.9rem; color:rgba(255,255,255,.85);
  transition:var(--t-fast); padding:4px 0; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:2px; background:var(--c-am);
  transform:scaleX(0); transition:transform .25s ease;
}
.nav-links a:hover { color:var(--c-am) !important; }
.nav-links a:hover::after { transform:scaleX(1); }
#navbar.scrolled .nav-links a { color:var(--c-muted); }

.nav-wa {
  background:rgba(37,211,102,.14); border:1px solid rgba(37,211,102,.28);
  padding:6px 14px !important; border-radius:var(--r-pill);
  color:var(--c-wa) !important;
  display:inline-flex !important; align-items:center; gap:6px;
}
.nav-wa img {
  display:inline-block !important;
  width:16px !important; height:16px !important;
  object-fit:contain; flex-shrink:0;
}
#navbar.scrolled .nav-wa { background:rgba(37,211,102,.1); }

.btn-cart {
  position:relative;
  background:var(--g-amber); color:#1C0A02;
  font-weight:700; font-size:.9rem;
  padding:10px 22px; border-radius:var(--r-pill);
  display:flex; align-items:center; gap:8px;
  transition:var(--t-med); box-shadow:0 4px 20px rgba(245,158,11,.45);
  white-space:nowrap;
}
.btn-cart:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(245,158,11,.58); }
.cart-badge {
  position:absolute; top:-6px; right:-6px;
  background:#EF4444; color:#fff;
  width:20px; height:20px; border-radius:50%;
  font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transform:scale(0); transition:transform .3s cubic-bezier(.68,-.55,.27,1.55);
}
.cart-badge.show { transform:scale(1); }

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
#hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  background:var(--g-hero); overflow:hidden;
  padding:100px 28px 80px;
}
.hero-canvas { position:absolute; inset:0; pointer-events:none; }
.hero-mesh {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 50%, rgba(245,158,11,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 25%, rgba(160,64,15,.1) 0%, transparent 60%);
  animation:meshPulse 8s ease-in-out infinite;
}
@keyframes meshPulse { 0%,100%{opacity:.7} 50%{opacity:1} }
.hero-blobs { position:absolute; inset:0; }
.blob {
  position:absolute; border-radius:50%;
  filter:blur(70px); opacity:.12;
  animation:blobFloat 14s ease-in-out infinite;
}
.blob-1 { width:700px;height:700px;background:var(--c-am);top:-30%;left:-20%;animation-delay:0s; }
.blob-2 { width:450px;height:450px;background:#DC7533;bottom:-15%;right:-15%;animation-delay:-5s; }
.blob-3 { width:350px;height:350px;background:var(--c-al);top:20%;left:55%;animation-delay:-10s; }
@keyframes blobFloat {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(25px,-20px) scale(1.05)}
  66%{transform:translate(-15px,25px) scale(.95)}
}

.hero-layout {
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:center;
}

/* Hero Text */
.hero-text { animation:heroIn .9s ease both; }
@keyframes heroIn { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }

.hero-chip {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.28);
  color:var(--c-al); font-size:.8rem; font-weight:600; letter-spacing:.12em;
  padding:7px 18px; border-radius:var(--r-pill); margin-bottom:24px;
}
.chip-dot {
  width:8px; height:8px; border-radius:50%; background:var(--c-am);
  animation:chipDot 1.5s ease-in-out infinite;
}
@keyframes chipDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.5)} }

.hero-h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.6rem,5.5vw,4.8rem);
  font-weight:800; color:#fff; line-height:1.1; margin-bottom:20px;
  animation:heroIn .9s .15s ease both;
}
.hero-h1 em { color:var(--c-am); font-style:italic; }

.hero-p {
  color:rgba(255,255,255,.7); font-size:clamp(.9rem,1.8vw,1.05rem);
  line-height:1.75; max-width:480px; margin-bottom:36px;
  animation:heroIn .9s .3s ease both;
}
.hero-cta {
  display:flex; gap:14px; flex-wrap:wrap; margin-bottom:48px;
  animation:heroIn .9s .45s ease both;
}
.btn-primary {
  background:var(--g-amber); color:#1C0A02;
  font-weight:700; font-size:.95rem;
  padding:14px 32px; border-radius:var(--r-pill);
  box-shadow:0 8px 28px rgba(245,158,11,.5);
  transition:var(--t-med);
  display:inline-flex; align-items:center; gap:8px;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(245,158,11,.62); }
.btn-ghost {
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-weight:600; font-size:.95rem;
  padding:14px 32px; border-radius:var(--r-pill);
  backdrop-filter:blur(8px); transition:var(--t-med);
  display:inline-flex; align-items:center; gap:6px;
}
.btn-ghost:hover { background:rgba(255,255,255,.18); transform:translateY(-3px); }

.hero-stats {
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  animation:heroIn .9s .6s ease both;
}
.stat { text-align:center; }
.stat strong {
  display:block; font-size:1.9rem; font-weight:800; color:var(--c-am);
  font-family:'Playfair Display',serif; line-height:1;
}
.stat span { font-size:.72rem; color:rgba(255,255,255,.55); letter-spacing:.08em; margin-top:4px; display:block; }
.stat-div { width:1px; height:36px; background:rgba(255,255,255,.12); }

/* Hero Visual - Floating Cards */
.hero-visual {
  position:relative;
  animation:heroVisIn 1s .3s ease both;
}
@keyframes heroVisIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }

.hero-card-stack {
  position:relative; width:100%; height:440px;
  display:flex; align-items:center; justify-content:center;
}
.hcard {
  position:absolute;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(20px); border-radius:var(--r-lg);
  padding:18px 20px;
  display:flex; align-items:center; gap:14px;
  transition:var(--t-med);
}
.hcard:hover { background:rgba(255,255,255,.18); }
.hcard-img {
  width:54px; height:54px; border-radius:var(--r-md);
  background:rgba(245,158,11,.2);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; flex-shrink:0;
}
.hcard-info { flex:1; }
.hcard-name { color:#fff; font-weight:700; font-size:.92rem; }
.hcard-price { color:var(--c-am); font-weight:600; font-size:.82rem; margin-top:2px; }
.hcard-badge {
  position:absolute; top:-9px; right:12px;
  background:var(--g-amber); color:#1C0A02;
  font-size:.68rem; font-weight:700;
  padding:4px 10px; border-radius:var(--r-pill);
  box-shadow:0 4px 12px rgba(245,158,11,.5);
}
.hcard-1 {
  width:220px; top:20px; right:10px; z-index:3;
  animation:hc1 6s ease-in-out infinite;
}
.hcard-2 {
  width:210px; bottom:60px; left:10px; z-index:2;
  animation:hc2 7s 1s ease-in-out infinite;
}
.hcard-3 {
  width:200px; bottom:0; right:50px; z-index:1; opacity:.75;
  animation:hc3 8s 2s ease-in-out infinite;
}
@keyframes hc1 { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-18px) rotate(-1deg)} }
@keyframes hc2 { 0%,100%{transform:translateY(0) rotate(3deg)} 50%{transform:translateY(-13px) rotate(1deg)} }
@keyframes hc3 { 0%,100%{transform:translateY(0) rotate(5deg)} 50%{transform:translateY(-9px) rotate(2deg)} }

.hero-ring {
  position:absolute; top:50%; left:50%;
  width:280px; height:280px;
  border:1px solid rgba(245,158,11,.14); border-radius:50%;
  transform:translate(-50%,-50%);
  animation:ringAnim 5s ease-in-out infinite;
}
.hero-ring::after {
  content:''; position:absolute; inset:28px;
  border:1px dashed rgba(245,158,11,.08); border-radius:50%;
  animation:ringAnim 5s 2.5s ease-in-out infinite;
}
@keyframes ringAnim {
  0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
}
.hero-dot {
  position:absolute; border-radius:50%; background:var(--c-am);
  animation:dotBlink 3s infinite;
}
.hd-1 { width:10px; height:10px; top:80px; left:70px; opacity:.4; }
.hd-2 { width:6px;  height:6px;  bottom:110px; right:30px; opacity:.3; animation-delay:1s; }
.hd-3 { width:8px;  height:8px;  top:160px; left:30px; opacity:.35; animation-delay:2s; }
@keyframes dotBlink { 0%,100%{opacity:.35} 50%{opacity:.9} }

.hero-scroll-hint {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,.45); font-size:.73rem; letter-spacing:.1em;
  animation:fadeInUp 1s 1.5s both; z-index:2;
}
.scroll-chevron {
  width:22px; height:22px;
  border-right:2px solid rgba(255,255,255,.35);
  border-bottom:2px solid rgba(255,255,255,.35);
  transform:rotate(45deg);
  animation:chevBounce 1.5s infinite;
}
@keyframes chevBounce { 0%,100%{transform:rotate(45deg) translate(0,0)} 50%{transform:rotate(45deg) translate(4px,4px)} }
@keyframes fadeInUp { from{opacity:0;transform:translate(-50%,12px)} to{opacity:1;transform:translate(-50%,0)} }

/* ─────────────────────────────────────────
   SHARED SECTION STYLES
───────────────────────────────────────── */
section { position:relative; z-index:1; }
.container { max-width:1200px; margin:0 auto; padding:0 28px; }
.section-head { text-align:center; margin-bottom:48px; }

.sec-tag {
  display:inline-block;
  background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(245,158,11,.05));
  border:1px solid rgba(245,158,11,.28);
  color:var(--c-bm); font-size:.78rem; font-weight:700; letter-spacing:.15em;
  padding:6px 18px; border-radius:var(--r-pill); margin-bottom:14px; text-transform:uppercase;
}
.sec-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800;
  color:var(--c-br); line-height:1.2;
}
.sec-title span { color:var(--c-am); }
.sec-sub { color:var(--c-muted); font-size:.95rem; line-height:1.75; max-width:480px; margin:14px auto 0; }

/* ─────────────────────────────────────────
   PRODUCTS SECTION
───────────────────────────────────────── */
#products { padding:100px 0; background:var(--c-bg); }

/* Filter Tabs */
.filter-tabs {
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-bottom:44px;
}
.filter-tab {
  background:rgba(107,45,10,.06); border:1.5px solid rgba(107,45,10,.12);
  color:var(--c-muted); font-weight:600; font-size:.84rem;
  padding:8px 22px; border-radius:var(--r-pill); transition:var(--t-med);
}
.filter-tab:hover { background:rgba(107,45,10,.1); color:var(--c-br); transform:translateY(-1px); }
.filter-tab.active {
  background:var(--g-amber); color:#1C0A02;
  border-color:transparent; box-shadow:0 4px 16px rgba(245,158,11,.4);
}

/* Products Grid */
.products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:28px;
}

/* Product Card */
.product-card {
  background:var(--c-card); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--s-md);
  transition:var(--t-med); position:relative;
  border:1px solid rgba(107,45,10,.06);
  opacity:0; transform:translateY(40px);
}
.product-card.visible {
  opacity:1; transform:translateY(0);
  transition:opacity .6s ease, transform .6s ease, box-shadow .3s, border-color .3s;
}
.product-card:hover {
  box-shadow:var(--s-lg); border-color:rgba(245,158,11,.22);
  transform:translateY(-10px) !important;
}
/* Shimmer sweep on hover */
.product-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);
  transform:translateX(-100%); transition:transform .6s ease;
  z-index:1; pointer-events:none;
}
.product-card:hover::before { transform:translateX(100%); }

.product-img-wrap {
  position:relative; overflow:hidden;
  height:220px; background:linear-gradient(135deg,var(--c-bg2),#FDE8CC);
}
.product-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease;
}
.product-card:hover .product-img-wrap img { transform:scale(1.1); }
.product-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
}
.product-placeholder .icon  { font-size:4.5rem; }
.product-placeholder .label { font-size:.72rem; color:var(--c-muted); font-weight:700; letter-spacing:.12em; }

.product-badge-stock {
  position:absolute; top:12px; right:12px;
  padding:4px 12px; border-radius:var(--r-pill);
  font-size:.7rem; font-weight:700;
  backdrop-filter:blur(10px); z-index:2;
}
.badge-ok  { background:rgba(255,255,255,.88); color:var(--c-br); border:1px solid rgba(107,45,10,.25); }
.badge-low { background:rgba(245,158,11,.18); color:#D97706; border:1px solid rgba(245,158,11,.35); }
.badge-out { background:rgba(239,68,68,.15);  color:#DC2626; border:1px solid rgba(239,68,68,.3); }

.product-cat-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  color:var(--c-br); font-size:.7rem; font-weight:700;
  padding:4px 12px; border-radius:var(--r-pill);
}

.product-body { padding:20px 20px 18px; }
.product-name { font-size:1rem; font-weight:700; color:var(--c-br); margin-bottom:6px; line-height:1.3; }
.product-desc {
  font-size:.82rem; color:var(--c-muted); line-height:1.6;
  overflow:hidden;
  margin-bottom:14px;
  max-height:2.72em;           /* ≈ 2 baris */
  transition:max-height .4s cubic-bezier(.25,.8,.25,1),
             color .2s ease;
  position:relative;
}
/* Fade gradient saat terpotong */
.product-desc::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:.9em;
  background:linear-gradient(transparent, var(--c-card));
  pointer-events:none;
  transition:opacity .3s ease;
}
/* Expand + scrollable saat hover / touch — scrollbar disembunyikan */
.product-card:hover .product-desc,
.product-card.touch-hover .product-desc {
  max-height:9em;
  overflow-y:auto;
  overscroll-behavior:contain;
  cursor:grab;
  scrollbar-width:none;
}
.product-card:hover .product-desc::-webkit-scrollbar,
.product-card.touch-hover .product-desc::-webkit-scrollbar { display:none; }
.product-card:hover .product-desc::after,
.product-card.touch-hover .product-desc::after { opacity:0; }
.product-footer { display:flex; align-items:center; justify-content:space-between; }
.product-price { font-size:1.2rem; font-weight:800; color:var(--c-br); }
.product-price small { font-size:.72rem; font-weight:500; color:var(--c-muted); margin-left:2px; }

.btn-add-cart {
  background:var(--g-brown); color:#fff;
  font-size:.82rem; font-weight:700;
  padding:9px 18px; border-radius:var(--r-pill);
  display:flex; align-items:center; gap:6px;
  transition:var(--t-med); box-shadow:0 4px 14px rgba(107,45,10,.3);
}
.btn-add-cart:hover { transform:scale(1.07); box-shadow:0 6px 22px rgba(107,45,10,.42); }
.btn-add-cart:disabled { background:#E5E7EB; color:#9CA3AF; box-shadow:none; cursor:not-allowed; transform:none; }

/* ─────────────────────────────────────────
   ABOUT SECTION
───────────────────────────────────────── */
#about {
  padding:100px 0;
  background:linear-gradient(145deg,#1C0A02 0%,#3D1500 55%,#6B2D0A 100%);
  position:relative; overflow:hidden;
}
#about::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 80% 50%, rgba(245,158,11,.06) 0%, transparent 60%);
}

.about-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:64px; align-items:center; position:relative; z-index:1;
}
.about-visual { position:relative; }
.about-card-main {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(24px); border-radius:var(--r-xl);
  padding:40px; color:#fff;
}
.about-emoji { font-size:4.5rem; margin-bottom:20px; }
.about-card-main blockquote {
  font-family:'Playfair Display',serif;
  font-size:1.25rem; font-weight:700; font-style:italic; line-height:1.55;
  color:#fff; margin-bottom:16px;
  border-left:3px solid var(--c-am); padding-left:16px;
}
.about-card-main p { font-size:.88rem; color:rgba(255,255,255,.6); line-height:1.8; }

.about-float {
  position:absolute; right:-16px; top:-16px;
  background:var(--g-amber); border-radius:var(--r-md);
  padding:14px 18px; box-shadow:0 8px 28px rgba(245,158,11,.45);
  text-align:center; animation:floatY 4s ease-in-out infinite;
}
.about-float .num { font-size:1.6rem; font-weight:800; color:var(--c-br); }
.about-float .lbl { font-size:.68rem; font-weight:600; color:var(--c-br); margin-top:2px; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.about-text .sec-tag { color:var(--c-am); border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.1); }
.about-h2 {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.7rem,3.5vw,2.4rem); font-weight:800;
  color:#fff; margin:12px 0 18px;
}
.about-h2 span { color:var(--c-am); }
.about-body { color:rgba(255,255,255,.68); font-size:.93rem; line-height:1.8; margin-bottom:28px; }

.features { display:flex; flex-direction:column; gap:14px; }
.feat {
  display:flex; gap:14px; align-items:flex-start;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-md); padding:16px 18px; transition:var(--t-med);
}
.feat:hover { background:rgba(255,255,255,.09); transform:translateX(6px); }
.feat-icon { font-size:1.6rem; flex-shrink:0; margin-top:2px; }
.feat h4 { color:#fff; font-weight:700; font-size:.9rem; margin-bottom:3px; }
.feat p  { color:rgba(255,255,255,.55); font-size:.82rem; line-height:1.6; }

/* ─────────────────────────────────────────
   COLLAB SECTION
───────────────────────────────────────── */
#collab { padding:100px 0; background:var(--c-bg2); }
.collab-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px; margin-top:48px;
}
.collab-card {
  background:var(--c-card); border-radius:var(--r-lg);
  padding:36px 28px; text-align:center;
  box-shadow:var(--s-sm); border:1px solid rgba(107,45,10,.06);
  transition:var(--t-med); position:relative; overflow:hidden;
}
/* Bottom accent bar */
.collab-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:4px; transform:scaleX(0); transform-origin:left;
  transition:transform .4s ease;
}
.collab-card:nth-child(1)::after { background:var(--g-amber); }
.collab-card:nth-child(2)::after { background:var(--g-green); }
.collab-card:nth-child(3)::after { background:linear-gradient(135deg,#3B82F6,#60A5FA); }
.collab-card:hover::after { transform:scaleX(1); }
.collab-card:hover { transform:translateY(-8px); box-shadow:var(--s-lg); }

.collab-icon {
  width:70px; height:70px; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; margin:0 auto 20px; transition:transform .35s ease;
}
.collab-card:hover .collab-icon { transform:scale(1.12) rotate(-5deg); }
.ci-1 { background:linear-gradient(135deg,#FEF3C7,#FDE68A); }
.ci-2 { background:linear-gradient(135deg,#D1FAE5,#A7F3D0); }
.ci-3 { background:linear-gradient(135deg,#DBEAFE,#BFDBFE); }
.collab-card h3 { font-size:1.05rem; font-weight:700; color:var(--c-br); margin-bottom:10px; }
.collab-card p  { font-size:.87rem; color:var(--c-muted); line-height:1.7; margin-bottom:22px; }
.btn-collab {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--g-brown); color:#fff;
  font-size:.84rem; font-weight:700;
  padding:10px 22px; border-radius:var(--r-pill);
  transition:var(--t-med); box-shadow:0 4px 14px rgba(107,45,10,.25);
}
.btn-collab:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(107,45,10,.38); }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
footer {
  background:linear-gradient(145deg,#0D0400,#2D0E00);
  color:rgba(255,255,255,.65); padding:64px 0 32px;
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:48px; margin-bottom:48px;
}
.footer-brand .f-logo {
  font-family:'Playfair Display',serif;
  font-size:1.7rem; font-weight:800; color:#fff; margin-bottom:12px;
}
.footer-brand .f-logo span { color:var(--c-am); }
.footer-brand p { font-size:.88rem; line-height:1.75; max-width:280px; margin-bottom:20px; }
.f-wa {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(37,211,102,.12); border:1px solid rgba(37,211,102,.25);
  color:var(--c-wa); font-weight:600; font-size:.85rem;
  padding:8px 18px; border-radius:var(--r-pill); transition:var(--t-med);
}
.f-wa:hover { background:rgba(37,211,102,.2); transform:translateY(-2px); }
.footer-col h4 { color:#fff; font-weight:700; margin-bottom:16px; font-size:.92rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col a { font-size:.85rem; transition:color .2s; }
.footer-col a:hover { color:var(--c-am); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.07); padding-top:24px;
  text-align:center; font-size:.8rem;
}

/* ─────────────────────────────────────────
   CART SIDEBAR
───────────────────────────────────────── */
#cart-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:200; opacity:0; visibility:hidden;
  backdrop-filter:blur(6px); transition:opacity .3s,visibility .3s;
}
#cart-overlay.open { opacity:1; visibility:visible; }

#cart-sidebar {
  position:fixed; top:0; right:0; bottom:0;
  width:min(420px,100vw);
  background:var(--c-card); z-index:201;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.25,.8,.25,1);
  box-shadow:-8px 0 60px rgba(0,0,0,.2);
}
#cart-sidebar.open { transform:translateX(0); }

.cart-header {
  padding:24px; border-bottom:1px solid rgba(107,45,10,.08);
  display:flex; align-items:center; justify-content:space-between;
}
.cart-header h3 { font-size:1.15rem; font-weight:700; color:var(--c-br); }
.btn-close-cart {
  width:36px; height:36px; border-radius:50%;
  background:var(--c-bg2); color:var(--c-muted);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; transition:var(--t-med);
}
.btn-close-cart:hover { background:var(--c-br); color:#fff; }

#cart-items { flex:1; overflow-y:auto; padding:20px; }
.cart-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; gap:10px; color:var(--c-muted);
}
.cart-empty-icon { font-size:4rem; }
.cart-empty p { font-size:.9rem; }

.cart-item {
  display:flex; gap:14px; align-items:center;
  padding:14px; border-radius:var(--r-md); background:var(--c-bg2);
  margin-bottom:10px; transition:var(--t-fast);
}
.cart-item:hover { background:#FDE8CC; }
.cart-item-img {
  width:58px; height:58px; border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--c-bg),#FDE8CC);
  overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
}
.cart-item-img img { width:100%; height:100%; object-fit:cover; }
.cart-item-info { flex:1; min-width:0; }
.cart-item-name { font-weight:600; font-size:.88rem; color:var(--c-br); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-price { font-size:.82rem; color:var(--c-muted); margin-top:3px; }
.cart-item-controls { display:flex; align-items:center; gap:8px; margin-top:7px; }
.qty-btn {
  width:26px; height:26px; border-radius:8px;
  background:var(--c-card); border:1px solid rgba(107,45,10,.15);
  color:var(--c-br); font-size:1rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; transition:var(--t-fast);
}
.qty-btn:hover { background:var(--c-br); color:#fff; border-color:var(--c-br); }
.qty-num { font-weight:700; font-size:.88rem; min-width:20px; text-align:center; }
.btn-remove { color:#EF4444; font-size:.78rem; background:none; margin-left:auto; transition:color .2s; }
.btn-remove:hover { color:#DC2626; text-decoration:underline; }

.cart-footer { padding:20px; border-top:1px solid rgba(107,45,10,.08); }
.cart-total {
  display:flex; justify-content:space-between; align-items:center;
  font-weight:700; font-size:1.05rem; color:var(--c-br); margin-bottom:14px;
}
.cart-total span:last-child { color:var(--c-am); font-size:1.25rem; }
.btn-checkout {
  width:100%; background:var(--g-brown); color:#fff;
  font-weight:700; font-size:.95rem;
  padding:15px; border-radius:var(--r-md);
  transition:var(--t-med); box-shadow:0 4px 18px rgba(107,45,10,.35);
}
.btn-checkout:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(107,45,10,.48); }

/* ─────────────────────────────────────────
   ORDER MODAL
───────────────────────────────────────── */
#order-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.65);
  z-index:300; opacity:0; visibility:hidden;
  backdrop-filter:blur(10px); transition:opacity .3s,visibility .3s;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
#order-modal-overlay.open { opacity:1; visibility:visible; }
.order-modal {
  background:var(--c-card); border-radius:var(--r-xl);
  width:100%; max-width:500px; max-height:90vh; overflow-y:auto;
  transform:scale(.92) translateY(20px);
  transition:transform .4s cubic-bezier(.25,.8,.25,1);
  box-shadow:var(--s-xl);
}
#order-modal-overlay.open .order-modal { transform:scale(1) translateY(0); }
.modal-header {
  padding:28px 28px 20px; border-bottom:1px solid rgba(107,45,10,.08);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-header h3 { font-size:1.15rem; font-weight:700; color:var(--c-br); }
.modal-body { padding:28px; }
.modal-summary {
  background:var(--c-bg2); border-radius:var(--r-md); padding:16px; margin-bottom:24px;
}
.modal-summary-title { font-weight:700; font-size:.88rem; color:var(--c-br); margin-bottom:12px; }
.modal-summary-item { display:flex; justify-content:space-between; font-size:.83rem; color:var(--c-muted); margin-bottom:6px; }
.modal-summary-total {
  display:flex; justify-content:space-between; font-weight:800;
  color:var(--c-br); font-size:.98rem;
  border-top:1px dashed rgba(107,45,10,.2); padding-top:10px; margin-top:10px;
}
.form-group { margin-bottom:18px; }
.form-label { display:block; font-weight:600; font-size:.85rem; color:var(--c-br); margin-bottom:7px; }
.form-label span { color:#EF4444; margin-left:2px; }
.form-input,.form-textarea {
  width:100%; padding:11px 15px; border-radius:var(--r-sm);
  border:2px solid rgba(107,45,10,.1); background:var(--c-bg);
  color:var(--c-text); font-family:inherit; font-size:.88rem;
  transition:border-color .2s,box-shadow .2s;
}
.form-input:focus,.form-textarea:focus {
  outline:none; border-color:var(--c-am);
  box-shadow:0 0 0 3px rgba(245,158,11,.12);
}
.form-textarea { resize:vertical; min-height:80px; }
.btn-submit-order {
  width:100%; background:var(--g-green); color:#fff;
  font-weight:700; font-size:.95rem;
  padding:15px; border-radius:var(--r-md);
  transition:var(--t-med); box-shadow:0 4px 18px rgba(22,163,74,.35);
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.btn-submit-order:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(22,163,74,.46); }
.btn-submit-order:disabled { background:#D1D5DB; color:#9CA3AF; box-shadow:none; transform:none; cursor:not-allowed; }

/* ─────────────────────────────────────────
   SUCCESS MODAL
───────────────────────────────────────── */
#success-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.65);
  z-index:400; opacity:0; visibility:hidden;
  backdrop-filter:blur(10px); transition:opacity .3s,visibility .3s;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
#success-modal-overlay.open { opacity:1; visibility:visible; }
.success-modal {
  background:var(--c-card); border-radius:var(--r-xl);
  width:100%; max-width:440px; padding:44px 36px; text-align:center;
  transform:scale(.9); transition:transform .4s cubic-bezier(.25,.8,.25,1);
  box-shadow:var(--s-xl);
}
#success-modal-overlay.open .success-modal { transform:scale(1); }
.success-icon { font-size:5rem; animation:successPop .6s .2s cubic-bezier(.68,-.55,.27,1.55) both; }
@keyframes successPop { from{transform:scale(0)} to{transform:scale(1)} }
.success-title { font-size:1.5rem; font-weight:800; color:var(--c-br); margin:16px 0 10px; }
.success-msg { color:var(--c-muted); line-height:1.7; font-size:.88rem; margin-bottom:24px; }
.success-code {
  background:var(--c-bg2); border-radius:var(--r-sm);
  padding:12px 20px; display:inline-block;
  font-family:monospace; font-weight:700; color:var(--c-br); font-size:1.1rem;
  margin-bottom:24px; letter-spacing:.05em;
}
.btn-wa-notify {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--g-wa); color:#fff; font-weight:700; font-size:.93rem;
  padding:14px 28px; border-radius:var(--r-pill);
  transition:var(--t-med); box-shadow:0 4px 18px rgba(37,211,102,.35);
  width:100%; justify-content:center; margin-bottom:12px;
}
.btn-wa-notify:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,211,102,.46); }
.btn-back-shop {
  display:inline-block; color:var(--c-muted); font-size:.88rem;
  font-weight:600; padding:12px; transition:color .2s;
}
.btn-back-shop:hover { color:var(--c-br); }

/* ─────────────────────────────────────────
   WA FLOAT BUTTON
───────────────────────────────────────── */
#wa-float {
  position:fixed; bottom:28px; left:28px; z-index:99;
  width:58px; height:58px; border-radius:50%;
  background:var(--g-wa);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 24px rgba(37,211,102,.5);
  padding:10px;
  overflow:hidden;
  transition:var(--t-med); animation:waPulse 3s infinite;
}
#wa-float img { width:100%; height:100%; object-fit:contain; display:block; }
#wa-float:hover { transform:scale(1.12) translateY(-3px); box-shadow:0 8px 36px rgba(37,211,102,.62); }
@keyframes waPulse {
  0%,100%{box-shadow:0 4px 24px rgba(37,211,102,.5)}
  50%{box-shadow:0 4px 40px rgba(37,211,102,.7),0 0 0 12px rgba(37,211,102,.08)}
}

/* ─────────────────────────────────────────
   TOAST
───────────────────────────────────────── */
#toast-container {
  position:fixed; bottom:100px; right:28px;
  z-index:9998; display:flex; flex-direction:column; gap:10px;
}
.toast {
  background:var(--c-br); color:#fff;
  padding:14px 18px; border-radius:var(--r-md);
  font-size:.85rem; font-weight:600; box-shadow:var(--s-md);
  transform:translateX(120%); opacity:0;
  transition:transform .4s cubic-bezier(.25,.8,.25,1),opacity .4s;
  max-width:300px; display:flex; align-items:center; gap:10px;
}
.toast.show { transform:translateX(0); opacity:1; }
.toast.success { background:var(--g-green); }
.toast.error   { background:linear-gradient(135deg,#DC2626,#EF4444); }
.toast.info    { background:var(--g-brown); }

/* ─────────────────────────────────────────
   RESPONSIVE
   Breakpoints:
     Tablet  : max-width 1024px
     Mobile  : max-width 767px
     Mobile S: max-width 480px
───────────────────────────────────────── */

/* ── Tablet (768px – 1024px) ── */
@media (max-width:1024px) {
  /* Navbar: kurangi padding & ukuran agar tidak terpotong */
  .nav-inner   { padding:0 14px; gap:10px; }
  .nav-logo    { font-size:1.2rem; gap:5px; }
  .nav-links   { gap:14px; }
  .nav-links a { font-size:.8rem; }
  .nav-wa      { padding:5px 9px !important; font-size:.76rem; gap:4px; }
  .btn-cart    { padding:8px 14px; font-size:.82rem; }

  .hero-layout  { gap:40px; }
  .about-grid   { gap:40px; }
  .footer-grid  { grid-template-columns:1.5fr 1fr 1fr; gap:32px; }

  .hero-h1   { font-size:clamp(2.2rem,4.5vw,3.6rem); }
  .hero-card-stack { height:360px; }

  .products-grid {
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:20px;
  }
  .collab-grid {
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
  }

  #products,#about,#collab { padding:80px 0; }
  .container { padding:0 5%; }
}

/* ── Tablet kecil (768px – 900px): navbar lebih kompak ── */
@media (min-width:768px) and (max-width:900px) {
  .nav-inner    { padding:0 10px; gap:8px; }
  .nav-logo     { font-size:1.1rem; }
  .nav-links    { gap:10px; }
  .nav-links a  { font-size:.76rem; }
  .nav-wa       { padding:4px 8px !important; font-size:.72rem; gap:3px; }
  .nav-wa img   { width:13px !important; height:13px !important; }
  .btn-cart     { padding:7px 11px; font-size:.78rem; gap:5px; }
}

/* ── Mobile (≤ 767px) ── */
@media (max-width:767px) {
  /* Navbar */
  .nav-links  { display:none; }
  .nav-inner  { padding:0 4%; }
  .btn-cart   { padding:9px 16px; font-size:.85rem; }

  /* Hero */
  #hero { padding:90px 4% 64px; }
  .hero-layout {
    grid-template-columns:1fr;
    text-align:center;
    gap:0;
  }
  .hero-visual  { display:none; }
  .hero-p       { margin:0 auto 2rem; max-width:90%; }
  .hero-cta     { justify-content:center; }
  .hero-stats   { justify-content:center; gap:16px; }

  /* Products */
  #products { padding:64px 0; }
  .products-grid {
    grid-template-columns:repeat(auto-fill,minmax(44vw,1fr));
    gap:16px;
  }
  .filter-tabs  { gap:8px; }
  .filter-tab   { padding:7px 16px; font-size:.8rem; }

  /* About */
  #about { padding:64px 0; }
  .about-grid   { grid-template-columns:1fr; gap:32px; }
  .about-float  { display:none; }
  .about-card-main { padding:28px; }
  .about-card-main blockquote { font-size:1.1rem; }

  /* Collab */
  #collab { padding:64px 0; }
  .collab-grid  { grid-template-columns:1fr; gap:18px; margin-top:32px; }
  .collab-card  { padding:28px 20px; }

  /* Footer */
  .footer-grid  { grid-template-columns:1fr; gap:28px; }
  footer        { padding:48px 0 24px; }

  /* Section typography */
  .sec-title    { font-size:clamp(1.5rem,5vw,2rem); }
  .section-head { margin-bottom:32px; }

  /* Cart sidebar */
  #cart-sidebar { width:100vw; }

  /* Modals */
  .order-modal  { border-radius:var(--r-lg); }
  .modal-body,.modal-header { padding:20px; }

  /* Toast */
  #toast-container { right:4%; bottom:80px; width:92%; }
  .toast { max-width:100%; }

  /* WA float */
  #wa-float { bottom:20px; left:20px; width:52px; height:52px; }
}

/* ── Mobile S (≤ 480px) ── */
@media (max-width:480px) {
  /* Navbar */
  .nav-logo       { font-size:1.2rem; }

  /* Hero */
  #hero { padding:80px 4% 56px; }
  .hero-cta       { flex-direction:column; gap:10px; }
  .btn-primary,
  .btn-ghost      { width:100%; justify-content:center; text-align:center; padding:13px 24px; }
  .hero-stats     { gap:12px; }
  .stat-div       { display:none; }
  .stat strong    { font-size:1.5rem; }
  .hero-chip      { font-size:.72rem; padding:6px 14px; }

  /* Products */
  .products-grid  { grid-template-columns:1fr; gap:16px; }
  .product-img-wrap { height:180px; }

  /* Cart */
  .cart-item      { gap:10px; padding:12px; }
  .cart-item-img  { width:48px; height:48px; }
  .btn-checkout   { padding:13px; font-size:.9rem; }

  /* Modal */
  .success-modal  { padding:32px 20px; }
  .success-title  { font-size:1.25rem; }
  .success-icon   { font-size:4rem; }

  /* WA float */
  #wa-float       { width:48px; height:48px; font-size:1.4rem; }
}

/* ─────────────────────────────────────────
   BUYER THEME SYSTEM
   4 themes × dark+light mode
───────────────────────────────────────── */

/* ── Forest Theme ── */
html[data-theme="forest"] {
  --c-am:   #22C55E; --c-al:  #86EFAC;
  --c-br:   #14532D; --c-bm:  #15803D; --c-bl: #16A34A;
  --c-bg:   #F0FDF4; --c-bg2: #DCFCE7; --c-card: #FFFFFF;
  --c-text: #052e16; --c-muted: #166534;
  --c-gr:   #22C55E;
  --g-hero:  linear-gradient(145deg,#052e16 0%,#14532d 40%,#166534 80%,#15803d 100%);
  --g-amber: linear-gradient(135deg,#22C55E,#86EFAC);
  --g-brown: linear-gradient(135deg,#14532D,#15803D);
  --g-green: linear-gradient(135deg,#22C55E,#86EFAC);
}

/* ── Ocean Theme ── */
html[data-theme="ocean"] {
  --c-am:   #3B82F6; --c-al:  #93C5FD;
  --c-br:   #1E3A5F; --c-bm:  #1D4ED8; --c-bl: #2563EB;
  --c-bg:   #EFF6FF; --c-bg2: #DBEAFE; --c-card: #FFFFFF;
  --c-text: #0c1445; --c-muted: #1E40AF;
  --c-gr:   #3B82F6;
  --g-hero:  linear-gradient(145deg,#0c1445 0%,#1e3a5f 40%,#1e40af 80%,#2563eb 100%);
  --g-amber: linear-gradient(135deg,#3B82F6,#93C5FD);
  --g-brown: linear-gradient(135deg,#1E3A5F,#1D4ED8);
  --g-green: linear-gradient(135deg,#3B82F6,#93C5FD);
}

/* ── Sakura Theme ── */
html[data-theme="sakura"] {
  --c-am:   #EC4899; --c-al:  #F9A8D4;
  --c-br:   #500724; --c-bm:  #9D174D; --c-bl: #BE185D;
  --c-bg:   #FDF2F8; --c-bg2: #FCE7F3; --c-card: #FFFFFF;
  --c-text: #2d0618; --c-muted: #831843;
  --c-gr:   #EC4899;
  --g-hero:  linear-gradient(145deg,#2d0618 0%,#500724 40%,#831843 80%,#9d174d 100%);
  --g-amber: linear-gradient(135deg,#EC4899,#F9A8D4);
  --g-brown: linear-gradient(135deg,#500724,#9D174D);
  --g-green: linear-gradient(135deg,#EC4899,#F9A8D4);
}

/* ── LIGHT MODE ── */
/* Hero light per theme */
html[data-theme="amber"][data-mode="light"] #hero {
  background: linear-gradient(145deg,#FFF8F0 0%,#FFF3E0 40%,#FFCC80 80%,#FFA726 100%);
}
html[data-theme="forest"][data-mode="light"] #hero {
  background: linear-gradient(145deg,#F0FDF4 0%,#DCFCE7 40%,#BBF7D0 80%,#4ADE80 100%);
}
html[data-theme="ocean"][data-mode="light"] #hero {
  background: linear-gradient(145deg,#EFF6FF 0%,#DBEAFE 40%,#BFDBFE 80%,#60A5FA 100%);
}
html[data-theme="sakura"][data-mode="light"] #hero {
  background: linear-gradient(145deg,#FDF2F8 0%,#FCE7F3 40%,#FBCFE8 80%,#F472B6 100%);
}

/* Hero text in light mode */
html[data-mode="light"] .hero-h1  { color: var(--c-br) !important; }
html[data-mode="light"] .hero-p   { color: rgba(0,0,0,.58); }
html[data-mode="light"] .nav-logo { color: var(--c-br) !important; }
html[data-mode="light"] .nav-links a { color: var(--c-muted) !important; }
html[data-mode="light"] .btn-ghost {
  background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.15); color: var(--c-br);
  backdrop-filter: none;
}
html[data-mode="light"] .btn-ghost:hover { background: rgba(0,0,0,.12); }
html[data-mode="light"] .hero-chip {
  background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.12); color: var(--c-br);
}
html[data-mode="light"] .stat strong    { color: var(--c-br); }
html[data-mode="light"] .stat span      { color: var(--c-muted); }
html[data-mode="light"] .stat-div       { background: rgba(0,0,0,.15); }
html[data-mode="light"] .scroll-chevron { border-color: rgba(0,0,0,.3); }
html[data-mode="light"] .hero-scroll-hint { color: rgba(0,0,0,.4); }
html[data-mode="light"] .hcard { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.1); }
html[data-mode="light"] .hcard-name { color: var(--c-br); }

/* About section light per theme */
html[data-theme="amber"][data-mode="light"] #about {
  background: linear-gradient(145deg,#FFF8F0 0%,#FFF3E0 55%,#FFCC80 100%);
}
html[data-theme="forest"][data-mode="light"] #about {
  background: linear-gradient(145deg,#F0FDF4 0%,#DCFCE7 55%,#BBF7D0 100%);
}
html[data-theme="ocean"][data-mode="light"] #about {
  background: linear-gradient(145deg,#EFF6FF 0%,#DBEAFE 55%,#BFDBFE 100%);
}
html[data-theme="sakura"][data-mode="light"] #about {
  background: linear-gradient(145deg,#FDF2F8 0%,#FCE7F3 55%,#FBCFE8 100%);
}

html[data-mode="light"] .about-card-main { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.08); }
html[data-mode="light"] .about-card-main blockquote { color: var(--c-br); }
html[data-mode="light"] .about-card-main p { color: rgba(0,0,0,.58); }
html[data-mode="light"] .about-emoji     { filter: none; }
html[data-mode="light"] .about-h2        { color: var(--c-br); }
html[data-mode="light"] .about-body      { color: rgba(0,0,0,.58); }
html[data-mode="light"] .about-text .sec-tag { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.12); }
html[data-mode="light"] .feat { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.08); }
html[data-mode="light"] .feat:hover { background: rgba(0,0,0,.09); }
html[data-mode="light"] .feat h4 { color: var(--c-br); }
html[data-mode="light"] .feat p  { color: rgba(0,0,0,.55); }

/* ── Dark mode: per-theme #about background ── */
html[data-theme="forest"] #about {
  background: linear-gradient(145deg,#052e16 0%,#14532d 40%,#166534 80%,#15803d 100%);
}
html[data-theme="ocean"] #about {
  background: linear-gradient(145deg,#0c1445 0%,#1e3a5f 40%,#1e40af 80%,#2563eb 100%);
}
html[data-theme="sakura"] #about {
  background: linear-gradient(145deg,#2d0618 0%,#500724 40%,#831843 80%,#9d174d 100%);
}

/* ── Dark mode: per-theme #about::before overlay ── */
html[data-theme="forest"] #about::before {
  background: radial-gradient(ellipse 60% 80% at 80% 50%,rgba(34,197,94,.06) 0%,transparent 60%);
}
html[data-theme="ocean"] #about::before {
  background: radial-gradient(ellipse 60% 80% at 80% 50%,rgba(59,130,246,.06) 0%,transparent 60%);
}
html[data-theme="sakura"] #about::before {
  background: radial-gradient(ellipse 60% 80% at 80% 50%,rgba(236,72,153,.06) 0%,transparent 60%);
}

/* ── Dark mode: per-theme footer background ── */
html[data-theme="forest"] footer {
  background: linear-gradient(145deg,#022c16,#052e16);
}
html[data-theme="ocean"] footer {
  background: linear-gradient(145deg,#08102e,#0c1445);
}
html[data-theme="sakura"] footer {
  background: linear-gradient(145deg,#150009,#2d0618);
}

/* ── Per-theme navbar scrolled ── */
html[data-theme="forest"] #navbar.scrolled {
  background: rgba(240,253,244,.95);
  box-shadow: 0 4px 32px rgba(20,83,45,.1);
}
html[data-theme="ocean"] #navbar.scrolled {
  background: rgba(239,246,255,.95);
  box-shadow: 0 4px 32px rgba(30,58,95,.1);
}
html[data-theme="sakura"] #navbar.scrolled {
  background: rgba(253,242,248,.95);
  box-shadow: 0 4px 32px rgba(80,7,36,.1);
}

/* ── Per-theme sec-tag ── */
html[data-theme="forest"] .sec-tag {
  background: linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.05));
  border-color: rgba(34,197,94,.28);
}
html[data-theme="ocean"] .sec-tag {
  background: linear-gradient(135deg,rgba(59,130,246,.15),rgba(59,130,246,.05));
  border-color: rgba(59,130,246,.28);
}
html[data-theme="sakura"] .sec-tag {
  background: linear-gradient(135deg,rgba(236,72,153,.15),rgba(236,72,153,.05));
  border-color: rgba(236,72,153,.28);
}

/* ── Per-theme about-text sec-tag ── */
html[data-theme="forest"]  .about-text .sec-tag { background:rgba(34,197,94,.1);  border-color:rgba(34,197,94,.3); }
html[data-theme="ocean"]   .about-text .sec-tag { background:rgba(59,130,246,.1); border-color:rgba(59,130,246,.3); }
html[data-theme="sakura"]  .about-text .sec-tag { background:rgba(236,72,153,.1); border-color:rgba(236,72,153,.3); }

/* ── Per-theme hero-chip ── */
html[data-theme="forest"] .hero-chip  { background:rgba(34,197,94,.14);  border-color:rgba(34,197,94,.28); }
html[data-theme="ocean"]  .hero-chip  { background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.28); }
html[data-theme="sakura"] .hero-chip  { background:rgba(236,72,153,.14); border-color:rgba(236,72,153,.28); }

/* ── Per-theme hero-mesh ── */
html[data-theme="forest"] .hero-mesh {
  background:
    radial-gradient(ellipse 70% 60% at 20% 50%,rgba(34,197,94,.07) 0%,transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 25%,rgba(22,163,74,.1) 0%,transparent 60%);
}
html[data-theme="ocean"] .hero-mesh {
  background:
    radial-gradient(ellipse 70% 60% at 20% 50%,rgba(59,130,246,.07) 0%,transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 25%,rgba(37,99,235,.1) 0%,transparent 60%);
}
html[data-theme="sakura"] .hero-mesh {
  background:
    radial-gradient(ellipse 70% 60% at 20% 50%,rgba(236,72,153,.07) 0%,transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 25%,rgba(157,23,77,.1) 0%,transparent 60%);
}

/* ── Per-theme hero blob colors ── */
html[data-theme="forest"] .blob-1 { background:#22C55E; }
html[data-theme="forest"] .blob-2 { background:#15803D; }
html[data-theme="forest"] .blob-3 { background:#86EFAC; }
html[data-theme="ocean"]  .blob-1 { background:#3B82F6; }
html[data-theme="ocean"]  .blob-2 { background:#1D4ED8; }
html[data-theme="ocean"]  .blob-3 { background:#93C5FD; }
html[data-theme="sakura"] .blob-1 { background:#EC4899; }
html[data-theme="sakura"] .blob-2 { background:#9D174D; }
html[data-theme="sakura"] .blob-3 { background:#F9A8D4; }

/* ── Per-theme product card hover border ── */
html[data-theme="forest"] .product-card:hover { border-color:rgba(34,197,94,.22); }
html[data-theme="ocean"]  .product-card:hover { border-color:rgba(59,130,246,.22); }
html[data-theme="sakura"] .product-card:hover { border-color:rgba(236,72,153,.22); }

/* ── Per-theme filter tab active shadow ── */
html[data-theme="forest"] .filter-tab.active { box-shadow:0 4px 16px rgba(34,197,94,.4); }
html[data-theme="ocean"]  .filter-tab.active { box-shadow:0 4px 16px rgba(59,130,246,.4); }
html[data-theme="sakura"] .filter-tab.active { box-shadow:0 4px 16px rgba(236,72,153,.4); }

/* ── Per-theme btn-primary shadow ── */
html[data-theme="forest"] .btn-primary { box-shadow:0 8px 28px rgba(34,197,94,.4); }
html[data-theme="ocean"]  .btn-primary { box-shadow:0 8px 28px rgba(59,130,246,.4); }
html[data-theme="sakura"] .btn-primary { box-shadow:0 8px 28px rgba(236,72,153,.4); }

/* ── Per-theme btn-cart shadow ── */
html[data-theme="forest"] .btn-cart { box-shadow:0 4px 20px rgba(34,197,94,.45); }
html[data-theme="ocean"]  .btn-cart { box-shadow:0 4px 20px rgba(59,130,246,.45); }
html[data-theme="sakura"] .btn-cart { box-shadow:0 4px 20px rgba(236,72,153,.45); }

/* ── Per-theme hcard ring ── */
html[data-theme="forest"] .hero-ring { border-color:rgba(34,197,94,.14); }
html[data-theme="ocean"]  .hero-ring { border-color:rgba(59,130,246,.14); }
html[data-theme="sakura"] .hero-ring { border-color:rgba(236,72,153,.14); }

/* ─────────────────────────────────────────
   LIGHT MODE: Footer & Navbar adapts
───────────────────────────────────────── */
html[data-mode="light"] footer                  { color:rgba(0,0,0,.65); }
html[data-mode="light"] .footer-brand p         { color:rgba(0,0,0,.58); }
html[data-mode="light"] .footer-col h4          { color:var(--c-br); }
html[data-mode="light"] .footer-col a           { color:rgba(0,0,0,.55); }
html[data-mode="light"] .footer-col a:hover     { color:var(--c-am); }
html[data-mode="light"] .footer-bottom          { border-top-color:rgba(0,0,0,.1); color:rgba(0,0,0,.45); }

html[data-theme="amber"][data-mode="light"] footer  { background:linear-gradient(145deg,#FFF3E0,#FFF8F0); }
html[data-theme="forest"][data-mode="light"] footer { background:linear-gradient(145deg,#DCFCE7,#F0FDF4); }
html[data-theme="ocean"][data-mode="light"] footer  { background:linear-gradient(145deg,#DBEAFE,#EFF6FF); }
html[data-theme="sakura"][data-mode="light"] footer { background:linear-gradient(145deg,#FCE7F3,#FDF2F8); }

/* Light mode navbar scrolled per-theme */
html[data-theme="amber"][data-mode="light"]  #navbar.scrolled { background:rgba(255,248,240,.97); }
html[data-theme="forest"][data-mode="light"] #navbar.scrolled { background:rgba(240,253,244,.97); }
html[data-theme="ocean"][data-mode="light"]  #navbar.scrolled { background:rgba(239,246,255,.97); }
html[data-theme="sakura"][data-mode="light"] #navbar.scrolled { background:rgba(253,242,248,.97); }

/* Light mode: collab section per theme */
html[data-theme="forest"][data-mode="light"] #collab { background:var(--c-bg2); }
html[data-theme="ocean"][data-mode="light"]  #collab { background:var(--c-bg2); }
html[data-theme="sakura"][data-mode="light"] #collab { background:var(--c-bg2); }