/* ========================================================================= Popoku Official — woocommerce.css Kartu produk, single, cart, checkout, order summary, akun. Gaya Shopee. ========================================================================= */ /* Hanya jarak vertikal — padding shorthand akan menghapus padding samping milik .pk-container sehingga konten menempel ke tepi layar di mobile. */ .pk-shop { padding-top: 8px; padding-bottom: 40px; } .woocommerce-notices-wrapper:not(:empty) { margin: 0 0 16px; } /* Notices ---------------------------------------------------------------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews { list-style: none; margin: 0 0 16px; padding: 13px 18px 13px 44px; border-radius: 8px; position: relative; font-size: 14px; line-height: 1.5; } .woocommerce-message { background: #e8f7ee; color: #1e7a45; border: 1px solid #b7e6c8; } .woocommerce-info { background: #eaf4fc; color: #1c5f96; border: 1px solid #bfdef5; } .woocommerce-error { background: #fdecec; color: #b3261e; border: 1px solid #f5c2c0; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background-size: contain; background-repeat: no-repeat; } .woocommerce-message .button, .woocommerce-info .button { float: right; margin-left: 12px; } /* ========================================================================= GRID PRODUK + KARTU (loop) ========================================================================= */ ul.products, .pk-products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; float: none; } .pk-products--scroll { grid-template-columns: repeat(6, 1fr); } /* Netralkan lebar & float default WooCommerce (woocommerce-layout.css) di halaman arsip yang punya class .woocommerce pada — jika tidak, kartu menyempit jadi ~40px. */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, ul.products li.product, ul.products li.pk-card { width: auto !important; float: none !important; margin: 0 !important; } .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { display: none !important; } .pk-card, li.product { position: relative; background: #fff; border-radius: var(--pk-radius-sm); overflow: hidden; box-shadow: var(--pk-shadow); transition: transform .16s ease, box-shadow .16s ease; display: flex; flex-direction: column; border: 1px solid #f0f0f0; } .pk-card:hover, li.product:hover { transform: translateY(-3px); box-shadow: var(--pk-shadow-md); border-color: var(--pk-primary); z-index: 2; } .pk-card__link { display: flex; flex-direction: column; flex: 1; color: inherit; } .pk-card__link:hover { color: inherit; } .pk-card__media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #f7f7f7; } .pk-card__img, .pk-card__media img { width: 100%; height: 100%; object-fit: cover; } .pk-card__disc { position: absolute; top: 0; right: 8px; background: var(--pk-accent); color: #fff; display: flex; flex-direction: column; align-items: center; padding: 3px 5px 5px; font-size: 10px; line-height: 1; border-radius: 0 0 3px 3px; } .pk-card__disc b { font-size: 13px; font-weight: 800; } .pk-card__disc i { font-style: normal; font-size: 8px; letter-spacing: .5px; } .pk-card__badge { position: absolute; top: 8px; left: 0; color: #fff; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 0 3px 3px 0; } .pk-card__badge--fav { background: linear-gradient(90deg, #ff8a4c, var(--pk-accent)); } .pk-card__soldout { position: absolute; inset: 0; background: rgba(255, 255, 255, .8); display: flex; align-items: center; justify-content: center; } .pk-card__soldout::after { content: "Stok Habis"; background: rgba(0, 0, 0, .55); color: #fff; padding: 8px 14px; border-radius: 50%; font-size: 12px; font-weight: 700; } .pk-card__body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 5px; flex: 1; } .pk-card__title { font-family: var(--pk-font); font-size: 13px; font-weight: 400; line-height: 1.35; margin: 0; color: var(--pk-ink); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.9em; padding-bottom: 1px; word-break: break-word; } .pk-card__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: auto; } .pk-price-now, .pk-card__price .price ins, .pk-card__price .amount { color: var(--pk-price); font-weight: 800; font-size: 16px; font-family: var(--pk-head); text-decoration: none; } .pk-price-now .woocommerce-Price-currencySymbol { font-size: 11px; font-weight: 600; } .pk-price-was { color: var(--pk-muted); font-size: 11.5px; text-decoration: line-through; } .pk-card__meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--pk-muted); } .pk-card__rating { display: inline-flex; align-items: center; gap: 2px; color: var(--pk-star); } .pk-card__rating b { color: var(--pk-ink-soft); font-weight: 600; } .pk-card__dot { color: #ddd; } .pk-card__loc { display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--pk-muted); } .pk-card__loc .pk-icon { flex: none; } .pk-card__add { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 10px 10px; padding: 8px; border: 1px solid var(--pk-accent); color: var(--pk-accent); background: #fff; border-radius: 5px; font-size: 12.5px; font-weight: 700; font-family: var(--pk-head); transition: all .15s; } .pk-card__add:hover { background: var(--pk-accent); color: #fff; } .pk-card__add.added { background: #27ae60; border-color: #27ae60; color: #fff; } .pk-card__add--view { border-color: var(--pk-line); color: var(--pk-ink-soft); } .pk-card__add--view:hover { background: var(--pk-primary); border-color: var(--pk-primary); color: #fff; } /* WooCommerce menambah link "Lihat keranjang" di bawah tombol; mini cart sudah menggantikan fungsinya. Perlu specificity di atas `.woocommerce a.added_to_cart`. */ .pk-card a.added_to_cart, .woocommerce .pk-card a.added_to_cart { display: none !important; } /* Header arsip toko ------------------------------------------------------- */ .woocommerce-products-header { margin-bottom: 14px; } .woocommerce-products-header__title { font-size: 22px; margin: 0 0 6px; } .term-description { color: var(--pk-ink-soft); font-size: 14px; } /* Jumlah hasil + urutan: WooCommerce memakai float kiri/kanan yang berantakan di layar sempit. Dijadikan satu baris flex yang boleh membungkus. */ .pk-shop .woocommerce-result-count, .pk-shop .woocommerce-ordering { float: none !important; margin: 0; } .pk-shop__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; } .woocommerce-result-count { color: var(--pk-muted); font-size: 13px; margin: 0; } .woocommerce-ordering select, .pk-shop select { padding: 9px 12px; border: 1px solid var(--pk-line); border-radius: 6px; background: #fff; font-size: 13px; color: var(--pk-ink); max-width: 100%; } .pk-shop .woocommerce-ordering { display: inline-block; } @media (max-width: 560px) { .pk-shop__toolbar { gap: 8px; } .pk-shop .woocommerce-result-count { flex: 1 1 100%; order: 2; font-size: 12.5px; } .pk-shop .woocommerce-ordering { flex: 1 1 100%; order: 1; } .pk-shop .woocommerce-ordering select { width: 100%; } .woocommerce-products-header__title { font-size: 19px; } } .woocommerce-pagination ul { list-style: none; display: flex; gap: 6px; justify-content: center; padding: 0; margin: 26px 0 0; flex-wrap: wrap; } .woocommerce-pagination a, .woocommerce-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; background: #fff; border: 1px solid var(--pk-line); border-radius: 6px; color: var(--pk-ink-soft); font-weight: 600; } .woocommerce-pagination .current { background: var(--pk-primary); color: #fff; border-color: var(--pk-primary); } /* ========================================================================= SINGLE PRODUCT ========================================================================= */ .pk-single { background: transparent; } /* Halaman produk sudah punya tombol "Chat Admin" sendiri — WA mengambang hanya menutupi tombol Bagikan (desktop) dan "Beli Sekarang" (mobile). */ .single-product .pk-wa-float { display: none; } .pk-single__top { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 20px; background: #fff; border-radius: var(--pk-radius); padding: 20px; box-shadow: var(--pk-shadow); } /* Cegah kolom grid memaksa lebar melebihi container (default min-width:auto). */ .pk-single__top > * { min-width: 0; } /* Galeri */ /* woocommerce-layout.css memaksa div.images jadi width:48%;float:left — netralkan agar galeri mengisi penuh kolomnya (sama seperti perbaikan grid arsip). */ .pk-single .woocommerce-product-gallery, .pk-single div.images { width: 100% !important; float: none !important; margin: 0 !important; } .pk-single__gallery { position: sticky; top: calc(var(--pk-header-h) + 14px); align-self: start; overflow: hidden; } /* Flexslider kadang menyisakan wrapper slide selebar penuh (semua gambar berjajar) di luar .flex-viewport, membuat halaman melebar horizontal di desktop. Clip di level galeri; .flex-viewport (440px) tetap jadi slider yang terlihat. */ .pk-single__gallery .woocommerce-product-gallery { position: relative; overflow: hidden; } .pk-single__gallery .woocommerce-product-gallery__image img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fafafa; } .woocommerce-product-gallery__wrapper { margin: 0; } .woocommerce-product-gallery__image { border-radius: 8px; overflow: hidden; } .woocommerce-product-gallery__image img { border-radius: 8px; } .woocommerce-product-gallery .flex-control-thumbs { list-style: none; display: flex; gap: 8px; padding: 0; margin: 18px 0 0 !important; flex-wrap: wrap; } /* Lagi-lagi woocommerce-layout.css: thumbnail dipaksa width:30.75%;float:left. */ .pk-single .woocommerce-product-gallery .flex-control-thumbs li { width: 64px !important; float: none !important; margin: 0 !important; cursor: pointer; } .pk-single .woocommerce-product-gallery .flex-control-thumbs img { width: 64px; height: 64px; object-fit: cover; } .woocommerce-product-gallery .flex-control-thumbs img { border-radius: 6px; border: 2px solid transparent; opacity: .7; transition: all .15s; } .woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover { border-color: var(--pk-primary); opacity: 1; } .woocommerce-product-gallery__trigger { position: absolute; top: 10px; right: 10px; z-index: 5; } /* Summary */ .pk-single__title { font-family: var(--pk-font); font-size: 22px; font-weight: 700; line-height: 1.35; margin: 0 0 12px; } .pk-single__stats { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--pk-line); margin-bottom: 4px; font-size: 13px; color: var(--pk-ink-soft); flex-wrap: wrap; } .pk-stat b { color: var(--pk-ink); font-weight: 700; } .pk-stat--rate { display: inline-flex; align-items: center; gap: 6px; color: var(--pk-price); border-bottom: 1px solid var(--pk-price); padding-bottom: 1px; } .pk-stat--rate b { color: var(--pk-price); } .pk-stat__div { width: 1px; height: 14px; background: var(--pk-line); } .pk-stars { position: relative; display: inline-flex; color: #e0e0e0; } .pk-stars .pk-icon { color: inherit; } .pk-stars::before { content: ""; position: absolute; top: 0; left: 0; width: var(--pk-rate, 0); height: 100%; overflow: hidden; color: var(--pk-star); z-index: 1; } .pk-stars { color: var(--pk-star); } .pk-single__pricebox { background: #fafafa; border-radius: 8px; padding: 16px 18px; margin: 16px 0; display: flex; align-items: center; gap: 14px; } .pk-single__price .price, .pk-single__price .amount, .pk-single__price ins { color: var(--pk-price); font-size: 30px; font-weight: 800; font-family: var(--pk-head); text-decoration: none; } .pk-single__price del { color: var(--pk-muted); font-size: 16px; font-weight: 400; margin-left: 8px; } .pk-single__price del .amount { color: var(--pk-muted); font-size: 16px; font-weight: 400; } .pk-single__price .woocommerce-Price-currencySymbol { font-size: 18px; } .pk-single__disc { background: rgba(238, 77, 45, .12); color: var(--pk-price); font-weight: 800; font-size: 12px; padding: 5px 10px; border-radius: 4px; font-family: var(--pk-head); } .pk-single__facts { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pk-single__facts li { display: flex; gap: 12px; font-size: 13px; } .pk-fact__k { color: var(--pk-muted); min-width: 96px; } .pk-fact__v { color: var(--pk-ink-soft); display: inline-flex; align-items: center; gap: 6px; } .pk-fact__v .pk-icon { color: var(--pk-primary); } /* Form add to cart */ .pk-single__cart { margin-bottom: 16px; } .pk-single form.cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; } .pk-single form.cart .quantity { display: flex; } .pk-single .single_add_to_cart_button { background: var(--pk-accent) !important; color: #fff !important; border: 0; border-radius: 6px; height: 48px; padding: 0 30px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--pk-head); font-weight: 700; font-size: 15px; cursor: pointer; transition: background .16s, opacity .16s; box-shadow: 0 4px 12px rgba(255, 107, 44, .3); } .pk-single .single_add_to_cart_button:hover { background: var(--pk-accent-dark) !important; } /* Saat varian belum dipilih tombolnya disabled: tetap oranye (bukan ungu bawaan Woo). */ .pk-single .single_add_to_cart_button.disabled, .pk-single .single_add_to_cart_button.wc-variation-selection-needed, .pk-single .single_add_to_cart_button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } /* Baris qty + tombol untuk produk variabel agar sejajar. */ .pk-single .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Tombol Beli Sekarang (langsung ke checkout). */ .pk-single .pk-buynow { height: 48px; padding: 0 30px; border: 0; border-radius: 6px; background: var(--pk-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--pk-head); font-weight: 700; font-size: 15px; cursor: pointer; transition: background .16s, opacity .16s; box-shadow: 0 4px 12px rgba(0, 113, 188, .28); } .pk-single .pk-buynow:hover { background: var(--pk-primary-dark); color: #fff; } .pk-single .pk-buynow.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none; } .pk-single .pk-buynow.is-loading { opacity: .65; pointer-events: none; } .pk-single form.cart .variations { width: 100%; border-collapse: collapse; margin-bottom: 6px; } .pk-single form.cart .variations td { padding: 10px 0; vertical-align: top; } .pk-single form.cart .variations td.label { width: 110px; padding-top: 18px; } .pk-single form.cart .variations label { font-weight: 600; font-size: 13px; color: var(--pk-ink-soft); } .pk-single form.cart .variations select { padding: 9px 12px; border: 1px solid var(--pk-line); border-radius: 6px; min-width: 160px; } .pk-single .woocommerce-variation-price .price { color: var(--pk-price); font-weight: 800; font-size: 22px; } /* Pemilih varian gaya Shopee — menggantikan dropdown bawaan. */ .pk-varpick__cell select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .pk-varpick { display: flex; flex-wrap: wrap; gap: 8px; } .pk-varpick__opt { position: relative; min-width: 62px; padding: 9px 16px; background: #fff; border: 1px solid var(--pk-line); border-radius: 6px; font-family: var(--pk-font); font-size: 13.5px; font-weight: 600; color: var(--pk-ink-soft); transition: color .15s, border-color .15s, background .15s, box-shadow .15s; } .pk-varpick__opt:hover:not(:disabled) { color: var(--pk-price); border-color: var(--pk-price); background: #fff8f6; } .pk-varpick__opt.is-active { color: var(--pk-price); border-color: var(--pk-price); background: #fff5f2; box-shadow: 0 2px 8px rgba(238, 77, 45, .16); } /* Sudut terlipat kecil sebagai penanda terpilih, seperti Shopee. */ .pk-varpick__opt.is-active::after { content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border: 5px solid var(--pk-price); border-top-color: transparent; border-left-color: transparent; border-radius: 0 0 5px 0; } .pk-varpick__opt:disabled, .pk-varpick__opt.is-off { color: #c4c4c4; background: #fafafa; border-color: #efefef; cursor: not-allowed; text-decoration: line-through; text-decoration-color: #dcdcdc; } .pk-varpick__opt:focus-visible { outline: 2px solid var(--pk-primary); outline-offset: 2px; } /* WooCommerce menyembunyikan link reset dengan visibility:hidden sehingga tetap memakan ruang. Sembunyikan sepenuhnya sampai WC menandainya visible. */ .pk-single .reset_variations:not([style*="visible"]) { display: none; } .pk-single .reset_variations { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--pk-muted); padding: 4px 10px; border: 1px solid var(--pk-line); border-radius: 20px; background: #fff; transition: color .15s, border-color .15s; } .pk-single .reset_variations::before { content: '\00d7'; font-size: 14px; line-height: 1; } .pk-single .reset_variations:hover { color: var(--pk-price); border-color: var(--pk-price); } /* Harga varian sudah ditampilkan di kotak harga utama (lihat initVariationChips). */ .pk-single .single_variation_wrap .woocommerce-variation-price { display: none; } .pk-single .single_variation_wrap .woocommerce-variation { margin: 0; } /* Harga varian terpilih */ .pk-single .woocommerce-variation-price { margin: 4px 0 12px; } .pk-single .woocommerce-variation-price .price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .pk-single .woocommerce-variation-price .price del, .pk-single .woocommerce-variation-price .price del .amount { color: var(--pk-muted); font-size: 15px; font-weight: 600; text-decoration: line-through; opacity: 1; } .pk-single .woocommerce-variation-price .price ins, .pk-single .woocommerce-variation-price .price ins .amount { color: var(--pk-price); font-size: 24px; font-weight: 800; font-family: var(--pk-head); text-decoration: none; background: none; } .pk-single .woocommerce-variation-price .price .woocommerce-Price-currencySymbol { font-size: .62em; font-weight: 600; } .pk-single .woocommerce-variation-availability p { margin: 0 0 8px; font-size: 13px; color: #2e7d32; font-weight: 600; } @media (max-width: 480px) { .pk-single form.cart .variations td.label { width: 78px; padding-top: 16px; } .pk-varpick__opt { min-width: 56px; padding: 8px 13px; font-size: 13px; } } /* Quantity stepper */ .pk-qty, .pk-single .quantity { display: inline-flex; align-items: center; border: 1px solid var(--pk-line); border-radius: 6px; overflow: hidden; background: #fff; } .pk-qty__btn { width: 34px; height: 40px; background: #f7f7f7; border: 0; display: flex; align-items: center; justify-content: center; color: var(--pk-ink-soft); } .pk-qty__btn:hover { background: #eee; color: var(--pk-primary); } .pk-qty input.qty, .pk-qty__input, .pk-single .quantity input.qty { width: 48px; height: 40px; border: 0; border-left: 1px solid var(--pk-line); border-right: 1px solid var(--pk-line); text-align: center; font-size: 14px; font-weight: 600; -moz-appearance: textfield; background: #fff; } .pk-qty input::-webkit-outer-spin-button, .pk-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Di halaman produk: tinggi kotak qty disamakan dengan tombol (48px). */ .pk-single .quantity { height: 48px; box-sizing: border-box; } .pk-single .quantity input.qty { height: 100%; width: 58px; border: 0; box-sizing: border-box; } .pk-single__extra { display: flex; align-items: center; gap: 18px; padding-top: 14px; border-top: 1px solid var(--pk-line); flex-wrap: wrap; } .pk-single__chat { display: inline-flex; align-items: center; gap: 7px; color: #25a55b; font-weight: 700; font-size: 13.5px; } .pk-single__share { font-size: 12.5px; color: var(--pk-muted); display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } .pk-single__share a { width: 30px; height: 30px; border-radius: 50%; background: #f0f0f0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--pk-ink-soft); } .pk-single__share a:hover { background: var(--pk-primary); color: #fff; } /* Kartu toko */ .pk-storecard { background: #fff; border-radius: var(--pk-radius); padding: 18px 20px; margin: 16px 0; box-shadow: var(--pk-shadow); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pk-storecard__brand { display: flex; align-items: center; gap: 14px; } .pk-storecard__brand img { border-radius: 10px; } .pk-storecard__info strong { display: flex; align-items: center; gap: 8px; font-family: var(--pk-head); font-size: 16px; } .pk-storecard__verified { display: inline-flex; align-items: center; gap: 3px; color: var(--pk-primary); font-size: 11.5px; font-weight: 600; background: #eaf4fc; padding: 2px 8px; border-radius: 20px; } .pk-storecard__loc { display: inline-flex; align-items: center; gap: 4px; color: var(--pk-muted); font-size: 12.5px; margin-top: 2px; } .pk-storecard__actions { display: flex; gap: 10px; } /* Tabs */ .pk-single__tabs { background: #fff; border-radius: var(--pk-radius); padding: 22px; margin-top: 16px; box-shadow: var(--pk-shadow); } .woocommerce-tabs .wc-tabs { list-style: none; display: flex; gap: 6px; margin: 0 0 18px; padding: 0; border-bottom: 1px solid var(--pk-line); flex-wrap: wrap; } .woocommerce-tabs .wc-tabs li { margin-bottom: -1px; } .woocommerce-tabs .wc-tabs li a { display: block; padding: 12px 20px; font-family: var(--pk-head); font-weight: 600; font-size: 14px; color: var(--pk-ink-soft); border-bottom: 3px solid transparent; } .woocommerce-tabs .wc-tabs li.active a, .woocommerce-tabs .wc-tabs li a:hover { color: var(--pk-primary); border-bottom-color: var(--pk-primary); } .woocommerce-Tabs-panel { line-height: 1.75; } .woocommerce-Tabs-panel h2 { font-size: 18px; } /* ---- Penilaian / ulasan ------------------------------------------------ */ .pk-reviews { max-width: 900px; } .pk-reviews .woocommerce-Reviews-title { display: none; } /* Ringkasan skor + batang per bintang */ .pk-rev-summary { display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: center; background: linear-gradient(135deg, #fff7f4, #f6fafd); border: 1px solid #f0e2dc; border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; } .pk-rev-score { text-align: center; border-right: 1px dashed #e7d8d2; padding-right: 20px; } .pk-rev-score strong { display: block; font-family: var(--pk-head); font-size: 44px; font-weight: 800; color: var(--pk-price); line-height: 1; } .pk-rev-outof { display: block; font-size: 12px; color: var(--pk-muted); margin-bottom: 7px; } .pk-rev-score .pk-stars { justify-content: center; } .pk-rev-total { display: block; margin-top: 6px; font-size: 12.5px; color: var(--pk-ink-soft); } .pk-rev-bars { display: grid; gap: 6px; } .pk-rev-bar { display: grid; grid-template-columns: 44px 1fr 34px; align-items: center; gap: 10px; } .pk-rev-bar__lbl { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--pk-ink-soft); } .pk-rev-bar__lbl .pk-icon { color: var(--pk-star); } .pk-rev-bar__track { height: 8px; background: #ececec; border-radius: 5px; overflow: hidden; } .pk-rev-bar__fill { display: block; height: 100%; background: var(--pk-star); border-radius: 5px; transition: width .5s ease; } .pk-rev-bar__n { font-size: 12px; color: var(--pk-muted); text-align: right; } /* Kondisi belum ada ulasan */ .pk-rev-empty { text-align: center; padding: 34px 20px; background: #fafbfc; border: 1px dashed var(--pk-line); border-radius: 12px; margin-bottom: 24px; } .pk-rev-empty__ic { display: inline-flex; gap: 3px; color: #dcdcdc; margin-bottom: 10px; } .pk-rev-empty h3 { font-size: 16px; margin: 0 0 5px; } .pk-rev-empty p { margin: 0; font-size: 13.5px; color: var(--pk-muted); max-width: 420px; margin-inline: auto; } /* Daftar ulasan. CSS WooCommerce memakai selector ber-ID (#reviews #comments ol.commentlist …) dan membuat avatar position:absolute — selector kelas biasa kalah spesifisitas sehingga kolom teks menciut jadi selebar avatar. Karena itu ditimpa dengan selector setara. */ #reviews #comments ol.commentlist { list-style: none; margin: 0 0 26px; padding: 0; } #reviews #comments ol.commentlist li { list-style: none; margin: 0; padding: 0; background: none; border: 0; position: relative; } #reviews #comments ol.commentlist li .comment_container { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--pk-line); background: none; } /* !important dipakai karena selector WooCommerce (.woocommerce #reviews #comments ol.commentlist li img.avatar) punya satu kelas lebih banyak — tanpa ini avatar tetap absolute dan kolom teks menciut jadi 32px. */ #reviews #comments ol.commentlist li img.avatar { position: static !important; float: none !important; width: 46px !important; height: 46px !important; padding: 0 !important; margin: 0 !important; border-radius: 50%; border: 1px solid var(--pk-line); background: #fff; } #reviews #comments ol.commentlist li .comment-text { margin: 0 !important; border: 0 !important; border-radius: 0; padding: 0 !important; min-width: 0; } #reviews .woocommerce-review__author { display: inline-block; font-family: var(--pk-head); font-weight: 700; font-size: 14px; color: var(--pk-ink); } #reviews .woocommerce-review__published-date { display: block; font-size: 12px; color: var(--pk-muted); margin-top: 1px; } #reviews .woocommerce-review__dash { display: none; } #reviews .woocommerce-review__verified { display: inline-block; margin-left: 7px; font-style: normal; vertical-align: 2px; background: #eaf6ee; color: #1e8449; border-radius: 20px; padding: 2px 9px; font-size: 11px; font-weight: 700; } #reviews .comment-text .star-rating { float: none; margin: 0 0 7px; } #reviews .comment-text .star-rating span::before, #reviews .comment-text .star-rating::before { color: var(--pk-star); } #reviews .comment-text .description { font-size: 14px; line-height: 1.7; color: var(--pk-ink-soft); margin-top: 8px; } #reviews .comment-text .description p { margin: 0 0 8px; } #reviews .comment-text .description p:last-child { margin-bottom: 0; } /* Form penilaian */ .pk-rev-formwrap { background: #fff; border: 1px solid var(--pk-line); border-radius: 12px; padding: 22px 24px; } .pk-rev-formwrap .comment-reply-title { display: block; font-family: var(--pk-head); font-size: 16px; font-weight: 700; color: var(--pk-ink); margin-bottom: 4px; } .pk-rev-note { font-size: 12.5px; color: var(--pk-muted); margin: 0 0 16px; } .pk-rev-formwrap .comment-form { display: grid; gap: 14px; } .pk-field { margin: 0; } .pk-field label { display: block; font-size: 13px; font-weight: 600; color: var(--pk-ink-soft); margin-bottom: 6px; } .pk-field .required { color: var(--pk-price); } .pk-rev-formwrap input[type="text"], .pk-rev-formwrap input[type="email"], .pk-rev-formwrap textarea { width: 100%; max-width: 100%; padding: 11px 14px; font-family: var(--pk-font); font-size: 14px; border: 1px solid var(--pk-line); border-radius: 8px; background: #fff; color: var(--pk-ink); transition: border-color .15s, box-shadow .15s; } .pk-rev-formwrap input:focus, .pk-rev-formwrap textarea:focus { outline: 0; border-color: var(--pk-primary); box-shadow: 0 0 0 3px rgba(0, 113, 188, .12); } .pk-rev-formwrap textarea { min-height: 120px; resize: vertical; } .pk-rev-formwrap .comment-form-author, .pk-rev-formwrap .comment-form-email { display: block; } @media (min-width: 640px) { .pk-rev-formwrap .comment-form { grid-template-columns: 1fr 1fr; } .pk-rev-formwrap .comment-form-rating, .pk-rev-formwrap .comment-form-comment, .pk-rev-formwrap .form-submit, .pk-rev-formwrap .comment-form-cookies-consent { grid-column: 1 / -1; } } .pk-rev-formwrap .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--pk-muted); } .pk-rev-formwrap .comment-form-cookies-consent label { margin: 0; font-weight: 400; } .pk-rev-formwrap .form-submit { margin: 4px 0 0; } /* Tombol dasar WooCommerce ditarget lewat ID (#respond input#submit) dan aturan fallback tema di bawah file ini memakai spesifisitas sama, jadi butuh #reviews di depan supaya menang tanpa bergantung urutan. */ #reviews .pk-rev-formwrap #respond input#submit, .pk-rev-formwrap .form-submit input[type="submit"] { background: var(--pk-accent); color: #fff; border: 0; border-radius: var(--pk-radius-sm); padding: 13px 30px; font-family: var(--pk-head); font-weight: 600; font-size: 15px; cursor: pointer; box-shadow: 0 4px 12px rgba(255, 107, 44, .3); transition: background .18s; } #reviews .pk-rev-formwrap #respond input#submit:hover, .pk-rev-formwrap .form-submit input[type="submit"]:hover { background: var(--pk-accent-dark); } /* Pemilih bintang (WooCommerce mengubah