/* ============================================================
   TEMPLATE01 — Modern clean online store (Tokopedia-style green)
   ============================================================ */

/* ── VARIABLES ── */
:root {
  --ink: #212121;
  --paper: #FFFFFF;
  --fog: #F5F6F7;
  --line: #E4E7EB;
  --mute: #757575;
  --accent: #03AC0C;
  --accent-dark: #029b0b;
  --accent-soft: #E8F8EA;

  /* Legacy naiathemes token aliases — beberapa view lama masih memakai
     var(--sand)/var(--charcoal)/dll langsung di inline <style>. main.css
     selalu dimuat lebih dulu (lihat web.php $pageCssMap), jadi alias di
     sini membuat semua referensi lama resolve ke palet template ini. */
  --cream: var(--paper);
  --sand: var(--fog);
  --taupe: var(--mute);
  --mink: var(--ink);
  --charcoal: var(--ink);
  --rose: var(--accent);
}

/* ── RESET & BASE ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  font-family: 'Lato', Arial, sans-serif;
  background: var(--fog);
  color: var(--ink);
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
}
img, video, iframe { max-width: 100%; }
a { -webkit-tap-highlight-color: transparent; }

/* ── HERO ── */
.hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.hero-pat { display: none; }
.hero-content { position: relative; z-index: 2; }
.h-eye { font-family: 'Lato', sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; }
.h-title { font-size: clamp(2rem,5vw,3.2rem); font-weight: 800; line-height: 1.15; margin-bottom: 1.2rem; letter-spacing: -.02em; color: var(--ink); }
.h-title em { font-style: normal; color: var(--accent); }
.h-desc { font-size: .95rem; font-weight: 400; line-height: 1.8; color: var(--mute); max-width: 420px; margin-bottom: 2rem; }
.btn-dk {
  background: var(--accent);
  color: #fff;
  padding: .85rem 2rem;
  font-size: .85rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
  transition: background .15s;
  font-family: 'Lato', sans-serif;
  box-shadow: 0 6px 16px rgba(3,172,12,.22);
}
.btn-dk:hover { background: var(--accent-dark); color: #fff; }
.btn-ol {
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  padding: .85rem 2rem;
  font-size: .85rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: all .15s;
  font-family: 'Lato', sans-serif;
}
.btn-ol:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.hero-img { height: 420px; overflow: hidden; background: var(--fog); position: relative; border-radius: 24px; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-tag {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  background: #fff;
  color: var(--ink);
  padding: .85rem 1.3rem;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(33,33,33,.14);
}
.hero-tag p { font-family: 'Lato', sans-serif; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 0; }
.hero-tag h6 { font-size: 1rem; margin: .2rem 0 0; font-weight: 800; text-transform: none; letter-spacing: 0; color: var(--accent); }

/* ── MARQUEE ── */
.mq-wrap { background: var(--accent); color: #fff; padding: .7rem 0; overflow: hidden; border-radius: 999px; margin: 0 1.5rem; }
.mq-track { display: flex; gap: 2rem; animation: mqanim 25s linear infinite; white-space: nowrap; }
.mq-track span { font-size: .75rem; letter-spacing: .06em; font-weight: 700; }
@keyframes mqanim { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ── SECTION COMMONS ── */
.eyebrow { font-family: 'Lato', sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.sec-title { font-size: clamp(1.4rem,3vw,2rem); font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.py-sec { padding: 3rem 0; }

/* ── CATEGORIES ── */
.cat-img { height: 200px; overflow: hidden; background: var(--fog); border-radius: 18px; }
.cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.cat-card:hover .cat-img img { transform: scale(1.05); }
.cat-lbl h5 { font-size: 1rem; font-weight: 700; text-transform: none; margin-bottom: .15rem; margin-top: .8rem; letter-spacing: 0; }
.cat-lbl p { font-family: 'Lato', sans-serif; font-size: .78rem; letter-spacing: 0; color: var(--mute); }

/* ── PRODUCT CARD ── */
.pc { cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 16px rgba(33,33,33,.08); transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.pc:hover { box-shadow: 0 14px 32px rgba(33,33,33,.16); transform: translateY(-3px); border-color: transparent; }
.pc-img { position: relative; overflow: hidden; background: #fff; aspect-ratio: 3/4; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pc:hover .pc-img img { transform: scale(1.05); }
.pc-badge { position: absolute; top: .6rem; left: .6rem; font-size: .62rem; letter-spacing: .02em; text-transform: none; padding: .3rem .7rem; color: #fff; font-family: 'Lato', sans-serif; font-weight: 700; z-index: 1; border-radius: 999px; }
.bg-new { background: var(--ink); }
.bg-sale { background: #e02b2b; }
.bg-voucher { background: #ffc107; color: #000; }
.pc-wish { position: absolute; top: .6rem; right: .6rem; background: #fff; border: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s,color .15s; z-index: 2; font-size: .82rem; box-shadow: 0 3px 10px rgba(33,33,33,.12); }
.pc-wish:hover { background: var(--accent); color: #fff; }
.pc-add { position: absolute; bottom: .6rem; left: .6rem; right: .6rem; background: var(--accent); color: #fff; text-align: center; padding: .65rem; font-size: .72rem; letter-spacing: 0; text-transform: none; font-weight: 700; border-radius: 999px; transform: translateY(140%); transition: transform .2s; cursor: pointer; border: none; width: auto; font-family: 'Lato', sans-serif; }
.pc:hover .pc-add { transform: translateY(0); }
.pc-info { padding: .85rem 1rem 1.1rem; }
.pc-info h6 { font-size: .88rem; font-weight: 600; text-transform: none; letter-spacing: 0; margin-bottom: .25rem; font-family: 'Lato', sans-serif; }
.pc-stars { font-size: .7rem; color: #ffa41c; letter-spacing: 1px; }
.pc-price { font-size: .95rem; color: var(--accent); font-weight: 800; }
.pc-old { text-decoration: line-through; color: var(--mute); font-size: .76rem; margin-right: .4rem; font-weight: 400; }
.cdots { display: flex; gap: 5px; margin-top: .4rem; }
.cdot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); cursor: pointer; transition: opacity .15s; }
.cdot:hover { opacity: .6; }

/* ── FILTER TABS ── */
.ftabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1.5rem; background: var(--fog); border-radius: 999px; padding: .3rem; width: fit-content; }
.ftab { background: transparent; border: none; padding: .5rem 1.2rem; font-size: .78rem; letter-spacing: 0; text-transform: none; cursor: pointer; font-family: 'Lato', sans-serif; font-weight: 700; color: var(--mute); border-radius: 999px; transition: background .15s,color .15s; }
.ftab:hover, .ftab.active { background: var(--accent); color: #fff; }

/* ── MID BANNER ── */
.mid-banner { background: #fff; border-radius: 24px; margin: 1.5rem; padding: 3.5rem 2rem; text-align: center; box-shadow: 0 4px 20px rgba(33,33,33,.05); }
.mid-banner h2 { font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 800; line-height: 1.3; margin-bottom: 1rem; text-transform: none; }
.mid-banner p { font-size: .9rem; line-height: 1.8; color: var(--mute); max-width: 560px; margin: 0 auto 1.8rem; }

/* ── TESTIMONIALS ── */
.tcard { padding: 1.6rem; border-radius: 18px; background: #fff; box-shadow: 0 2px 12px rgba(33,33,33,.06); }
.tcard .stars { color: #ffa41c; letter-spacing: 2px; font-size: .85rem; }
.tcard blockquote { font-family: 'Lato', sans-serif; font-size: .95rem; font-style: normal; font-weight: 400; line-height: 1.7; margin: .9rem 0; }
.tcard .author { font-family: 'Lato', sans-serif; font-size: .75rem; letter-spacing: 0; text-transform: none; color: var(--mute); font-weight: 700; }

/* ── NEWSLETTER ── */
.nl-sec { background: var(--accent); color: #fff; padding: 3rem 2rem; border-radius: 24px; margin: 1.5rem; }
.nl-sec h2 { font-size: 1.6rem; font-weight: 800; text-transform: none; }
.nl-input { background: #fff; border: 0; border-radius: 999px; color: var(--ink); padding: .8rem 1.3rem; font-size: .85rem; font-family: 'Lato', sans-serif; flex: 1; outline: none; }
.nl-input::placeholder { color: var(--mute); }
.nl-btn { background: var(--ink); color: #fff; padding: .8rem 1.8rem; font-size: .8rem; letter-spacing: 0; text-transform: none; font-weight: 700; border: 0; border-radius: 999px; font-family: 'Lato', sans-serif; cursor: pointer; white-space: nowrap; transition: opacity .15s; margin-left: .5rem; }
.nl-btn:hover { opacity: .85; }

/* ── FOOTER ── */
footer { background: #fff; color: var(--ink); border-top: 1px solid var(--line); padding: 3rem 2rem 1.5rem; }
.foot-brand { font-family: 'Lato', sans-serif; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--accent); }
footer h6 { font-family: 'Lato', sans-serif; font-size: .78rem; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 1rem; font-weight: 700; }
footer a { color: var(--mute); text-decoration: none; font-size: .82rem; display: block; margin-bottom: .6rem; transition: color .15s; }
footer a:hover { color: var(--accent); }
.foot-socials a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: .6rem; font-size: 1rem; color: var(--ink); background: var(--fog); border-radius: 50%; }
.foot-socials a:hover { background: var(--accent); color: #fff; }
.foot-hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0 1rem; opacity: 1; }
.foot-copy { font-size: .78rem; color: var(--mute); }

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .hero { min-height: auto; padding: 3rem 0; }
  .cat-img { height: 150px; }
  .py-sec { padding: 2.5rem 0; }
  .mid-banner, .nl-sec { margin: .75rem; padding: 2.5rem 1.25rem; }
}

/* Halaman cetak (PO/kasir/order) — kartu bersih rounded, bukan brutalist */
#printableArea .panel,
#printableArea .info-box,
#printableArea .dbox { border: 1px solid var(--line) !important; border-radius: 18px !important; background: #fff; box-shadow: 0 2px 14px rgba(33,33,33,.05); overflow: hidden; }
#printableArea .panel-body { padding: 1.5rem; }
#printableArea .dbox-label,
#printableArea .panel label { color: var(--accent) !important; }
#printableArea table th { background: var(--fog); color: var(--ink); border-color: var(--line); }
#printableArea table td { border-color: var(--line); }
#printableArea table img { border-radius: 10px; }
#printableArea .btn,
#printableArea .btn-payment { border-radius: 999px !important; border: 0; }
#printableArea .btn-primary { background: var(--accent); }