.
/* ============================================================
CUSTOM CSS — CLEAN & OPTIMIZED
Duplikat dihapus, struktur dirapikan, modal diseragamkan
============================================================ */
/* ── Base form fixes ── */
.form-group label[class~="required"]:after { content: "*"; color: #ff0000; }
.form-control-select { background-color: #fff; }
.form-control { color: #333; }
.btn-primary { border-width: 2px; }
.btn span { vertical-align: unset; }
.input-group-btn > .btn { font-size: .75rem; }
.form-group.form-group-small label,
.st_form_item_password label,
label.required,
.form-control-label { font-weight: 700 !important; color: #333333 !important; font-size: 18px !important; }
.form-group.form-group-small label,
.st_form_item_password label { margin-bottom: 0; }
label.required { margin-bottom: 8px !important; display: inline-block !important; }
a.font-weight-bold { font-weight: 700; font-size: 18px; }
button, input, select, textarea { padding: 5px; }
/* ============================================================
TYPOGRAPHY — FONTS
============================================================ */
@font-face {
font-family: 'Urbanist';
font-display: swap;
}
@font-face {
font-family: 'Open Sans';
font-display: swap;
}
span.elementor-button-text { font-weight: 700 !important; }
h1, .h1 {
font-family: 'Urbanist', sans-serif !important;
font-weight: 800;
font-size: 36px;
line-height: 1.2 !important;
color: #333333;
}
@media (max-width: 1366px) { h1, .h1 { font-size: 32px; } }
@media (max-width: 809px) { h1, .h1 { font-size: 26px; } }
h2, .h2 {
font-family: 'Urbanist', sans-serif !important;
font-weight: 900;
font-size: 28px;
line-height: 1.2 !important;
color: #333333;
}
@media (max-width: 1366px) { h2, .h2 { font-size: 24px; } }
@media (max-width: 809px) { h2, .h2 { font-size: 21px; } }
h3:not(.s_title_block), .h3 {
font-family: 'Urbanist', sans-serif !important;
font-weight: 900 !important;
font-size: 24px !important;
line-height: 1.2 !important;
color: #333333;
}
@media (max-width: 1366px) { h3:not(.s_title_block), .h3 { font-size: 21px !important; } }
@media (max-width: 809px) { h3:not(.s_title_block), .h3 { font-size: 18px !important; } }
/* Product slider/grid title */
h3.s_title_block.flex_child,
h3.s_title_block.flex_child a {
font-family: 'Open Sans', sans-serif !important;
font-weight: 400 !important;
font-size: 16px !important;
line-height: 1.2 !important;
}
@media (max-width: 809px) { h3.s_title_block, h3.s_title_block a { font-size: 14px !important; } }
/* Category title (text-2) */
h3.s_title_block.text-2,
h3.s_title_block.text-2 a {
font-family: 'Open Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 18px !important;
line-height: 1.3 !important;
color: #333333 !important;
text-decoration: none !important;
}
h4, .h4 {
font-family: 'Open Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 18px !important;
line-height: 1.2 !important;
}
@media (max-width: 1366px) { h4, .h4 { font-size: 16px !important; } }
h6.page_heading {
font-family: 'Urbanist', sans-serif !important;
font-weight: 600;
font-size: 1.2rem;
}
h6.fs_lg.heading_color.heading_font {
font-family: 'Urbanist', sans-serif !important;
font-weight: 900 !important;
font-size: 24px !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
margin-bottom: 15px !important;
color: #333333 !important;
display: block !important;
}
.visuallyhidden {
display: none;
}
/* Brand Menu */
.stmenu_sub #st_menu_column_14 a {
font-weight: normal;
text-transform: capitalize;
font-size: 18px;
}
/* p,
.cms_content p,
.style_content p,
.page-content p,
div.style_content p,
section#content p {
font-size: 18px !important;
line-height: 1.7 !important;
color: #333333 !important;
font-family: 'Open Sans', sans-serif !important;
} */
/* ============================================================
MY ACCOUNT
============================================================ */
.myacount_dashbord_list { margin-left: -5px; margin-right: -5px; }
.myacount_dashbord_list .list-group-item { margin: 0; padding: 5px; width: 33.3333%; border: none; }
.myacount_dashbord_list .list-group-item a { display: block; padding: 12px 0; border: 1px solid #d9d9d9; font-size: 18px !important; }
.list-group-item, .fl, .li_fl li, .fr { font-size: 18px; }
@media (max-width: 767px) { .myacount_dashbord_list .list-group-item { width: 50%; } }
@media (max-width: 479px) { .myacount_dashbord_list .list-group-item { width: 100%; } }
/* ============================================================
SLIDER ARROWS
============================================================ */
.swiper-button-lr.swiper-navigation-rectangle .swiper-button { border-radius: 0; }
.products_slider .swiper-button-lr.swiper-navigation-rectangle .swiper-button { background: rgba(0,0,0,0.5); }
.products_slider .swiper-button-lr.swiper-navigation-rectangle .swiper-button:hover { background: rgba(0,0,0,0.75); }
.swiper-button-lr .swiper-button i,
.swiper-button-lr.swiper-navigation-rectangle .swiper-button-next i,
.swiper-button-lr.swiper-navigation-rectangle .swiper-button-prev i { width: 40px; height: 40px; line-height: 40px; font-size: 14px; }
/* ============================================================
PRODUCT IMAGE HOVER
============================================================ */
.pro_img_hover_scale:hover { transform: none; }
.pro_img_hover_scale:hover img { transform: scale(1.1); transition: all .6s; }
/* ============================================================
LOYALTY POINTS
============================================================ */
#module-loyaltyeditpoints-points h3.page_heading { margin-bottom: 0.5rem; color: #444; font-weight: 400; }
#module-loyaltyeditpoints-points th { border-color: #f2f2f2; }
#lrp-widget { padding: 0 !important; margin-top: 20px !important; display: block !important; clear: both; font-size: 18px; }
/* ============================================================
FEATURED CATEGORIES
============================================================ */
.featured_categories_list { justify-content: center; overflow: hidden; }
.featured_categories_list img { transition: transform 0.3s ease; display: block; }
.featured_categories_list img:hover { transform: scale(1.1); }
/* ============================================================
BRAND SLIDER
============================================================ */
.pro_outer_box:hover,
.pro_outer_box .item:hover { background: transparent !important; background-color: transparent !important; }
.brands_slider_item { border: 0 !important; }
/* ============================================================
MANUAL BRAND SLIDER
============================================================ */
.brands .swiper_wraper figure {
margin: 0 !important;
}
.brands .swiper_wraper a {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.brands .swiper_wraper img {
max-height: 100px;
}
.brands .swiper_wraper img:hover {
transform: scale(1.1);
}
/* ============================================================
DOT NAVIGATOR (SWIPER / TP / OWL)
============================================================ */
.elementor-widget-container .swiper,
.elementor-widget-container .swiper-container {
padding-bottom: 40px !important;
overflow-x: hidden !important;
overflow-y: visible !important;
max-width: 100% !important;
position: relative !important;
}
.elementor-widget-container .swiper-pagination {
bottom: 5px !important; width: 100% !important;
display: flex !important; justify-content: center !important;
position: absolute !important; left: 0 !important; right: 0 !important;
}
.swiper-pagination-bullet, .tp-bullet, .owl-dot {
width: 15px !important; height: 8px !important;
background: #CCCCCC !important; border-radius: 50% !important;
margin: 0 3px !important; opacity: 1 !important;
transform: rotate(-30deg) !important; transition: 0.3s !important;
box-shadow: none !important; cursor: pointer !important; background-image: none !important;
}
.swiper-pagination-bullet-active, .swiper-pagination-bullet:hover,
.tp-bullet.selected, .tp-bullet:hover, .owl-dot.active {
background: #FECD06 !important;
transform: rotate(-30deg) scale(1.1) !important;
}
.swiper-pagination-bullet::before,
.swiper-pagination-bullet::after,
.swiper-pagination span::before,
.swiper-pagination span::after { content: none !important; display: none !important; }
@media (max-width: 1366px) {
.swiper-pagination-bullet, .tp-bullet, .owl-dot { width: 12px !important; height: 6px !important; margin: 0 2px !important; }
}
@media (max-width: 809px) {
.swiper-pagination-bullet, .tp-bullet, .owl-dot { width: 10px !important; height: 5px !important; margin: 0 2px !important; }
.elementor-widget-container .swiper-pagination { bottom: 2px !important; }
}
/* ============================================================
REVOLUTION SLIDER ARROWS
============================================================ */
.tp-leftarrow.gyges, .tp-rightarrow.gyges {
width: 32px !important; height: 32px !important;
background: #F4D20F !important; border-radius: 50% !important;
display: flex !important; align-items: center !important; justify-content: center !important;
line-height: 32px !important; z-index: 999 !important;
transition: none !important; transform: none !important;
border: none !important; visibility: visible !important; opacity: 0.75 !important;
}
.tp-leftarrow.gyges { left: 30px !important; }
.tp-rightarrow.gyges { right: 30px !important; left: auto !important; }
.tp-leftarrow.gyges:before, .tp-rightarrow.gyges:before {
content: "" !important; display: block !important;
width: 10px !important; height: 10px !important;
border-top: 2px solid #333 !important; border-right: 2px solid #333 !important;
position: absolute !important; top: 50% !important; left: 50% !important;
}
.tp-leftarrow.gyges:before { transform: translate(-30%, -50%) rotate(-135deg) !important; }
.tp-rightarrow.gyges:before { transform: translate(-70%, -50%) rotate(45deg) !important; }
.tp-leftarrow.gyges:hover, .tp-rightarrow.gyges:hover { background-color: #CAAF16 !important; border-color: #CAAF16 !important; opacity: 1 !important; }
.tp-leftarrow.gyges:hover:before, .tp-rightarrow.gyges:hover:before { border-color: #333333 !important; }
.tp-arrows.gyges { background: none !important; width: 100% !important; }
/* ============================================================
PRODUCT STICKER (NEW / SALE)
============================================================ */
.st_sticker_1,
.st_sticker_2::before {
display: flex !important; align-items: center !important; justify-content: center !important;
width: 55px !important; height: 24px !important;
font-size: 16px !important; font-weight: 700 !important;
text-transform: uppercase !important; line-height: 1 !important;
border-radius: 0 30px 30px 0 !important;
padding: 0 !important; margin: 0 !important;
white-space: nowrap !important; border: none !important; box-shadow: none !important;
position: absolute !important;
}
.st_sticker_1 { background-color: #FFD600 !important; color: #333333 !important; top: 0 !important; left: 0 !important; z-index: 10 !important; }
.st_sticker_2 { visibility: hidden !important; position: absolute !important; top: 0 !important; left: 0 !important; margin-top: 28px !important; }
.st_sticker_2::before { content: "SALE" !important; visibility: visible !important; background-color: #FF4242 !important; color: #FFFFFF !important; }
/* ============================================================
PRODUCT CARD — HOVER OVERLAY
============================================================ */
.pro_first_box .product_img_link { position: relative; display: block; overflow: hidden; }
.pro_first_box .product_img_link::after {
content: "VIEW DETAILS";
position: absolute; bottom: 0; left: 0;
width: 100%; height: 32px; line-height: 32px;
background-color: #F4D20F; color: #333333;
font-family: 'Urbanist', sans-serif; font-weight: 700;
text-align: center; text-transform: uppercase;
font-size: 18px; letter-spacing: 0.5px;
border-top-left-radius: 25px; border-top-right-radius: 25px;
transform: translateY(100%); transition: transform 0.3s ease-in-out;
z-index: 10;
}
.pro_outer_box:hover .product_img_link::after { transform: translateY(0); }
.pro_outer_box:hover .product_img_link img { opacity: 0.9; transition: opacity 0.3s; }
.pro_first_box .hover_fly { display: none !important; }
/* Product hover background */
.pro_second_box.pro_block_align_1 { position: relative; }
.pro_outer_box:hover .pro_second_box.pro_block_align_1::before {
content: ""; position: absolute; top: 0; left: 0; right: 0;
background: #E5E5E5; z-index: 0;
}
.pro_second_box.pro_block_align_1 > * { position: relative; z-index: 1; }
.pro_list_manufacturer,
.flex_box.flex_start.mini_name,
.pro_list_reference,
.product-price-and-shipping { padding-left: 0; }
/* No stock — hide empty add-to-cart area */
.pro_cart_block .product-quantity.hide_main_cart_button .add { display: none !important; width: 0 !important; margin: 0 !important; padding: 0 !important; }
.pro_cart_block .product-quantity.hide_main_cart_button { width: auto !important; flex: 0 0 auto !important; }
/* ============================================================
PRODUCT PRICES
============================================================ */
.price { font-size: 16px !important; font-weight: bold !important; color: #333333 !important; }
#product .mar_b1.pro_price_block span.price { font-size: 28px !important; }
.st_discounted_price { color: #FF4242 !important; font-weight: bold !important; font-size: 16px !important; }
.regular-price { color: #333333 !important; text-decoration: line-through !important; font-weight: normal !important; font-size: 15px !important; margin-right: 5px !important; }
/*.product-price-and-shipping.pad_b6 {
border-bottom: 1px solid #333 !important; padding-bottom: 15px !important;
display: block !important; width: 100% !important; overflow: visible !important;
}*/
@media (min-width: 992px) {
.product_list.grid .product_list_item::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 90%;
height: 1px;
background-color: #333333;
}
.product-price-and-shipping {
border-bottom: none !important;
padding-bottom: 0 !important;
}
}
#product .mar_b1.pro_price_block,
#product .pro_price_block,
#product .product-prices,
#product .product-price,
#product .mar_b1 { border: none !important; box-shadow: none !important; outline: none !important; }
#product .steasy_divider,
#product .between_short_and_price { display: none !important; border: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }
@media (max-width: 1280px) {
.price { font-size: 14px !important; }
.st_discounted_price { font-size: 14px !important; }
.regular-price { font-size: 12px !important; }
}
@media (max-width: 991px) {
.product-price-and-shipping.pad_b6 {
display: flex !important; flex-direction: column !important;
align-items: flex-start !important; gap: 0 !important;
height: auto !important; min-height: 45px !important;
}
.product-price-and-shipping.pad_b6 .price.st_discounted_price {
display: block !important; width: 100% !important;
margin-bottom: 2px !important; font-size: 16px !important; order: 1 !important;
}
.product-price-and-shipping.pad_b6 .regular-price {
display: block !important; width: 100% !important;
margin-left: 0 !important; font-size: 14px !important;
line-height: 1.2 !important; opacity: 0.7; order: 2 !important;
}
}
@media (max-width: 767px) {
.price { font-size: 13px !important; }
.st_discounted_price { font-size: 13px !important; }
.regular-price { font-size: 12px !important; }
}
/* ============================================================
PRODUCT LIST — MISC
============================================================ */
.list-view-action-btn { display: none !important; }
h3.s_title_block.flex_child {
min-height: 44px !important; display: flex !important;
align-items: flex-start !important; margin-bottom: 5px !important; overflow: hidden !important;
}
.product_list.grid h3.s_title_block {
min-height: 40px !important; max-height: 40px !important; overflow: hidden !important;
display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
line-height: 1.3 !important;
}
.product_list.grid .pro_outer_box { display: flex !important; flex-direction: column !important; height: 100% !important; }
#js-product-list .product_count { font-size: 18px !important; }
/* ============================================================
PRODUCT SLIDER SECTION
============================================================ */
.products_slider .pro_second_box.pro_block_align_1 {
display: flex !important; flex-direction: column !important;
min-height: 210px !important; padding: 10px !important;
}
.products_slider h3.s_title_block.flex_child {
min-height: 60px !important; max-height: 60px !important;
margin-bottom: 10px !important; overflow: hidden !important; order: 1 !important;
}
.products_slider .pro_list_reference.pad_b6 {
order: 2 !important; margin-top: 5px !important; margin-bottom: 10px !important;
font-size: 16px !important; min-height: 45px !important; display: block !important;
}
.products_slider .pro_kuan_box {
order: 3 !important; margin-top: auto !important; width: 100% !important;
min-height: 50px !important; display: flex !important; align-items: flex-end !important;
}
/*
.products_slider .product-price-and-shipping.pad_b6 {
display: flex !important; flex-direction: row !important;
justify-content: flex-start !important; align-items: baseline !important;
gap: 8px !important; border-bottom: 1px solid #333333 !important;
padding-bottom: 5px !important; margin-bottom: 5px !important; width: 100% !important;
}*/
/*Border for all products with price or none*/
.products_slider .pro_outer_box.clearfix.medium_default {
border-bottom: 1px solid #333333 !important;
padding-bottom: 5px !important;
}
.products_slider .product-price-and-shipping.pad_b6 span { width: auto !important; display: inline-block !important; margin-right: 0 !important; }
.products_slider .regular-price { font-size: 14px !important; color: #333333 !important; text-decoration: line-through !important; opacity: 0.7; }
.products_slider .product-desc.pad_b6 { order: 4 !important; font-size: 16px !important; color: #333 !important; margin-top: 5px !important; }
.products_slider .swiper-button-next,
.products_slider .swiper-button-prev { top: 30% !important; transform: translateY(-50%) !important; }
div.pro_second_box > h3.s_title_block { font-weight: 700; font-size: 18px; }
@media (max-width: 991px) {
.products_slider .product-price-and-shipping.pad_b6 {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
}
.products_slider .product-price-and-shipping.pad_b6 .price.st_discounted_price {
display: block !important;
width: 100% !important;
order: 1 !important;
font-size: 14px !important;
margin-bottom: 0 !important;
}
.products_slider .product-price-and-shipping.pad_b6 .regular-price {
display: block !important;
width: 100% !important;
order: 2 !important;
margin-left: 0 !important;
margin-right: 0 !important;
font-size: 12px !important;
line-height: 1.2 !important;
}
}
/* ============================================================
HEADER — SEARCH
============================================================ */
#st_header .search_widget_form_inner.input-group-with-border .form-control { font-size: 18px; padding-left: 20px; }
.search_widget_form_inner { position: absolute !important; right: -300px !important; top: -20px !important; width: 615px !important; z-index: 9999 !important; background-color: #fff !important; }
#search_widget { position: relative !important; }
.search_widget .search_results {
position: absolute !important; top: 100% !important; left: 100% !important;
transform: translateX(-50%); width: 600px !important; max-width: 95vw;
z-index: 9999 !important; margin-top: 26px;
}
.search_widget .autocomplete-suggestions { width: 100% !important; }
#search_widget form input { width: 70%; margin-left: 10px; }
.material-icons.search { display: none; }
.search_widget_btn i.fto-search-1::before,
.search_widget_btn i[class*="fto-"]::before { font-size: 19px !important; }
@media (max-width: 1440px) {
.search_widget,
.search_widget > div,
.search_widget_form,
.search_widget_form_inner {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 1 1 100% !important;
flex-basis: 100% !important;
}
.search_widget_form_inner {
position: relative !important;
right: auto !important;
left: 0 !important;
top: auto !important;
transform: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.search_widget_form_inner input[type="text"],
.search_widget_form_inner input[type="search"],
.search_widget_form_inner .search_input,
.search_widget_form_inner input {
width: calc(100% - 50px) !important;
max-width: calc(100% - 50px) !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding-left: 16px !important;
padding-right: 16px !important;
margin-right: 0 !important;
margin-left: 0 !important;
float: left !important;
}
/* Suggestion sejajar persis dengan input */
.search_widget .search_results,
.search_widget .search-suggestions,
.search_widget .autocomplete-results,
.search_widget_form_inner + div,
.search_widget_form_inner ~ .search_results {
position: absolute !important;
left: 0 !important;
right: auto !important;
top: 100% !important;
width: calc(100% - 50px) !important;
max-width: calc(100% - 50px) !important;
min-width: 0 !important;
transform: none !important;
box-sizing: border-box !important;
margin-top: 2px !important;
}
.header-main,
.header-middle,
.header-container,
.top-bar,
[class*="header"],
[class*="topbar"],
[class*="top-bar"] {
flex-wrap: nowrap !important;
}
/* Search widget dibenar-benar dilebarkan */
.search_widget {
flex: 1 1 auto !important;
min-width: 600px !important;
max-width: 950px !important;
margin-left: -120px !important;
overflow: visible !important;
}
}
/* ── Fix: Search bar tablet alignment ── */
@media (min-width: 768px) and (max-width: 1024px) {
.search_widget_form_inner {
position: static !important;
right: auto !important;
top: auto !important;
width: 100% !important;
max-width: 100% !important;
}
#search_widget {
width: 100% !important;
}
.search_widget .search_results {
left: 0 !important;
transform: none !important;
width: 100% !important;
}
}
/* ── Fix: Forced Z-Index for Header & Search (Tablet) ── */
@media (min-width: 768px) and (max-width: 1024px) {
/* 1. Paksa semua pembungkus header ke lapisan terdepan */
header,
#st_header,
.header-container,
.elementor-location-header {
z-index: 9999 !important;
position: relative !important;
overflow: visible !important; /* Sangat penting agar dropdown tidak terpotong */
}
/* 2. Pastikan baris/row tempat search widget berada juga terlihat */
#st_header .row,
#st_header .container {
overflow: visible !important;
position: relative !important;
}
/* 3. Reset total untuk search widget */
#search_widget {
position: relative !important;
z-index: 10000 !important;
display: block !important;
}
.search_widget_form_inner {
position: relative !important;
z-index: 10001 !important;
background: #fff !important;
pointer-events: auto !important;
}
/* 4. Pastikan input field berada paling atas dan bisa diklik */
#search_widget form input[type="text"] {
position: relative !important;
z-index: 10002 !important;
pointer-events: auto !important;
background: #fff !important;
}
/* 5. Dropdown hasil pencarian */
.search_widget .search_results {
position: absolute !important;
top: calc(100% + 5px) !important;
left: auto !important;
right: 0 !important; /* Rata kanan, tidak pakai transform */
transform: none !important;
width: 400px !important;
max-width: 90vw !important;
z-index: 999999 !important; /* Sangat tinggi */
background: #ffffff !important;
border: 1px solid #ddd !important;
box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
border-radius: 8px !important;
margin-top: 0 !important;
display: block !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
}
}
#search_widget,
.search_widget {
position: relative !important;
overflow: visible !important;
z-index: 100000 !important;
}
/* Search bar di sidebar mobile — bulat dengan border */
#side_mobile_nav #search_widget form {
display: flex !important;
align-items: center !important;
border: 1px solid #CCCCCC !important;
border-radius: 25px !important;
overflow: hidden !important;
padding: 0 !important;
background: #fff !important;
margin: 0 15px 8px 15px !important;
}
#side_mobile_nav #search_widget form input[type="text"],
#side_mobile_nav #search_widget form input[name="s"] {
border: none !important;
border-radius: 25px 0 0 25px !important;
padding: 8px 15px !important;
font-size: 16px !important;
flex: 1 !important;
outline: none !important;
box-shadow: none !important;
width: 70% !important;
margin: 0 !important;
}
#side_mobile_nav #search_widget form button,
#side_mobile_nav #search_widget form input[type="submit"] {
border: none !important;
border-radius: 0 25px 25px 0 !important;
background-color: #F4D20F !important;
color: #333333 !important;
font-family: 'Urbanist', sans-serif !important;
font-weight: 700 !important;
font-size: 16px !important;
padding: 8px 15px !important;
cursor: pointer !important;
white-space: nowrap !important;
margin: 0 !important;
}
#side_mobile_nav #search_widget form button:hover {
background-color: #CAAF16 !important;
}
.search_widget .search_results,
.search_widget .autocomplete-suggestions,
.ui-autocomplete,
#search_widget .search_results,
.search-widget .search_results {
z-index: 999999 !important;
position: absolute !important;
background-color: #f2f2f2;
}
/* Pastikan search widget sendiri punya z-index tinggi */
#search_widget,
.search_widget,
.search_widget_form_inner {
z-index: 999999 !important;
}
/* Tablet fix — sama seperti di atas tapi spesifik */
@media (min-width: 768px) and (max-width: 1024px) {
.search_widget .search_results {
z-index: 999999 !important;
position: absolute !important;
top: calc(100% + 5px) !important;
left: 0 !important;
right: auto !important;
transform: none !important;
width: 100% !important;
min-width: 300px !important;
background: #ffffff !important;
border: 1px solid #ddd !important;
box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
}
}
/* Pastikan setiap item suggestion juga putih */
.search_widget .search_results .ac_odd,
.search_widget .search_results .ac_even,
.autocomplete-suggestions .autocomplete-suggestion,
.search_results .product-name,
.search_results li,
.search_results .item {
background: #ffffff !important;
background-color: #ffffff !important;
}
/* Hover item */
.autocomplete-suggestions .autocomplete-suggestion:hover,
.search_results li:hover,
.ac_results li:hover {
background: #f5f5f5 !important;
background-color: #f5f5f5 !important;
}
/* ============================================================
BANNER NOTCH
============================================================ */
.banner-notch { position: relative; overflow: hidden; }
.banner-notch::after {
content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%);
border-top: 20px solid transparent; border-bottom: 20px solid transparent;
border-right: 20px solid #ffffff; z-index: 2;
}
@media (max-width: 1024px) { .banner-notch::after { display: none !important; } }
/* ============================================================
BREADCRUMB
============================================================ */
.breadcrumb_wrapper { border-bottom: none !important; border-top: 1px solid #f2f2f2 !important;}
.breadcrumb_nav .navigation-pipe {
margin: 0 5px; display: inline-block; font-size: 18px !important;
visibility: hidden; position: relative; width: 10px;
}
.breadcrumb_nav .navigation-pipe::after {
content: "\f105" !important; font-family: "FontAwesome" !important;
font-size: 18px !important; visibility: visible; position: absolute;
top: 70%; left: 30%; transform: translate(0%, -70%);
font-weight: normal !important; color: #333;
}
.breadcrumb_nav ul li a span[itemprop="name"],
.breadcrumb_nav ul li span[itemprop="name"] { font-size: 18px !important; }
/* ============================================================
PAGE & CATEGORY HEADINGS
============================================================ */
.page_heading, .category_page_heading {
font-weight: 800 !important; text-transform: uppercase !important;
font-size: 36px !important; color: #333333 !important;
border: none !important; padding-bottom: 0 !important; margin-bottom: 10px !important;
}
#category-description { font-size: 18px !important; }
.title_block::after, .title_block_inner::after,
.page_heading::after, .category_page_heading::after,
.flex_child::after { content: none !important; display: none !important; border: none !important; margin-top: 30px !important;}
.general_bottom_border, .general_top_border { border-bottom: 0 !important; border-top: 0 !important; }
/* ============================================================
CATEGORY & SEARCH PAGE LAYOUT
============================================================ */
body.category #columns .row,
body.manufacturer #columns .row,
body#search #columns .row { display: flex !important; }
body.category #left_column,
body.manufacturer #left_column,
body#search #left_column { flex: 0 0 300px !important; max-width: 300px !important; }
body.category #center_column,
body.manufacturer #center_column,
body#search #center_column {
flex: 1 1 auto !important;
max-width: calc(100% - 300px) !important;
padding-left: 40px !important;
padding-right: 0 !important;
}
@media (max-width: 991px) {
body.category #center_column,
body.manufacturer #center_column,
body#search #center_column {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.product_list.grid .product_list_item,
.product_list_item {
border: none !important;
border-top: none !important;
border-bottom: none !important;
box-shadow: none !important;
}
/* Hapus semua border lama */
.product_list.grid .product-price-and-shipping.pad_b6 {
border-bottom: none !important;
}
.product_list.grid .product_list_item {
border-bottom: none !important;
position: relative !important;
padding-bottom: 20px !important;
margin-bottom: 5px !important;
}
/* Garis per produk via ::after, lebar 90% agar tidak nyambung */
.product_list.grid .product_list_item::after {
content: "" !important;
display: block !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 90% !important;
height: 1px !important;
background-color: #333333 !important;
}
/* Kolom kanan — geser garis mulai dari kiri sedikit */
.product_list.grid .product_list_item:nth-child(even)::after {
left: 5% !important;
width: 90% !important;
}
.product_list.grid .price {
font-size: 16px !important;
}
.product_list.grid .st_discounted_price {
font-size: 16px !important;
}
.product_list.grid .regular-price {
font-size: 14px !important;
}
}
#products .products.row > div { padding: 0 !important; }
#products .products.row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
body.category h3.s_title_block.flex_child {
display: block !important; white-space: normal !important;
word-wrap: break-word !important; max-width: 210px !important;
min-height: 60px !important; line-height: 1.3 !important; margin-bottom: 10px !important;
}
body.category h3.s_title_block.flex_child a { display: inline-block !important; width: 100% !important; }
body.category #products .product-miniature img {
width: 100% !important; max-height: 350px !important; object-fit: contain !important;
}
@media (max-width: 991px) {
body.category #left_column,
body#search #left_column {
flex: 0 0 auto !important; max-width: 300px !important;
width: 300px !important; padding: 0 10px !important; margin-left: 0 !important;
}
body.category #center_column,
body#search #center_column {
flex: 0 0 100% !important; max-width: 100% !important;
width: 100% !important; padding: 0 10px !important; margin-left: 0 !important;
}
#js-product-list .products.row { display: flex !important; flex-wrap: wrap !important; margin: 0 !important; }
.product_list.grid .product_list_item { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; padding: 6px !important; float: none !important; }
body.category #products .product-miniature img { max-height: 180px !important; object-fit: contain !important; }
body.category h3.s_title_block.flex_child { max-width: 100% !important; min-height: 50px !important; font-size: 13px !important; }
.view-details-btn { right: auto !important; bottom: auto !important; display: block !important; width: 100%; margin-top: 10px !important; text-align: center; }
.flex_box.flex_start.mini_name { overflow: visible !important; max-height: none !important; height: auto !important; }
body.category h3.s_title_block.flex_child,
h3.s_title_block.flex_child {
overflow: visible !important; max-height: none !important; min-height: unset !important;
display: block !important; -webkit-line-clamp: unset !important;
white-space: normal !important; word-wrap: break-word !important;
}
.product_list.grid h3.s_title_block { overflow: visible !important; max-height: none !important; -webkit-line-clamp: unset !important; display: block !important; }
div.request-quote.mar_b6,
div.request-quote.mar_b6 .ask_offer,
div.request-quote.mar_b6 fieldset.quote_ask_form { margin-left: 0 !important; padding-left: 0 !important; width: 100% !important; }
div.request-quote.mar_b6 .ask_offer .btn.btn-primary { margin-left: 0 !important; padding-left: 15px !important; }
.pro_cart_block .product-quantity.hide_main_cart_button + div.request-quote.mar_b6,
.hide_main_cart_button ~ div.request-quote.mar_b6 { margin-left: 0 !important; padding-left: 0 !important; }
}
/* ============================================================
CATEGORY SIDEBAR
============================================================ */
.block-categories .title_block_inner {
display: block !important; width: 100% !important;
font-weight: 800 !important; text-transform: uppercase !important;
font-size: 28px !important; color: #333333 !important;
border: none !important; padding: 0 !important; margin: 0 !important;
background: transparent !important; border-bottom: 1px solid #333333 !important;
}
.block-categories .title_block { border-bottom: none !important; }
#left_column .title_block_inner { font-family: 'Urbanist', sans-serif !important; }
li[data-depth="0"] > .acc_header .flex_child {
font-weight: 700 !important; text-transform: uppercase !important;
color: #333333 !important; font-size: 20px !important;
text-decoration: none !important; border: none !important;
}
li[data-depth="0"] { border-bottom: 1px solid #333333 !important; margin-bottom: 0 !important; }
li[data-depth="1"] .flex_child,
li[data-depth="2"] .flex_child,
.block-categories ul ul .flex_child {
font-weight: 400 !important; text-transform: capitalize !important;
color: #333 !important; font-size: 18px !important;
text-decoration: none !important; border: none !important;
padding-left: 0 !important; padding-top: 3px !important; padding-bottom: 3px !important; display: block !important;
}
li[data-depth="1"], li[data-depth="2"], .block-categories ul ul li { border-bottom: none !important; }
.category-top-menu ul li ul, .m-l-1, .m-x-1 { padding-bottom: 10px !important; }
li[data-depth="1"] .flex_child::before,
li[data-depth="2"] .flex_child::before,
.block-categories ul ul .flex_child::before {
content: "\f105" !important; font-family: "FontAwesome" !important;
margin-left: -15px !important; width: 15px !important; margin-right: 0 !important;
font-weight: normal !important; display: inline-block !important; color: #333333 !important;
}
li[data-depth="0"] .acc_icon {
display: flex !important; align-items: center !important; justify-content: center !important;
width: auto !important; height: auto !important; border: none !important; background: transparent !important;
}
li[data-depth="0"] .acc_icon i { display: none !important; }
li[data-depth="0"] .acc_icon::before {
content: "❯" !important; font-size: 18px !important; color: #333333 !important;
display: block !important; transition: transform 0.3s ease !important;
}
li[data-depth="0"] .acc_icon.collapsed::before { transform: rotate(90deg) !important; }
li[data-depth="0"] .acc_icon:not(.collapsed)::before { transform: rotate(-90deg) !important; }
.block-categories li.current > .acc_header .acc_icon::before,
.block-categories li.active > .acc_header .acc_icon::before,
.block-categories li.current_cate > .acc_header .acc_icon::before {
content: "❯" !important; transform: rotate(90deg) !important;
font-size: 18px !important; color: #333333 !important; display: block !important;
}
.block-categories li.current > .acc_header .acc_icon:not(.collapsed)::before,
.block-categories li.active > .acc_header .acc_icon:not(.collapsed)::before,
.block-categories li.current_cate > .acc_header .acc_icon:not(.collapsed)::before { transform: rotate(-90deg) !important; }
/* ============================================================
SIDEBAR FILTER (FACETS)
============================================================ */
.facet .facet-title {
font-weight: 900 !important; text-transform: uppercase !important;
font-size: 20px !important; color: #333333 !important;
padding-bottom: 10px !important; display: block !important; width: 100% !important;
}
#left_column #search_filters_wrapper .facet_filter_box a.search-link.flex_child { font-size: 18px !important; }
#left_column #search_filters_wrapper .facet_filter_item_li label.facet-label { display: flex !important; align-items: center !important; gap: 8px !important; }
#left_column #search_filters_wrapper .facet_filter_item_li .custom-input-box,
#left_column #search_filters_wrapper .custom-input-box { margin-top: 0 !important; }
#left_column #search_filters_wrapper .facet_filter_item_li a.search-link { display: inline-block !important; line-height: 1.4 !important; margin-top: 0 !important; }
#left_column #search_filters_wrapper .faceted-slider [id^="facet_label_"] { font-size: 18px !important; line-height: 1.2 !important; }
#left_column #search_filters_wrapper a.flex_child { display: inline-flex !important; align-items: center !important; transform: translateY(3px); }
#left_column #search_filters_wrapper label.facet-label { align-items: center !important; }
.ui-slider.ui-slider-horizontal { height: 2px !important; background: #CCCCCC !important; border: none !important; margin: 20px 10px !important; }
.ui-slider .ui-slider-range { background: #CCCCCC !important; border: none !important; }
.ui-slider .ui-slider-handle {
width: 16px !important; height: 16px !important;
background: #F4D20F !important; border: none !important; border-radius: 50% !important;
top: -7px !important; cursor: pointer !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; transition: transform 0.2s ease !important;
}
.ui-slider .ui-slider-handle:active,
.ui-slider .ui-slider-handle:hover { outline: none !important; transform: scale(1.2); }
.ui-slider-handle:focus { outline: none !important; }
.mar_r6 { display: none; }
/* ============================================================
SORT BY / PAGINATION / SWITCHER
============================================================ */
.products-sort-order.dropdown_wrap.mar_r1:before { content: "Sort By "; color: #333; font-size: 18px; }
.dropdown_tri { font-size: 18px; }
nav.paginaton_sample { display: none !important; }
.pagination {
display: flex !important; list-style: none !important;
padding: 0 !important; margin: 20px 0 !important;
align-items: center !important; gap: 8px !important;
}
ul.page-list { padding: 0 !important; margin: 0 !important; display: flex !important; list-style: none !important; }
.pagination li a, .pagination li span,
.page-list li a, .page-list li span {
display: flex !important; align-items: center !important; justify-content: center !important;
width: 32px !important; height: 32px !important; border-radius: 50% !important;
background-color: #f2f2f2 !important; color: #333333 !important;
font-family: 'Urbanist', sans-serif !important; font-size: 16px !important;
font-weight: 800 !important; text-decoration: none !important;
transition: all 0.2s ease !important; border: none !important; position: relative !important;
}
.pagination li.current span, .pagination li.active a,
.page-list li.current span { background-color: #F4D20F !important; color: #333333 !important; }
.pagination .next a::before, .pagination .next span::before {
content: "" !important; display: block !important; width: 8px !important; height: 8px !important;
border-right: 1.5px solid #333 !important; border-top: 1.5px solid #333 !important;
transform: rotate(45deg) !important; margin-left: -2px !important;
}
.pagination .prev a::before, .pagination .prev span::before {
content: "" !important; display: block !important; width: 8px !important; height: 8px !important;
border-left: 1.5px solid #333 !important; border-bottom: 1.5px solid #333 !important;
transform: rotate(45deg) !important; margin-left: 2px !important;
}
.pagination .next a i, .pagination .prev a i,
.pagination .next a::after, .pagination .prev a::after { display: none !important; content: none !important; }
/* ============================================================
FIX FINAL v5: Pagination — text-indent trick
============================================================ */
/* Sembunyikan SEMUA text dan icon dalam a */
.pagination .next a,
.pagination .prev a {
text-indent: -9999px !important;
overflow: hidden !important;
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
}
/* Sembunyikan i element sepenuhnya */
.pagination .next a i,
.pagination .prev a i {
text-indent: -9999px !important;
position: absolute !important;
left: -9999px !important;
}
/* Sembunyikan i::before */
.pagination .next a i::before,
.pagination .prev a i::before {
content: none !important;
}
/* Tampilkan arrow via ::after pada a */
.pagination .next a::after {
content: "" !important;
position: absolute !important;
display: block !important;
width: 8px !important;
height: 8px !important;
border-right: 1.5px solid #333 !important;
border-top: 1.5px solid #333 !important;
transform: rotate(45deg) !important;
left: 50% !important;
top: 50% !important;
margin-left: -5px !important;
margin-top: -4px !important;
text-indent: 0 !important;
}
.pagination .prev a::after {
content: "" !important;
position: absolute !important;
display: block !important;
width: 8px !important;
height: 8px !important;
border-left: 1.5px solid #333 !important;
border-bottom: 1.5px solid #333 !important;
transform: rotate(45deg) !important;
left: 50% !important;
top: 50% !important;
margin-left: -3px !important;
margin-top: -4px !important;
text-indent: 0 !important;
}
/* Hapus ::before buatan */
.pagination .next a::before,
.pagination .prev a::before {
content: none !important;
display: none !important;
}
/* Hide span */
.pagination .next a span,
.pagination .prev a span {
display: none !important;
}
.bottom_pagination.flex_box.flex_space_between { padding: 25px 0 !important; }
/* ============================================================
FIX: Related products slider — arrow kuning & icon putih
============================================================ */
.strelatedproducts_container .swiper-button,
.strelatedproducts_container .swiper-button-prev,
.strelatedproducts_container .swiper-button-next {
background-color: #F4D20F !important;
border-color: #F4D20F !important;
opacity: 1 !important;
visibility: visible !important;
display: flex !important;
}
.strelatedproducts_container .swiper-button i,
.strelatedproducts_container .swiper-button-prev i,
.strelatedproducts_container .swiper-button-next i,
.strelatedproducts_container .swiper-button::before,
.strelatedproducts_container .swiper-button::after {
color: #333333 !important;
border-color: #333333 !important;
}
.strelatedproducts_container .swiper-button:hover,
.strelatedproducts_container .swiper-button-prev:hover,
.strelatedproducts_container .swiper-button-next:hover {
background-color: #CAAF16 !important;
border-color: #CAAF16 !important;
}
/* ============================================================
FIX: Revolution Slider tp-bullets — restore & center
============================================================ */
/* Restore dot yang hilang */
.tp-bullets,
.tp-bullets.custom,
.tp-bullets.custom.horizontal {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.tp-bullet {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
background: #CCCCCC !important;
}
.tp-bullet.selected,
.tp-bullet:hover {
background: #FECD06 !important;
}
/* Hapus content none yang mungkin kena */
.tp-bullets::before,
.tp-bullets::after {
content: "" !important;
display: block !important;
}
.tp-bullet::before,
.tp-bullet::after {
content: none !important;
display: none !important;
}
/* Center position */
@media (max-width: 767px) {
.tp-bullets.custom.horizontal {
left: 50% !important;
transform: translateX(-50%) !important;
margin-left: 0 !important;
}
}
/* List/Grid switcher */
.list_grid_switcher .grid,
.list_grid_switcher .list {
font-size: 0 !important; color: transparent !important; background-color: transparent !important;
border: none !important; width: 22px !important; height: 22px !important;
display: inline-block; cursor: pointer;
background-repeat: no-repeat !important; background-size: 18px 18px !important;
background-position: center !important; margin-right: 6px !important;
transition: opacity 0.2s ease-in-out;
}
.list_grid_switcher .grid { background-image: url('data:image/svg+xml;utf8,') !important; }
.list_grid_switcher .grid.selected { background-image: url('data:image/svg+xml;utf8,') !important; }
.list_grid_switcher .list { background-image: url('data:image/svg+xml;utf8,') !important; }
.list_grid_switcher .list.selected { background-image: url('data:image/svg+xml;utf8,') !important; }
@media (max-width: 767px) {
.rev_slider_wrapper,
.rev_slider,
.fullwidthbanner-container {
overflow: visible !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.tp-bullets,
div.tp-bullets {
position: absolute !important;
bottom: 15px !important;
top: auto !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 9999 !important;
background: transparent !important;
background-color: transparent !important;
}
.tp-bullets .tp-bullet,
div.tp-bullets div.tp-bullet {
position: relative !important;
left: auto !important;
top: auto !important;
display: inline-block !important;
margin: 0 3px !important;
visibility: visible !important;
opacity: 1 !important;
flex-shrink: 0 !important;
background: rgba(255,255,255,0.6) !important;
}
.tp-bullets .tp-bullet.selected,
div.tp-bullets div.tp-bullet.selected {
background: #FECD06 !important;
}
}
/* ============================================================
LIST VIEW — PRODUCT CARD
============================================================ */
.products.product_list.list .product-desc,
.products.product_list.list .list-view-action-btn { display: none !important; }
.products.product_list.list .product-price-and-shipping.pad_b6 { border-bottom: none !important; }
.products.product_list.list .pro_first_box { flex: 0 0 142px !important; max-width: 142px !important; }
.products.product_list.list .pro_first_box .product_img_link { width: 142px !important; height: 142px !important; display: block !important; }
.products.product_list.list .pro_first_box img.front-image { width: 142px !important; height: 142px !important; object-fit: contain !important; }
.products.product_list.list .mini_name { flex: 1 1 auto !important; max-width: 100% !important; width: 100% !important; }
.products.product_list.list h3.s_title_block { width: 100% !important; max-width: 100% !important; }
.products.product_list.list h3.s_title_block a { display: block !important; width: 100% !important; }
.products.product_list.list h3.s_title_block.flex_child { min-height: auto !important; margin-bottom: 15px !important; }
.product_list.list .product_list_item { padding-bottom: 0 !important; }
.products.product_list.list .pro_outer_box { display: flex !important; align-items: flex-start !important; gap: 15px !important; }
.products.product_list.list .pro_second_box { padding-left: 0 !important; margin-left: 0 !important; position: relative !important; width: 100% !important; }
.products.product_list.list .product-price-and-shipping.pad_b6 { margin-top: 10px !important; }
.products.product_list.list .pro_first_box .product_img_link::after { content: none !important; display: none !important; }
.products.product_list.list .view-details-btn {
display: inline-block; position: absolute; right: 20px; top: 40px;
background-color: #F4D20F; color: #333333;
font-family: 'Urbanist', sans-serif; font-weight: 700; font-size: 18px;
padding: 10px 22px; border-radius: 30px; line-height: 1.2;
cursor: pointer; text-decoration: none; transition: background-color 0.25s ease; z-index: 10;
}
.products.product_list.list .view-details-btn:hover { background-color: #CAAF16; color: #333333; text-decoration: none; }
.products.product_list.list .product_list_item { border-bottom: 1px solid #333333 !important; }
.page-category #js-product-list .product_list.grid .product_list_item { border-top: none !important; }
/* ============================================================
PRODUCT DETAILS PAGE
============================================================ */
#product h1.product_name { text-transform: uppercase; }
.product_name_wrap .product_name { font-family: 'Urbanist', sans-serif; font-size: 26px; font-weight: 800; line-height: 1.2; }
.pro_extra_info_brand { font-size: 18px; }
.product-reference div.pro_extra_info_content.flex_child {
font-size: 18px; color: #333333;
border-bottom: 1px solid #333333; padding-bottom: 10px; display: block;
}
.pro_extra_info_label { margin-right: 0 !important; }
section.pro_name_right { display: none !important; }
div.st_read_more_box { font-size: 18px; }
.accordion_more_info .mobile_tab { border-top: 1px solid #333333 !important; }
.accordion_more_info .mobile_tab .nav-item a,
.accordion_more_info .mobile_tab .tab-title,
.accordion_more_info .sttab_title {
font-family: 'Urbanist', sans-serif !important; font-size: 20px !important;
font-weight: 700 !important; color: #333333 !important; text-transform: uppercase !important;
display: flex !important; justify-content: space-between !important; align-items: center !important;
padding: 15px 0 !important; border-bottom: 1px solid #333333 !important; background: transparent !important;
}
.accordion_more_info .sttab_title::after,
.accordion_more_info .mobile_tab .tab-title::after {
content: "❯" !important; font-size: 18px !important; color: #333333 !important;
transform: rotate(90deg) !important; display: block !important; transition: transform 0.3s ease !important;
}
.accordion_more_info .sttab_title.active::after,
.accordion_more_info .mobile_tab .tab-title.active::after { transform: rotate(-90deg) !important; }
.mobile_tab_title { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 15px 0 !important; cursor: pointer !important; border-bottom: none !important; }
.mobile_tab_name { font-family: 'Urbanist', sans-serif !important; font-size: 24px !important; font-weight: 700 !important; color: #333333 !important; text-transform: uppercase !important; }
.mobile_tab_title a.opener::after {
content: "❯" !important; font-size: 18px !important; color: #333333 !important;
transform: rotate(90deg) !important; display: block !important; transition: transform 0.3s ease !important;
}
.tab-pane.st_open .mobile_tab_title a.opener::after { transform: rotate(-90deg) !important; }
.mobile_tab_title a.opener i,
.mobile_tab_title a.opener .grower { display: none !important; }
.accordion_more_info .tab-pane { border-bottom: 1px solid #333333 !important; }
.tab-pane-body { border-bottom: none !important; padding-bottom: 15px !important; }
.page-product #product .st_read_more_box,
.page-product #product .st_read_more_box p,
.page-product #product .st_read_more_box li,
.page-product #product .st_read_more_box span,
.page-product #product .st_read_more_box div { color: #333333 !important; }
.add_to_love.pro_right_item .btn_text,
.add_to_love.pro_right_item i { font-weight: normal !important; }
.add_to_love.pro_right_item .hover_fly_btn_inner { padding-bottom: 7px; }
.ask_offer .btn.btn-primary {
height: 42px !important; display: inline-flex !important;
align-items: center !important; justify-content: center !important;
padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important;
}
#product .ask_offer .btn.btn-primary { font-size: 20px !important; }
/* ============================================================
MEGA MENU
============================================================ */
.st_mega_menu_container .mu_level_2 ul { display: none !important; }
.st_mega_menu_container .mu_level_2 .is_parent::after { display: none !important; }
/* ============================================================
BUTTONS — GLOBAL
============================================================ */
.elementor-button span.elementor-button-text {
font-family: 'Urbanist', sans-serif !important;
font-weight: 700 !important; font-size: 18px !important;
line-height: 1.2 !important; letter-spacing: 0 !important;
}
/* Primary/Default button base */
.btn.btn-default,
.btn.btn-primary,
#SubmitLogin,
a.no_account.btn {
background-color: #F4D20F !important; border-color: #F4D20F !important; color: #444444 !important;
font-family: 'Urbanist', sans-serif !important; font-size: 20px !important; font-weight: 700 !important;
transition: all 0.3s ease !important; display: inline-flex; align-items: center; justify-content: center;
text-decoration: none !important; border-radius: 25px !important;
text-transform: uppercase !important;
}
.btn.btn-default:hover, .btn.btn-primary:hover, #SubmitLogin:hover {
background-color: #CAAF16 !important; border-color: #CAAF16 !important; color: #333333 !important;
}
.btn.btn-default i, .btn.btn-primary i,
.btn.btn-default svg, .btn.btn-primary svg { color: #444444 !important; fill: #444444 !important; margin-right: 8px; }
.btn.btn-default:hover i, .btn.btn-primary:hover i,
.btn.btn-default:hover svg, .btn.btn-primary:hover svg { color: #000000 !important; fill: #000000 !important; }
.quote-plus-button, .quote-minus-button { background-color: transparent !important; border: none !important; box-shadow: none !important; }
/* Sign Up & Submit active buttons (hover: black) */
button[data-link-action="save-customer"],
.btn.btn-primary.btn-large.js-submit-active.btn-spin.btn-full-width {
background-color: #F4D20F !important; border-color: #F4D20F !important; color: #444444 !important;
border-radius: 25px !important; transition: all 0.3s ease;
}
button[data-link-action="save-customer"] i, button[data-link-action="save-customer"] svg,
button[data-link-action="save-customer"] .material-icons,
.btn.btn-primary.btn-large.js-submit-active.btn-spin.btn-full-width i,
.btn.btn-primary.btn-large.js-submit-active.btn-spin.btn-full-width svg,
.btn.btn-primary.btn-large.js-submit-active.btn-spin.btn-full-width .material-icons { color: #444444 !important; fill: #444444 !important; }
button[data-link-action="save-customer"]:hover,
.btn.btn-primary.btn-large.js-submit-active.btn-spin.btn-full-width:hover {
background-color: #000000 !important; border-color: #000000 !important; color: #FFFFFF !important;
}
button[data-link-action="save-customer"]:hover i, button[data-link-action="save-customer"]:hover svg,
button[data-link-action="save-customer"]:hover .material-icons,
.btn.btn-primary.btn-large.js-submit-active.btn-spin.btn-full-width:hover i,
.btn.btn-primary.btn-large.js-submit-active.btn-spin.btn-full-width:hover svg,
.btn.btn-primary.btn-large.js-submit-active.btn-spin.btn-full-width:hover .material-icons { color: #000000 !important; fill: #000000 !important; }
/* Anchor btn.btn-primary (hover: black) */
a.btn.btn-primary { background-color: #F4D20F !important; border-color: #F4D20F !important; color: #444444 !important; transition: all 0.3s ease; }
a.btn.btn-primary i, a.btn.btn-primary svg, a.btn.btn-primary .material-icons { color: #444444 !important; fill: #444444 !important; }
a.btn.btn-primary:hover { background-color: #000000 !important; border-color: #000000 !important; color: #FFFFFF !important; }
a.btn.btn-primary:hover i, a.btn.btn-primary:hover svg, a.btn.btn-primary:hover .material-icons { color: #FFFFFF !important; fill: #FFFFFF !important; }
a.btn.btn-default[title="Continue shopping"] {
margin-bottom: 20px !important; margin-top: 10px !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: 6px !important; padding-left: 20px !important; padding-right: 24px !important; line-height: 1 !important;
}
a.btn.btn-default[title="Continue shopping"] i,
a.btn.btn-default[title="Continue shopping"] .material-icons,
a.btn.btn-default[title="Continue shopping"] svg {
display: flex !important; align-items: center !important; justify-content: center !important;
margin: 0 !important; line-height: 1 !important; font-size: 18px !important; vertical-align: middle !important;
}
/* ============================================================
FORMS — GENERAL
============================================================ */
.form_content_inner a, .form_content_inner a:link, .form_content_inner a:visited { color: #CAAF16 !important; text-decoration: none; }
.form_content_inner a.account-link.btn.btn-default.mb-3 {background-color: #fff !important; border: 2px solid #F4D20F !important; color: #333 !important; font-family: 'Urbanist', sans-serif !important;font-weight: 700 !important;border-radius: 25px !important;text-decoration: none !important;}
.form_content_inner a.account-link.btn.btn-default.mb-3:hover {
background-color: #F4D20F !important;
color: #333 !important;
}
.form_content_inner a:hover, .form_content_inner a:active { color: #9D8500 !important; text-decoration: underline; }
.form_content_inner.text-center { padding-left: 15px !important; padding-right: 15px !important; }
#content .page_heading, .page_heading.text-1 { text-align: left !important; margin-left: 0 !important; }
/* GDPR / Privacy */
.st_form_item_customer_privacy label.checkbox-inline,
.st_form_item_psgdpr label.checkbox-inline,
.st_form_item_newsletter label.checkbox-inline {
display: flex !important; flex-direction: row !important;
align-items: flex-start !important; gap: 12px !important;
margin-bottom: 15px !important; width: 100% !important;
}
.st_form_item_psgdpr .flex_child,
.st_form_item_customer_privacy .flex_child,
.st_form_item_newsletter .flex_child {
flex: 1 !important; display: block !important;
font-family: 'Open Sans', sans-serif !important; font-size: 18px !important;
font-weight: 400 !important; line-height: 1.4 !important;
color: #333333 !important; font-style: normal !important;
}
.st_form_item_psgdpr .flex_child::first-line,
.st_form_item_customer_privacy .flex_child::first-line,
.st_form_item_newsletter .flex_child::first-line { font-weight: 700 !important; color: #1a1a1a !important; }
.st_form_item_psgdpr .flex_child p, .st_form_item_psgdpr .flex_child span,
.st_form_item_customer_privacy .flex_child p, .st_form_item_customer_privacy .flex_child span,
.st_form_item_newsletter .flex_child em {
display: block !important; font-weight: 400 !important;
font-family: 'Open Sans', sans-serif !important; margin-top: 4px !important; font-style: normal !important;
}
.st_form_item_customer_privacy .flex_child a { color: #CAAF16 !important; font-weight: 400 !important; text-decoration: none !important; }
.st_form_item_psgdpr .custom-input-box,
.st_form_item_customer_privacy .custom-input-box,
.st_form_item_newsletter .custom-input-box { flex-shrink: 0 !important; display: block !important; }
.st_form_item_psgdpr .col-md-3.form-control-label,
.st_form_item_customer_privacy .col-md-3.form-control-label,
.st_form_item_newsletter .col-md-3.form-control-label { display: none !important; }
.st_form_item_psgdpr .col-md-6.js-input-column,
.st_form_item_customer_privacy .col-md-6.js-input-column,
.st_form_item_newsletter .col-md-6.js-input-column,
.st_form_item_newsletter .js-input-column { flex: 0 0 100% !important; max-width: 100% !important; padding: 10px !important; }
.st_form_item_psgdpr .flex_child::after,
.st_form_item_customer_privacy .flex_child::after { content: none !important; display: none !important; }
.bootstrap-filestyle.input-group { display: flex !important; gap: 8px; }
.bootstrap-filestyle.input-group .form-control { height: 38px; }
.bootstrap-filestyle.input-group .group-span-filestyle .btn { height: 38px; display: flex; align-items: center; justify-content: center; margin-top: 0; }
.st-menu-title { text-transform: uppercase !important; letter-spacing: 1px; font-weight: bold; }
/* ============================================================
CONTACT US
============================================================ */
.contact-form .form-control,
.contact-form .form-group input,
.contact-form .form-group textarea,
.contact-form .form-group select {
width: 100% !important; height: auto !important; min-height: 50px !important;
padding: 12px 20px !important; font-size: 18px !important; line-height: 1.5 !important;
border: 1px solid #CCCCCC !important; border-radius: 8px !important;
background-color: #FFFFFF !important; transition: all 0.3s ease; display: block !important;
}
.contact-form .form-group textarea { min-height: 180px !important; padding-top: 12px !important; resize: vertical !important; }
.contact-form .form-control-label { font-size: 18px !important; color: #333333 !important; margin-bottom: 8px !important; display: inline-block !important; }
.contact-form .form-control:focus,
.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus { border-color: #F4D20F !important; outline: none !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; }
.contact-form .form-footer .btn-primary {
background-color: #F4D20F !important; color: #333333 !important; border-radius: 50px !important;
padding: 12px 40px !important; font-family: 'Urbanist', sans-serif !important;
font-weight: 700 !important; font-size: 18px !important; text-transform: uppercase !important;
border: none !important; box-shadow: none !important; cursor: pointer !important;
transition: all 0.3s ease !important; display: inline-block !important;
}
.contact-form .form-footer .btn-primary:hover { background-color: #CAAF16 !important; transform: translateY(-2px) !important; }
.contact-form .title_block_inner { border-bottom: none !important; font-size: 26px !important; font-weight: 700 !important; color: #333333 !important; text-transform: uppercase !important; }
.contact-form .title_style_0 { border-bottom: none !important; }
.contact-form .psgdpr_consent_message.flex_child,
.contact-form .psgdpr_consent_message.flex_child a { font-size: 18px !important; color: #333333 !important; line-height: 1.4 !important; padding-left: 2px !important; }
.contact-form .psgdpr_consent_message.flex_child a:hover { text-decoration: none !important; color: #CAAF16 !important; }
/* ============================================================
ABOUT US
============================================================ */
.section-wrapper { display: flex !important; width: 100% !important; background-color: #f4f4f4 !important; }
.tengah {
flex: 0 1 600px !important; min-width: 500px !important; padding: 80px 50px !important;
display: flex !important; flex-direction: column !important; align-items: center !important; margin: 0 auto !important;
}
@media (max-width: 480px) { .tengah { min-width: 0 !important; width: 100% !important; padding: 30px 20px !important; box-sizing: border-box !important; } }
@media (min-width: 768px) and (max-width: 1024px) {
.section-about .elementor-container { flex-wrap: wrap !important; }
.section-about .elementor-column { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
.section-about .elementor-widget-image img { width: 100% !important; height: 400px !important; object-fit: cover !important; }
}
/* ============================================================
FOOTER
============================================================ */
#footer-primary, #footer-secondary, #footer-tertiary, .block.column_block .block_content { padding-top: 0 !important; }
.footer_block_content .elementor-icon-list-item a,
.footer_block_content .elementor-icon-list-text { color: #FFFFFF; }
@media (max-width: 767px) { #footer_before_container .st_open .footer_block_content { border-bottom: none; } }
.grower i, .layer_icon_wrap { color: white; }
/* ============================================================
LOCATE US — CUSTOM ICONS
============================================================ */
.elementor-element-acefc0e .elementor-icon-list-icon,
.elementor-element-6282eb1 .elementor-icon-list-icon { display: none; }
.elementor-element-acefc0e .elementor-icon-list-item a::before,
.elementor-element-6282eb1 .elementor-icon-list-item a::before {
content: ''; display: inline-block; width: 24px; height: 24px;
background-size: contain; background-repeat: no-repeat; background-position: center;
vertical-align: middle; margin-right: 8px; flex-shrink: 0;
}
.elementor-element-acefc0e .elementor-icon-list-item:nth-child(1) a::before,
.elementor-element-6282eb1 .elementor-icon-list-item:nth-child(1) a::before { background-image: url('https://www.evapetromarine.com/img/cms/location-r.png'); }
.elementor-element-acefc0e .elementor-icon-list-item:nth-child(2) a::before,
.elementor-element-6282eb1 .elementor-icon-list-item:nth-child(2) a::before { background-image: url('https://www.evapetromarine.com/img/cms/phone-r.png'); }
.elementor-element-acefc0e .elementor-icon-list-item:nth-child(3) a::before,
.elementor-element-6282eb1 .elementor-icon-list-item:nth-child(3) a::before { background-image: url('https://www.evapetromarine.com/img/cms/mail-icon.svg'); }
/* ============================================================
Resources — icon Subtract.svg khusus list ini saja
============================================================ */
.elementor-element-0f6847f .elementor-icon-list-icon {
display: none !important;
}
.elementor-element-0f6847f .elementor-icon-list-item a::before {
content: '' !important;
display: inline-block !important;
width: 24px !important;
height: 24px !important;
background-image: url('https://www.evapetromarine.com/img/cms/Subtract.svg') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
vertical-align: middle !important;
margin-right: 8px !important;
flex-shrink: 0 !important;
}
/* ============================================================
MOBILE NAVIGATION
============================================================ */
.mo_ml_level_0, .mo_sub_li { font-size: 18px; }
.header { padding: 10px 10px; font-size: 18px; border-bottom: 1px solid #f0e9e9ab !important; }
.mobile_nav_custom { padding-left: 10px; font-size: 18px; }
/* Mobile menu open/close arrows */
#st_mobile_menu .opener i.fto-minus-2,
#st_mobile_menu .opener i.minus_sign { display: none !important; }
#st_mobile_menu .opener i.fto-plus-2,
#st_mobile_menu .opener i.plus_sign {
font-size: 0 !important; color: transparent !important;
width: 20px !important; height: 20px !important;
display: block !important; position: relative !important;
}
#st_mobile_menu .opener i.fto-plus-2::before,
#st_mobile_menu .opener i.plus_sign::before {
content: "❯" !important; font-family: inherit !important; font-size: 16px !important;
color: #333333 !important; display: block !important; transform: rotate(90deg) !important;
transition: transform 0.3s ease !important; position: absolute !important; top: 0 !important; left: 0 !important;
}
#st_mobile_menu li.st_open > .menu_a_wrap .opener i.fto-plus-2,
#st_mobile_menu li.st_open > .menu_a_wrap .opener i.plus_sign,
#st_mobile_menu li.active > .menu_a_wrap .opener i.fto-plus-2,
#st_mobile_menu li.active > .menu_a_wrap .opener i.plus_sign { display: none !important; }
#st_mobile_menu li.st_open > .menu_a_wrap .opener i.fto-minus-2,
#st_mobile_menu li.st_open > .menu_a_wrap .opener i.minus_sign,
#st_mobile_menu li.active > .menu_a_wrap .opener i.fto-minus-2,
#st_mobile_menu li.active > .menu_a_wrap .opener i.minus_sign {
font-size: 0 !important; color: transparent !important;
width: 20px !important; height: 20px !important;
display: block !important; position: relative !important;
}
#st_mobile_menu li.st_open > .menu_a_wrap .opener i.fto-minus-2::before,
#st_mobile_menu li.st_open > .menu_a_wrap .opener i.minus_sign::before,
#st_mobile_menu li.active > .menu_a_wrap .opener i.fto-minus-2::before,
#st_mobile_menu li.active > .menu_a_wrap .opener i.minus_sign::before {
content: "❯" !important; font-family: inherit !important; font-size: 16px !important;
color: #333333 !important; display: block !important; transform: rotate(-90deg) !important;
transition: transform 0.3s ease !important; position: absolute !important; top: 0 !important; left: 0 !important;
}
#side_mobile_nav .mobile_nav_box input[type="submit"],
#side_mobile_nav .mobile_nav_box button[type="submit"],
#side_mobile_nav .mobile_nav_box .btn-primary {
background-color: #F4D20F !important; border-color: #F4D20F !important;
border-radius: 25px !important; color: #333333 !important; font-size: 18px !important;
}
/* ── Fix: userinfo mobile menu — Login, Cart, Quotes rapi ── */
#userinfo_mod_mobile_menu {
padding: 10px 0 !important;
}
#userinfo_mod_mobile_menu .mo_ma_level_0 {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
text-decoration: none !important;
color: #333333 !important;
font-size: 18px !important;
font-weight: 400 !important;
gap: 0 !important;
padding: 10px 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
#userinfo_mod_mobile_menu .mo_ma_level_0 i {
display: none !important;
}
#userinfo_mod_mobile_menu .menu_a_wrap {
position: static !important;
}
#userinfo_mod_mobile_menu .menu_a_wrap > .opener {
position: static !important;
width: auto !important;
height: auto !important;
}
/* Icon via ::before — margin-right saja, tidak pakai gap */
#userinfo_mod_mobile_menu a[href*="my-account"]::before,
#userinfo_mod_mobile_menu a[href*="login"]::before {
content: "" !important;
display: inline-block !important;
width: 30px !important;
height: 30px !important;
background-image: url('https://www.evapetromarine.com/img/cms/profile_icon.png') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
flex-shrink: 0 !important;
margin-right: 8px !important;
}
#userinfo_mod_mobile_menu a[href*="cart"]::before,
#userinfo_mod_mobile_menu a[href*="order"]::before {
content: "" !important;
display: inline-block !important;
width: 30px !important;
height: 30px !important;
background-image: url('https://www.evapetromarine.com/img/cms/cart_icon.png') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
flex-shrink: 0 !important;
margin-right: 8px !important;
}
#userinfo_mod_mobile_menu a[href*="QuotesCart"]::before,
#userinfo_mod_mobile_menu a[href*="askforaquotepro"]::before {
content: "" !important;
display: inline-block !important;
width: 30px !important;
height: 30px !important;
background-image: url('https://www.evapetromarine.com/img/cms/history_order_icon.png') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
flex-shrink: 0 !important;
margin-right: 8px !important;
}
/* ============================================================
CART PAGE
============================================================ */
.cart-grid-body .card-header, div.card-header {
font-family: 'Urbanist', sans-serif !important;
font-size: 24px !important; font-weight: 900 !important;
display: block !important; text-transform: uppercase;
}
.product-line-grid-body { flex: 1 1 auto !important; padding-right: 20px; }
.product-line-grid-right {
flex: 0 0 auto !important; display: flex !important;
flex-direction: column !important; text-align: right !important; min-width: 120px;
}
.product-line-grid-right .cart-line-product-actions,
.product-line-grid-right .remove-from-cart { margin-bottom: 5px !important; order: 2; }
.product-line-grid-right .product-price { order: 3; }
.product-line-grid-right .bootstrap-touchspin { width: 6rem; }
.product-line-grid .qty_wrap .input-group.bootstrap-touchspin input.form-control {
border: 1px solid #ced4da !important; height: 34px !important;
margin: 0 !important; padding: 0 5px !important; border-right: 1px solid #ced4da !important; z-index: 2;
}
.product-line-grid .qty_wrap .input-group.bootstrap-touchspin .input-group-btn:first-child button,
.product-line-grid .qty_wrap .input-group.bootstrap-touchspin .input-group-btn:last-child button { border: 1px solid #ced4da !important; height: 34px !important; }
.product-line-grid .qty_wrap .input-group.bootstrap-touchspin .form-control:focus { box-shadow: none !important; outline: none !important; }
.cart-voucher .promo-code-button,
.cart-voucher .promo-code-button .collapse-button { font-size: 18px !important; font-weight: 600 !important; }
.cart-voucher #promo-code input.promo-input,
.cart-voucher #promo-code button[type="submit"] { font-size: 18px !important; height: auto !important; padding: 10px !important; margin-right:30px;}
.cart-voucher .card-block { padding-top: 15px !important; padding-bottom: 15px !important; }
body#order-confirmation .card .card-block ul li { font-size: 16px !important; }
.cart-summary-line .label { font-size: 18px !important; }
.cart-summary-line .label.js-subtotal { font-weight: 600 !important; color: #232323 !important; }
.cart-summary-line .value { font-size: 16px !important; }
.cart-summary-line .value.price { font-size: 18px !important; font-weight: bold !important; color: #232323 !important; }
#delivery_message { width: 100% !important; min-height: 150px !important; padding: 12px !important; border: 1px solid #ccc !important; border-radius: 4px !important; resize: vertical !important; }
#delivery_message:focus { border-color: #F4D20F !important; outline: none !important; box-shadow: 0 0 5px rgba(244,210,15,0.5) !important; }
#bargain_message { min-height: 150px !important; }
.pro_cart_right .flex_box { flex-direction: row; justify-content: flex-start; }
#Side_cart_block .small_cart_info.flex_child { flex: 1 1 auto !important; max-width: 100% !important; width: auto !important; overflow: visible !important; }
#Side_cart_block .small_cart_product_list .product-name {
display: block !important; white-space: normal !important; overflow: visible !important;
text-overflow: clip !important; -webkit-line-clamp: initial !important;
line-clamp: initial !important; height: auto !important; max-height: none !important;
}
#Side_cart_block .flex_container.flex_start { flex-wrap: wrap !important; }
#side_products_cart a.product-name,
#side_products_cart .product-quantity,
#side_products_cart .price,
#side_products_cart .cart-summary-k,
#side_products_cart .cart-summary-v,
#side_products_cart .small_cart_sumary .price { font-size: 16px !important; }
#side_products_cart .small_cart_sumary { padding-bottom: 10px !important; margin-bottom: 5px !important; }
/* Warna harga di halaman Shopping Cart */
.product-line-grid-body .current-price .price {
color: #FF4242 !important;
font-weight: bold !important;
}
/* Jika ada harga coret (regular price) di cart agar tetap netral */
.product-line-grid-body .product-discount .regular-price {
color: #999 !important;
text-decoration: line-through !important;
font-size: 14px !important;
font-weight: normal !important;
}
/* ============================================================
QUOTES CART
============================================================ */
/* Shopping Cart */
.product-line-grid.container-fluid {
flex-wrap: nowrap !important; width: 100% !important;
justify-content: space-between !important; align-items: flex-start !important; padding-right: 30px !important;
}
/* Quotes Cart */
.product-line-grid:not(.container-fluid) {
display: flex !important; flex-wrap: nowrap !important; width: 100% !important;
justify-content: space-between !important; align-items: center !important; padding-right: 10px !important;
}
div.quotes_cart_quantity { margin-left: 15px !important; margin-bottom: 10px !important; }
.quoteSubmitOptions .form-group .form-control-label { font-size: 18px !important; font-weight: 600; color: #333333 !important; }
.product-line-info .label { font-weight: bold !important; font-size: 20px !important; line-height: 1.2 !important; display: inline-block; }
.product-line-grid-right.product-line-actions {
display: flex !important; align-items: center !important; width: 100% !important; padding: 0 !important; margin: 0 !important;
}
.product-line-grid-right.product-line-actions > .row {
display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
margin: 0 !important; width: 100% !important; justify-content: flex-end !important;
}
.product-line-grid-right.product-line-actions .col-xs-4.hidden-md-up { display: none !important; }
.product-line-grid-right.product-line-actions .col-md-10.col-xs-6 {
flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding: 0 !important; float: none !important;
}
.product-line-grid-right.product-line-actions .col-md-10.col-xs-6 > .row {
display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
margin: 0 !important; gap: 15px !important; justify-content: flex-end !important;
}
.product-line-grid-right.product-line-actions .quotes_cart_quantity {
flex: 0 0 auto !important; width: auto !important; max-width: none !important; min-width: unset !important; padding: 0 !important; float: none !important;
}
.product-line-grid-right.product-line-actions .col-md-6.col-xs-2.price {
flex: 0 0 120px !important; width: 120px !important; max-width: 120px !important;
padding: 0 !important; float: none !important; text-align: right !important;
align-items: center !important; height: 38px !important;
}
.product-line-grid-right.product-line-actions .col-md-2.text-xs-right {
flex: 0 0 40px !important; width: 40px !important; padding: 0 !important; float: none !important;
display: flex !important; align-items: center !important; justify-content: center !important; height: 38px !important;
}
.product-line-grid-right.product-line-actions .col-md-6.col-xs-2.price .product-price strong { white-space: nowrap !important; display: block !important; font-weight: bold !important; font-size: 18px !important; }
.product-line-grid-left.col-md-3.col-xs-4 { flex: 0 0 120px !important; max-width: 120px !important; min-width: 120px !important; width: 120px !important; padding: 0 10px !important; }
.product-line-grid-left.col-md-3.col-xs-4 img { width: 100px !important; height: 100px !important; object-fit: contain !important; display: block !important; }
.product-line-grid-body.col-md-4 { flex: 1 1 auto !important; max-width: none !important; min-width: 0 !important; }
/* Quotes qty touchspin */
.quotes_cart_quantity .input-group.bootstrap-touchspin { display: flex !important; flex-direction: row !important; align-items: stretch !important; height: 38px !important; }
.quotes_cart_quantity .input-group.bootstrap-touchspin input.form-control { height: 38px !important; flex: 1 !important; }
.quotes_cart_quantity .input-group-btn-vertical { display: flex !important; flex-direction: column !important; width: 26px !important; height: 38px !important; justify-content: center !important; }
.quotes_cart_quantity .input-group-btn-vertical a.quote-plus-button,
.quotes_cart_quantity .input-group-btn-vertical a.quote-minus-button {
display: flex !important; align-items: center !important; justify-content: center !important;
width: 26px !important; height: 19px !important; min-height: 19px !important; max-height: 19px !important;
padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
background-color: #f2f2f2 !important; border: 1px solid #ced4da !important; box-shadow: none !important; position: relative !important;
}
.quotes_cart_quantity .input-group-btn-vertical a.quote-plus-button:hover,
.quotes_cart_quantity .input-group-btn-vertical a.quote-minus-button:hover { background-color: #F4D20F !important; border-color: #F4D20F !important; }
.quotes_cart_quantity .input-group-btn-vertical a i { display: none !important; }
.quotes_cart_quantity .input-group-btn-vertical a.quote-plus-button::after {
content: "" !important; display: block !important; width: 6px !important; height: 6px !important;
border-left: 2px solid #333 !important; border-top: 2px solid #333 !important;
transform: rotate(45deg) !important; margin-top: 3px !important;
}
.quotes_cart_quantity .input-group-btn-vertical a.quote-minus-button::after {
content: "" !important; display: block !important; width: 6px !important; height: 6px !important;
border-left: 2px solid #333 !important; border-top: 2px solid #333 !important;
transform: rotate(225deg) !important; margin-bottom: 3px !important;
}
/*quotes continue button*/
.quoteSubmitOptions .continue.btn.btn-primary {
margin-top: -30px;
margin-bottom:40px;
margin-left: 15px;
}
@media (max-width: 767px) {
.product-line-grid-right.product-line-actions .quotes_cart_quantity { flex: 0 0 100px !important; max-width: 100px !important; }
.product-line-grid-right.product-line-actions .col-md-6.col-xs-2.price { flex: 0 0 130px !important; max-width: 130px !important; width: 130px !important; }
.pro_cart_right { margin-left: 0 !important; padding-left: 0 !important; width: 100% !important; }
.pro_cart_right .flex_box { flex-direction: row !important; justify-content: flex-start !important; }
.pro_cart_block, .pro_cart_block.flex_container { padding-left: 0 !important; margin-left: 0 !important; }
}
@media (max-width: 991px) {
/* Container utama */
.cart-grid-body.col-xs-12.col-lg-8 {
width: 100% !important;
padding: 0 10px !important;
}
/* Product line — stack vertical di mobile */
.product-line-grid:not(.container-fluid) {
flex-wrap: wrap !important;
padding-right: 0 !important;
}
/* Gambar produk */
.product-line-grid-left.col-md-3.col-xs-4 {
flex: 0 0 80px !important;
max-width: 80px !important;
min-width: 80px !important;
width: 80px !important;
}
.product-line-grid-left.col-md-3.col-xs-4 img {
width: 80px !important;
height: 80px !important;
}
/* Info produk */
.product-line-grid-body.col-md-4 {
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: calc(100% - 90px) !important;
}
/* Qty + Price + Delete — pindah ke baris bawah */
.product-line-grid-right.product-line-actions {
width: 100% !important;
flex: 0 0 100% !important;
padding: 10px 0 0 0 !important;
margin-top: 10px !important;
border-top: 1px solid #eeeeee !important;
}
.product-line-grid-right.product-line-actions > .row {
justify-content: space-between !important;
flex-wrap: nowrap !important;
width: 100% !important;
align-items: center !important;
}
/* Qty touchspin */
.product-line-grid-right.product-line-actions .quotes_cart_quantity {
flex: 0 0 auto !important;
width: auto !important;
}
/* Harga */
.product-line-grid-right.product-line-actions .col-md-6.col-xs-2.price {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
text-align: right !important;
}
.product-line-grid-right.product-line-actions .col-md-6.col-xs-2.price .product-price strong {
font-size: 16px !important;
white-space: nowrap !important;
}
/* Tombol delete */
.product-line-grid-right.product-line-actions .col-md-2.text-xs-right {
flex: 0 0 36px !important;
width: 36px !important;
}
/* Cart total */
.cart-summary-line {
display: flex !important;
justify-content: space-between !important;
padding: 8px 0 !important;
}
.cart-summary-line .label,
.cart-summary-line .value { font-size: 16px !important; }
/* Personal Information section */
.quoteSubmitOptions { padding: 0 10px !important; }
.quoteSubmitOptions .form-group { margin-bottom: 15px !important; }
.quoteSubmitOptions .form-control { width: 100% !important; font-size: 16px !important; }
.quoteSubmitOptions .form-control-label { font-size: 16px !important; }
}
@media (max-width: 480px) {
.product-line-grid-left.col-md-3.col-xs-4 {
flex: 0 0 70px !important;
max-width: 70px !important;
min-width: 70px !important;
}
.product-line-grid-left.col-md-3.col-xs-4 img {
width: 70px !important;
height: 70px !important;
}
.product-line-info .label { font-size: 16px !important; }
}
/* ============================================================
CHECKOUT
============================================================ */
.delivery-option .col-md-5 { padding-left: 20px !important; display: flex !important; align-items: center !important; }
.delivery-option .col-md-5 img, .delivery-option .col-md-5 i { margin-right: 15px !important; flex-shrink: 0; }
.delivery-option.flex_container { align-items: center !important; padding: 10px 0 !important; }
.delivery-option label.flex_child { margin-left: 10px !important; }
.payment-option.clearfix { display: flex !important; align-items: center !important; gap: 12px !important; }
.payment-option .custom-radio { float: none !important; margin: 0 !important; display: flex !important; align-items: center !important; }
.payment-option label { display: flex !important; align-items: center !important; margin: 0 !important; cursor: pointer; flex-wrap: wrap; gap: 10px; }
.payment-option label img { vertical-align: middle !important; margin-top: -2px; }
#payment-option-2-container label { padding: 0 !important; }
/* ============================================================
ORDER CONFIRMATION
============================================================ */
.oc-hero { background: #fff !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; }
.oc-hero-inner { border: none !important; border-radius: 0 !important; padding: 2rem !important; text-align: center !important; margin-bottom: 24px !important; }
.oc-status-badge {
display: inline-flex !important; width: auto !important; max-width: fit-content !important;
align-items: center !important; gap: 6px !important;
background: #333333 !important; color: #ffffff !important; border-radius: 0 !important;
font-size: 18px !important; font-weight: 600 !important; padding: 6px 16px !important; margin-bottom: 1rem !important;
}
.oc-status-badge svg { display: inline-block !important; flex-shrink: 0 !important; vertical-align: middle !important; }
.oc-title { font-family: 'Urbanist', sans-serif !important; font-size: 28px !important; font-weight: 800 !important; color: #333333 !important; text-transform: uppercase !important; margin: 0 0 8px 0 !important; }
.oc-subtitle { font-size: 16px !important; color: #444444 !important; margin: 0 auto !important; }
.oc-info-strip { display: flex !important; background: #f5f5f5 !important; border-radius: 0 !important; padding: 0 !important; margin-bottom: 24px !important; border: none !important; }
.oc-info-item { display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 1.2rem 1.5rem !important; flex: 1 !important; }
.oc-info-item svg { display: none !important; }
.oc-info-label { font-size: 16px !important; font-weight: 700 !important; color: #333 !important; text-transform: uppercase !important; }
.oc-info-value { font-size: 16px !important; font-weight: 600 !important; color: #333 !important; padding-left: 10px; }
.oc-info-divider { width: 1px !important; background: #e0e0e0 !important; margin: 12px 0 !important; }
.oc-hook-msg { background: #f5f5f5 !important; border: none !important; border-radius: 0 !important; padding: 1.2rem 1.5rem !important; margin-bottom: 24px !important; }
.oc-hook-msg p { font-size: 18px !important; color: #333 !important; margin: 0 0 2px 0 !important; }
.oc-content-grid { display: grid !important; grid-template-columns: 1fr 240px !important; gap: 16px !important; }
.oc-items-section, .oc-details-section, .oc-payment-return { background: #f5f5f5 !important; border: none !important; border-radius: 0 !important; padding: 1.5rem !important; box-shadow: none !important; }
.oc-section-header { font-size: 16px !important; font-weight: 700 !important; color: #333 !important; text-transform: uppercase !important; border-bottom: 1px solid #333333 !important; padding-bottom: 10px !important; margin-bottom: 1rem !important; }
.oc-section-header svg { display: none !important; }
.oc-detail-label { font-size: 15px !important; color: #333 !important; font-weight: 700 !important; text-transform: uppercase !important; }
.oc-detail-value { font-size: 15px !important; color: #333 !important; }
.oc-payment-return { margin-top: 16px !important; font-size: 14px !important; color: #333 !important; }
.oc-items-section h6.page_heading, .order-confirmation-wrap h6.page_heading { display: none !important; }
.order-confirmation-table .order-line .col-xs-9,
.order-confirmation-table .order-line .col-xs-2,
.order-confirmation-table .order-line .col-xs-1,
.order-confirmation-table .order-summary-block .medium_list,
.order-line.row.line_item { font-size: 16px !important; }
.order-confirmation-table strong, .order-confirmation-table b { font-size: 18px !important; }
@media (max-width: 992px) {
.oc-info-strip { flex-wrap: wrap !important; }
.oc-info-item { flex: 1 1 45% !important; }
.oc-info-divider { display: none !important; }
.oc-content-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 576px) { .oc-info-item { flex: 1 1 100% !important; } }
/* ============================================================
MY ACCOUNT — ADDRESSES
============================================================ */
a.addresses-link, #address-link, .addresses-footer a { font-size: 18px !important; text-decoration: none; line-height: 1.4; }
/* Membuat kolom input file menjadi border-radius */
.bootstrap-filestyle.input-group .form-control {
border-radius: 25px !important; /* Sesuaikan angka ini untuk tingkat kebulatannya */
padding-left: 20px !important; /* Tambah padding kiri agar teks tidak menempel ke lengkungan */
border: 1px solid #ced4da !important;
margin-top: -6px;
}
/* Jika Anda ingin tombol "Choose file" juga ikut bulat di sisi kanannya */
.bootstrap-filestyle.input-group .group-span-filestyle .btn {
border-top-right-radius: 25px !important;
border-bottom-right-radius: 25px !important;
padding-right: 20px !important;
}
/* Opsional: Menghilangkan gap atau merapikan tampilan input-group */
.bootstrap-filestyle.input-group {
display: flex !important;
align-items: center !important;
}
/* ============================================================
MODAL SERAGAM — #blockcart-modal & #quotes_layer_cart
─────────────────────────────────────────────────────────
Target tampilan (merujuk screenshot Image 2 / quotes cart):
• Lebar modal : 560px (max)
• Padding inner : 28px
• Gambar produk : 160×160px, border tipis, bg #fafafa
• Font nama produk : 20px / Urbanist 800 / UPPERCASE
• Atribut (bg abu) : 16px, justify-between, padding 12px
• Alert success : 16px, bg #eaf3de
• Cart count : 16px bold, bg #f9f9f6, padding 16px 20px
• Tombol : radius 30px, 16px, min-h 50px, flex 1
• Warna tombol : #F4D20F → hover #CAAF16
• Close X : 32×32px, bg #F4D20F, kanan-atas luar
============================================================ */
.st_modal_close { color: #444444; background: #F4D20F !important; }
/* ══════════════════════════════════════════════
BLOCKCART MODAL — wrapper & dialog
══════════════════════════════════════════════ */
#blockcart-modal .modal-dialog {
margin: 60px auto !important;
max-width: 560px !important;
width: 560px !important;
}
#blockcart-modal .modal-content {
border: none !important;
border-radius: 16px !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important;
overflow: hidden !important;
position: relative !important;
}
/* Close button — di pojok kanan atas luar (mirip quotes cart) */
#blockcart-modal .close_st_modal_close,
#blockcart-modal .st_modal_close {
position: absolute !important;
top: -1px !important;
right: -33px !important;
width: 32px !important; height: 32px !important; line-height: 32px !important;
background-color: #F4D20F !important;
color: #333333 !important;
font-size: 20px !important; font-weight: 700 !important;
text-align: center !important; text-decoration: none !important;
opacity: 1 !important; border-radius: 0 !important; border: none !important;
cursor: pointer !important; z-index: 10 !important;
transition: background-color 0.2s ease !important;
display: flex !important; align-items: center !important; justify-content: center !important;
}
#blockcart-modal .close_st_modal_close:hover,
#blockcart-modal .st_modal_close:hover { background-color: #CAAF16 !important; color: #333333 !important; }
/* Padding area utama */
#blockcart-modal .modal-body,
#blockcart-modal .modal_cart_general_border { padding: 28px !important; }
/* ── Product row: gambar kiri, konten kanan ── */
#blockcart-modal .modal_cart_general_border > .row,
#blockcart-modal .modal-body > .row:first-of-type {
display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
align-items: flex-start !important; gap: 20px !important; margin: 0 0 20px 0 !important;
}
/* Kolom gambar */
#blockcart-modal .modal-body .row .col-md-3,
#blockcart-modal .modal-body .row .col-md-4 {
flex: 0 0 160px !important; max-width: 160px !important;
width: 160px !important; padding: 0 !important; float: none !important;
}
#blockcart-modal .modal-body .row .col-md-3 img,
#blockcart-modal img.bordered.m-b-1 {
width: 160px !important; height: 160px !important;
object-fit: contain !important;
border: 1px solid rgba(0,0,0,0.07) !important;
background: #fafafa !important; display: block !important; margin: 0 !important;
}
/* Kolom konten */
#blockcart-modal .modal-body .row .col-md-9,
#blockcart-modal .modal-body .row .col-md-10 {
flex: 1 1 0% !important; max-width: none !important;
width: auto !important; padding: 0 !important; float: none !important;
}
/* Nama produk */
#blockcart-modal .product_name_wrap { text-align: left !important; }
#blockcart-modal .product_name {
font-family: 'Urbanist', sans-serif !important; font-weight: 800 !important;
font-size: 20px !important; line-height: 1.25 !important; color: #333333 !important;
text-transform: uppercase !important; margin: 0 0 12px 0 !important;
}
/* List atribut (Quantity dll) — tampil seperti tabel bg abu */
#blockcart-modal .list_detail_item {
list-style: none !important; padding: 12px !important; margin: 0 !important;
background: #f9f9f6 !important; font-size: 16px !important; color: #333 !important;
font-family: 'Open Sans', sans-serif !important;
}
#blockcart-modal .list_detail_item li {
display: flex !important; justify-content: space-between !important;
align-items: baseline !important; padding: 3px 0 !important;
margin-bottom: 0 !important; line-height: 1.5 !important;
font-family: 'Open Sans', sans-serif !important;
}
#blockcart-modal .list_detail_item li span:first-child {
font-weight: 600 !important; color: #333 !important; min-width: 90px !important;
}
#blockcart-modal .list_detail_item li span:last-child { color: #555 !important; font-weight: 400 !important; }
/* Alert success */
#blockcart-modal .alert-success {
background-color: #eaf3de !important; border: 1px solid #bbdfc8 !important;
color: #3b6d11 !important; padding: 12px 18px !important;
font-size: 16px !important; font-weight: 500 !important;
margin-bottom: 20px !important; display: flex !important; align-items: center !important;
border-radius: 4px !important;
font-family: 'Open Sans', sans-serif !important;
}
/* Cart summary */
#blockcart-modal .modal_cart_details {
background: #f9f9f6 !important; padding: 16px 20px !important; margin-bottom: 20px !important;
font-family: 'Open Sans', sans-serif !important;
}
#blockcart-modal .cart-products-count {
font-size: 16px !important; font-weight: 600 !important; color: #333 !important; margin-bottom: 14px !important;
font-family: 'Open Sans', sans-serif !important;
}
#blockcart-modal .modal_cart_details .list_detail_item {
background: transparent !important; padding: 0 !important;
}
#blockcart-modal .modal_cart_details .list_detail_item li {
justify-content: space-between !important;
border-bottom: 1px dashed rgba(0,0,0,0.1) !important;
padding: 8px 0 !important; margin-bottom: 0 !important;
font-family: 'Open Sans', sans-serif !important;
}
#blockcart-modal .modal_cart_details .list_detail_item li:last-child { border-bottom: none !important; }
#blockcart-modal .modal_cart_details .list_detail_item li span:first-child { font-weight: 600 !important; color: #333 !important; min-width: auto !important; }
#blockcart-modal .modal_cart_details .list_detail_item li span:last-child { font-weight: 700 !important; color: #333 !important; }
/* Tombol */
#blockcart-modal .cart-content-btn .row {
display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
justify-content: center !important; align-items: stretch !important;
gap: 12px !important; margin: 0 !important; width: 100% !important;
}
#blockcart-modal .cart-content-btn .col-md-6 {
flex: 1 !important; max-width: none !important; width: auto !important;
padding: 0 !important; float: none !important;
}
#blockcart-modal .cart-content-btn .btn {
background-color: #F4D20F !important; border-color: #F4D20F !important; color: #444444 !important;
font-family: 'Urbanist', sans-serif !important; font-size: 16px !important; font-weight: 700 !important;
border-radius: 30px !important; padding: 12px 20px !important; border-width: 0 !important;
box-shadow: none !important; transition: all 0.3s ease !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
width: 100% !important; white-space: nowrap !important;
line-height: 1.2 !important; min-height: 50px !important; text-decoration: none !important;
}
#blockcart-modal .cart-content-btn .btn:hover { background-color: #CAAF16 !important; color: #333333 !important; }
#blockcart-modal .cart-content-btn .inline_block { display: inline-block; margin-top: 12px; font-size: 15px; color: #333; text-decoration: none; font-weight: 500; }
#blockcart-modal .cart-content-btn .inline_block:hover { text-decoration: underline; }
/* Blockcart — mobile */
@media (max-width: 767px) {
#blockcart-modal .modal-dialog { margin: 10px auto !important; max-width: 95vw !important; width: 95vw !important; }
#blockcart-modal .modal-content { border-radius: 12px !important; }
#blockcart-modal .modal-body,
#blockcart-modal .modal_cart_general_border { padding: 16px !important; }
#blockcart-modal .modal-body > .row:first-of-type,
#blockcart-modal .modal_cart_general_border > .row { flex-direction: row !important; gap: 12px !important; }
#blockcart-modal .modal-body .row .col-md-3,
#blockcart-modal .modal-body .row .col-md-4 { flex: 0 0 100px !important; max-width: 100px !important; width: 100px !important; }
#blockcart-modal .modal-body .row .col-md-3 img { width: 100px !important; height: 100px !important; }
#blockcart-modal .modal-body .row .col-md-9,
#blockcart-modal .modal-body .row .col-md-10 { flex: 1 1 auto !important; }
#blockcart-modal .product_name { font-size: 15px !important; }
#blockcart-modal .alert-success { font-size: 14px !important; padding: 10px 14px !important; }
#blockcart-modal .modal_cart_details { padding: 12px !important; margin-bottom: 14px !important; }
#blockcart-modal .modal_cart_details .list_detail_item li { font-size: 14px !important; }
#blockcart-modal .cart-content-btn .row { gap: 8px !important; }
#blockcart-modal .cart-content-btn .btn { font-size: 14px !important; min-height: 42px !important; padding: 8px 14px !important; }
#blockcart-modal .close_st_modal_close,
#blockcart-modal .st_modal_close { top: -32px !important; right: 0 !important; }
}
.bargainBlock p {
color: #333 !important;
}
/* ══════════════════════════════════════════════
QUOTES LAYER CART — wrapper & inner
(diseragamkan 1:1 dengan blockcart di atas)
══════════════════════════════════════════════ */
#quotes_layer_cart {
/* Posisi: disesuaikan oleh JS/theme, kita hanya atur inner */
background-color: transparent !important;
border: none !important;
margin-left: 360px !important;
}
#quotes_layer_cart .qlc-inner {
background: #fff !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important;
overflow: visible !important;
padding: 19px !important;
position: relative !important;
width: 560px !important;
max-width: 560px !important;
box-sizing: border-box !important;
}
/* Close button — identik dengan blockcart */
#quotes_layer_cart .qlc-close {
position: absolute !important; top: -1px !important; right: -33px !important;
width: 32px !important; height: 32px !important; line-height: 32px !important;
background-color: #F4D20F !important; color: #333333 !important;
font-size: 20px !important; font-weight: 700 !important;
border-radius: 0 !important; text-align: center !important; text-shadow: none !important;
opacity: 1 !important; cursor: pointer !important; border: 0 !important; padding: 0 !important;
z-index: 10 !important; transform: none !important;
transition: background-color 0.2s ease !important;
display: flex !important; align-items: center !important; justify-content: center !important;
}
#quotes_layer_cart .qlc-close span { color: #333333 !important; text-shadow: none !important; line-height: 1 !important; }
#quotes_layer_cart .qlc-close:hover { background-color: #CAAF16 !important; }
/* Product row */
#quotes_layer_cart .bc-product-row {
display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
align-items: flex-start !important; gap: 20px !important; margin-bottom: 20px !important;
}
/* Gambar produk — identik 160×160 */
#quotes_layer_cart .bc-product-img {
flex: 0 0 160px !important; max-width: 160px !important; width: 160px !important;
}
#quotes_layer_cart .bc-product-img img {
width: 160px !important; height: 160px !important; object-fit: contain !important;
border: 1px solid rgba(0,0,0,0.07) !important; background: #fafafa !important; display: block !important;
}
#quotes_layer_cart .bc-product-info { flex: 1 1 0% !important; min-width: 0 !important; padding: 0 !important; }
/* Nama produk — identik dengan blockcart */
#quotes_layer_cart .bc-product-name {
font-family: 'Urbanist', sans-serif !important; font-weight: 800 !important;
font-size: 20px !important; line-height: 1.25 !important; color: #333333 !important;
text-transform: uppercase !important; margin: 0 0 12px 0 !important;
}
/* Atribut — identik dengan blockcart list_detail_item */
#quotes_layer_cart .bc-product-attrs {
list-style: none !important; padding: 12px !important; margin: 0 !important;
background: #f9f9f6 !important; display: flex !important; flex-direction: column !important;
gap: 0 !important; font-size: 16px !important;
}
#quotes_layer_cart .bc-product-attrs li {
display: flex !important; justify-content: space-between !important;
color: #333 !important; font-weight: 600 !important;
padding: 3px 0 !important;
}
#quotes_layer_cart .bc-product-attrs li span { color: #555 !important; font-weight: 400 !important; }
/* Alert success — identik */
#quotes_layer_cart .bc-alert-success {
background-color: #eaf3de !important; border: 1px solid #bbdfc8 !important; color: #3b6d11 !important;
padding: 12px 18px !important; font-size: 16px !important; font-weight: 500 !important;
margin-bottom: 20px !important; display: flex !important; align-items: center !important;
gap: 10px !important; border-radius: 4px !important;
}
#quotes_layer_cart .bc-alert-success svg { display: none !important; }
/* Cart count — identik dengan modal_cart_details */
#quotes_layer_cart .bc-cart-summary {
background: #f9f9f6 !important; padding: 16px 20px !important; margin-bottom: 20px !important;
}
#quotes_layer_cart .bc-cart-count {
font-size: 16px !important; font-weight: 600 !important; color: #333 !important; margin: 0 !important;
}
/* Tombol — identik dengan blockcart */
#quotes_layer_cart .bc-buttons {
display: flex !important; flex-direction: row !important; gap: 12px !important;
}
#quotes_layer_cart .bc-btn {
flex: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
min-height: 50px !important; padding: 12px 20px !important; border-radius: 30px !important;
font-family: 'Urbanist', sans-serif !important; font-size: 16px !important; font-weight: 700 !important;
line-height: 1.2 !important; text-decoration: none !important; cursor: pointer !important;
transition: all 0.3s ease !important; border: none !important; text-align: center !important;
white-space: nowrap !important;
background-color: #F4D20F !important; color: #444444 !important;
width: 100% !important;
}
#quotes_layer_cart .bc-btn:hover { background-color: #CAAF16 !important; color: #333333 !important; text-decoration: none !important; }
/* Quotes modal — mobile */
@media (max-width: 767px) {
#quotes_layer_cart { margin-left: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; padding: 10px !important; box-sizing: border-box !important; }
#quotes_layer_cart .qlc-inner { width: 100% !important; max-width: 100% !important; padding: 16px !important; }
#quotes_layer_cart .qlc-close { top: -32px !important; right: 0 !important; }
#quotes_layer_cart .bc-product-row { gap: 12px !important; }
#quotes_layer_cart .bc-product-img { flex: 0 0 100px !important; max-width: 100px !important; width: 100px !important; }
#quotes_layer_cart .bc-product-img img { width: 100px !important; height: 100px !important; }
#quotes_layer_cart .bc-product-name { font-size: 15px !important; }
#quotes_layer_cart .bc-alert-success { font-size: 14px !important; padding: 10px 14px !important; }
#quotes_layer_cart .bc-buttons { gap: 8px !important; }
#quotes_layer_cart .bc-btn { font-size: 14px !important; min-height: 42px !important; padding: 8px 14px !important; }
}
/* ============================================================
FULLY UNIFORM MODAL STYLES: blockcart-modal & quotes_layer_cart
============================================================ */
/* 1. Pastikan kedua modal memiliki lebar dan posisi yang sama */
#blockcart-modal .modal-dialog {
margin: 60px auto !important;
max-width: 560px !important;
width: 560px !important;
top: 0 !important;
transform: none !important;
}
#quotes_layer_cart {
position: fixed !important;
top: 40px !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translateX(-50%) !important;
width: 520px !important;
max-width: 520px !important;
margin: 0 !important;
padding: 0 !important;
background-color: transparent !important;
z-index: 1050 !important;
}
/* Container dalam quotes cart */
#quotes_layer_cart .qlc-inner {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
background: #fff !important;
box-shadow: 0 20px 50px rgba(0,0,0,0.12) !important;
box-sizing: border-box !important;
}
/* 2. Tombol pada kedua modal harus benar-benar identik */
#blockcart-modal .cart-content-btn .btn,
#quotes_layer_cart .bc-btn {
background-color: #F4D20F !important;
border-color: #F4D20F !important;
color: #444444 !important;
font-family: 'Urbanist', sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
text-transform: none !important;
padding: 12px 20px !important;
min-height: 50px !important;
line-height: 1.2 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s ease !important;
border: none !important;
cursor: pointer !important;
text-decoration: none !important;
width: 100% !important;
white-space: nowrap !important;
text-transform: uppercase !important;
}
/* Hover kedua tombol */
#blockcart-modal .cart-content-btn .btn:hover,
#quotes_layer_cart .bc-btn:hover {
background-color: #CAAF16 !important;
color: #333333 !important;
}
/* 3. Susunan tombol dalam baris (flex dengan gap) */
#blockcart-modal .cart-content-btn .row,
#quotes_layer_cart .bc-buttons {
display: flex !important;
flex-direction: row !important;
gap: 12px !important;
margin: 0 !important;
}
#blockcart-modal .cart-content-btn .col-md-6,
#quotes_layer_cart .bc-buttons a,
#quotes_layer_cart .bc-buttons .bc-btn {
flex: 1 !important;
max-width: none !important;
width: auto !important;
}
/* 4. Area product row pada quotes cart (gambar + info) disamakan */
#quotes_layer_cart .bc-product-row {
display: flex !important;
flex-direction: row !important;
gap: 20px !important;
margin-bottom: 20px !important;
}
#quotes_layer_cart .bc-product-img {
flex: 0 0 160px !important;
max-width: 160px !important;
}
#quotes_layer_cart .bc-product-img img {
width: 160px !important;
height: 160px !important;
object-fit: contain !important;
border: 1px solid rgba(0,0,0,0.07) !important;
background: #fafafa !important;
}
#quotes_layer_cart .bc-product-name {
font-family: 'Urbanist', sans-serif !important;
font-weight: 800 !important;
font-size: 20px !important;
text-transform: uppercase !important;
margin: 0 0 12px 0 !important;
}
#quotes_layer_cart .bc-product-attrs {
background: #f9f9f6 !important;
padding: 12px !important;
list-style: none !important;
font-size: 16px !important;
}
#quotes_layer_cart .bc-product-attrs li {
display: flex !important;
justify-content: space-between !important;
padding: 3px 0;
}
/* 5. Alert sukses & cart summary disamakan */
#quotes_layer_cart .bc-alert-success {
background-color: #eaf3de !important;
border: 1px solid #bbdfc8 !important;
color: #3b6d11 !important;
padding: 12px 18px !important;
font-size: 16px !important;
margin-bottom: 20px !important;
border-radius: 4px !important;
}
#quotes_layer_cart .bc-cart-summary {
background: #f9f9f6 !important;
padding: 16px 20px !important;
margin-bottom: 20px !important;
}
#quotes_layer_cart .bc-cart-count {
font-size: 16px !important;
font-weight: 600 !important;
margin: 0 !important;
}
/* 6. Tombol close (X) pada quotes cart juga disamakan posisi dan gaya */
#quotes_layer_cart .qlc-close {
position: absolute !important;
top: -1px !important;
right: -33px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
background-color: #F4D20F !important;
color: #333333 !important;
font-size: 20px !important;
font-weight: 700 !important;
text-align: center !important;
border-radius: 0 !important; /* biarkan kotak seperti aslinya */
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#quotes_layer_cart .qlc-close:hover {
background-color: #CAAF16 !important;
}
/* 7. Responsif Mobile */
@media (max-width: 767px) {
#blockcart-modal .modal-dialog,
#quotes_layer_cart {
width: 95vw !important;
max-width: 95vw !important;
top: 20px !important;
left: 2.5vw !important;
transform: none !important;
margin: 0 auto !important;
}
#quotes_layer_cart .qlc-inner {
padding: 16px !important;
}
#quotes_layer_cart .bc-product-img {
flex: 0 0 100px !important;
}
#quotes_layer_cart .bc-product-img img {
width: 100px !important;
height: 100px !important;
}
#quotes_layer_cart .bc-product-name {
font-size: 15px !important;
}
#blockcart-modal .cart-content-btn .btn,
#quotes_layer_cart .bc-btn {
min-height: 42px !important;
padding: 8px 14px !important;
font-size: 14px !important;
}
#quotes_layer_cart .qlc-close {
top: -32px !important;
right: 0 !important;
}
}
/*.product_page_container .pro_right_item {
padding-left: 30px;
}*/
/* Tipiskan panah pagination (next/prev) */
.pagination .next a::before,
.pagination .next span::before,
.pagination .prev a::before,
.pagination .prev span::before {
border-width: 1px !important; /* dari 1.5px menjadi 1px */
width: 6px !important;
height: 6px !important;
}
/* Jika breadcrumb menggunakan FontAwesome (panah tebal), ganti dengan border tipis */
.breadcrumb_nav .navigation-pipe::after {
content: "" !important;
font-family: none !important;
border-right: 1px solid #333;
border-top: 1px solid #333;
transform: rotate(45deg);
width: 6px;
height: 6px;
display: inline-block;
position: static;
visibility: visible;
background: none;
}
/* ============================================================
FIX: MOBILE MENU NAVIGATION & DROPDOWN
============================================================ */
/* Menargetkan link menu level 0 yang tidak memiliki submenu */
#st_mobile_menu_ul > li:not(.is_parent) .mo_ma_level_0:hover,
#st_mobile_menu_ul > li:not(.is_parent) .mo_ma_level_0:active {
color: #CAAF16 !important;
transition: background-color 0.2s ease;
}
/* Jika Anda ingin memberikan efek hover pada SEMUA menu tunggal di semua level */
#st_mobile_menu_ul li:not(.is_parent) > .menu_a_wrap:hover,
#st_mobile_menu_ul li:not(.is_parent) > .menu_a_wrap a:hover {
color: #CAAF16 !important;
}
/* Memastikan padding rapi saat hover */
#st_mobile_menu_ul .menu_a_wrap {
transition: background-color 0.2s ease;
}
/* 1. Aktifkan kembali semua link agar bisa diklik */
#st_mobile_menu_ul > li > div.menu_a_wrap > a {
pointer-events: auto !important;
}
/* 2. Hanya matikan klik pada menu yang linknya kosong/tanda pagar '#'
Ini mencegah layar loncat ke atas saat mencoba buka submenu */
#st_mobile_menu_ul > li > div.menu_a_wrap > a[href="#"],
#st_mobile_menu_ul > li > div.menu_a_wrap > a[href="javascript:void(0)"] {
pointer-events: none !important;
}
/* 3. Pastikan tombol opener (panah) memiliki area klik yang luas
supaya user tidak kesulitan menekan trigger dropdown */
#st_mobile_menu .opener {
pointer-events: auto !important;
cursor: pointer !important;
/*z-index: 10 !important;*/
}
/* 4. Opsional: Jika Anda ingin seluruh area menu (teks + panah) membuka dropdown
khusus untuk menu yang PUNYA submenu, berikan sedikit ruang pada opener */
#st_mobile_menu li.is_parent > .menu_a_wrap .opener {
width: 50px !important; /* Memperlebar area klik panah */
}
#side_mobile_nav .mobile_nav_custom {
padding-left: 10px;
border-bottom: 1px solid #f0e9e9ab;
padding-bottom: 10px;
}
#side_mobile_nav .mobile_nav_custom .mo_ma_level_0 {
display: flex;
align-items: center;
padding: 10px 0;
font-size: 18px;
font-weight: 400;
color: #333333;
text-decoration: none;
}
#side_mobile_nav .mobile_nav_custom .mo_ma_level_0:hover {
color: #CAAF16;
}
.facet-title.hidden-md-down {
display: contents !important;
}
/*HIDE FILTER ON MOBILE*/
@media (max-width: 991px) {
.facet .facet-title.hidden-md-down {
display: none !important;
}
}
.facet-title-mobile {
font-weight: bold !important;
font-size: 18px;
}
/* Submit Quote Button */
a.btn.btn-success.submit_quote {
background-color: #F4D20F !important;
border-color: #F4D20F !important;
color: #444444 !important;
border-radius: 25px !important;
font-family: 'Urbanist', sans-serif !important;
font-weight: 700 !important;
font-size: 18px !important;
transition: all 0.3s ease !important;
float: right !important;
text-transform: uppercase !important;
}
a.btn.btn-success.submit_quote:hover {
background-color: #CAAF16 !important;
border-color: #CAAF16 !important;
color: #333333 !important;
}
label.form-control-label.required::after,
.form-group label.required::after {
content: " *" !important;
color: #ff0000 !important;
font-weight: 700 !important;
display: inline !important;
}
/* Loved sidebar — View all button rata kiri */
#side_loved_block .text-center.m-t-1 {
text-align: left !important;
}
/* LIST VIEW — View Details button */
.products.product_list.list .list-view-action-btn {
display: block !important;
}
/* Desktop: button di kanan tengah */
@media (min-width: 768px) {
.products.product_list.list .pro_second_box {
position: relative !important;
}
.products.product_list.list .list-view-action-btn {
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
}
/* Mobile: button di bawah harga */
@media (max-width: 767px) {
.products.product_list.list .list-view-action-btn {
position: static !important;
transform: none !important;
margin-top: 8px !important;
}
}
/* Styling button */
.products.product_list.list .btn.btn-list-view {
background-color: #F4D20F !important;
border-color: #F4D20F !important;
color: #333333 !important;
font-family: 'Urbanist', sans-serif !important;
font-weight: 700 !important;
font-size: 15px !important;
padding: 10px 22px !important;
border-radius: 30px !important;
text-transform: uppercase !important;
white-space: nowrap !important;
display: inline-block !important;
text-decoration: none !important;
transition: background-color 0.25s ease !important;
}
.products.product_list.list .btn.btn-list-view:hover {
background-color: #CAAF16 !important;
color: #333333 !important;
}
/* Pastikan pro_second_box di list view tidak clip button */
.products.product_list.list .pro_second_box.pro_block_align_1 {
overflow: visible !important;
}
/* Fix z-index button list view */
.products.product_list.list .list-view-action-btn {
z-index: 20 !important;
}
/* Pastikan ::before overlay tidak nutup button */
.products.product_list.list .pro_outer_box:hover .pro_second_box.pro_block_align_1::before {
z-index: 0 !important;
}
/* Fix: pro_outer_box di list view jangan clip */
.products.product_list.list .pro_outer_box {
overflow: visible !important;
}
/* Fix: article/product_list_item jangan clip */
.products.product_list.list .product_list_item {
overflow: visible !important;
}
/* Sembunyikan Ask for Quote dari hook displayMobileNav */
#side_mobile_nav .mobile_nav_custom a.mobile_custom_link {
display: none !important;
}
/* Pastikan Quote Cart dari stsidebar tetap tampil */
#side_mobile_nav .mobile_nav_custom a.mo_ma_level_0 {
display: flex !important;
}
/* Sembunyikan divider bekas Ask for Quote */
#side_mobile_nav .mobile_nav_custom:has(a.mobile_custom_link) {
display: none !important;
}
/* ============================================================
FIX: PRODUCT ACTIONS LEFT ALIGN (MOBILE & GLOBAL)
============================================================ */
/* Paksa kontainer utama dan isinya rata kiri */
.pro_cart_block.flex_container,
.pro_cart_block.flex_column_sm,
.product-actions,
#add-to-cart-or-refresh {
align-items: flex-start !important;
text-align: left !important;
}
/* Menargetkan tombol Request for Quotation dan pembungkusnya */
.pro_cart_block .product-quantity,
.pro_cart_block .request-quote,
.pro_cart_block .pro_cart_right,
.pro_cart_block .add {
margin-left: 0 !important;
margin-right: auto !important;
width: 100% !important; /* Agar tombol Quotation tetap lebar tapi align-start */
display: flex !important;
justify-content: flex-start !important;
}
/* Memastikan tombol Love & Share juga ke kiri */
.pro_cart_right.flex_container {
justify-content: flex-start !important;
padding-left: 0 !important;
}
/* Fix khusus untuk input quantity agar tidak melar */
.product-quantity .qty {
margin-left: 0 !important;
}
/* Media Query khusus mobile untuk memastikan tidak ada center dari theme */
@media (max-width: 767px) {
.flex_box.flex_column_sm,
.pro_cart_block.flex_container.flex_column_sm {
align-items: flex-start !important;
}
/* Paksa tombol kuning (Request for Quote) ke kiri */
.request-quote.mar_b6 .ask_offer,
.request-quote.mar_b6 .btn-primary {
margin-left: 0 !important;
align-self: flex-start !important;
}
}