/* ============================================================
   RAANIYAH — POLES TAMPILAN PUBLIK (Okt 2026)
   Hanya merapikan: warna, ketebalan garis, bayangan, jarak kecil,
   teks yang terpotong & keadaan fokus. TIDAK memindah posisi atau
   mengubah tata letak apa pun. Dimuat terakhir dari header_public.php;
   selector diawali "html body.rs-public" supaya menang atas CSS halaman.
   ============================================================ */

/* ---------- 1) Dasar ---------- */
html body.rs-public{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
html body.rs-public ::selection{ background:color-mix(in srgb, var(--rs-primary,#D6437E) 22%, #fff); color:#2A2226; }
html body.rs-public :is(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid color-mix(in srgb, var(--rs-primary,#D6437E) 70%, #fff); outline-offset:2px; box-shadow:none;
}
html body.rs-public img{ image-rendering:auto; }

/* ---------- 2) Navbar ---------- */
html body.rs-public .navbar-boutique{ box-shadow:0 1px 0 rgba(120,60,85,.06), 0 6px 20px -14px rgba(120,60,85,.25); }
html body.rs-public .navbar-boutique .nav-link{ transition:color .15s ease; }
html body.rs-public .navbar-boutique .dropdown-menu{ border:1px solid #F1E4E8; border-radius:14px; padding:6px; box-shadow:0 18px 40px -16px rgba(80,30,50,.28); }
html body.rs-public .navbar-boutique .dropdown-item{ border-radius:9px; padding:8px 12px; font-size:.9rem; }
html body.rs-public .navbar-boutique .dropdown-item:hover{ background:#FBF1F4; }

/* ---------- 3) Kartu produk (katalog, wishlist, produk serupa) ---------- */
html body.rs-public .card-produk{
  border:1px solid #F3E6EA !important;
  box-shadow:0 1px 2px rgba(80,30,50,.04), 0 10px 26px -18px rgba(80,30,50,.28) !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
}
@media (hover:hover){
  html body.rs-public .card-produk:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(80,30,50,.05), 0 18px 36px -18px rgba(80,30,50,.32) !important; }
}
html body.rs-public .card-produk .produk-img{ transition:transform .5s ease; }
@media (hover:hover){ html body.rs-public .card-produk:hover .produk-img{ transform:scale(1.03); } }
/* nama: maksimal 2 baris, tidak terpotong kasar */
html body.rs-public .card-produk h6{
  line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal;
}
html body.rs-public .card-produk h6 a{ color:#2F2529 !important; }
html body.rs-public .card-produk h6 a:hover{ color:var(--rs-primary-dark,#B0336A) !important; }
/* kategori & kode: lebih tenang */
html body.rs-public .card-produk .kt-cat, html body.rs-public .card-produk .kt-cat-nama{ color:#8A7C82 !important; letter-spacing:.02em; }
html body.rs-public .rs-kode-produk{
  color:#8E5A6E !important; background:#FBF3F6 !important; border-color:#F0DEE5 !important; font-family:ui-monospace, 'SFMono-Regular', Menlo, monospace !important;
}
/* harga */
html body.rs-public .card-produk .harga-baru{ letter-spacing:-.01em; }
html body.rs-public .card-produk .harga-lama{ color:#A99BA1 !important; }
/* tombol keranjang outline: garis lebih tipis & hover lembut */
html body.rs-public .card-produk .btn-outline-custom{ border-width:1.5px !important; transition:background-color .15s ease, color .15s ease, border-color .15s ease !important; }
html body.rs-public .card-produk .btn-outline-custom:hover{ background:color-mix(in srgb, var(--rs-primary,#D6437E) 8%, #fff) !important; color:var(--rs-primary-dark,#B0336A) !important; }
/* tombol salin link di atas foto: lebih halus (tombol wishlist TIDAK diubah —
   gaya aktif/hover-nya bawaan katalog supaya hati selalu terlihat) */
html body.rs-public .card-produk .kt-share{ box-shadow:0 2px 8px -2px rgba(80,30,50,.18) !important; }
/* badge diskon / label: sedikit lebih rapi */
html body.rs-public .card-produk .badge-promo{ box-shadow:0 4px 10px -4px rgba(150,40,60,.45); letter-spacing:.02em; }

/* ---------- 4) Kotak pencarian & form umum ---------- */
html body.rs-public .form-control, html body.rs-public .form-select{ border-color:#EFDFE5; }
html body.rs-public .form-control:focus, html body.rs-public .form-select:focus{
  border-color:color-mix(in srgb, var(--rs-primary,#D6437E) 45%, #fff) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--rs-primary,#D6437E) 14%, transparent) !important;
}
html body.rs-public .form-control::placeholder{ color:#B4A6AC; }
html body.rs-public input[type=file].form-control::file-selector-button{ background:#FBF3F6; color:#6A5A61; border-right:1px solid #EFDFE5; }

/* ---------- 5) Halaman produk ---------- */
html body.rs-public .pd-price-card{ padding-top:14px !important; padding-bottom:14px !important; }
html body.rs-public .pd-price-card .pd-price-row{ align-items:center; }
html body.rs-public .pd-price-old{ color:#A99BA1 !important; }
/* tanda terpilih pada chip varian: titik lebih kecil & bercincin putih */
html body.rs-public .pd-variant-chip.is-active::after,
html body.rs-public .pd-chip.is-active::after,
html body.rs-public [class*="pd-var"].active::after{ box-shadow:0 0 0 2px #fff; }
html body.rs-public .pd-thumbs img, html body.rs-public .pd-thumb{ transition:border-color .15s ease, transform .15s ease; }

/* ---------- 6) Popup promo ---------- */
html body.rs-public .rs-promo-dialog-img.is-gagal{ display:none !important; }
html body.rs-public .rs-promo-dialog{ box-shadow:0 30px 70px -24px rgba(60,20,40,.45) !important; }

/* ---------- 7) Tombol melayang ---------- */
html body.rs-public .wa-float-btn, html body.rs-public .wishlist-float-btn,
html body.rs-public .kasir-float-btn, html body.rs-public .top-float-btn{
  box-shadow:0 8px 20px -8px rgba(60,20,40,.4) !important;
}

/* ---------- 8) Footer ---------- */
html body.rs-public .footer-boutique .footer-jam-ops,
html body.rs-public .footer-boutique .footer-text-muted{ font-size:.92rem; line-height:1.55; }
html body.rs-public .footer-boutique ul li a,
html body.rs-public .footer-boutique ul li span:not(.footer-icon-circle){ font-size:.92rem; }
html body.rs-public .footer-boutique .footer-icon-circle{ flex:none; }
html body.rs-public .footer-boutique a{ transition:color .15s ease; }
html body.rs-public .footer-boutique .social-icon{ transition:background-color .15s ease, transform .15s ease; }
html body.rs-public .footer-boutique .social-icon:hover{ transform:translateY(-1px); }

/* ---------- 9) Gerak dikurangi ---------- */
@media (prefers-reduced-motion:reduce){
  html body.rs-public .card-produk, html body.rs-public .card-produk .produk-img{ transition:none !important; }
  html body.rs-public .card-produk:hover, html body.rs-public .card-produk:hover .produk-img{ transform:none !important; }
}

/* Baris badge harga yang kosong tidak menyisakan ruang */
html body.rs-public .pd-price-card .pd-badges:not(:has(*)){ display:none; }

/* =============================================================
   KARTU PRODUK v2 — rapikan isi, susunan tetap
   (foto → kode & kategori → nama → opsi → harga → tombol)
   - Harga langsung di bawah nama/opsi (tidak ada ruang kosong di antaranya);
     tombol keranjang tetap di dasar kartu supaya sejajar antar kartu.
   - Harga baru di baris pertama; harga coret + "Hemat" sebaris di bawahnya.
   - Huruf harga memakai huruf isi (sama dengan Produk Serupa).
   - Tombol salin link lebih samar, jelas saat kartu disentuh (desktop).
   ============================================================= */
html body.rs-public .card-produk .rs-price-row{
  flex-direction:row !important; flex-wrap:wrap !important; align-items:baseline !important;
  gap:2px 8px !important; margin-top:6px !important; padding-top:0 !important;
}
html body.rs-public .card-produk .rs-price-row .harga-baru{
  flex:0 0 100%; order:0; font-family:var(--rs-font, 'Poppins', sans-serif) !important;
  font-weight:700; letter-spacing:-.01em; color:var(--rs-primary-dark,#B0336A);
}
html body.rs-public .card-produk .rs-price-row .harga-lama{ order:1; text-decoration-thickness:1px; }
html body.rs-public .card-produk .rs-price-row .rs-hemat{
  order:2; display:inline-flex; align-items:center; padding:1px 7px !important; border-radius:999px;
  font-size:.64rem !important; font-weight:700; line-height:1.5; white-space:nowrap;
  color:#1F7A47 !important; background:#E9F6EE !important; border:0 !important; margin:0 !important;
}
html body.rs-public .katalog-page .card-produk .kt-cta{ margin-top:auto !important; padding-top:10px !important; }
/* nama produk: jarak rapi ke opsi/harga */
html body.rs-public .katalog-page .card-produk h6{ margin-bottom:2px !important; }
html body.rs-public .katalog-page .card-produk .p-3 > p.small.kt-cat:first-child{ margin-bottom:6px !important; }
/* salin link: samar, muncul jelas saat kartu disentuh (desktop) */
@media (hover:hover){
  html body.rs-public .katalog-page .card-produk .kt-share{ opacity:.55; transition:opacity .2s ease !important; }
  html body.rs-public .katalog-page .card-produk:hover .kt-share,
  html body.rs-public .katalog-page .card-produk .kt-share:focus-visible{ opacity:1; }
}
/* tombol keranjang: tinggi & huruf seragam */
html body.rs-public .katalog-page .card-produk .btn-kasir{ font-weight:600; letter-spacing:.01em; }
/* baris opsi warna/ukuran yang kosong tidak menyisakan ruang */
html body.rs-public .katalog-page .card-produk .kt-opsi:not(:has(*)){ display:none !important; }

/* =============================================================
   NAMA PRODUK SELALU 2 BARIS
   Nama pendek tetap memakai tinggi 2 baris, nama panjang dipotong rapi
   di baris kedua ("…"), sehingga kode/opsi/harga/tombol di bawahnya
   sejajar di semua kartu (katalog, wishlist, produk serupa).
   ============================================================= */
html body.rs-public .card-produk h6{
  display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden !important; white-space:normal !important; text-overflow:ellipsis;
  line-height:1.35 !important; height:calc(2em * 1.35) !important; min-height:calc(2em * 1.35) !important;
}
html body.rs-public .card-produk h6 a{ display:inline; }