/* Digioto Mobile UI v1.1.3 */ .dmu-root, .dmu-mobile-header, .dmu-bottom-nav, .dmu-product-actions, .dmu-search-overlay { display: none; } /* * Perlindungan desktop: JavaScript memindahkan komponen mobile langsung ke * agar fixed positioning stabil. Search overlay harus tetap tersembunyi * pada tablet/desktop, meskipun markup-nya sudah dipindahkan dari root plugin. */ @media (min-width: 768px) { #dmu-search-overlay, .dmu-search-overlay { display: none !important; visibility: hidden !important; pointer-events: none !important; } } @media (max-width: 767.98px) { :root { --dmu-red: #ef1b2d; --dmu-ink: #101820; --dmu-muted: #667085; --dmu-line: #e8eaed; --dmu-surface: #ffffff; --dmu-soft: #f7f7f8; --dmu-header-height: 82px; --dmu-product-header-height: 62px; --dmu-bottom-height: 76px; --dmu-safe-bottom: env(safe-area-inset-bottom, 0px); } html.dmu-lock-scroll, body.dmu-lock-scroll { overflow: hidden !important; } body.dmu-mobile-enabled { padding-top: var(--dmu-header-height) !important; padding-bottom: calc(var(--dmu-bottom-height) + var(--dmu-safe-bottom) + 12px) !important; background: #fff; } body.dmu-mobile-enabled.dmu-page-product { padding-top: var(--dmu-product-header-height) !important; padding-bottom: calc(76px + var(--dmu-safe-bottom) + 18px) !important; } body.dmu-mobile-enabled.dmu-page-immersive { padding-top: 0 !important; padding-bottom: 0 !important; } body.dmu-mobile-enabled > header, body.dmu-mobile-enabled .tp-header-area, body.dmu-mobile-enabled .tp-header-area-2, body.dmu-mobile-enabled .tp-header-area-3, body.dmu-mobile-enabled .tp-header-area-4, body.dmu-mobile-enabled .tp-header-area-5, body.dmu-mobile-enabled .tp-header-main, body.dmu-mobile-enabled .tp-header-bottom, body.dmu-mobile-enabled .tp-header-top { display: none !important; } body.dmu-mobile-enabled #tp-bottom-menu-sticky, body.dmu-mobile-enabled .tp-mobile-menu { display: none !important; } body.dmu-mobile-enabled .breadcrumb__area, body.dmu-mobile-enabled .breadcrumb__area-2, body.dmu-mobile-enabled .tp-breadcrumb-area, body.dmu-mobile-enabled .page-breadcrumb { display: none !important; } .dmu-root { display: contents; } .dmu-mobile-header { position: fixed; inset: 0 0 auto; z-index: 1055; height: var(--dmu-header-height); padding: 14px 16px; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid var(--dmu-line); box-shadow: 0 4px 18px rgba(16, 24, 40, 0.05); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-standard-header { display: flex; } body.dmu-page-product .dmu-product-header { display: grid; } body.dmu-page-immersive .dmu-mobile-header, body.dmu-page-immersive .dmu-bottom-nav, body.dmu-page-immersive .dmu-product-actions { display: none !important; } .dmu-search { position: relative; display: flex; flex: 1 1 auto; min-width: 0; height: 52px; } .dmu-search input { width: 100%; height: 52px !important; padding: 0 50px 0 16px !important; border: 1px solid #d9dde3 !important; border-radius: 0 !important; background: #fff !important; color: var(--dmu-ink) !important; font-size: 16px !important; line-height: 52px !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; } .dmu-search input:focus { border-color: #98a2b3 !important; outline: none; } .dmu-search button { position: absolute; top: 0; right: 0; display: grid; width: 48px; height: 52px; place-items: center; color: #475467; border: 0; background: transparent; } .dmu-search button svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .dmu-head-action, .dmu-product-cart { position: relative; display: grid; flex: 0 0 43px; width: 43px; height: 48px; place-items: center; color: #202831; text-decoration: none !important; } .dmu-head-action svg, .dmu-product-cart svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; } .dmu-head-action:active, .dmu-product-cart:active { transform: scale(0.95); } .dmu-badge { position: absolute; top: 0; right: -2px; display: inline-flex; min-width: 21px; height: 21px; padding: 0 5px; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 999px; background: var(--dmu-red); color: #fff; font-size: 11px; font-weight: 800; line-height: 17px; box-shadow: 0 2px 6px rgba(16, 24, 40, 0.2); } .dmu-badge[hidden] { display: none !important; } .dmu-wishlist-badge { display: none !important; } .dmu-product-header { height: var(--dmu-product-header-height); grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; padding: 0 12px; color: #fff; background: #070707; border-bottom: 0; box-shadow: none; } .dmu-product-header strong { overflow: hidden; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .dmu-product-back, .dmu-product-cart { display: grid; width: 48px; height: 48px; place-items: center; color: #fff; border: 0; background: transparent; } .dmu-product-back svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dmu-product-cart .dmu-badge { border-color: #070707; } .dmu-bottom-nav { position: fixed; inset: auto 0 0; z-index: 1050; height: calc(var(--dmu-bottom-height) + var(--dmu-safe-bottom)); padding: 8px 8px calc(7px + var(--dmu-safe-bottom)); align-items: stretch; justify-content: space-around; background: rgba(255, 255, 255, 0.98); border-top: 1px solid var(--dmu-line); box-shadow: 0 -7px 24px rgba(16, 24, 40, 0.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-bottom-nav { display: flex; } .dmu-bottom-nav a { display: flex; width: 20%; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 3px; color: #525866; font-size: 12px; font-weight: 500; line-height: 1.2; text-decoration: none !important; -webkit-tap-highlight-color: transparent; } .dmu-bottom-nav a svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .dmu-bottom-nav a[data-dmu-section="home"] svg path, .dmu-bottom-nav a.is-active[data-dmu-section="home"] svg path { fill: currentColor; } .dmu-bottom-nav a.is-active { color: #050505; font-weight: 700; } .dmu-bottom-nav a:active { transform: translateY(1px) scale(0.97); } .dmu-product-actions { position: fixed; inset: auto 0 0; z-index: 1060; min-height: calc(72px + var(--dmu-safe-bottom)); padding: 10px 12px calc(10px + var(--dmu-safe-bottom)); gap: 10px; background: rgba(255, 255, 255, 0.98); border-top: 1px solid #e6e8eb; box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } body.dmu-page-product .dmu-product-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dmu-product-actions button { display: flex; min-width: 0; height: 52px; padding: 0 13px; align-items: center; justify-content: center; gap: 8px; border: 1px solid #d6d9de; border-radius: 12px; font-size: 14px; font-weight: 750; line-height: 1.15; text-align: center; transition: transform 0.15s ease, opacity 0.15s ease; } .dmu-product-actions button:active { transform: scale(0.98); } .dmu-product-actions button:disabled, .dmu-product-actions button.is-disabled { cursor: not-allowed; opacity: 0.5; } .dmu-product-actions .dmu-add-cart { color: #121212; background: #fff; } .dmu-product-actions .dmu-add-cart svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .dmu-product-actions .dmu-buy-now { color: #fff; border-color: #050505; background: #050505; } /* Halaman produk */ body.dmu-page-product .tp-product-details-area { padding-top: 0 !important; } body.dmu-page-product .tp-product-details-top .container, body.dmu-page-product .tp-product-details-bottom .container, body.dmu-page-product .tp-related-product .container { padding-right: 12px !important; padding-left: 12px !important; } body.dmu-page-product .tp-product-details-thumb-wrapper { margin-right: 0 !important; margin-bottom: 18px; } body.dmu-page-product .tp-product-details-title { font-size: 23px !important; line-height: 1.3 !important; } body.dmu-page-product .tp-product-details-sticky-actions { display: none !important; } body.dmu-page-product .product-form .tp-product-details-add-to-cart, body.dmu-page-product .product-form .tp-product-details-action-wrapper > .tp-product-details-buy-now-btn { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } body.dmu-page-product .tp-product-details-action-item-wrapper { display: block !important; } body.dmu-page-product .tp-product-details-quantity { width: 100%; } body.dmu-page-product .tp-product-quantity { margin-right: 0 !important; } /* Halaman keranjang */ body.dmu-page-cart { background: #f7f1eb; } body.dmu-page-cart .tp-cart-area { padding-top: 18px !important; padding-bottom: 32px !important; background: #f7f1eb; } body.dmu-page-cart .tp-cart-area > .container { width: 100%; max-width: none; padding-right: 14px !important; padding-left: 14px !important; } .dmu-cart-heading { display: flex; margin: 4px 2px 18px; align-items: center; justify-content: space-between; gap: 16px; } .dmu-cart-heading h1 { margin: 0; color: #17191c; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; } .dmu-cart-clear { padding: 7px 0; color: #7b7f87; border: 0; background: transparent; font-size: 14px; font-weight: 600; } .dmu-cart-clear:disabled { opacity: 0.45; } body.dmu-page-cart .tp-cart-area .row { display: block; margin: 0; } body.dmu-page-cart .tp-cart-area .row > [class*="col-"] { width: 100%; max-width: none; padding: 0; } body.dmu-page-cart .tp-cart-list { margin: 0 0 16px !important; overflow: visible !important; border: 0 !important; background: transparent; } body.dmu-page-cart .tp-cart-list table, body.dmu-page-cart .tp-cart-list tbody { display: block; width: 100%; } body.dmu-page-cart .tp-cart-list thead { display: none !important; } body.dmu-page-cart .tp-cart-list tbody { display: grid; gap: 14px; } body.dmu-page-cart .tp-cart-list tbody tr { position: relative; display: grid; min-height: 144px; padding: 16px; grid-template-columns: 92px minmax(0, 1fr) 38px; grid-template-areas: "product product remove" ". price remove" ". quantity remove"; column-gap: 12px; row-gap: 10px; overflow: hidden; border: 1px solid #ece8e2; border-radius: 22px; background: #fff; box-shadow: 0 5px 18px rgba(51, 42, 33, 0.04); } body.dmu-page-cart .tp-cart-list tbody tr td { display: block; width: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.dmu-page-cart .tp-cart-list td::before { display: none !important; } body.dmu-page-cart .cart-product-content { grid-area: product; display: grid !important; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; padding-right: 26px !important; } body.dmu-page-cart .cart-product-content > a { display: block; width: 92px; height: 92px; overflow: hidden; border-radius: 16px; background: #f7f7f8; } body.dmu-page-cart .cart-product-content > a img { width: 92px !important; height: 92px !important; max-width: none !important; margin: 0 !important; object-fit: contain; } body.dmu-page-cart .tp-cart-title { min-width: 0; } body.dmu-page-cart .tp-cart-title > a { display: -webkit-box; overflow: hidden; margin: 1px 0 6px !important; color: #1d2025; font-size: 15px; font-weight: 750; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.dmu-page-cart .tp-cart-title .small, body.dmu-page-cart .tp-cart-title .text-muted { color: #8a8f98 !important; font-size: 12px !important; line-height: 1.35; } body.dmu-page-cart .tp-cart-price { grid-area: price; align-self: center; padding-left: 0 !important; } body.dmu-page-cart .tp-cart-price span, body.dmu-page-cart .tp-cart-price .tp-product-price { color: #15171a !important; font-size: 16px !important; font-weight: 800 !important; } body.dmu-page-cart .tp-cart-quantity { grid-area: quantity; align-self: center; justify-self: start; } body.dmu-page-cart .tp-cart-quantity .tp-product-quantity, body.dmu-page-cart .tp-cart-quantity .tp-cart-input-wrapper { display: grid !important; min-width: 112px; height: 44px; margin: 0 !important; padding: 0 !important; grid-template-columns: 36px 40px 36px; align-items: center; border: 1px solid #e1e3e6; border-radius: 999px; background: #fff; } body.dmu-page-cart .tp-cart-quantity .tp-cart-minus, body.dmu-page-cart .tp-cart-quantity .tp-cart-plus { position: static !important; display: grid !important; width: 36px !important; height: 42px !important; place-items: center; color: #1e2228; transform: none !important; } body.dmu-page-cart .tp-cart-quantity input { width: 40px !important; height: 42px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #111418 !important; font-size: 16px !important; font-weight: 700; line-height: 42px !important; text-align: center; box-shadow: none !important; -moz-appearance: textfield; } body.dmu-page-cart .tp-cart-quantity input::-webkit-outer-spin-button, body.dmu-page-cart .tp-cart-quantity input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } body.dmu-page-cart .tp-cart-total { display: none !important; } body.dmu-page-cart .tp-cart-action { grid-area: remove; align-self: center; justify-self: end; } body.dmu-page-cart .tp-cart-action-btn { display: grid; width: 36px; height: 42px; place-items: center; color: #ef4753 !important; border: 0; background: transparent; } body.dmu-page-cart .tp-cart-action-btn svg { width: 23px; height: 23px; } body.dmu-page-cart .tp-cart-bottom { margin-bottom: 16px; padding: 18px; border: 1px solid #ece8e2; border-radius: 20px; background: #fff; } body.dmu-page-cart .tp-cart-coupon { margin-bottom: 0 !important; } body.dmu-page-cart .tp-cart-coupon-input-box label { display: flex; margin-bottom: 12px; align-items: center; gap: 7px; color: #1c2025; font-size: 15px; font-weight: 750; } body.dmu-page-cart .tp-cart-coupon-input { gap: 9px; } body.dmu-page-cart .tp-cart-coupon-input input { min-width: 0; height: 48px !important; margin: 0 !important; padding: 0 15px !important; border: 1px solid #e0e2e5 !important; border-radius: 999px !important; background: #fbfaf8 !important; font-size: 16px !important; line-height: 48px !important; } body.dmu-page-cart .tp-cart-coupon-input button { flex: 0 0 auto; height: 48px; padding: 0 20px !important; border: 1px solid #23272e; border-radius: 999px; background: #fff !important; color: #171a1f !important; font-size: 14px; font-weight: 750; } body.dmu-page-cart .tp-cart-checkout-wrapper { margin: 0 !important; padding: 22px 18px 18px !important; border: 1px solid #ece8e2; border-radius: 22px; background: #fff; box-shadow: none !important; } body.dmu-page-cart .tp-cart-checkout-top { margin-bottom: 16px; padding-bottom: 14px; } body.dmu-page-cart .tp-cart-checkout-top span { font-size: 15px !important; font-weight: 600 !important; } body.dmu-page-cart .tp-cart-checkout-total { margin-top: 16px !important; margin-bottom: 12px !important; padding-top: 16px; border-top: 1px solid #e7e9ec; } body.dmu-page-cart .tp-cart-checkout-total span:first-child { font-size: 20px !important; font-weight: 800 !important; } body.dmu-page-cart .tp-cart-checkout-total span:last-child { color: #101318 !important; font-size: 25px !important; font-weight: 850 !important; letter-spacing: -0.03em; } body.dmu-page-cart .tp-cart-checkout-wrapper > p.small { margin-bottom: 18px; color: #858a93; } body.dmu-page-cart .tp-cart-checkout-btn { display: flex !important; min-height: 54px; padding: 12px 20px !important; align-items: center; justify-content: center; border-radius: 999px; background: #050505 !important; color: #fff !important; font-size: 16px !important; font-weight: 750 !important; } body.dmu-page-cart .tp-cart-checkout-wrapper .btn-link { min-height: 50px; padding: 12px 20px; border: 1px solid #11151a; border-radius: 999px; color: #11151a !important; font-size: 15px; font-weight: 650; text-decoration: none; } body.dmu-page-cart .tp-cart-area .text-center.pt-50.pb-50 { margin-top: 20px; padding: 42px 18px !important; border-radius: 24px; background: #fff; } /* Jangan tampilkan tombol chat mengambang lama pada mobile. */ #digioto-live-chat-floating, #digioto-live-chat-panel { display: none !important; } /* Pastikan konten footer tidak tertutup navigasi. */ body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) footer { padding-bottom: calc(var(--dmu-bottom-height) + var(--dmu-safe-bottom)) !important; } } @media (max-width: 390px) { .dmu-mobile-header { gap: 7px; padding-right: 10px; padding-left: 10px; } .dmu-head-action { flex-basis: 39px; width: 39px; } .dmu-head-action svg { width: 29px; height: 29px; } .dmu-product-actions button { padding-right: 8px; padding-left: 8px; font-size: 13px; } body.dmu-page-cart .tp-cart-list tbody tr { padding: 14px; grid-template-columns: 82px minmax(0, 1fr) 34px; } body.dmu-page-cart .cart-product-content { grid-template-columns: 82px minmax(0, 1fr); gap: 11px; } body.dmu-page-cart .cart-product-content > a, body.dmu-page-cart .cart-product-content > a img { width: 82px !important; height: 82px !important; } body.dmu-page-cart .tp-cart-quantity .tp-product-quantity, body.dmu-page-cart .tp-cart-quantity .tp-cart-input-wrapper { min-width: 104px; grid-template-columns: 33px 38px 33px; } } /* -------------------------------------------------------------------------- * Digioto Mobile UI v1.1.1 — profile header, native AJAX search, shop toolbar * -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { :root { --dmu-header-height: 96px; } .dmu-standard-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 14px 12px; } body.dmu-mobile-enabled:not(.dmu-page-product):not(.dmu-page-immersive) .dmu-standard-header { display: grid; } .dmu-customer-summary { display: grid; min-width: 0; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; color: var(--dmu-ink); text-decoration: none !important; -webkit-tap-highlight-color: transparent; } .dmu-customer-summary:active { opacity: 0.78; } .dmu-customer-avatar { display: grid; width: 48px; height: 48px; overflow: hidden; place-items: center; border: 1px solid #eceff2; border-radius: 50%; background: linear-gradient(145deg, #f4f5f7, #e5e8ec); color: #31363d; font-size: 18px; font-weight: 800; box-shadow: 0 3px 10px rgba(16, 24, 40, 0.08); } .dmu-customer-avatar img { width: 100%; height: 100%; object-fit: cover; } .dmu-customer-copy { display: block; min-width: 0; } .dmu-customer-copy .dmu-greeting { display: block; overflow: hidden; margin-bottom: 2px; color: #8a9099; font-size: 12px; font-weight: 500; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .dmu-customer-copy strong { display: block; overflow: hidden; color: #11151a; font-size: 15px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .dmu-wave { display: inline-block; transform-origin: 70% 70%; animation: dmu-wave-hand 2.2s ease-in-out 1; } @keyframes dmu-wave-hand { 0%, 60%, 100% { transform: rotate(0deg); } 10% { transform: rotate(15deg); } 20% { transform: rotate(-9deg); } 30% { transform: rotate(15deg); } 40% { transform: rotate(-5deg); } 50% { transform: rotate(10deg); } } .dmu-header-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 3px; } .dmu-header-actions .dmu-head-action { flex-basis: 42px; width: 42px; height: 52px; } .dmu-search-trigger { padding: 0; border: 0; background: transparent; cursor: pointer; } .dmu-search-trigger svg { width: 34px; height: 34px; stroke-width: 1.8; } .dmu-image-action img { display: block; width: 40px; height: 40px; object-fit: contain; pointer-events: none; } .dmu-header-actions .dmu-chat-link img { width: 42px; height: 42px; } .dmu-product-cart.dmu-image-action img { width: 35px; height: 35px; filter: invert(1); } .dmu-header-actions .dmu-badge { top: 1px; right: -1px; } .dmu-search-overlay { position: fixed; inset: 0 0 calc(var(--dmu-bottom-height) + var(--dmu-safe-bottom)); z-index: 1065; display: none; overflow: hidden; background: #fff; opacity: 0; transform: translateY(-8px); transition: opacity 160ms ease, transform 160ms ease; } .dmu-search-overlay.is-open { display: block; opacity: 1; transform: translateY(0); } body.dmu-search-open .dmu-bottom-nav { z-index: 1070; } .dmu-search-form { position: relative; display: flex; width: 100%; height: 100%; flex-direction: column; margin: 0; background: #fff; } .dmu-search-topbar { display: grid; min-height: 84px; padding: 16px 14px 12px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border-bottom: 1px solid #eceef1; background: #fff; } .dmu-search-input-wrap { position: relative; display: flex; min-width: 0; height: 52px; align-items: center; border-radius: 18px; background: #f4eee8; } .dmu-search-input-wrap > svg { position: absolute; left: 14px; z-index: 1; width: 25px; height: 25px; fill: none; stroke: #555d66; stroke-width: 1.8; stroke-linecap: round; pointer-events: none; } .dmu-search-input-wrap input { width: 100%; height: 52px !important; padding: 0 45px 0 48px !important; border: 0 !important; border-radius: 18px !important; outline: 0 !important; background: transparent !important; color: #171b20 !important; font-size: 17px !important; line-height: 52px !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; } .dmu-search-input-wrap input::placeholder { color: #959aa2; } .dmu-search-input-wrap input::-webkit-search-cancel-button { display: none; } .dmu-search-clear { position: absolute; right: 10px; display: grid; width: 29px; height: 29px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: #6c7075; color: #fff; font-size: 22px; font-weight: 400; line-height: 1; } .dmu-search-clear[hidden] { display: none !important; } .dmu-search-close { height: 48px; padding: 0 2px; border: 0; background: transparent; color: #4e535a; font-size: 15px; font-weight: 650; } .dmu-search-form .bb-quick-search-results { position: static !important; display: none; width: 100% !important; min-width: 0 !important; max-height: none !important; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; border: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; -webkit-overflow-scrolling: touch; } .dmu-search-form .bb-quick-search-results.show { display: block; } .dmu-search-form .bb-quick-search-content, .dmu-search-form .bb-quick-search-list { display: block; width: 100%; } .dmu-search-form .bb-quick-search-item { display: grid !important; min-height: 106px; padding: 14px 18px !important; grid-template-columns: 78px minmax(0, 1fr); gap: 16px; align-items: center; border-bottom: 1px solid #f0f1f3 !important; color: #171a1f; text-decoration: none !important; } .dmu-search-form .bb-quick-search-item:active { background: #faf8f6; } .dmu-search-form .bb-quick-search-item-image { width: 78px !important; height: 78px !important; overflow: hidden; border-radius: 15px; background: #f6f6f7; } .dmu-search-form .bb-quick-search-item-image img { width: 100% !important; height: 100% !important; object-fit: contain; } .dmu-search-form .bb-quick-search-item-info { min-width: 0; } .dmu-search-form .bb-quick-search-item-name { display: -webkit-box; overflow: hidden; margin-bottom: 7px; color: #1a1d21; font-size: 15px; font-weight: 750; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .dmu-search-form .bb-quick-search-item-rating { display: none !important; } .dmu-search-form .bb-quick-search-item-price, .dmu-search-form .bb-quick-search-item-price .new-price { color: #111418 !important; font-size: 16px !important; font-weight: 800 !important; } .dmu-search-form .bb-quick-search-item-price .old-price { margin-left: 6px; color: #9ca1a8 !important; font-size: 12px !important; } .dmu-search-form .bb-quick-search-view-all { position: sticky; bottom: 0; padding: 13px 18px; border-top: 1px solid #eceef1; background: rgba(255, 255, 255, 0.97); text-align: center; backdrop-filter: blur(8px); } .dmu-search-form .bb-quick-search-view-all a { color: var(--dmu-red) !important; font-size: 14px; font-weight: 750; text-decoration: none !important; } .dmu-search-form .bb-quick-search-empty { padding: 50px 20px; color: #737981; font-size: 14px; text-align: center; } .dmu-search-form .bb-quick-search-highlight { padding: 0; border-radius: 0; background: transparent; color: inherit; font-weight: 850; } .dmu-bottom-nav a.dmu-nav-image-link img { display: block; width: 31px; height: 31px; object-fit: contain; opacity: 0.62; transition: opacity 150ms ease, transform 150ms ease; } .dmu-bottom-nav a.dmu-nav-image-link.is-active img { opacity: 1; transform: scale(1.06); } body.dmu-page-shop .tp-shop-area > .container { padding-top: 18px !important; } body.dmu-page-shop .tp-shop-top { margin: 0 0 22px !important; padding: 17px 15px 15px; border: 1px solid #ebe6e0; border-radius: 18px; background: #faf5ef; box-shadow: 0 4px 14px rgba(49, 42, 34, 0.035); } body.dmu-page-shop .tp-shop-top > .row { margin: 0 !important; row-gap: 14px; } body.dmu-page-shop .tp-shop-top > .row > [class*="col-"] { width: 100%; padding: 0 !important; } body.dmu-page-shop .tp-shop-top-left { display: flex !important; width: 100%; min-height: 42px; align-items: center !important; justify-content: space-between; gap: 12px; } body.dmu-page-shop .tp-shop-top-left::before { content: "Produk"; color: #171a1f; font-size: 23px; font-weight: 850; line-height: 1.1; letter-spacing: -0.025em; } body.dmu-page-shop .tp-shop-top-tab { margin-left: auto; } body.dmu-page-shop .tp-shop-top-tab .nav-tabs { display: flex; gap: 7px; border: 0; } body.dmu-page-shop .tp-shop-top-tab .nav-link { display: grid; width: 40px; height: 40px; padding: 0 !important; place-items: center; border: 1px solid #ded9d3 !important; border-radius: 50% !important; background: #fff !important; color: #858b92 !important; } body.dmu-page-shop .tp-shop-top-tab .nav-link.active { border-color: #bfc3c8 !important; color: #22272d !important; box-shadow: 0 2px 8px rgba(24, 27, 31, 0.07); } body.dmu-page-shop .tp-shop-top-tab .nav-link svg { width: 20px; height: 20px; } body.dmu-page-shop .tp-shop-top-result { display: none !important; } body.dmu-page-shop .tp-shop-top-right { display: grid !important; width: 100%; grid-template-columns: auto minmax(112px, 145px) minmax(0, 1fr) auto; gap: 9px; align-items: center; justify-content: stretch !important; } body.dmu-page-shop .tp-shop-top-right::before { content: "Urutkan:"; color: #72777e; font-size: 13px; font-weight: 600; white-space: nowrap; } body.dmu-page-shop .tp-shop-top-select { width: auto !important; margin: 0 !important; } body.dmu-page-shop .tp-shop-top-select.sort-by { display: none !important; } body.dmu-page-shop .tp-shop-top-select select, body.dmu-page-shop .tp-shop-top-select .nice-select { width: 100% !important; min-width: 0 !important; height: 42px !important; margin: 0 !important; padding: 0 35px 0 13px !important; border: 1px solid #e0ddd9 !important; border-radius: 13px !important; background: #fff !important; color: #30343a !important; font-size: 13px !important; line-height: 40px !important; box-shadow: none !important; } body.dmu-page-shop .tp-shop-top-select .nice-select .list { min-width: 180px; } body.dmu-page-shop .dmu-shop-result-copy { min-width: 0; color: #7a7f86; font-size: 12px; font-weight: 500; line-height: 1.35; text-align: right; } body.dmu-page-shop .tp-shop-top-filter { margin: 0 !important; } body.dmu-page-shop .tp-filter-btn { display: grid !important; width: 42px; height: 42px; min-width: 42px; padding: 0 !important; place-items: center; border-radius: 12px !important; font-size: 0 !important; } body.dmu-page-shop .tp-filter-btn span { margin: 0 !important; } body.dmu-page-shop .tp-filter-btn svg { width: 19px; height: 19px; } } @media (max-width: 389.98px) { .dmu-standard-header { padding-right: 8px; padding-left: 9px; } .dmu-customer-summary { grid-template-columns: 42px minmax(0, 1fr); gap: 8px; } .dmu-customer-avatar { width: 42px; height: 42px; font-size: 16px; } .dmu-customer-copy .dmu-greeting { font-size: 10.5px; } .dmu-customer-copy strong { font-size: 13px; } .dmu-header-actions { gap: 0; } .dmu-header-actions .dmu-head-action { flex-basis: 38px; width: 38px; } .dmu-search-trigger svg { width: 30px; height: 30px; } .dmu-image-action img, .dmu-header-actions .dmu-chat-link img { width: 37px; height: 37px; } body.dmu-page-shop .tp-shop-top-right { grid-template-columns: auto minmax(100px, 132px) minmax(0, 1fr) auto; gap: 6px; } body.dmu-page-shop .dmu-shop-result-copy { font-size: 10.5px; } } /* * v1.1.1 — penyempurnaan Shop mobile * - kontrol toolbar tidak saling bertumpuk pada layar 360–430 px * - tombol filter mempunyai baris sendiri * - kartu produk hanya menampilkan ikon wishlist */ @media (max-width: 767.98px) { body.dmu-page-shop .tp-shop-top { padding: 16px 14px 14px; } body.dmu-page-shop .tp-shop-top > .row { row-gap: 12px; } body.dmu-page-shop .tp-shop-top-left { min-height: 40px; } body.dmu-page-shop .tp-shop-top-left::before { font-size: 21px; } body.dmu-page-shop .tp-shop-top-tab .nav-link { width: 38px; height: 38px; } body.dmu-page-shop .tp-shop-top-right { display: grid !important; grid-template-columns: auto minmax(108px, 1fr) minmax(88px, auto); grid-template-areas: "sort-label sort-control result" "filter filter filter"; column-gap: 8px; row-gap: 10px; align-items: center; } body.dmu-page-shop .tp-shop-top-right::before { grid-area: sort-label; align-self: center; font-size: 12px; } body.dmu-page-shop .tp-shop-top-select:not(.sort-by) { grid-area: sort-control; min-width: 0; } body.dmu-page-shop .dmu-shop-result-copy { grid-area: result; max-width: 112px; justify-self: end; font-size: 11px; line-height: 1.35; text-align: right; overflow-wrap: anywhere; } body.dmu-page-shop .tp-shop-top-filter { grid-area: filter; width: 100%; } body.dmu-page-shop .tp-filter-btn { display: flex !important; width: 100%; height: 38px; min-width: 0; padding: 0 14px !important; align-items: center; justify-content: center; gap: 7px; border: 1px solid #d9d5cf !important; border-radius: 11px !important; background: #fff !important; color: #252a30 !important; font-size: 12px !important; font-weight: 700; line-height: 1; box-shadow: none !important; } body.dmu-page-shop .tp-filter-btn span { display: inline-flex; align-items: center; justify-content: center; } body.dmu-page-shop .tp-filter-btn svg { width: 17px; height: 17px; } /* Sembunyikan compare, quick view/mata, dan action samping lain. Tombol wishlist tetap memakai fungsi asli theme. */ body.dmu-page-shop .tp-shop-area .tp-product-action button:not([data-bb-toggle="add-to-wishlist"]), body.dmu-page-shop .tp-shop-area .tp-product-action-2 button:not([data-bb-toggle="add-to-wishlist"]), body.dmu-page-shop .tp-shop-area .tp-product-action-3 button:not([data-bb-toggle="add-to-wishlist"]) { display: none !important; } body.dmu-page-shop .tp-shop-area .tp-product-action-item, body.dmu-page-shop .tp-shop-area .tp-product-action-item-2, body.dmu-page-shop .tp-shop-area .tp-product-action-item-3 { gap: 0 !important; } body.dmu-page-shop .tp-shop-area .tp-product-action, body.dmu-page-shop .tp-shop-area .tp-product-action-2, body.dmu-page-shop .tp-shop-area .tp-product-action-3 { height: auto !important; min-height: 0 !important; } } @media (max-width: 389.98px) { body.dmu-page-shop .tp-shop-top-right { grid-template-columns: auto minmax(96px, 1fr) minmax(78px, auto); column-gap: 6px; } body.dmu-page-shop .tp-shop-top-select select, body.dmu-page-shop .tp-shop-top-select .nice-select { padding-right: 29px !important; padding-left: 10px !important; font-size: 12px !important; } body.dmu-page-shop .dmu-shop-result-copy { max-width: 92px; font-size: 10px; } } /* * v1.1.2 — posisi wishlist dan footer mobile * - wishlist berada di sudut kanan atas gambar produk * - Sidebar Footer Atas, Utama, dan Bawah tidak ditampilkan pada mobile */ @media (max-width: 767.98px) { /* Footer Atas (newsletter), Footer Utama, dan Footer Bawah khusus mobile. */ body.dmu-mobile-enabled .tp-subscribe-area, body.dmu-mobile-enabled footer, body.dmu-mobile-enabled .tp-footer-area, body.dmu-mobile-enabled .tp-footer-top, body.dmu-mobile-enabled .tp-footer-bottom { display: none !important; } /* Area gambar menjadi acuan absolut untuk tombol wishlist. */ body.dmu-page-shop .tp-shop-area .tp-product-thumb, body.dmu-page-shop .tp-shop-area .tp-product-thumb-2, body.dmu-page-shop .tp-shop-area .tp-product-thumb-3, body.dmu-page-shop .tp-shop-area .tp-product-thumb-4, body.dmu-page-shop .tp-shop-area .tp-product-thumb-5 { position: relative !important; } /* Pindahkan container action ke pojok kanan atas gambar produk. */ body.dmu-page-shop .tp-shop-area .tp-product-action, body.dmu-page-shop .tp-shop-area .tp-product-action-2, body.dmu-page-shop .tp-shop-area .tp-product-action-3, body.dmu-page-shop .tp-shop-area .tp-product-action-4, body.dmu-page-shop .tp-shop-area .tp-product-action-5 { position: absolute !important; inset: 10px 10px auto auto !important; z-index: 6 !important; width: auto !important; height: auto !important; min-height: 0 !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } body.dmu-page-shop .tp-shop-area .tp-product-action-item, body.dmu-page-shop .tp-shop-area .tp-product-action-item-2, body.dmu-page-shop .tp-shop-area .tp-product-action-item-3 { display: flex !important; width: auto !important; height: auto !important; gap: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; } /* Hanya wishlist yang terlihat, berbentuk tombol bulat seperti referensi. */ body.dmu-page-shop .tp-shop-area button[data-bb-toggle="add-to-wishlist"] { display: grid !important; width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; place-items: center !important; color: #20262d !important; border: 1px solid rgba(205, 209, 214, 0.92) !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.96) !important; line-height: 1 !important; box-shadow: 0 3px 10px rgba(16, 24, 40, 0.13) !important; transform: none !important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } body.dmu-page-shop .tp-shop-area button[data-bb-toggle="add-to-wishlist"] svg { width: 20px !important; height: 20px !important; transform: none !important; } body.dmu-page-shop .tp-shop-area button[data-bb-toggle="add-to-wishlist"].active { color: var(--dmu-red) !important; border-color: rgba(239, 27, 45, 0.28) !important; background: #fff !important; } body.dmu-page-shop .tp-shop-area button[data-bb-toggle="add-to-wishlist"] .tp-product-tooltip { display: none !important; } /* Badge diskon/stok tetap berada di sisi kiri agar tidak bertabrakan. */ body.dmu-page-shop .tp-shop-area .tp-product-badge, body.dmu-page-shop .tp-shop-area .tp-product-badge-2, body.dmu-page-shop .tp-shop-area .tp-product-badge-3, body.dmu-page-shop .tp-shop-area .tp-product-badge-4, body.dmu-page-shop .tp-shop-area .tp-product-badge-5 { inset-inline-start: 10px !important; inset-inline-end: auto !important; left: 10px !important; right: auto !important; } } /* * v1.1.3 — perbaikan isolasi desktop * Search overlay mobile tidak boleh muncul pada layar >= 768px. */