/*
Theme Name: Toko WA
Theme URI: https://example.com
Author: Cahaya Asa
Author URI: https://example.com
Description: Theme toko online sederhana — katalog produk dengan order langsung via WhatsApp, tanpa plugin tambahan. Cocok untuk UMKM yang ingin pembeli order lewat chat, bukan checkout online.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: toko-wa
License: GNU General Public License v2 or later
License URI: LICENSE
*/

:root{
  --indigo:#16233F;
  --indigo-deep:#0B1424;
  --gold:#B8924E;
  --gold-light:#E3CFA0;
  --ivory:#FAF7F0;
  --ivory-dim:#F1EADA;
  --ink:#241F1A;
  --wa:#25D366;
  --wa-dark:#1DA851;
  --radius:20px;
  --ease:cubic-bezier(.22,.85,.32,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Plus Jakarta Sans', -apple-system, sans-serif;
  background:var(--ivory);
  color:var(--ink);
  line-height:1.55;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Fraunces', Georgia, serif; letter-spacing:-.01em; margin:0;}
p{margin:0;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}

.wrap{max-width:1200px; margin:0 auto; padding:0 28px;}
.eyebrow{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); font-weight:700;
}
.screen-reader-text{position:absolute; left:-9999px;}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* illustrated product visual — shown when a product has no featured photo yet */
.photo-real{
  position:relative; width:100%; height:100%; overflow:hidden;
  background:linear-gradient(155deg, var(--ivory-dim), #e4d8bd);
  display:flex; align-items:center; justify-content:center;
}
.photo-real img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.photo-real svg{width:64%; height:64%; transition:transform .6s var(--ease);}
.card:hover .photo-real svg, .card:hover .photo-real img{transform:scale(1.08) translateY(-2px);}
.hero .photo-real{background:linear-gradient(155deg, #efe6cf, #d9c99a);}
.hero .photo-real svg{width:56%; height:56%;}

/* ---------- NAV ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,240,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(22,35,63,.08);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; gap:20px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-weight:700; font-size:21px; color:var(--indigo);}
.brand img{max-height:40px; width:auto;}
.brand .dot{width:10px; height:10px; border-radius:50%; background:var(--gold); flex:0 0 auto;}
.nav-links{display:flex; gap:28px; font-size:14.5px; font-weight:600; color:var(--indigo);}
.nav-links a{opacity:.75; transition:opacity .2s;}
.nav-links a:hover, .nav-links .current-menu-item a{opacity:1;}
.nav-cta{
  display:flex; align-items:center; gap:8px; background:var(--wa); color:#fff; font-weight:700;
  font-size:14px; padding:10px 18px; border-radius:999px; box-shadow:0 6px 16px rgba(37,211,102,.35);
  white-space:nowrap;
}
.menu-toggle{display:none; background:none; border:none; font-size:22px; color:var(--indigo);}
@media(max-width:820px){
  .nav-links{display:none;}
  .nav-links.show{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:var(--ivory); padding:16px 28px; gap:16px; border-bottom:1px solid rgba(22,35,63,.08);
  }
  .menu-toggle{display:block;}
}

/* ---------- HERO ---------- */
.hero{position:relative; overflow:hidden; background:var(--indigo); padding:88px 0 64px;}
.hero .batik{position:absolute; inset:0; opacity:.06; pointer-events:none;}
.hero-grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.hero-eyebrow{color:var(--gold-light);}
.hero h1{color:var(--ivory); font-size:clamp(32px,5vw,54px); font-weight:600; line-height:1.1; margin:16px 0 20px;}
.hero h1 em{font-style:italic; color:var(--gold-light);}
.hero p.lede{color:rgba(250,247,240,.78); font-size:17px; max-width:460px; margin-bottom:32px;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:999px; font-weight:700; font-size:15px; transition:transform .15s ease; border:none;}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold); color:var(--indigo-deep);}
.btn-outline{border:1.5px solid rgba(250,247,240,.4); color:var(--ivory); background:transparent;}
.hero-card{position:relative; background:var(--ivory); border-radius:24px; padding:22px; box-shadow:0 40px 80px rgba(0,0,0,.4); transform:rotate(1.5deg); transition:transform .4s var(--ease);}
.hero-card:hover{transform:rotate(0) translateY(-4px);}
.hero-card .photo{height:230px; border-radius:16px; margin-bottom:16px; position:relative; overflow:hidden;}
.hero-card .name{font-weight:700; font-size:16px; margin-bottom:4px;}
.hero-card .price{color:var(--indigo); font-weight:800; font-size:18px; margin-bottom:14px;}
.mini-wa-btn{display:flex; align-items:center; justify-content:center; gap:8px; background:var(--wa); color:#fff; padding:11px; border-radius:12px; font-weight:700; font-size:14px; border:none; width:100%;}
.badge-float{position:absolute; top:-14px; right:18px; background:var(--indigo); color:var(--gold-light); font-size:12px; font-weight:700; padding:8px 14px; border-radius:999px; box-shadow:0 8px 18px rgba(0,0,0,.25); transform:rotate(-4deg); z-index:2;}

/* ---------- KATEGORI ---------- */
.kategori{padding:40px 0 8px;}
.chip-row{display:flex; gap:10px; overflow-x:auto; padding-bottom:6px;}
.chip{flex:0 0 auto; padding:10px 20px; border-radius:999px; font-weight:600; font-size:14px; background:var(--ivory-dim); border:1.5px solid transparent; white-space:nowrap;}
.chip.active{background:var(--indigo); color:var(--ivory);}

/* ---------- PRODUK ---------- */
.section{padding:56px 0;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:20px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(24px,3vw,32px); font-weight:600;}
.section-head .see-all{font-weight:700; font-size:14px; color:var(--indigo); border-bottom:2px solid var(--gold); padding-bottom:2px;}
.grid-produk{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media(max-width:980px){ .grid-produk{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .grid-produk{grid-template-columns:1fr;} }
.card{background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(22,35,63,.07); box-shadow:0 1px 2px rgba(22,35,63,.04); transition:transform .35s var(--ease), box-shadow .35s var(--ease); display:flex; flex-direction:column;}
.card:hover{transform:translateY(-6px); box-shadow:0 24px 40px rgba(22,35,63,.13);}
.card .thumb{height:190px; position:relative; background:var(--ivory-dim); display:block;}
.tag{position:absolute; top:10px; left:10px; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.92); color:var(--indigo); z-index:2;}
.tag.diskon{background:#E4553B; color:#fff;}
.card .info{padding:14px 14px 16px; display:flex; flex-direction:column; flex:1;}
.card .name{font-weight:700; font-size:14.5px; margin-bottom:4px;}
.card .name a{color:inherit;}
.card .price{color:var(--indigo); font-weight:800; font-size:15.5px; margin-bottom:10px;}
.price .old{color:#999; font-weight:600; font-size:12.5px; text-decoration:line-through; margin-left:6px;}
.order-btn{width:100%; margin-top:auto; display:flex; align-items:center; justify-content:center; gap:6px; background:var(--ivory-dim); color:var(--indigo); font-weight:700; font-size:13px; padding:10px; border-radius:10px; border:1.5px solid rgba(22,35,63,.12);}
.order-btn:hover{background:var(--wa); color:#fff; border-color:var(--wa);}
.order-btn.added{background:var(--wa-dark); color:#fff; border-color:var(--wa-dark);}
.empty-state{padding:40px 0; text-align:center; color:#766f63;}

/* ---------- CARA ORDER ---------- */
.cara{background:var(--ivory-dim);}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px;}
@media(max-width:820px){ .steps{grid-template-columns:1fr;} }
.step{background:#fff; border-radius:var(--radius); padding:26px; border:1px solid rgba(22,35,63,.08);}
.step .num{font-family:'Fraunces',serif; font-size:34px; color:var(--gold); font-weight:700; margin-bottom:10px;}
.step h3{font-size:17px; margin-bottom:6px;}
.step p{font-size:14px; color:#555;}

/* ---------- TESTIMONI ---------- */
.testi-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:820px){ .testi-row{grid-template-columns:1fr;} }
.testi{background:#fff; border-radius:var(--radius); padding:22px; border:1px solid rgba(22,35,63,.08);}
.stars{color:var(--gold); font-size:14px; margin-bottom:10px; letter-spacing:2px;}
.testi p{font-size:14.5px; color:#3c3630; margin-bottom:14px;}
.who{display:flex; align-items:center; gap:10px;}
.avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--indigo)); flex:0 0 auto;}
.who .name{font-weight:700; font-size:13.5px;}
.who .loc{font-size:12px; color:#888;}

/* ---------- CTA BANNER ---------- */
.cta-banner{background:var(--indigo); border-radius:28px; padding:50px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; position:relative; overflow:hidden;}
.cta-banner h2{color:var(--ivory); font-size:clamp(22px,3vw,30px); max-width:480px;}
.cta-banner p{color:rgba(250,247,240,.7); margin-top:8px; max-width:440px; font-size:14.5px;}

/* ---------- PAGE HEADER (archive/single) ---------- */
.page-header{background:var(--indigo); padding:56px 0; text-align:center;}
.page-header h1{color:var(--ivory); font-size:clamp(28px,4vw,42px); margin-bottom:10px;}
.page-header p{color:rgba(250,247,240,.7); max-width:520px; margin:0 auto;}
.breadcrumb{font-size:13px; color:var(--gold-light); margin-bottom:14px;}
.breadcrumb a{opacity:.85;}

/* ---------- SINGLE PRODUK ---------- */
.produk-single{display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:56px 0;}
@media(max-width:820px){ .produk-single{grid-template-columns:1fr;} }
.produk-single .gambar{border-radius:var(--radius); overflow:hidden; height:420px;}
.produk-single .judul{font-size:clamp(24px,3vw,34px); margin-bottom:12px;}
.produk-single .harga{font-size:26px; font-weight:800; color:var(--indigo); margin-bottom:6px;}
.produk-single .deskripsi{color:#4a4438; margin:20px 0 28px; font-size:15px;}
.produk-single .kategori-list{margin-bottom:18px; font-size:13px; color:#888;}
.produk-single .kategori-list a{color:var(--gold); font-weight:700;}
.pagination-wrap{display:flex; justify-content:center; gap:8px; padding:20px 0 60px;}
.pagination-wrap a, .pagination-wrap span{padding:8px 14px; border-radius:8px; background:#fff; border:1px solid rgba(22,35,63,.1); font-size:14px; font-weight:600;}
.pagination-wrap .current{background:var(--indigo); color:#fff;}

/* ---------- FOOTER ---------- */
footer.site-footer{padding:56px 0 32px; font-size:14px; color:#544e44;}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; margin-bottom:36px;}
@media(max-width:700px){ .foot-grid{grid-template-columns:1fr;} }
footer h4{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--indigo); margin-bottom:12px;}
footer li{margin-bottom:8px; opacity:.8;}
footer li a{opacity:1;}
.foot-bottom{border-top:1px solid rgba(22,35,63,.1); padding-top:20px; font-size:12.5px; opacity:.6;}

/* ---------- FLOATING WA ---------- */
.float-wa{
  position:fixed; bottom:24px; right:24px; z-index:60; width:60px; height:60px; border-radius:50%;
  background:var(--wa); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.45); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 10px 26px rgba(37,211,102,.45);}
  50%{box-shadow:0 10px 26px rgba(37,211,102,.45), 0 0 0 10px rgba(37,211,102,.12);}
  100%{box-shadow:0 10px 26px rgba(37,211,102,.45);}
}

/* ---------- STICKY ORDER RAIL (signature feature) ---------- */
.order-rail{
  position:fixed; left:50%; transform:translate(-50%, 120%); bottom:22px; z-index:70;
  width:min(560px, calc(100% - 32px)); background:var(--indigo-deep); color:var(--ivory);
  border-radius:18px; padding:14px 16px; display:flex; align-items:center; gap:14px;
  box-shadow:0 20px 44px rgba(0,0,0,.35); transition:transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.order-rail.show{transform:translate(-50%, 0);}
.order-rail .count{width:38px; height:38px; border-radius:50%; background:var(--gold); color:var(--indigo-deep); display:flex; align-items:center; justify-content:center; font-weight:800; flex:0 0 auto;}
.order-rail .txt{flex:1; font-size:13.5px; line-height:1.3; min-width:0;}
.order-rail .txt b{display:block; font-size:14.5px;}
.order-rail .txt span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.order-rail .go{background:var(--wa); color:#fff; font-weight:700; font-size:13.5px; padding:10px 16px; border-radius:10px; white-space:nowrap; flex:0 0 auto;}

@media print{
  .float-wa, .order-rail{display:none !important;}
}