/* ------------------------------------------------------------------
   Halaman detail produk — kerangka ringan.

   Menggantikan bootstrap.min.css + demo21 + demo22 + style.min.css +
   fontawesome (sekitar 1,07 MB) HANYA untuk halaman ini.

   Halaman detail produk sudah punya CSS sendiri ~430 baris di dalam
   @section('styles') pada front/single.blade.php -- itulah yang menata
   harga, tombol, tabel spesifikasi, dan sebagainya. Berkas ini cuma
   menambal yang hilang saat tema lama dilepas:
     1. gaya dasar body (tanpa bootstrap, body kembali ke serif & margin 8px)
     2. pengganti grid Bootstrap (kelas .row / .col-*) yang masih dipakai markup
     3. remah roti, galeri gambar, dan tab -- yang dulu dari tema
   Kartu produk TIDAK diatur di sini (punya home2/cards.css).
   ------------------------------------------------------------------ */

html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;
     font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
     font-size:14.5px;line-height:1.55;color:#111}
body *{box-sizing:border-box}

:root{
  --pr-navy:#1e3a5f;
  --pr-kuning:#fde68a;
  --pr-ink:#111;
  --pr-mut:#5f6776;
  --pr-line:#e9edf3;
}

/* ---------- pengganti wadah & grid Bootstrap ----------
   Markup halaman ini masih memakai .container/.row/.col-*, dan menulis ulang
   400 baris markup yang penuh logika stok/diskon/atribut jauh lebih berisiko
   daripada menyediakan padanan gridnya di sini. */
/* 1680px terlalu lebar untuk halaman produk: di layar 1820 gambarnya jadi
   791x791 px, lebih tinggi dari ruang layar laptop. 1400 membuat gambar
   proporsional dan harga/tombol beli naik ke area yang langsung terlihat. */
.container{width:100%;max-width:1400px;margin:0 auto;padding:0 16px}
@media(min-width:1100px){ .container{padding:0 40px} }
.row{display:flex;flex-wrap:wrap;margin:0 -12px}
/* Kekhususan disamakan dengan cara Bootstrap sendiri: aturan umum dan aturan
   per-kolom sama-sama satu kelas, dan yang per-kolom ditulis SESUDAHNYA sehingga
   menang. Kalau aturan umum ditulis sebagai .row>[class*="col-"] (dua tingkat),
   ia mengalahkan .col-lg-5 dan kolomnya selamanya 100% -- tata letak dua kolom
   tidak akan pernah aktif. */
[class*="col-"]{position:relative;padding:0 12px;min-width:0;width:100%}
.col-xs-1{flex:0 0 8.33333%;max-width:8.33333%}
.col-xs-2{flex:0 0 16.6667%;max-width:16.6667%}
.col-xs-3{flex:0 0 25%;max-width:25%}
.col-xs-4{flex:0 0 33.3333%;max-width:33.3333%}
.col-xs-5{flex:0 0 41.6667%;max-width:41.6667%}
.col-xs-6{flex:0 0 50%;max-width:50%}
.col-xs-7{flex:0 0 58.3333%;max-width:58.3333%}
.col-xs-8{flex:0 0 66.6667%;max-width:66.6667%}
.col-xs-9{flex:0 0 75%;max-width:75%}
.col-xs-10{flex:0 0 83.3333%;max-width:83.3333%}
.col-xs-11{flex:0 0 91.6667%;max-width:91.6667%}
.col-xs-12{flex:0 0 100%;max-width:100%}
@media(min-width:576px){
.col-sm-1{flex:0 0 8.33333%;max-width:8.33333%}
.col-sm-2{flex:0 0 16.6667%;max-width:16.6667%}
.col-sm-3{flex:0 0 25%;max-width:25%}
.col-sm-4{flex:0 0 33.3333%;max-width:33.3333%}
.col-sm-5{flex:0 0 41.6667%;max-width:41.6667%}
.col-sm-6{flex:0 0 50%;max-width:50%}
.col-sm-7{flex:0 0 58.3333%;max-width:58.3333%}
.col-sm-8{flex:0 0 66.6667%;max-width:66.6667%}
.col-sm-9{flex:0 0 75%;max-width:75%}
.col-sm-10{flex:0 0 83.3333%;max-width:83.3333%}
.col-sm-11{flex:0 0 91.6667%;max-width:91.6667%}
.col-sm-12{flex:0 0 100%;max-width:100%}
}
@media(min-width:768px){
.col-md-1{flex:0 0 8.33333%;max-width:8.33333%}
.col-md-2{flex:0 0 16.6667%;max-width:16.6667%}
.col-md-3{flex:0 0 25%;max-width:25%}
.col-md-4{flex:0 0 33.3333%;max-width:33.3333%}
.col-md-5{flex:0 0 41.6667%;max-width:41.6667%}
.col-md-6{flex:0 0 50%;max-width:50%}
.col-md-7{flex:0 0 58.3333%;max-width:58.3333%}
.col-md-8{flex:0 0 66.6667%;max-width:66.6667%}
.col-md-9{flex:0 0 75%;max-width:75%}
.col-md-10{flex:0 0 83.3333%;max-width:83.3333%}
.col-md-11{flex:0 0 91.6667%;max-width:91.6667%}
.col-md-12{flex:0 0 100%;max-width:100%}
}
@media(min-width:992px){
.col-lg-1{flex:0 0 8.33333%;max-width:8.33333%}
.col-lg-2{flex:0 0 16.6667%;max-width:16.6667%}
.col-lg-3{flex:0 0 25%;max-width:25%}
.col-lg-4{flex:0 0 33.3333%;max-width:33.3333%}
.col-lg-5{flex:0 0 41.6667%;max-width:41.6667%}
.col-lg-6{flex:0 0 50%;max-width:50%}
.col-lg-7{flex:0 0 58.3333%;max-width:58.3333%}
.col-lg-8{flex:0 0 66.6667%;max-width:66.6667%}
.col-lg-9{flex:0 0 75%;max-width:75%}
.col-lg-10{flex:0 0 83.3333%;max-width:83.3333%}
.col-lg-11{flex:0 0 91.6667%;max-width:91.6667%}
.col-lg-12{flex:0 0 100%;max-width:100%}
}
@media(min-width:1200px){
.col-xl-1{flex:0 0 8.33333%;max-width:8.33333%}
.col-xl-2{flex:0 0 16.6667%;max-width:16.6667%}
.col-xl-3{flex:0 0 25%;max-width:25%}
.col-xl-4{flex:0 0 33.3333%;max-width:33.3333%}
.col-xl-5{flex:0 0 41.6667%;max-width:41.6667%}
.col-xl-6{flex:0 0 50%;max-width:50%}
.col-xl-7{flex:0 0 58.3333%;max-width:58.3333%}
.col-xl-8{flex:0 0 66.6667%;max-width:66.6667%}
.col-xl-9{flex:0 0 75%;max-width:75%}
.col-xl-10{flex:0 0 83.3333%;max-width:83.3333%}
.col-xl-11{flex:0 0 91.6667%;max-width:91.6667%}
.col-xl-12{flex:0 0 100%;max-width:100%}
}

/* kelas bantu Bootstrap yang benar-benar dipakai markup halaman ini */
.d-none{display:none!important}
.text-center{text-align:center}
.text-left{text-align:left}
.text-danger{color:#c2385a}
.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}
.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}
.form-control{display:block;width:100%;min-height:42px;padding:8px 11px;font:inherit;
  color:var(--pr-ink);background:#fff;border:1.5px solid var(--pr-line);border-radius:9px}
.form-control:focus{outline:none;border-color:var(--pr-navy)}
.form-group{margin-bottom:12px}

/* ---------- remah roti ---------- */
.breadcrumb-nav{padding:14px 0 8px}
.breadcrumb{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;
  margin:0;padding:0;font-size:13.5px;color:var(--pr-mut);background:none}
.breadcrumb-item{display:flex;align-items:center}
.breadcrumb-item+.breadcrumb-item::before{content:"/";padding:0 8px;color:#b9c0cc}
.breadcrumb-item a{color:var(--pr-mut);text-decoration:none}
.breadcrumb-item a:hover{color:var(--pr-navy);text-decoration:underline}
.breadcrumb-item:last-child a{color:var(--pr-ink);font-weight:600}

/* ---------- galeri produk (pengganti Owl Carousel + elevateZoom) ----------
   Owl memasang lebar inline pada .owl-stage; tanpa CSS tema yang memotongnya,
   halaman jadi bisa digeser ke samping sampai 2674px. Galeri di sini memakai
   satu gambar utama + deretan thumbnail biasa -- tanpa plugin apa pun. */
.pg{position:relative}
.pg-utama{position:relative;border:1px solid var(--pr-line);border-radius:14px;
  overflow:hidden;background:#fff}
.pg-utama .pg-slide{display:none}
.pg-utama .pg-slide.on{display:block}
.pg-utama img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block}
.pg-utama iframe{display:block;width:100%;aspect-ratio:1;height:auto;border:0}
.pg-thumb{display:flex;gap:9px;margin-top:11px;overflow-x:auto;padding-bottom:4px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.pg-thumb button{flex:0 0 auto;width:74px;height:74px;padding:3px;cursor:pointer;
  border:1.5px solid var(--pr-line);border-radius:10px;background:#fff;scroll-snap-align:start}
.pg-thumb button.on{border-color:var(--pr-navy)}
.pg-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.pg-thumb .pg-video{display:flex;align-items:center;justify-content:center;
  background:#111;color:#fff;font-size:22px;border-radius:8px;width:100%;height:100%}
.pg-label{position:absolute;top:12px;left:12px;z-index:2;color:#fff;font-weight:700;
  font-size:12.5px;padding:5px 11px;border-radius:999px}

/* ---------- tab (pengganti tab Bootstrap) ---------- */
.nav-tabs{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:26px 0 0;padding:0;
  border-bottom:1px solid var(--pr-line)}
.nav-tabs li{margin:0}
.nav-tabs a{display:block;padding:11px 16px;font-size:14.5px;font-weight:600;
  color:var(--pr-mut);text-decoration:none;border-bottom:2px solid transparent}
.nav-tabs a:hover{color:var(--pr-navy)}
.nav-tabs a.active{color:var(--pr-navy);border-bottom-color:var(--pr-navy)}
.tab-content{padding-top:18px}
.tab-pane{display:none}
.tab-pane.active{display:block}

@media (prefers-reduced-motion:reduce){ *{transition:none!important} }


/* ---------- tombol WhatsApp ----------
   .btn-wa tidak punya gaya di dalam @section('styles') halaman ini; dulu
   seluruhnya datang dari demo21/style.min. Tanpa penggantinya, tombol
   "Tanya / Beli via WhatsApp" jatuh jadi tautan biru bawaan peramban. */
.btn-wa{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#fff!important;
  font-weight:700;font-size:14.5px;line-height:1.2;padding:11px 18px;border-radius:10px;
  text-decoration:none;border:0;cursor:pointer;white-space:nowrap}
.btn-wa:hover{background:#1eb855;color:#fff!important}
.btn-wa i,.btn-wa svg{flex:0 0 auto}

/* ---------- ikon jaminan (front/partials/cod.blade.php) ----------
   Versi lama memakai glyph FontAwesome. Fontawesome (102 KB) tidak dimuat lagi,
   jadi lingkarannya kosong. Diganti SVG sebaris sebagai background -- partial-nya
   tidak perlu disentuh sama sekali. */
/* Ikon dipasang sebagai MASK, bukan background-image, supaya warnanya ikut
   properti color elemen induknya -- itulah yang membuat tiap kartu jaminan
   bisa punya warna sendiri tanpa perlu satu berkas SVG per warna. */
.fa{display:inline-block;width:22px;height:22px;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;vertical-align:middle}
.fa-star{color:#c7cdd8}
.fas.fa-star,.fa-star.filled{color:#f0b429}
.fa-truck{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1%203h13v13H1z%27%2F%3E%3Cpath%20d%3D%27M14%208h4l3%203v5h-7z%27%2F%3E%3Ccircle%20cx%3D%275.5%27%20cy%3D%2718.5%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2717.5%27%20cy%3D%2718.5%27%20r%3D%272%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1%203h13v13H1z%27%2F%3E%3Cpath%20d%3D%27M14%208h4l3%203v5h-7z%27%2F%3E%3Ccircle%20cx%3D%275.5%27%20cy%3D%2718.5%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%2717.5%27%20cy%3D%2718.5%27%20r%3D%272%27%2F%3E%3C%2Fsvg%3E")}
.fa-globe{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M3%2012h18%27%2F%3E%3Cpath%20d%3D%27M12%203a15%2015%200%200%201%200%2018a15%2015%200%200%201%200-18%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M3%2012h18%27%2F%3E%3Cpath%20d%3D%27M12%203a15%2015%200%200%201%200%2018a15%2015%200%200%201%200-18%27%2F%3E%3C%2Fsvg%3E")}
.fa-shield{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202l8%204v6c0%205-3.5%208.5-8%2010c-4.5-1.5-8-5-8-10V6z%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202l8%204v6c0%205-3.5%208.5-8%2010c-4.5-1.5-8-5-8-10V6z%27%2F%3E%3C%2Fsvg%3E")}
.fa-receipt{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%203h14v18l-2.5-1.5L14%2021l-2-1.5L10%2021l-2.5-1.5L5%2021z%27%2F%3E%3Cpath%20d%3D%27M9%208h6%27%2F%3E%3Cpath%20d%3D%27M9%2012h6%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%203h14v18l-2.5-1.5L14%2021l-2-1.5L10%2021l-2.5-1.5L5%2021z%27%2F%3E%3Cpath%20d%3D%27M9%208h6%27%2F%3E%3Cpath%20d%3D%27M9%2012h6%27%2F%3E%3C%2Fsvg%3E")}
.fa-star{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202l3.1%206.3%206.9%201-5%204.9%201.2%206.9L12%2017.8%205.8%2021.1%207%2014.2l-5-4.9%206.9-1z%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202l3.1%206.3%206.9%201-5%204.9%201.2%206.9L12%2017.8%205.8%2021.1%207%2014.2l-5-4.9%206.9-1z%27%2F%3E%3C%2Fsvg%3E")}
.fa-ticket{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%208a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202a2%202%200%200%200%200%204a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2a2%202%200%200%200%200-4z%27%2F%3E%3Cpath%20d%3D%27M12%206v12%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%208a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202a2%202%200%200%200%200%204a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2a2%202%200%200%200%200-4z%27%2F%3E%3Cpath%20d%3D%27M12%206v12%27%2F%3E%3C%2Fsvg%3E")}
.fa-arrow-down{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14%27%2F%3E%3Cpath%20d%3D%27M19%2012l-7%207-7-7%27%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14%27%2F%3E%3Cpath%20d%3D%27M19%2012l-7%207-7-7%27%2F%3E%3C%2Fsvg%3E")}

/* ---------- tabel spesifikasi ----------
   Markupnya memakai <th> untuk label MAUPUN nilai. Bawaan peramban untuk <th>
   adalah rata tengah, dan hanya sebagian sel yang diberi kelas .text-left --
   itu sebabnya label tampak menggantung di tengah dan beberapa nilai
   (Lebar/Panjang/Tinggi/Berat) rata tengah sendiri. Disamakan rata kiri. */
.product-single-tabs .tab-pane table th,
.product-single-tabs .tab-pane table td{text-align:left!important;vertical-align:top}
.product-single-tabs .tab-pane table th:first-child{color:#3d4451;font-weight:700!important}

/* ---------- gambar produk: batasi tinggi di layar besar ----------
   Tanpa batas ini gambar mengikuti lebar kolom (791px di layar 1820), sehingga
   lebih tinggi dari ruang layar laptop dan mendorong harga jauh ke bawah. */
@media(min-width:1000px){
  .pg-utama .pg-slide img{max-height:440px;object-fit:contain}
  .pg-utama .pg-slide iframe{max-height:440px}
}

/* ---------- kaca pembesar mengikuti kursor ----------
   Pengganti plugin elevateZoom. Gambar galeri sudah ukuran penuh, jadi
   memperbesarnya tidak perlu unduhan tambahan. Titik perbesaran diatur lewat
   transform-origin oleh skrip di produk-galeri.blade.php. */
@media (hover:hover) and (pointer:fine){
  .pg-utama{cursor:zoom-in}
  .pg-utama .pg-slide img{transition:transform .18s ease}
  .pg-utama.pg-zoom .pg-slide.on img{transform:scale(2.3)}
}
@media (prefers-reduced-motion:reduce){
  .pg-utama .pg-slide img{transition:none}
}

/* ==================================================================
   BARIS TOMBOL BELI
   ==================================================================
   Masalah yang diperbaiki di sini:

   1. Tombol "Beli Sekarang" tingginya cuma 27px di ponsel, padahal DUA
      aturan sudah menyetel 54px dan 52px. Sebabnya bukan kekhususan:
      CSS sebaris single.blade.php mengubah wadahnya jadi
      `flex-direction: column` di <=575px, sementara tombolnya punya
      `flex: 1 1 0%` dari pages.css. Di wadah KOLOM, flex-basis:0 berlaku
      pada TINGGI -- jadi height diabaikan dan tombol runtuh setinggi teks.
      Solusinya memakai GRID di ponsel, bukan flex kolom, sehingga
      jebakan itu hilang sama sekali.

   2. "Buka Tiket Baru" tampil sebagai tautan biru kecil bawaan peramban.
      pages.css menatanya lewat `.wishlist a`, padahal di markup ini
      tautannya ADALAH elemen ber-kelas .wishlist itu sendiri -- jadi
      aturannya tidak pernah kena.

   Berkas ini dimuat SESUDAH pages.css, jadi kekhususan yang sama sudah
   cukup untuk menang.
   ------------------------------------------------------------------ */

body .product-single-details .product-action{align-items:stretch}

/* tinggi kedua tombol disamakan */
body .product-single-details .product-action .btn-dark,
body .product-single-details .product-action .btn-wa{
  height:54px;min-height:54px;border-radius:10px;font-size:15.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}

body .product-single-details .product-action .product-single-qty input{
  height:54px;text-align:center;font-size:16px;font-weight:700}

/* --- "Buka Tiket Baru": tombol sekunder ---
   Bergaris tepi (bukan solid) supaya jelas sebagai tombol tapi tidak menyaingi
   "Beli Sekarang".

   CATATAN: jangan memakai `flex:0 0 100%` + `max-width:fit-content` untuk
   memaksanya turun baris. Algoritma flex memakai max-width itu saat menata,
   jadi tombolnya tetap MUAT di baris yang sama dan malah mendesak tombol
   WhatsApp sampai teksnya terpotong. Penempatan baris diatur lewat grid
   di bawah, bukan lewat pembungkusan flex. */
body .product-single-details .product-action a.wishlist{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:44px;padding:0 20px;
  border:1.5px solid var(--pr-line);border-radius:10px;background:#fff;
  font-size:14.5px;font-weight:700;line-height:1;white-space:nowrap;
  color:var(--pr-navy)!important;text-decoration:none!important;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
body .product-single-details .product-action a.wishlist:hover{
  border-color:var(--pr-navy);background:#f4f6fa;
  box-shadow:0 4px 12px rgba(30,58,95,.10)}
body .product-single-details .product-action a.wishlist:active{transform:translateY(1px)}
body .product-single-details .product-action a.wishlist .fa{width:18px;height:18px;flex:0 0 auto}

/* Teks tombol tidak boleh pernah terpotong. */
body .product-single-details .product-action .btn-dark,
body .product-single-details .product-action .btn-wa{white-space:nowrap}

/* --- penempatan: GRID di semua ukuran, supaya barisnya pasti ---
   Sampai 1199px: jumlah + Beli Sekarang satu baris, WhatsApp di bawahnya
   selebar penuh, tiket di baris ketiga. Kolom detail memang belum cukup lebar
   untuk memuat ketiganya berdampingan tanpa ada yang terdesak. */
@media(min-width:576px){
  body .product-single-details .product-action{
    display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:stretch}
  body .product-single-details .product-action .product-single-qty{grid-area:1 / 1}
  body .product-single-details .product-action .btn-dark{grid-area:1 / 2;min-width:0!important;margin:0!important}
  body .product-single-details .product-action .btn-wa{grid-area:2 / 1 / 3 / -1;min-width:0!important;width:100%}
  body .product-single-details .product-action a.wishlist{grid-area:3 / 1 / 4 / -1;justify-self:start}
}

/* Mulai 1200px kolomnya cukup lebar: ketiganya sejajar, tiket di bawah. */
@media(min-width:1200px){
  body .product-single-details .product-action{grid-template-columns:120px minmax(0,1fr) auto}
  body .product-single-details .product-action .btn-wa{grid-area:1 / 3 / 2 / 4;width:auto}
  body .product-single-details .product-action a.wishlist{grid-area:2 / 1 / 3 / -1}
}

@media(max-width:575px){
  /* GRID, bukan flex kolom -- lihat penjelasan nomor 1 di atas.
     Jumlah dan "Beli Sekarang" berdampingan; WhatsApp selebar penuh di bawahnya. */
  body .product-single-details .product-action{
    display:grid;grid-template-columns:104px 1fr;gap:10px}
  body .product-single-details .product-action .product-single-qty{width:auto;grid-column:1}
  body .product-single-details .product-action .product-single-qty input{width:100%}
  body .product-single-details .product-action .btn-dark{
    grid-column:2;width:auto;min-width:0!important;margin:0!important}
  body .product-single-details .product-action .btn-wa{
    grid-column:1 / -1;width:100%;min-width:0!important}
  body .product-single-details .product-action a.wishlist{
    grid-column:1 / -1;max-width:none;width:100%;height:46px}
}

/* ==================================================================
   CEK ONGKIR di halaman produk (front/partials/produk-ongkir.blade.php)
   ================================================================== */
.ok-box{border:1px solid var(--pr-line);border-radius:14px;padding:16px 18px;margin-top:18px;background:#fff}
.ok-kepala{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.ok-kepala b{font-size:15.5px;color:var(--pr-ink)}
.ok-ikon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;background:#eff6ff;color:#2563eb;flex:0 0 auto}

.ok-label{display:block;font-size:13px;font-weight:700;color:var(--pr-mut);margin:0 0 5px}
.ok-input{display:block;width:100%;min-height:46px;padding:10px 12px;font:inherit;font-size:15px;
  color:var(--pr-ink);background:#fff;border:1.5px solid var(--pr-line);border-radius:10px}
.ok-input:focus{outline:none;border-color:var(--pr-navy)}

.ok-cari{position:relative}
.ok-bantuan{margin:6px 0 0;font-size:12.5px;color:var(--pr-mut)}

/* daftar saran kecamatan */
.ok-saran{position:absolute;z-index:30;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;
  list-style:none;background:#fff;border:1px solid var(--pr-line);border-radius:10px;
  box-shadow:0 12px 28px rgba(30,58,95,.14);max-height:260px;overflow-y:auto}
.ok-saran li{padding:9px 11px;border-radius:8px;cursor:pointer;line-height:1.35}
.ok-saran li:hover{background:#f4f6fa}
.ok-saran b{display:block;font-size:14.5px;color:var(--pr-ink);font-weight:700}
.ok-saran span{display:block;font-size:12.5px;color:var(--pr-mut)}

.ok-kodepos{margin-top:11px}

/* hasil */
.ok-hasil{margin-top:12px}
.ok-pesan{margin:0;font-size:14px;color:var(--pr-mut)}
.ok-pesan.ok-kosong{color:#b45309}
.ok-ringkas{margin:0 0 8px;font-size:13px;color:var(--pr-mut);font-weight:600}
.ok-daftar{list-style:none;margin:0;padding:0;border:1px solid var(--pr-line);border-radius:10px;overflow:hidden}
.ok-daftar li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:10px 12px;border-bottom:1px solid var(--pr-line)}
.ok-daftar li:last-child{border-bottom:0}
.ok-daftar li:nth-child(odd){background:#fafbfd}
.ok-kurir{font-size:14.5px;font-weight:700;color:var(--pr-ink);min-width:0}
.ok-kurir em{display:block;font-style:normal;font-size:12.5px;font-weight:500;color:var(--pr-mut)}
.ok-lama{font-size:12.5px;color:var(--pr-mut);white-space:nowrap}
.ok-harga{font-size:15px;font-weight:800;color:var(--pr-navy);white-space:nowrap}
.ok-catatan{margin:8px 0 0;font-size:12.5px;color:var(--pr-mut)}

@media(max-width:575px){
  .ok-box{padding:14px}
  .ok-daftar li{grid-template-columns:1fr auto;row-gap:2px}
  .ok-lama{grid-column:1;order:3;margin-top:-2px}
  .ok-harga{grid-row:1 / span 2}
}


/* ==========================================================================
   Dipindahkan dari front/single.blade.php (427 baris, 9.330 B)
   --------------------------------------------------------------------------
   Sebelumnya ditulis sebagai <style> sebaris, jadi ikut terunduh ULANG pada
   SETIAP kunjungan halaman produk dan tidak pernah bisa disimpan cache.
   Di sini ia menumpang produk.css yang memang sudah di-cache.

   POSISI KASKADE BERUBAH, dan itu sudah diperiksa. Urutan lembar di halaman
   produk adalah: shell.css, pages.css, produk.css, css/products.min.css,
   home2/cards.css. Jadi blok ini sekarang dibaca LEBIH AWAL daripada waktu
   masih berupa <style> sebaris.

   Aman, karena kedua lembar yang menyusul tidak menyentuh apa pun di sini:
     css/products.min.css (683 B)  -> hanya widget bintang rating (.star*)
     home2/cards.css      (2.407 B) -> hanya kartu produk (.pc-*, .productBox)
   Dicocokkan selektor per selektor: 0 tabrakan dari 62 selektor blok ini.
   Kalau nanti salah satu lembar itu ditambahi aturan halaman detail produk,
   pemeriksaan ini harus diulang.

   Blok ini tidak memuat satu pun ekspresi Blade, jadi dipindah apa adanya.
   ========================================================================== */
/* =========================
                                           PRODUCT PAGE
                                        ========================= */

    .product-single-container {
      background: #fff;
      border-radius: 18px;
      padding: 28px;
      margin-bottom: 30px;
      border: 1px solid #e5e7eb;
      box-shadow: 0 8px 30px rgba(0, 0, 0, .04);
    }

    .product-title {
      font-size: 32px;
      line-height: 1.3;
      font-weight: 800;
      color: #111827;
      margin-bottom: 18px;
    }

    /* =========================
                                           RATING
                                        ========================= */

    .ratings-container {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }

    .rating-link {
      color: #6b7280 !important;
      font-size: 14px;
      font-weight: 500;
    }

    .rating-link:hover {
      color: #111827 !important;
      text-decoration: none;
    }

    /* =========================
                                           DIVIDER
                                        ========================= */

    .short-divider,
    .divider {
      border-color: #e5e7eb;
    }

    /* =========================
                                           WHOLESALE
                                        ========================= */

    .wholesale {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      margin-bottom: 10px;
      padding: 14px 16px;
      color: #111827;
      font-weight: 600;
      transition: all .2s ease;
    }

    .wholesale:hover {
      border-color: #cbd5e1;
      transform: translateY(-1px);
    }

    /* =========================
                                           PRICE BOX
                                        ========================= */


    .price-box,
    .new-price,
    .old-price {
      list-style: none !important;
    }

    .price-box::before,
    .new-price::before,
    .old-price::before {
      display: none !important;
      content: none !important;
    }

    /* .price-box {
                                    background: #f8fafc;
                                    border: 1px solid #e5e7eb;
                                    border-radius: 16px;
                                    padding: 18px 20px;
                                    margin: 20px 0;
                                    box-shadow: none;
                                  } */

    .old-price {
      display: block;
      font-size: 15px;
      font-weight: 500;
      color: #9ca3af !important;
      text-decoration: line-through;
      margin-bottom: 6px;
    }

    .new-price {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 30px;
      font-weight: 800;
      line-height: 1.2;
      color: #111827;
      margin: 0;
    }

    .new-price small {
      font-size: 14px;
      font-weight: 700;
      color: #dc2626;
      background: #fee2e2;
      padding: 5px 10px;
      border-radius: 999px;
    }

    .timeShow {
      margin-top: 14px;
    }

    .timeBack {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border-radius: 999px;
      background: #111827;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
    }

    /* =========================
                                           DESCRIPTION
                                        ========================= */

    .product-desc {
      background: #fff;
      border-radius: 14px;
      padding: 18px;
      margin: 22px 0;
      border: 1px solid #e5e7eb;
    }

    .product-desc p {
      color: #4b5563;
      line-height: 1.7;
      font-size: 15px;
      margin: 0;
    }

    /* =========================
                                           INFO LIST
                                        ========================= */

    .single-info-list {
      list-style: none;
      padding: 0;
      margin: 0 0 28px 0;
    }

    .single-info-list li {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 0;
      border-bottom: 1px solid #e5e7eb;
      color: #374151;
      font-size: 15px;
    }

    .single-info-list li b {
      min-width: 110px;
      color: #111827;
      font-weight: 700;
    }

    .single-info-list a {
      color: #2563eb;
      font-weight: 600;
    }

    .single-info-list a:hover {
      color: #1d4ed8;
      text-decoration: none;
    }

    .single-info-list li:last-child {
      border-bottom: none !important;
    }

    /* =========================
                                           OPTIONS
                                        ========================= */

    .subtitle {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 18px;
      color: #111827;
    }

    .form-group label {
      color: #111827;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .form-control {
      height: 48px;
      border-radius: 12px;
      border: 1px solid #d1d5db;
      box-shadow: none !important;
      color: #111827;
      background: #fff;
    }

    .form-control:focus {
      border-color: #6366f1;
      box-shadow: 0 0 0 4px rgba(99, 102, 241, .12) !important;
    }

    /* =========================
                                           QUANTITY
                                        ========================= */

    .product-single-qty input {
      height: 52px !important;
      border-radius: 14px;
      border: 1px solid #d1d5db;
      text-align: center;
      font-size: 18px;
      font-weight: 700;
      color: #111827;
      width: 120px;
    }

    /* =========================
                                           BUTTONS
                                        ========================= */

    .product-action {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
      margin-top: 28px;
    }

    .product-action .btn-dark {
      height: 52px;
      padding: 0 24px;
      border: none;
      border-radius: 12px;
      background: #111827;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      transition: .2s ease;
      box-shadow: none;
    }

    .product-action .btn-dark:hover {
      background: #1f2937;
      transform: translateY(-1px);
    }

    .wishlist a,
    .wishlist button {
      color: #374151 !important;
      font-weight: 600 !important;
    }

    .wishlist a:hover,
    .wishlist button:hover {
      color: #111827 !important;
    }

    /* =========================
                                           SHARE
                                        ========================= */

    .product-single-share {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      padding: 18px;
      margin-top: 22px;
    }

    /* =========================
                                           BREADCRUMB
                                        ========================= */

    .breadcrumb {
      background: transparent;
      padding: 0;
    }

    .breadcrumb-item a {
      color: #6b7280;
      font-weight: 500;
    }

    .breadcrumb-item a:hover {
      color: #111827;
      text-decoration: none;
    }

    /* =========================
                                           RELATED PRODUCTS
                                        ========================= */

    .product-default {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      padding: 14px;
      transition: .2s ease;
      height: 100%;
    }

    .product-default:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
    }

    .product-default .price-box {
      background: transparent;
      border: 0;
      padding: 0;
      margin-top: 12px;
    }

    .product-default .new-price {
      font-size: 22px;
    }

    .product-default .old-price {
      font-size: 13px;
    }

    .product-default .btn-icon-wish,
    .product-default .btn-quickview {
      border-radius: 10px;
    }

    /* =========================
                                           MOBILE
                                        ========================= */

    @media(max-width:768px) {

      .product-single-container {
        padding: 18px;
        border-radius: 14px;
      }

      .product-title {
        font-size: 24px;
      }

      .new-price {
        font-size: 26px;
      }

      .product-action {
        flex-direction: column;
        align-items: stretch;
      }

      .product-action .btn-dark {
        width: 100%;
      }

      .product-single-qty {
        width: 100%;
      }

      .product-single-qty input {
        width: 100%;
      }

      .single-info-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }

      .single-info-list li b {
        min-width: auto;
      }
    }


    /* galley stick */
    .product-sticky-wrapper {
      align-items: flex-start;
    }

    .product-gallery-sticky {
      position: sticky;
      top: 90px;
      z-index: 2;
    }

    @media (max-width: 991px) {
      .product-gallery-sticky {
        position: relative;
        top: 0;
      }
    }