/* ============================================================
   TEMPLATE01 — Product Detail Page Styles (modern clean, rounded)
   ============================================================ */

/* NOTE: --ink/--paper/--fog/--mute/--accent datang dari main.css
   (dimuat lebih dulu). Jangan redeclare :root di sini. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; }
body { font-family: 'Lato', sans-serif; background: var(--fog); color: var(--ink); overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: 'Lato', sans-serif; font-weight: 800; letter-spacing: -.01em; }
img, video, iframe { max-width: 100%; }

/* BREADCRUMB */
.bc { padding: .9rem 0; font-size: .78rem; letter-spacing: 0; }
.bc a { color: var(--mute); text-decoration: none; }
.bc a:hover { color: var(--accent); }
.bc span { color: #ccc; margin: 0 .5rem; }

/* GALLERY */
.gal-main { aspect-ratio: 4/5; overflow: hidden; background: var(--fog); border-radius: 20px; position: relative; cursor: zoom-in; box-shadow: 0 2px 14px rgba(33,33,33,.06); }
.gal-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gal-main:hover img { transform: scale(1.05); }
.gal-thumbs { display: flex; gap: .6rem; margin-top: .6rem; }
.gth { flex: 1; aspect-ratio: 1; overflow: hidden; background: var(--fog); cursor: pointer; border: 2px solid transparent; border-radius: 12px; opacity: .6; transition: all .15s; }
.gth:hover, .gth.active { opacity: 1; border-color: var(--accent); }
.gth img { width: 100%; height: 100%; object-fit: cover; }
.gal-badge { position: absolute; top: .8rem; left: .8rem; background: #e02b2b; color: #fff; font-size: .65rem; letter-spacing: 0; text-transform: none; font-weight: 700; padding: .35rem .9rem; border-radius: 999px; font-family: 'Lato', sans-serif; }
.gal-badge-voucher { background: #ffc107; color: #000; }

/* PRODUCT INFO */
.p-eye { font-family: 'Lato', sans-serif; font-size: .78rem; letter-spacing: 0; text-transform: none; color: var(--accent); font-weight: 700; }
.p-title { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; text-transform: none; }
.p-price { font-family: 'Lato', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--accent); }
.p-old { text-decoration: line-through; color: var(--mute); font-size: 1rem; margin-right: .5rem; font-weight: 400; }
.rev-mini { font-size: .8rem; color: var(--mute); }
.rev-mini .stars { letter-spacing: 1px; color: #ffa41c; }

/* OPTIONS */
.opt-lbl { font-family: 'Lato', sans-serif; font-size: .78rem; letter-spacing: 0; text-transform: none; margin-bottom: .6rem; color: var(--mute); }
.opt-lbl strong { color: var(--ink); }
.cswatch { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #c7ccd2; cursor: pointer; transition: box-shadow .15s, border-color .15s; display: inline-flex; align-items: center; justify-content: center; margin: 0 6px 6px 0; }
.cswatch.active, .cswatch:hover { border-color: var(--accent); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.sbtn { padding: .5rem 1.2rem; border: 1.5px solid #c7ccd2; border-radius: 999px; background: #fff; font-size: .8rem; letter-spacing: 0; font-weight: 600; cursor: pointer; transition: background .15s,color .15s,border-color .15s; font-family: 'Lato', sans-serif; color: var(--ink); margin: 0 .4rem .4rem 0; }
.sbtn:hover, .sbtn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sbtn.na { opacity: .3; text-decoration: line-through; cursor: not-allowed; }

/* QTY */
.qty-box { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; width: fit-content; }
.qty-box button { background: transparent; border: none; padding: .5rem 1rem; font-size: 1.1rem; font-weight: 700; cursor: pointer; color: var(--ink); transition: background .15s; }
.qty-box button:first-child { border-radius: 999px 0 0 999px; }
.qty-box button:last-child { border-radius: 0 999px 999px 0; }
.qty-box button:hover { background: var(--fog); }
.qty-box span { padding: 0 1rem; font-size: .9rem; font-weight: 700; min-width: 36px; text-align: center; }

/* ADD BUTTONS */
.btn-cart { background: #fff; color: var(--accent); padding: 1rem; font-size: .82rem; letter-spacing: 0; text-transform: none; font-weight: 700; border: 1.5px solid var(--accent); border-radius: 999px; width: 100%; cursor: pointer; font-family: 'Lato', sans-serif; transition: background .15s,color .15s; }
.btn-cart:hover { background: var(--accent-soft); }
.btn-buy { background: var(--accent); color: #fff; padding: 1rem; font-size: .82rem; letter-spacing: 0; text-transform: none; font-weight: 700; border: 0; border-radius: 999px; width: 100%; cursor: pointer; font-family: 'Lato', sans-serif; transition: background .15s; box-shadow: 0 6px 16px rgba(3,172,12,.22); }
.btn-buy:hover { background: var(--accent-dark); }
.btn-wish { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 1rem 1.2rem; font-size: 1rem; cursor: pointer; color: var(--mute); transition: background .15s,color .15s; }
.btn-wish:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* TRUST */
.trust-item { text-align: center; padding: .9rem; }
.trust-item i { font-size: 1.3rem; color: var(--accent); display: block; margin-bottom: .4rem; }
.trust-item p { font-family: 'Lato', sans-serif; font-size: .7rem; letter-spacing: 0; text-transform: none; color: var(--mute); margin: 0; }

/* ACCORDION */
.acc-btn { font-size: .85rem; letter-spacing: 0; text-transform: none; color: var(--ink); background: transparent; box-shadow: none; padding: 1rem 0; font-family: 'Lato', sans-serif; font-weight: 700; }
.accordion-item { border: none; border-top: 1px solid var(--line); background: transparent; }
.acc-btn:not(.collapsed) { color: var(--accent); background: transparent; text-decoration: none; }
.acc-body { font-size: .87rem; line-height: 1.8; color: var(--mute); padding: 0 0 1rem; }

/* REVIEWS */
.rcard { padding: 1.5rem; background: #fff; border-radius: 16px; box-shadow: 0 2px 10px rgba(33,33,33,.05); }
.rcard:nth-child(even) { background: #fff; }
.rcard .stars { color: #ffa41c; letter-spacing: 1px; }
.rcard blockquote { font-family: 'Lato', sans-serif; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.7; margin: .6rem 0; }
.rcard .author { font-family: 'Lato', sans-serif; font-size: .75rem; letter-spacing: 0; text-transform: none; color: var(--mute); font-weight: 700; }

/* PAGINATION */
.pagination-wrap { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .4rem; padding: 2rem 0 1rem; margin: 1.5rem auto 1rem; }
.pg-btn { min-width: 40px; height: 40px; padding: 0 .8rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--mute); text-decoration: none; font-family: 'Lato', sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: 0; transition: background .15s ease, color .15s ease; }
.pg-btn:hover,
.pg-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg-btn.dots { border: 0; background: transparent; pointer-events: none; }

/* FOOTER MINI */
.foot-mini { background: var(--ink); color: rgba(255,255,255,.7); padding: 1.5rem; text-align: center; font-size: .8rem; margin-top: 3rem; border-radius: 22px 22px 0 0; }
.foot-mini .fb { font-family: 'Lato', sans-serif; font-size: 1.2rem; font-weight: 800; color: #fff; letter-spacing: 0; }

@media (max-width: 768px) {
  .gth { flex: none; width: 70px; height: 70px; }
  .p-title { font-size: 1.4rem; }
}