/* ═══════════════════════════════════════════════════════════
   CRAFT SPACE — Storefront theme
   Create. Play. Repeat.  ·  Bagian dari Adeka Creative
   Palette: Lilac · Sky · Mia Pink · Soft Mint · Peach
   Type: Fredoka One (display) + Nunito (body)
   NOTE: nama class & token lama dipertahankan supaya EJS &
   inline-style yang ada ikut berubah otomatis (token remap).
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Craft Space palette ── */
  --lilac:#B59CF6;      --lilac-dark:#6B3FA0;
  --sky:#7EC8FF;        --cyan-dark:#1A7AB0;
  --pink:#FF8BCB;       --mint:#7DE3C2;        --peach:#FFD7B3;
  --charcoal:#1F1F2E;   --warm-white:#FAFAFC;  --grey:#888888;
  --lilac-bg:#EDE5FF;   --cyan-bg:#DFF3FF;

  /* ── Legacy token remap (jangan dihapus — dipakai inline style) ── */
  --cream:#FAFAFC;      --maple:#6B3FA0;       --amber:#FF8BCB;
  --linen:#EDE5FF;      --walnut:#1F1F2E;      --walnut-mid:#8B7BA8;
  --off-white:#FAFAFC;  --white:#FFFFFF;

  /* ── Type ── */
  --font-serif:'Baloo 2',system-ui,cursive;   /* display (rounded) */
  --font-sans:'Poppins',system-ui,-apple-system,sans-serif;  /* body/ui */
  --font-script:'Baloo 2',cursive;            /* oversized deco */

  /* ── Shape ── */
  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:100px;
  --shadow:0 6px 22px rgba(107,63,160,0.12);
  --pop:0 4px 0 rgba(107,63,160,0.25);

  --nav-h:64px; --announce-h:40px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--warm-white);
  color:var(--charcoal);
  font-family:var(--font-sans);
  font-weight:500;
  line-height:1.6;
  overflow-x:hidden;
}
img{display:block;width:100%;object-fit:cover;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}

/* ── Decorative helpers (bintang, dots) ── */
.cs-dotbg{
  background-image:radial-gradient(rgba(181,156,246,0.28) 1.6px,transparent 1.6px);
  background-size:26px 26px;
}
.cs-star{position:absolute;pointer-events:none;line-height:1;
  filter:drop-shadow(0 2px 2px rgba(107,63,160,0.12));}

/* ── Announce bar ── */
.announce-bar{
  background:linear-gradient(90deg,var(--lilac) 0%,var(--sky) 100%);
  height:var(--announce-h);display:flex;align-items:center;justify-content:center;gap:1.5rem;
}
.announce-bar p{font-size:0.72rem;font-weight:800;letter-spacing:0.04em;color:#fff;}
.announce-bar .dot{color:var(--peach);font-size:1rem;}

/* ── Nav ── */
.site-nav{position:sticky;top:0;z-index:100;height:var(--nav-h);
  background:rgba(253,248,243,0.92);backdrop-filter:blur(10px);
  border-bottom:2px solid var(--lilac-bg);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 2.5rem;}
.nav-logo{font-family:var(--font-serif);font-size:1.5rem;font-weight:400;letter-spacing:0.01em;color:var(--lilac-dark);}
.nav-logo span{color:var(--sky);}
.nav-links{display:flex;gap:1.75rem;align-items:center;}
.nav-links a{font-size:0.92rem;font-weight:700;color:var(--charcoal);opacity:0.62;transition:opacity .2s,color .2s;}
.nav-links a:hover,.nav-links a.active{opacity:1;color:var(--lilac-dark);}
.nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:1.1rem;}
.nav-actions a,.nav-actions span{font-size:0.9rem;font-weight:700;color:var(--charcoal);opacity:0.6;transition:opacity .2s;}
.nav-actions a:hover{opacity:1;color:var(--lilac-dark);}
.nav-batch-pill{background:var(--lilac-dark)!important;color:#fff!important;opacity:1!important;
  padding:0.4rem 0.95rem;font-size:0.72rem!important;font-weight:800;border-radius:var(--r-pill);}

/* ── Hero ── */
.hero{position:relative;height:calc(100vh - var(--announce-h) - var(--nav-h));min-height:560px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;}
.hero-bg{position:absolute;inset:0;
  background:
    radial-gradient(rgba(255,255,255,0.55) 1.8px,transparent 1.8px),
    linear-gradient(155deg,var(--lilac-bg) 0%,var(--cyan-bg) 55%,#FFE9F2 100%);
  background-size:28px 28px,100% 100%;will-change:transform;}
.hero-overlay{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0%,transparent 60%,rgba(181,156,246,0.18) 100%);}
.hero-content{position:relative;z-index:2;width:100%;max-width:1200px;padding:0 2.5rem;
  display:grid;grid-template-columns:1.2fr 0.8fr;align-items:center;height:100%;}
.hero-eyebrow{display:inline-block;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;
  font-weight:800;color:var(--lilac-dark);background:#fff;padding:0.4rem 0.9rem;border-radius:var(--r-pill);
  box-shadow:var(--shadow);margin-bottom:1.25rem;opacity:0;animation:fadeUp .8s .15s ease forwards;}
.hero-title{font-family:var(--font-serif);font-weight:400;font-size:clamp(2.8rem,5.5vw,4.6rem);
  line-height:1.04;color:var(--charcoal);margin-bottom:1.25rem;
  text-shadow:0 3px 0 #fff;opacity:0;animation:fadeUp .9s .3s ease forwards;}
.hero-title em{font-style:normal;color:var(--lilac-dark);}
.hero-desc{font-size:1rem;font-weight:600;line-height:1.7;color:var(--charcoal);opacity:0;
  max-width:420px;margin-bottom:2rem;animation:fadeUp .9s .45s ease forwards;}
.hero-cta,.manifesto-cta.btn,.cta-pill{display:inline-flex;align-items:center;gap:0.6rem;
  background:var(--lilac-dark);color:#fff;font-size:0.95rem;font-weight:800;letter-spacing:0.01em;
  padding:0.9rem 1.9rem;border-radius:var(--r-pill);box-shadow:var(--pop);
  transition:transform .2s,box-shadow .2s;opacity:0;animation:fadeUp .9s .6s ease forwards;}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(107,63,160,0.25);gap:0.9rem;}
.hero-meta{position:relative;display:flex;align-items:center;justify-content:center;height:100%;
  opacity:0;animation:fadeIn 1s .8s ease forwards;}
.batch-tag{text-align:center;}
.batch-tag .label{display:block;font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;
  font-weight:800;color:var(--lilac-dark);opacity:0.7;margin-bottom:0.35rem;}
.batch-tag .number{font-family:var(--font-serif);font-size:5rem;line-height:1;color:var(--lilac);opacity:0.5;}

/* ── Marquee ── */
.marquee{background:var(--lilac);overflow:hidden;padding:0.8rem 0;}
.marquee-track{display:flex;width:max-content;animation:marquee 35s linear infinite;}
.marquee-item{font-size:0.85rem;font-weight:800;letter-spacing:0.06em;color:#fff;white-space:nowrap;padding:0 1.75rem;}
.marquee-item.sep{color:var(--peach);padding:0 0.25rem;font-size:0.9rem;}

/* ── Section header ── */
.section-eyebrow{display:inline-block;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  font-weight:800;color:var(--lilac-dark);margin-bottom:0.6rem;}
.section-title{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.9rem,3vw,2.9rem);
  color:var(--charcoal);line-height:1.15;}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:2.5rem;}
.view-all{font-size:0.85rem;font-weight:800;color:var(--lilac-dark);opacity:0.8;transition:opacity .2s;}
.view-all:hover{opacity:1;}

/* ── Collections ── */
.collections{padding:5rem 2.5rem;max-width:1200px;margin:0 auto;}
.coll-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;}
.coll-card{position:relative;overflow:hidden;cursor:pointer;display:block;
  border-radius:var(--r-lg);border:3px solid #fff;box-shadow:var(--shadow);transition:transform .25s;}
.coll-card:hover{transform:translateY(-4px) rotate(-0.6deg);}
.coll-card-img{aspect-ratio:3/2;overflow:hidden;position:relative;}
.coll-card-img-inner{width:100%;height:100%;transition:transform .7s cubic-bezier(.25,.46,.45,.94);}
.coll-card:hover .coll-card-img-inner{transform:scale(1.06);}
.g-1{background:linear-gradient(155deg,#CDB6FF 0%,#7EC8FF 100%);}
.g-2{background:linear-gradient(155deg,#7DE3C2 0%,#7EC8FF 100%);}
.g-3{background:linear-gradient(155deg,#FFD7B3 0%,#FF8BCB 100%);}
.g-4{background:linear-gradient(155deg,#7EC8FF 0%,#B59CF6 100%);}
.g-5{background:linear-gradient(155deg,#FF8BCB 0%,#CDB6FF 100%);}
.g-6{background:linear-gradient(155deg,#7DE3C2 0%,#FFD7B3 100%);}
.coll-label{position:absolute;inset:0;display:flex;align-items:flex-end;padding:1.5rem;
  background:linear-gradient(to top,rgba(44,44,44,0.5) 0%,transparent 55%);}
.coll-label h3{font-family:var(--font-serif);font-size:1.5rem;font-weight:400;color:#fff;
  text-shadow:0 2px 6px rgba(44,44,44,0.4);}

/* ── Products ── */
.products-section{background:var(--lilac-bg);padding:5rem 2.5rem;position:relative;}
.products-inner{max-width:1200px;margin:0 auto;}
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}
.product-card{cursor:pointer;display:block;}
.product-card-img{aspect-ratio:3/4;overflow:hidden;margin-bottom:0.9rem;background:#fff;
  position:relative;border-radius:var(--r-lg);border:3px solid #fff;box-shadow:var(--shadow);transition:transform .25s;}
.product-card:hover .product-card-img{transform:translateY(-4px) rotate(-0.8deg);}
.product-card-img img,.product-card-img-inner{width:100%;height:100%;transition:transform .6s ease;}
.product-card-img img{object-fit:cover;}
.product-card:hover .product-card-img img,.product-card:hover .product-card-img-inner{transform:scale(1.05);}
.product-badge{position:absolute;top:0.8rem;left:0.8rem;font-size:0.62rem;font-weight:800;
  letter-spacing:0.04em;background:var(--lilac-dark);color:#fff;padding:0.32rem 0.7rem;border-radius:var(--r-pill);}
.product-badge.sold{background:var(--grey);}
.product-badge.promo-badge{background:var(--pink);color:var(--charcoal);}
.product-name{font-family:var(--font-serif);font-size:1.1rem;font-weight:400;color:var(--charcoal);
  margin-bottom:0.1rem;line-height:1.25;}
.product-maker{font-size:0.76rem;font-weight:700;color:var(--lilac-dark);opacity:0.75;margin-bottom:0.3rem;}
.product-price{font-size:0.92rem;font-weight:800;color:var(--charcoal);}
.product-price.sold-out{opacity:0.5;text-decoration:line-through;}
.price-row{display:flex;gap:0.5rem;align-items:center;}
.price-orig{font-size:0.78rem;text-decoration:line-through;opacity:0.5;}
.price-disc{color:var(--lilac-dark);font-weight:800;}

/* ── Promo banner ── */
.promo-banner{background:linear-gradient(135deg,var(--sky) 0%,var(--lilac) 100%);
  padding:4.5rem 2.5rem;text-align:center;position:relative;overflow:hidden;}
.promo-banner::before{content:'★';position:absolute;font-size:14rem;color:rgba(255,255,255,0.18);
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;}
.promo-banner h1{font-family:var(--font-serif);font-size:clamp(2.4rem,5vw,3.8rem);font-weight:400;
  color:#fff;margin-bottom:0.6rem;text-shadow:0 3px 0 rgba(107,63,160,0.25);position:relative;}
.promo-banner p{font-size:0.95rem;font-weight:600;color:#fff;max-width:520px;margin:0 auto;position:relative;}

/* ── Manifesto / About ── */
.manifesto-inner{max-width:1200px;margin:0 auto;padding:0 2.5rem;
  display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
.manifesto-box{aspect-ratio:4/5;border-radius:var(--r-lg);
  background:linear-gradient(155deg,var(--pink) 0%,var(--lilac) 55%,var(--sky) 100%);
  position:relative;overflow:hidden;box-shadow:var(--shadow);}
.manifesto-box-text{position:absolute;bottom:2rem;left:2rem;right:2rem;}
.manifesto-script{font-family:var(--font-script);font-size:4.5rem;color:#fff;opacity:0.85;line-height:1;display:block;
  text-shadow:0 3px 0 rgba(107,63,160,0.2);}
.manifesto-eyebrow{display:inline-block;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  font-weight:800;color:var(--lilac-dark);margin-bottom:1.25rem;}
.manifesto-title{font-family:var(--font-serif);font-size:clamp(1.9rem,3vw,2.8rem);font-weight:400;
  color:var(--charcoal);line-height:1.2;margin-bottom:1.5rem;}
.manifesto-body{font-size:0.98rem;font-weight:600;line-height:1.8;color:var(--charcoal);opacity:0.78;margin-bottom:2rem;}
.manifesto-cta{display:inline-flex;align-items:center;gap:0.6rem;font-size:0.92rem;font-weight:800;
  color:var(--lilac-dark);padding-bottom:0.3rem;border-bottom:2px solid var(--lilac);transition:gap .2s;}
.manifesto-cta:hover{gap:1rem;}

/* ── Process ── */
.process{padding:5.5rem 2.5rem;max-width:1200px;margin:0 auto;}
.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem 3rem;margin-top:3rem;}
.step{background:#fff;border:2px solid var(--lilac-bg);border-radius:var(--r-lg);
  padding:1.5rem 1.5rem 1.6rem;box-shadow:var(--shadow);transition:transform .2s;}
.step:hover{transform:translateY(-3px);}
.step-num{display:inline-block;font-size:0.78rem;font-weight:800;color:#fff;background:var(--lilac);
  width:2rem;height:2rem;line-height:2rem;text-align:center;border-radius:50%;margin-bottom:0.85rem;}
.step-name{display:block;font-family:var(--font-serif);font-size:1.25rem;font-weight:400;color:var(--charcoal);margin-bottom:0.5rem;}
.step-desc{font-size:0.88rem;font-weight:500;line-height:1.65;color:var(--charcoal);opacity:0.72;}

/* ── Footer ── */
.site-footer{background:var(--lilac-dark);padding:5rem 2.5rem 2.5rem;}
.footer-inner{max-width:1200px;margin:0 auto;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;
  padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,0.14);margin-bottom:2rem;}
.footer-brand{font-family:var(--font-serif);font-size:1.9rem;font-weight:400;color:#fff;margin-bottom:0.4rem;}
.footer-tagline{font-family:var(--font-script);font-size:1.4rem;color:var(--peach);opacity:0.9;margin-bottom:1.1rem;display:block;}
.footer-desc{font-size:0.85rem;font-weight:500;line-height:1.7;color:#fff;opacity:0.7;max-width:300px;}
.footer-col-title{display:block;font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;
  font-weight:800;color:var(--peach);margin-bottom:1.1rem;}
.footer-links{display:flex;flex-direction:column;gap:0.6rem;}
.footer-links a{font-size:0.88rem;font-weight:600;color:#fff;opacity:0.72;transition:opacity .2s;}
.footer-links a:hover{opacity:1;}
.footer-bottom{display:flex;justify-content:space-between;}
.footer-copy,.footer-studio{font-size:0.72rem;font-weight:600;color:#fff;opacity:0.45;}

/* ── Status badges (state colors dipertahankan) ── */
.st-badge{display:inline-flex;align-items:center;padding:0.22rem 0.7rem;border-radius:var(--r-pill);
  font-size:0.68rem;font-weight:800;white-space:nowrap;}
.st-pending{background:#fef3e2;color:#b45309;}.st-uploaded{background:#e0f2fe;color:#0369a1;}
.st-verified{background:#dcfce7;color:#166534;}.st-rejected{background:#fee2e2;color:#991b1b;}
.st-processing{background:#f3e8ff;color:#7c3aed;}.st-shipped{background:#e0e7ff;color:#3730a3;}
.st-completed{background:#dcfce7;color:#166534;}.st-cancelled{background:#f1f5f9;color:#64748b;}

/* ── Toast ── */
.toast-wrap{position:fixed;bottom:2rem;right:2rem;z-index:999;display:flex;flex-direction:column;gap:0.5rem;}
.toast{padding:0.8rem 1.3rem;border-radius:var(--r);font-size:0.85rem;font-weight:700;max-width:320px;
  background:var(--lilac-dark);color:#fff;opacity:0;transform:translateX(20px);transition:all .3s;
  box-shadow:0 6px 22px rgba(107,63,160,0.3);}
.toast.show{opacity:1;transform:translateX(0);}
.toast-success{background:#2d6a4f;}.toast-error{background:#c1121f;}.toast-warning{background:#e76f51;}

/* ── Auth ── */
.auth-wrap{display:flex;min-height:100vh;}
.auth-left{flex:1;background:linear-gradient(155deg,var(--lilac) 0%,var(--sky) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:4rem;position:relative;overflow:hidden;}
.auth-left::after{content:'★ ✦ ★';position:absolute;top:2.5rem;right:3rem;font-size:1.5rem;color:#fff;opacity:0.5;letter-spacing:0.5rem;}
.auth-left-script{font-family:var(--font-script);font-size:6rem;color:#fff;opacity:0.85;position:absolute;top:2rem;left:2.5rem;line-height:1;text-shadow:0 3px 0 rgba(107,63,160,0.2);}
.auth-left h2{font-family:var(--font-serif);font-size:2.4rem;font-weight:400;color:#fff;line-height:1.2;position:relative;text-shadow:0 2px 0 rgba(107,63,160,0.18);}
.auth-left p{font-size:0.9rem;font-weight:600;color:#fff;opacity:0.85;margin-top:0.75rem;position:relative;}
.auth-right{width:460px;display:flex;align-items:center;justify-content:center;padding:3rem;background:var(--warm-white);}
.auth-box{width:100%;}
.auth-logo{font-family:var(--font-serif);font-size:1.6rem;font-weight:400;color:var(--lilac-dark);margin-bottom:2.5rem;display:block;}
.auth-logo span{color:var(--sky);}
.auth-title{font-family:var(--font-serif);font-size:2.1rem;font-weight:400;color:var(--charcoal);margin-bottom:0.5rem;}
.auth-sub{font-size:0.88rem;font-weight:600;color:var(--charcoal);opacity:0.65;margin-bottom:2rem;}

/* ── Forms ── */
.form-group{margin-bottom:1rem;}
.form-group label{display:block;font-size:0.8rem;font-weight:800;color:var(--charcoal);margin-bottom:0.4rem;}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:0.8rem 1rem;
  border:2px solid var(--lilac-bg);border-radius:var(--r-sm);font-family:var(--font-sans);font-size:0.9rem;font-weight:600;
  color:var(--charcoal);background:#fff;transition:border-color .2s;}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--lilac);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;}
.auth-btn{width:100%;padding:0.95rem;background:var(--lilac-dark);color:#fff;border:none;border-radius:var(--r-pill);
  font-family:var(--font-sans);font-size:0.92rem;font-weight:800;cursor:pointer;transition:transform .2s,box-shadow .2s;
  margin-top:0.6rem;box-shadow:var(--pop);}
.auth-btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(107,63,160,0.25);}
.auth-links{display:flex;justify-content:space-between;margin-top:1.25rem;font-size:0.82rem;font-weight:700;}
.auth-links a{color:var(--lilac-dark);}
.msg-box{padding:0.65rem 0.95rem;border-radius:var(--r-sm);font-size:0.82rem;font-weight:700;margin-bottom:1rem;display:none;}
.msg-error{background:#fee2e2;color:#991b1b;}.msg-success{background:#dcfce7;color:#166534;}

/* ── Generic page ── */
.page-wrap{max-width:900px;margin:0 auto;padding:5.5rem 2rem 4rem;}
.page-title{font-family:var(--font-serif);font-size:2.3rem;font-weight:400;margin-bottom:2rem;color:var(--charcoal);}
.section-card{background:#fff;border:2px solid var(--lilac-bg);border-radius:var(--r-lg);padding:1.6rem;margin-bottom:1.5rem;box-shadow:var(--shadow);}
.section-card h3{font-family:var(--font-serif);font-size:1.2rem;font-weight:400;color:var(--charcoal);margin-bottom:1.25rem;}
.primary-btn{width:100%;padding:1rem;background:var(--lilac-dark);color:#fff;border:none;border-radius:var(--r-pill);
  font-family:var(--font-sans);font-size:0.92rem;font-weight:800;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:var(--pop);}
.primary-btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(107,63,160,0.25);}
.primary-btn:disabled{opacity:0.5;cursor:not-allowed;box-shadow:none;transform:none;}
.secondary-btn{padding:0.9rem 1.5rem;background:#fff;color:var(--lilac-dark);border:2px solid var(--lilac);border-radius:var(--r-pill);
  font-family:var(--font-sans);font-size:0.85rem;font-weight:800;cursor:pointer;transition:background .2s;}
.secondary-btn:hover{background:var(--lilac-bg);}
.danger-btn{background:#fff;color:#c1121f;border:2px solid #c1121f;border-radius:var(--r-pill);
  padding:0.75rem 1.3rem;font-family:var(--font-sans);font-size:0.82rem;font-weight:800;cursor:pointer;transition:all .2s;}
.danger-btn:hover{background:#c1121f;color:#fff;}

/* ── Cart ── */
.cart-item{display:flex;align-items:flex-start;gap:1.25rem;padding:1.25rem 0;border-bottom:2px solid var(--lilac-bg);}
.cart-thumb{width:90px;height:90px;object-fit:cover;border-radius:var(--r);background:var(--lilac-bg);flex-shrink:0;}
.cart-name{font-family:var(--font-serif);font-size:1.15rem;font-weight:400;margin-bottom:0.2rem;color:var(--charcoal);}
.qty-row{display:flex;align-items:center;gap:0.65rem;margin-top:0.75rem;}
.qty-btn{width:30px;height:30px;border:2px solid var(--lilac);background:#fff;border-radius:50%;cursor:pointer;
  font-size:1.05rem;font-weight:800;color:var(--lilac-dark);display:flex;align-items:center;justify-content:center;transition:all .2s;}
.qty-btn:hover{background:var(--lilac);color:#fff;}
.summary-row{display:flex;justify-content:space-between;font-size:0.88rem;font-weight:600;padding:0.35rem 0;}
.summary-row.total{border-top:2px solid var(--lilac-bg);margin-top:0.75rem;padding-top:1rem;
  font-family:var(--font-serif);font-size:1.3rem;font-weight:400;}
.bank-box{background:linear-gradient(135deg,var(--lilac-bg),var(--cyan-bg));border:2px solid var(--lilac);
  border-radius:var(--r);padding:1.3rem;margin:1rem 0;}
.bank-box .b-name{font-size:0.82rem;font-weight:700;opacity:0.7;}
.bank-box .b-acc{font-size:1.7rem;font-weight:800;letter-spacing:0.08em;color:var(--lilac-dark);}
.bank-box .b-holder{font-size:0.82rem;font-weight:600;opacity:0.7;}

/* ── Timeline ── */
.timeline{position:relative;padding-left:1.5rem;}
.timeline::before{content:'';position:absolute;left:5px;top:0;bottom:0;width:2px;background:var(--lilac-bg);}
.timeline-item{position:relative;margin-bottom:1rem;}
.timeline-item::before{content:'';position:absolute;left:-1.25rem;top:4px;width:11px;height:11px;border-radius:50%;
  background:var(--lilac);border:2px solid #fff;}
.timeline-time{font-size:0.7rem;font-weight:600;opacity:0.55;margin-bottom:0.15rem;}
.timeline-text{font-size:0.86rem;font-weight:600;}

/* ── Upload ── */
.upload-area{border:2px dashed var(--lilac);border-radius:var(--r);padding:2rem;text-align:center;cursor:pointer;
  transition:border-color .2s,background .2s;background:var(--warm-white);}
.upload-area:hover{border-color:var(--lilac-dark);background:var(--lilac-bg);}
.upload-area input[type="file"]{display:none;}

/* ── Points ── */
.points-card{background:linear-gradient(135deg,var(--lilac) 0%,var(--sky) 100%);border-radius:var(--r-lg);
  padding:1.6rem;color:#fff;margin-bottom:1.5rem;box-shadow:var(--shadow);}
.points-value{font-family:var(--font-serif);font-size:3rem;font-weight:400;line-height:1;text-shadow:0 3px 0 rgba(107,63,160,0.25);}
.points-label{font-size:0.74rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:800;opacity:0.9;}

/* ── Koleksi filter ── */
.filter-btn{font-size:0.82rem;font-weight:800;padding:0.45rem 1rem;border-radius:var(--r-pill);
  border:2px solid var(--lilac-bg);background:#fff;color:var(--charcoal);cursor:pointer;transition:all .2s;}
.filter-btn:hover{border-color:var(--lilac);}
.filter-btn.active{background:var(--lilac-dark);color:#fff;border-color:var(--lilac-dark);}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes csfloat{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-10px) rotate(8deg);}}
.cs-star{animation:csfloat 4s ease-in-out infinite;}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .85s ease,transform .85s ease;}
.reveal.in-view{opacity:1;transform:none;}
.reveal-d1{transition-delay:.1s;}.reveal-d2{transition-delay:.2s;}.reveal-d3{transition-delay:.3s;}
.spinner{width:30px;height:30px;border:3px solid var(--lilac-bg);border-top-color:var(--lilac);
  border-radius:50%;animation:spin .8s linear infinite;margin:0 auto;}
.loading-state{text-align:center;padding:3rem;opacity:0.5;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}
/* ── Tablet (≤900px) ── */
@media (max-width: 900px) {
  /* Nav */
  .site-nav { padding: 0 1.25rem; grid-template-columns: auto 1fr auto; }
  .nav-links { display: none; }
  .nav-actions { gap: 0.75rem; }
  .nav-actions a, .nav-actions span { font-size: 0.65rem; }

  /* Hero */
  .hero { min-height: 520px; height: 85vw; max-height: 640px; }
  .hero-content { grid-template-columns: 1fr; padding: 0 1.5rem 3rem; }
  .hero-meta { display: none; }
  .hero-title { font-size: clamp(2.2rem, 8vw, 3.5rem); }
  .hero-desc { font-size: 0.82rem; max-width: 100%; }

  /* Collections */
  .collections { padding: 3.5rem 1.5rem; }
  .coll-grid { grid-template-columns: 1fr 1fr; gap: 2px; }

  /* Products */
  .products-section { padding: 3.5rem 1.5rem; }
  .products-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* Manifesto */
  .manifesto-inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 0 1.5rem; }
  .manifesto-visual { display: none; }

  /* Process */
  .process { padding: 4rem 1.5rem; }
  .process-steps { grid-template-columns: 1fr 1fr; gap: 2rem; }

  /* Footer */
  .site-footer { padding: 3.5rem 1.5rem 2rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }

  /* Auth */
  .auth-left { display: none; }
  .auth-right { width: 100%; min-height: 100vh; padding: 2rem 1.5rem; }

  /* Page wrap */
  .page-wrap { padding: 5rem 1.25rem 3rem; }

  /* Form row */
  .form-row { grid-template-columns: 1fr; }
}

/* ── Mobile (≤600px) ── */
@media (max-width: 600px) {
  :root { --nav-h: 56px; --announce-h: 36px; }

  /* ── Announce bar ── */
  .announce-bar { gap: 0.75rem; padding: 0 1rem; }
  .announce-bar p { font-size: 0.58rem; letter-spacing: 0.12em; }
  .announce-bar p:last-of-type { display: none; } /* hide second text */

  /* ── Nav ── */
  .site-nav {
    padding: 0 1rem;
    grid-template-columns: 1fr auto;
    position: sticky; top: 0; z-index: 100;
  }
  .nav-links { display: none !important; }
  .nav-actions { gap: 0.6rem; }
  .nav-actions a, .nav-actions span { font-size: 0.6rem; letter-spacing: 0.06em; }
  .nav-logo { font-size: 1.05rem; }

  /* ── Hamburger menu ── */  /* ── Hero ── */
  .hero { height: 100vw; min-height: 380px; max-height: 520px; }
  .hero-content { padding: 0 1.25rem 2.5rem; align-items: flex-end; }
  .hero-title { font-size: clamp(1.9rem, 9vw, 2.8rem); margin-bottom: 0.75rem; }
  .hero-eyebrow { margin-bottom: 0.65rem; }
  .hero-desc { display: none; }
  .hero-cta { font-size: 0.62rem; padding: 0.75rem 1.5rem; }

  /* ── Marquee ── */
  .marquee { padding: 0.65rem 0; }
  .marquee-item { font-size: 0.6rem; padding: 0 1.25rem; }

  /* ── Sections ── */
  .collections { padding: 2.5rem 1rem; }
  .coll-grid { grid-template-columns: 1fr; gap: 2px; }
  .coll-label h3 { font-size: 1.15rem; }
  .section-header { flex-direction: column; gap: 0.5rem; margin-bottom: 1.75rem; }
  .section-title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .view-all { font-size: 0.62rem; }

  /* ── Products grid ── */
  .products-section { padding: 2.5rem 1rem; }
  .products-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .product-name { font-size: 0.88rem; }
  .product-maker { font-size: 0.65rem; }
  .product-price { font-size: 0.75rem; }

  /* ── Process ── */
  .process { padding: 2.5rem 1rem; }
  .process-steps { grid-template-columns: 1fr; gap: 1.5rem; }

  /* ── Footer ── */
  .site-footer { padding: 2.5rem 1rem 1.5rem; }
  .footer-top { grid-template-columns: 1fr; gap: 1.75rem; padding-bottom: 2rem; }
  .footer-brand { font-size: 1.3rem; }
  .footer-bottom { flex-direction: column; gap: 0.25rem; align-items: center; }

  /* ── Auth ── */
  .auth-right { padding: 1.5rem 1.25rem; align-items: flex-start; padding-top: 3rem; }
  .auth-title { font-size: 1.6rem; }

  /* ── Page wrap ── */
  .page-wrap { padding: 4rem 1rem 3rem; }
  .page-title { font-size: 1.75rem; }

  /* ── Section cards (cart, checkout, orders, profile) ── */
  .section-card { padding: 1.1rem; }
  .section-card h3 { font-size: 1rem; }

  /* ── Cart ── */
  .cart-item { gap: 0.85rem; }
  .cart-thumb { width: 72px; height: 72px; }
  .cart-name { font-size: 0.92rem; }

  /* ── Checkout grid ── */
  #checkoutGrid, .checkout-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Bank box ── */
  .bank-box .b-acc { font-size: 1.25rem; }

  /* ── Points card ── */
  .points-card { padding: 1.1rem; }
  .points-value { font-size: 2.5rem; }

  /* ── Product modal ── */
  #pdm-content { grid-template-columns: 1fr !important; }
  #pdm-content > div:first-child { max-height: 56vw; }
  #pdm-content > div:last-child { padding: 1.25rem; max-height: none; }
  #pdm-name { font-size: 1.4rem; }
  #pdm-thumbs { padding: 0.5rem 1rem; }
  #pdm-thumbs > div { width: 48px !important; height: 48px !important; }

  /* ── Product detail page ── */
  #productWrap > div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  #productWrap [style*="position:sticky"] { position: relative !important; top: auto !important; }

  /* ── Promo banner ── */
  .promo-banner { padding: 3rem 1.25rem; }
  .promo-banner h1 { font-size: 2rem; }

  /* ── Orders list ── */
  #ordersWrap .section-card { padding: 1rem; }

  /* ── Form group ── */
  .form-row { grid-template-columns: 1fr; }
  .form-group input, .form-group textarea, .form-group select { font-size: 16px; } /* prevent iOS zoom */

  /* ── Koleksi filter ── */
  #filterBar { padding: 1rem 1rem 0.5rem; gap: 0.5rem; }
  .filter-btn { font-size: 0.65rem; padding: 0.35rem 0.75rem; }
  #koleksiGrid { padding: 0.75rem 1rem 4rem !important; grid-template-columns: 1fr 1fr !important; gap: 0.75rem 0.5rem !important; }

  /* ── 404 ── */
  div[style*="min-height:70vh"] { padding: 2rem 1.25rem; }

  /* ── Toast ── */
  .toast-wrap { right: 0.75rem; left: 0.75rem; }
  .toast { max-width: 100%; }
}

/* ── Extra small (≤380px, iPhone SE dll) ── */
@media (max-width: 380px) {
  .products-grid { grid-template-columns: 1fr; }
  #koleksiGrid { grid-template-columns: 1fr !important; }
  .hero-title { font-size: 1.7rem; }
}

/* Checkout specific */
@media (max-width: 600px) {
  .checkout-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .checkout-grid > h1 { grid-column: 1; }
}