body { overflow-x: hidden !important; max-width: 100%; }
.page-wrapper { overflow-x: hidden !important; width: 100%; box-sizing: border-box !important; }

/* FIX: MENGEMBALIKAN KE FULL WIDTH (100%) AGAR SESUAI DENGAN LUMA DEFAULT (MENAMBAH GAP DI RESOLUSI < 768) */
.page-main, .nav-sections-item-content, .header.content, .page-wrapper > .widget, .page-wrapper > .page-bottom { max-width: 100% !important; box-sizing: border-box !important; }
@media (min-width: 768px) { 
    .page-main, .nav-sections-item-content, .header.content { padding-left: 40px !important; padding-right: 40px !important; } 
}

.luma-top-ticker { background-color: #2A8068; color: #ffffff; font-size: 12px; font-weight: 700; height: 35px; line-height: 35px; position: relative; overflow: hidden; z-index: 1002; display: flex; align-items: center; white-space: nowrap; }
.ticker-track { display: inline-block; white-space: nowrap; animation: luma-marquee 20s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
.ticker-text { display: inline-block; padding-right: 5px; letter-spacing: 1.5px; }
@keyframes luma-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.luma-extended-sticky-nav .luma-top-ticker { display: none !important; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield;
    appearance: textfield; }

.header.content::before, .header.content::after { display: none !important; content: none !important; }
.block-search .label[data-role="minisearch-label"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 35px !important; height: 35px !important; text-decoration: none !important; background: transparent !important; border: none !important; }
.block-search .label[data-role="minisearch-label"]::before { font-size: 24px !important; line-height: 1 !important; margin: 0 !important; color: #757575 !important; }

.header.content .compare.wrapper { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.header.content .compare.wrapper > li { margin: 0 !important; padding: 0 !important; }
.header.content .compare.wrapper .action.compare { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 35px !important; height: 35px !important; text-decoration: none !important; background: transparent !important; border: none !important; font-size: 0 !important; color: transparent !important; position: relative !important; }
.header.content .compare.wrapper .action.compare::before { content: '\e61e' !important; font-family: 'luma-icons' !important; font-size: 24px !important; color: #757575 !important; line-height: 1 !important; margin: 0 !important; }
.header.content .compare.wrapper .action.compare:hover::before { color: #e67e22 !important; }

body .page-wrapper .header.content .compare.wrapper .action.compare .counter.qty::before, 
body .page-wrapper .header.content .compare.wrapper .action.compare .counter.qty::after,
body .header.content .compare.wrapper .action.compare .counter.qty::before, 
body .header.content .compare.wrapper .action.compare .counter.qty::after { display: none !important; content: "" !important; font-size: 0 !important; opacity: 0 !important; visibility: hidden !important; }

.header.content .compare.wrapper .action.compare .counter.qty { position: absolute !important; top: -2px !important; right: -2px !important; background: #ea580c !important; color: #ffffff !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; font-size: 11px !important; line-height: normal !important; text-align: center !important; font-weight: bold !important; padding: 0 !important; margin: 0 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; display: flex !important; justify-content: center !important; align-items: center !important; }

body .page-wrapper .header.content .compare.wrapper .action.compare.no-display .counter.qty,
body .header.content .compare.wrapper .action.compare.no-display .counter.qty,
body .header.content .compare.wrapper .action.compare .counter.qty.empty { display: none !important; }
body .header.content .compare.wrapper .action.compare .counter.qty .counter-label { display: none !important; }

.minicart-wrapper .action.showcart { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 35px !important; height: 35px !important; text-decoration: none !important; background: transparent !important; border: none !important; position: relative !important; }
.minicart-wrapper .action.showcart::before { font-size: 24px !important; line-height: 1 !important; margin: 0 !important; }
.minicart-wrapper .action.showcart .counter.qty { position: absolute !important; top: -2px !important; right: -2px !important; background: #ea580c !important; color: #ffffff !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; font-size: 11px !important; line-height: 18px !important; text-align: center !important; font-weight: bold !important; padding: 0 !important; margin: 0 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; display: flex !important; justify-content: center !important; align-items: center !important; }

body .minicart-wrapper .action.showcart.no-display .counter.qty,
body .minicart-wrapper .action.showcart .counter.qty.empty { display: none !important; }
body .minicart-wrapper .action.showcart .counter.qty .counter-label { display: none !important; }

@media (max-width: 767px) {
    .page-header { border-bottom: none !important; box-sizing: border-box !important; width: 100% !important; }
    .header.content { position: relative !important; min-height: 60px !important; padding: 0 !important; box-sizing: border-box !important; width: 100% !important; display: block !important; }
    .nav-toggle { position: absolute !important; top: 15px !important; left: 15px !important; margin: 0 !important; z-index: 99 !important; }
    .header.content .logo { position: absolute !important; left: 50% !important; top: 15px !important; transform: translateX(-50%) !important; margin: 0 !important; padding: 0 !important; z-index: 5 !important; max-width: 140px !important; }
    .header.content .logo img { max-height: 35px !important; width: auto !important; }
    .minicart-wrapper { position: absolute !important; top: 13px !important; right: 15px !important; margin: 0 !important; z-index: 50 !important; }
    .header.content .compare.wrapper { position: absolute !important; top: 13px !important; right: 60px !important; margin: 0 !important; z-index: 50 !important; }
    .block-search { position: static !important; margin: 0 !important; width: 100% !important; } 
    .block-search .label[data-role="minisearch-label"] { position: absolute !important; top: 13px !important; right: 50px !important; margin: 0 !important; z-index: 99 !important; cursor: pointer !important; }
    .block-search .control { position: absolute !important; top: 60px !important; left: 10px !important; right: 10px !important; width: auto !important; padding: 10px !important; background: #fff !important; z-index: 999 !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; border-top: 1px solid #eee !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: all 0.2s ease; }
    .block-search.active .control, .block-search:focus-within .control { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
    .block-search .control input { width: 100% !important; height: 40px !important; border-radius: 0 !important; padding: 0 45px 0 15px !important; border: 1px solid #ddd !important; }
    .block-search .action.search { right: 15px !important; top: 10px !important; width: 40px !important; height: 40px !important; position: absolute !important; z-index: 10 !important; pointer-events: auto !important; }
    .block-search .action.search span { display: none !important; }
    .luma-extended-sticky-nav .page-main { padding-top: 60px; }
}

@media (min-width: 768px) {
    .header.content { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 15px 50px 15px !important; margin: 0 auto !important; box-sizing: border-box !important; width: 100% !important; }
    .header.content .logo { margin: 0 !important; max-width: 200px !important; order: 1 !important; flex: 0 0 auto !important; }
    .header.content .block-search { display: block !important; flex: 1 !important; order: 2 !important; width: auto !important; margin: 0 40px !important; }
    .header.content .block-search .control { position: relative !important; z-index: 1 !important; width: 100% !important; display: block !important; }
    .header.content .block-search .control input { border-radius: 30px !important; padding: 0 45px 0 20px !important; height: 45px !important; border: 1px solid #ddd !important; background: #f8f9fa !important; width: 100% !important; box-sizing: border-box !important; }
    .header.content .block-search .control input:focus { background: #fff !important; border-color: #e67e22 !important; box-shadow: 0 0 0 2px rgba(230,126,34,0.1) !important; }
    .header.content .block-search .action.search { right: 5px !important; top: 2px !important; bottom: 2px !important; width: 40px !important; height: 41px !important; position: absolute !important; z-index: 10 !important; cursor: pointer !important; pointer-events: auto !important; background: transparent !important; border: none !important; padding: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; }
    .header.content .block-search .action.search::before { color: #555 !important; font-size: 18px !important; margin: 0 !important; display: block !important; }
    .header.content .block-search .action.search span { display: none !important; }
    .header.content .block-search .label[data-role="minisearch-label"] { display: none !important; }
    .header.content .compare.wrapper { margin: 0 15px 0 0 !important; order: 3 !important; display: block !important; }
    .header.content .minicart-wrapper { margin: 0 !important; order: 4 !important; display: block !important; }
    
    .navigation { display: block !important; width: 100% !important; overflow: visible !important; background: unset !important; position: relative; }
    .navigation > ul { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; margin: 0; padding: 0 15px; width: max-content !important; min-width: 100%; box-sizing: border-box; cursor: grab; transition: transform 0.3s ease; }
    .navigation > ul.dragging-active { cursor: grabbing; transition: none; }
    .navigation > ul > li.level0 { flex: 0 0 auto !important; float: none !important; position: relative !important; margin: 0 10px !important; }
    .navigation > ul > li.level0 > a.level-top { font-size: 13px !important; white-space: nowrap !important; font-weight: 600; user-select: none; }
    .navigation > ul > li.level0.parent > a.level-top::after, .navigation > ul > li.level0 > a.level-top .ui-menu-icon { right: 4px !important; position: absolute !important; margin: 0 !important; }
    .navigation > ul > li.level0 > .submenu { position: absolute !important; z-index: 1000 !important; text-align: left !important; }
    
    .luma-extended-sticky-nav .nav-sections { position: fixed; top: 75px; width: 100%; z-index: 998; box-shadow: 0 4px 10px rgba(0,0,0,0.05); box-sizing: border-box !important; background: #ffffff !important; }
    .luma-extended-sticky-nav .page-main { padding-top: 150px; }
}

.luma-extended-sticky-nav .panel.wrapper { display: none !important; }
.luma-extended-sticky-nav .page-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1001 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05); background: rgba(255, 255, 255, 0.98); animation: slideDown 0.3s ease-in-out; border-bottom: none !important; box-sizing: border-box !important; }
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.minicart-wrapper .block-minicart { z-index: 99999 !important; }
.minicart-wrapper .update-cart-item { display: none !important; }

.luma-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 10000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.3s ease; }
.luma-popup-overlay.show { opacity: 1; }
.luma-popup-content { background: linear-gradient(135deg, #d32f2f 0%, #9a0007 100%); border-radius: 20px; padding: 40px 30px; width: 90%; max-width: 500px; position: relative; text-align: center; color: #fff; box-shadow: 0 15px 40px rgba(0,0,0,0.3); transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 2px solid #e74c3c; z-index: 10001; }
.luma-popup-overlay.show .luma-popup-content { transform: scale(1); }
.luma-popup-close { position: absolute; top: -12px; right: -12px; width: 32px; height: 32px; background: #fff; color: #333; border: none; border-radius: 50%; font-size: 20px; font-weight: bold; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.luma-popup-close:hover { background: #e74c3c; color: #fff; transform: scale(1.1); }
.luma-popup-header { font-size: 22px; font-weight: 800; letter-spacing: 2px; margin-bottom: 20px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
.luma-popup-body { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 15px; }
.discount-huge { font-size: 60px; font-weight: 900; line-height: 1; display: flex; align-items: center; }
.discount-huge sup { font-size: 24px; top: -1.2em; position: relative; }
.discount-huge .text-off { font-size: 20px; font-weight: 700; margin-left: 5px; display: flex; flex-direction: column; justify-content: center; line-height: 1; }
.plus-icon { width: 30px; height: 30px; border: 1px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.free-bonus { font-size: 28px; font-weight: 800; text-align: left; line-height: 1.1; }
.free-bonus small { font-size: 14px; font-weight: 600; letter-spacing: 1px; display: block; margin-top: 3px; }
.luma-popup-tnc { background: rgba(0,0,0,0.2); padding: 8px 15px; border-radius: 20px; font-size: 11px; margin-bottom: 25px; display: inline-block; }
.luma-popup-promo { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 30px; }
.luma-popup-promo .promo-label { font-size: 12px; font-weight: 700; text-align: right; line-height: 1.3; }
.promo-code { background: #fff; color: #d32f2f; font-size: 18px; font-weight: 900; padding: 10px 25px; border-radius: 8px; border: 2px dashed #d32f2f; letter-spacing: 1px; }
.luma-popup-btn { display: inline-block; background: #fff; color: #d32f2f; font-size: 16px; font-weight: 800; padding: 12px 35px; border-radius: 30px; text-decoration: none !important; text-transform: uppercase; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: all 0.3s; }
.luma-popup-btn:hover { background: #f8f9fa; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.3); color: #d32f2f; }

.luma-extended-product-grid .toolbar, .luma-extended-product-grid .toolbar-products, .luma-extended-product-grid .pager, .luma-extended-product-grid .pages { display: none !important; opacity: 0 !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }

/* FIX KEMBALIKAN HOME CONTAINER KE 100% DENGAN GAP */
.luma-extended-home-container { max-width: 100%; margin: 0 auto; box-sizing: border-box; }
.luma-extended-carousel-container { position: relative; max-width: 100%; margin: 20px auto 40px; height: 400px; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.luma-extended-carousel-track { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; height: 100% !important; transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }
.luma-extended-slide { flex: 0 0 100% !important; min-width: 100% !important; width: 100% !important; height: 100% !important; position: relative !important; float: none !important; display: flex !important; align-items: center !important; padding: 0 60px !important; background-size: cover !important; background-position: center 20% !important; background-repeat: no-repeat !important; background-color: #f4f4f4 !important; opacity: 1 !important; z-index: 1 !important; box-sizing: border-box !important; }
.luma-extended-slide::before { display: none !important; }
.hero-content { position: relative; z-index: 2; max-width: 500px; box-sizing: border-box; }
.hero-content .badge { background: #e67e22; color: #fff; padding: 6px 15px; border-radius: 20px; font-size: 12px; font-weight: bold; margin-bottom: 15px; display: inline-block; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.hero-content h1 { font-size: 42px; font-weight: 800; color: #111; margin-bottom: 15px; line-height: 1.1; text-shadow: 0 2px 10px rgba(255,255,255,0.9), 0 0 20px rgba(255,255,255,1); }
.hero-content p { font-size: 16px; color: #111; font-weight: 600; margin-bottom: 25px; text-shadow: 0 1px 5px rgba(255,255,255,0.9), 0 0 10px rgba(255,255,255,1); }
.hero-content .btn-shop { background: #111; color: #fff; padding: 12px 30px; border-radius: 30px; font-weight: bold; text-decoration: none; transition: 0.3s; display: inline-block; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.hero-content .btn-shop:hover { background: #e67e22; transform: translateY(-2px); }
.luma-extended-dots { position: absolute; bottom: 20px; width: 100%; text-align: center; z-index: 10; }
.luma-extended-dots .dot { display: inline-block; width: 12px; height: 12px; margin: 0 5px; background: rgba(0,0,0,0.4); border-radius: 50%; cursor: pointer; transition: 0.3s; box-shadow: 0 1px 3px rgba(255,255,255,0.5); }
.luma-extended-dots .dot.active { background: #e67e22; width: 24px; border-radius: 6px; }

@media (max-width: 767px) {
    .luma-extended-carousel-container { height: 380px !important; border-radius: 12px; margin: 15px 0px 30px !important; }
    .luma-extended-slide { padding: 0 !important; align-items: flex-end !important; justify-content: center !important; padding-bottom: 40px !important; }
    .hero-content { padding: 20px 15px 25px 15px !important; width: 90% !important; text-align: center !important; margin: 0 auto 15px !important; z-index: 2 !important; border-radius: 16px !important; }
    .hero-content h1 { font-size: 24px !important; margin-bottom: 5px !important; text-shadow: 0 2px 10px rgba(255,255,255,0.9), 0 0 20px rgba(255,255,255,1) !important; }
    .hero-content p { font-size: 13px !important; margin-bottom: 12px !important; text-shadow: 0 1px 5px rgba(255,255,255,0.9), 0 0 10px rgba(255,255,255,1) !important; }
    .luma-extended-carousel-container .luma-extended-prev, .luma-extended-carousel-container .luma-extended-next { position: absolute !important; top: 110px !important; transform: none !important; width: 32px !important; height: 32px !important; font-size: 12px !important; padding: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; background: rgba(255,255,255,0.9) !important; color: #111 !important; border-radius: 50% !important; z-index: 100 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; }
    .luma-extended-carousel-container .luma-extended-prev { left: 10px !important; }
    .luma-extended-carousel-container .luma-extended-next { right: 10px !important; }
    .luma-popup-body { flex-direction: column; gap: 10px; } 
    .discount-huge { font-size: 50px; } 
    .free-bonus { text-align: center; } 
    .luma-popup-promo { flex-direction: column; gap: 10px; } 
    .luma-popup-promo .promo-label { text-align: center; }
}
@media (min-width: 768px) {
    .luma-extended-slide { padding-left: 120px !important; padding-right: 100px !important; }
    .hero-content { margin-left: 40px !important; }
    .luma-extended-carousel-container .luma-extended-prev, .luma-extended-carousel-container .luma-extended-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: #ffffff; color: #111; border: none; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 18px; transition: 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.15); }
    .luma-extended-carousel-container .luma-extended-prev:hover, .luma-extended-carousel-container .luma-extended-next:hover { background: #e67e22; color: #fff; }
    .luma-extended-carousel-container .luma-extended-prev { left: 20px; }
    .luma-extended-carousel-container .luma-extended-next { right: 20px; }
}

.flash-sale-section { background: linear-gradient(180deg, #fff3f3 0%, #ffffff 200px); padding: 30px 20px 10px; border-radius: 16px; margin-bottom: 20px; border: 1px solid #ffe5e5; box-shadow: 0 4px 15px rgba(211,47,47,0.05); }
.flash-sale-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; padding: 0 10px; }
.flash-sale-header .title { margin: 0 !important; color: #d32f2f !important; font-size: 28px !important; font-weight: 900 !important; display: flex; align-items: center; gap: 10px; text-transform: uppercase; border: none !important; }

.countdown-timer { display: flex; align-items: center; gap: 8px; font-weight: bold; }
.countdown-timer .time-box { background: #d32f2f; color: #fff; width: 45px; height: 45px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 4px 8px rgba(211,47,47,0.3); }
.countdown-timer .time-box span { font-size: 18px; font-weight: 900; }
.countdown-timer .time-box small { font-size: 9px; font-weight: 600; text-transform: uppercase; margin-top: 2px; }
.countdown-timer .colon { font-size: 20px; color: #d32f2f; font-weight: 900; }

.guarantees-section { margin-bottom: 60px; padding: 50px 20px; background: #ffffff; border-radius: 16px; border: 1px solid #eaeaea; box-shadow: 0 4px 15px rgba(0,0,0,0.02); text-align: center; }
.guarantees-header h5 { color: #9e9e9e !important; font-size: 13px !important; letter-spacing: 4px !important; font-weight: 600 !important; text-transform: uppercase !important; margin: 0 0 10px 0 !important; }
.guarantees-header h2 { color: #888888 !important; font-size: 34px !important; font-weight: 300 !important; letter-spacing: 3px !important; text-transform: uppercase !important; margin: 0 0 40px 0 !important; }
.guarantees-banner { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.g-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 120px; transition: transform 0.3s; gap: 15px; }
.g-item:hover { transform: translateY(-5px); }
.g-item img { width: 90px; height: 90px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.05)); }
.g-item span { font-weight: 500; font-size: 12px; color: #9e9e9e; line-height: 1.4; text-transform: uppercase; letter-spacing: 1px; }

@media (max-width: 767px) {
    .flash-sale-header { justify-content: center; flex-direction: column; }
    .flash-sale-header .title { font-size: 22px !important; }
    .guarantees-section { padding: 30px 10px; }
    .guarantees-header h2 { font-size: 22px !important; margin-bottom: 30px !important; letter-spacing: 1px !important; }
    .guarantees-header h5 { font-size: 11px !important; letter-spacing: 2px !important; }
    .guarantees-banner { gap: 15px; }
    .g-item { width: 85px; gap: 10px; }
    .g-item img { width: 70px; height: 70px; }
    .g-item span { font-size: 10px; }
}

.block-widget-catalog-products { margin-bottom: 60px; }
body .products-grid .product-items { display: flex !important; flex-wrap: wrap !important; margin: 0 -8px !important; padding: 0 !important; }
body .products-grid .product-item { flex: 0 0 20% !important; max-width: 20% !important; padding: 8px !important; margin: 0 !important; box-sizing: border-box !important; }

body .products-grid .product-item-info { 
    display: flex !important; flex-direction: column !important; justify-content: space-between !important;
    width: 100% !important; height: 100% !important; padding: 15px !important; margin: 0 !important; 
    background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 12px !important; 
    position: relative !important; z-index: 1 !important; box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important; box-sizing: border-box !important;
}
body .products-grid .product-item-info:hover, body .products-grid .product-item-info.active { 
    position: relative !important; z-index: 2 !important; margin: 0 !important; padding: 15px !important; width: 100% !important;
    border: 1px solid #cbd5e1 !important; box-shadow: 0 12px 28px rgba(0,0,0,0.15) !important; transform: translateY(-4px) !important;
}

body .page-wrapper .flash-sale-section .products-grid .product-item-info::before {
    content: "FLASH SALE" !important;
    position: absolute !important; 
    top: -12px !important; 
    left: -10px !important;
    
    background: #d32f2f url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FFC107%22%20d%3D%22M12%2023a7.5%207.5%200%200%201-5.138-12.963C8.204%208.774%2011.5%206.5%2011%201.5c6%204%209%208%203%2014%201%200%202.5%200%203-1.5.5%201%20.5%202%20.5%203A7.5%207.5%200%200%201%2012%2023z%22%2F%3E%3C%2Fsvg%3E") no-repeat 8px center !important;
    
    color: #ffffff !important;
    font-size: 11px !important; 
    font-weight: 800 !important;
    
    padding: 5px 12px 5px 24px !important;
    
    border-radius: 20px !important; 
    z-index: 10 !important;
    box-shadow: 0 4px 10px rgba(211,47,47,0.3) !important;
    text-transform: uppercase !important; 
    letter-spacing: 1px !important;
}
body .flash-sale-section .products-grid .product-item { padding-top: 15px !important; }

body .products-grid .product-item-photo { display: block !important; margin: 0 0 15px 0 !important; border-radius: 8px !important; overflow: hidden !important; padding: 0 !important; }
body .products-grid .product-image-container { width: 100% !important; }
body .products-grid .product-image-photo { position: static !important; width: 100% !important; height: auto !important; bottom: auto !important; margin: 0 !important; }

body .products-grid .product-item-details { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; justify-content: flex-end !important; }
body .products-grid .product-item-name { margin: 0 0 10px 0 !important; text-align: center !important; }
body .products-grid .product-item-name a { display: -webkit-box !important; -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; color: #333 !important; font-weight: 600 !important; font-size: 14px !important; line-height: 1.4 !important; text-decoration: none !important; }
body .products-grid .product-item-name a:hover { color: #e67e22 !important; }
body .products-grid .product-reviews-summary { margin: 0 auto 10px auto !important; display: flex !important; justify-content: center !important; }

body .products-grid .price-box { margin: 0 0 15px 0 !important; text-align: center !important; }
body .products-grid .price-box .price { color: #e67e22 !important; font-weight: 800 !important; font-size: 18px !important; display: inline-block !important; }
body .products-grid .price-box .old-price { margin: 0 5px 0 0 !important; display: inline-block !important; }
body .products-grid .price-box .old-price .price { color: #a1a1aa !important; font-weight: 500 !important; font-size: 13px !important; text-decoration: line-through !important; display: inline-block !important; }
body .products-grid .price-box .old-price .price-label { display: none !important; }
body .products-grid .price-box .special-price { display: inline-block !important; }
body .products-grid .price-box .special-price .price { color: #d32f2f !important; font-size: 14px !important; font-weight: 800 !important; display: inline-block !important; }
body .products-grid .price-box .special-price .price-label { display: none !important; }

body .products-grid .product-item-inner { position: static !important; display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; clip: auto !important; left: auto !important; right: auto !important; transform: none !important; }
body .products-grid .product-item-actions { display: flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; }
body .products-grid .product-item-actions .actions-primary, body .products-grid .product-item-actions .actions-secondary { display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 !important; padding: 0 !important; gap: 10px !important; }
body .products-grid .product-item-actions .actions-secondary { gap: 8px !important; }

body .products-grid .product-item-actions .action { display: flex !important; justify-content: center !important; align-items: center !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; background: #f8f9fa !important; border: 1px solid #eaeaea !important; color: #757575 !important; padding: 0 !important; margin: 0 !important; transition: all 0.3s ease !important; position: relative !important; box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important; min-width: 0 !important; overflow: visible !important; }
body .products-grid .product-item-actions .action:hover { background: #e67e22 !important; border-color: #e67e22 !important; color: #fff !important; transform: scale(1.1) !important; box-shadow: 0 4px 8px rgba(234,88,12,0.3) !important; }
body .products-grid .product-item-actions .action:hover::before { color: #ffffff !important; }
body .products-grid .product-item-actions .action span { display: none !important; }

body .products-grid .product-item-actions .actions-primary .action.tocart::before, body .products-grid .product-item-actions .actions-primary form .action.tocart::before { content: '\e611' !important; font-family: 'luma-icons' !important; font-size: 18px !important; line-height: normal !important; color: #757575 !important; display: inline-block !important; margin: 0 !important; font-weight: normal !important; -webkit-font-smoothing: antialiased; }
body .products-grid .product-item-actions .actions-primary .action.tocart:hover::before, body .products-grid .product-item-actions .actions-primary form .action.tocart:hover::before { color: #ffffff !important; }
body .products-grid .product-item-actions .action.towishlist::before { content: '\e600' !important; font-family: 'luma-icons' !important; line-height: normal !important; color: inherit !important; display: inline-block !important; transform: translateY(2px) !important; margin: 0 !important; font-weight: normal !important; }
body .products-grid .product-item-actions .action.tocompare::before { content: '\e61e' !important; font-family: 'luma-icons' !important; font-size: 18px !important; line-height: normal !important; color: inherit !important; display: inline-block !important; margin: 0 !important; font-weight: normal !important; }

body .luma-extended-product-carousel .products-grid .product-items { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; gap: 0 !important; padding-top: 15px !important; padding-bottom: 30px !important; margin: 0 !important; -ms-overflow-style: none !important; scrollbar-width: none !important; }
body .luma-extended-product-carousel .products-grid .product-items::-webkit-scrollbar { display: none !important; }
body .luma-extended-product-carousel .products-grid .product-item { flex: 0 0 20% !important; max-width: 20% !important; scroll-snap-align: start !important; width: auto !important; margin: 0 !important; padding: 8px !important; box-sizing: border-box !important; }

@media (max-width: 1200px) { 
    body .products-grid .product-item { flex: 0 0 25% !important; max-width: 25% !important; } 
    body .luma-extended-product-carousel .products-grid .product-item { flex: 0 0 25% !important; max-width: 25% !important; }
}
@media (max-width: 992px) { 
    body .products-grid .product-item { flex: 0 0 33.333% !important; max-width: 33.333% !important; } 
    body .luma-extended-product-carousel .products-grid .product-item { flex: 0 0 33.333% !important; max-width: 33.333% !important; }
}
@media (max-width: 767px) { 
    body .products-grid .product-items { margin: 0 -4px !important; }
    body .products-grid .product-item { flex: 0 0 50% !important; max-width: 50% !important; padding: 4px !important; } 
    body .luma-extended-product-carousel .products-grid .product-item { flex: 0 0 45% !important; max-width: 45% !important; padding: 4px !important; }
    
    body .products-grid .product-item-info { padding: 10px !important; border-radius: 8px !important; }
    body .products-grid .product-item-info:hover, body .products-grid .product-item-info.active { padding: 10px !important; transform: translateY(-2px) !important; }
    body .products-grid .product-item-name a { font-size: 12px !important; line-height: 1.3 !important; }
    body .products-grid .price-box .price { font-size: 14px !important; }
    body .products-grid .price-box .old-price .price { font-size: 11px !important; }
    
    body .products-grid .product-item-actions { flex-direction: column !important; gap: 8px !important; }
    body .products-grid .product-item-actions .actions-primary { width: 100% !important; margin-bottom: 5px !important; }
    body .products-grid .product-item-actions .actions-secondary { justify-content: center !important; }
    body .products-grid .product-item-actions .action.tocart { padding: 8px 12px !important; font-size: 10px !important; width: 100% !important; border-radius: 6px !important; letter-spacing: 0px !important;}
}

@media print { .navigation { background: unset !important; } }
.page-footer { background: #5eb3b1 !important; padding: 0 !important; margin: 0 !important; border: none !important; max-width: 100% !important; }
.page-footer .footer.content { padding: 0 !important; margin: 0 !important; max-width: 100% !important; display: block !important; }

.luma-extended-footer { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #ffffff; width: 100%; box-sizing: border-box; position: relative; }
.footer-payment-strip { display: flex; justify-content: center; align-items: center; gap: 30px; padding: 20px; background: rgba(0,0,0,0.04); flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-payment-strip img { height: 28px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.9; } 
.footer-payment-strip span { font-weight: 700; font-size: 15px; letter-spacing: 1px; color: #fff; }
.footer-main { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1280px; margin: 0 auto; padding: 50px 20px; gap: 30px; }
.footer-col { flex: 1; min-width: 220px; margin-bottom: 20px; }
.footer-col h4 { color: #ffffff; font-size: 16px; font-weight: 600; letter-spacing: 1.5px; margin: 0 0 20px 0; text-transform: uppercase; }
.footer-col p { font-size: 14px; line-height: 1.8; margin-bottom: 15px; color: rgba(255,255,255,0.95); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a { color: rgba(255,255,255,0.95); text-decoration: none; font-size: 14px; transition: all 0.3s ease; }
.footer-col ul li a:hover { color: #ffffff; text-decoration: underline; padding-left: 5px; }

.footer-newsletter-form { display: flex; margin-bottom: 30px; max-width: 100%; }
.footer-newsletter-form input { flex: 1; padding: 12px 15px; border: none; border-radius: 0; font-size: 14px; height: 45px; box-sizing: border-box; outline: none; min-width: 0; color: #333; }
.footer-newsletter-form button { background: #006b70; color: #ffffff; border: none; padding: 0 25px; font-weight: bold; cursor: pointer; transition: background 0.3s; height: 45px; letter-spacing: 1px; border-radius: 0; }
.footer-newsletter-form button:hover { background: #004d50; }

.social-icons { display: flex; gap: 15px; flex-wrap: wrap; }
.social-icons a { display: flex; justify-content: center; align-items: center; width: 35px; height: 35px; border: 1.5px solid #ffffff; border-radius: 50%; color: #ffffff; text-decoration: none; transition: all 0.3s; }
.social-icons a:hover { background: #ffffff; color: #5eb3b1; transform: translateY(-3px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.social-icons svg { width: 16px; height: 16px; fill: currentColor; }

.footer-bottom-copyright { background-color: #6b7280 !important; color: #ffffff !important; text-align: center !important; padding: 15px 20px !important; font-size: 13px !important; width: 100% !important; box-sizing: border-box !important; }

@media (max-width: 767px) { .footer-main { flex-direction: column; padding: 30px 20px; } .footer-col { width: 100%; } }

/* ====================================================================
   STYLING HALAMAN DETAIL PRODUK (PDP)
   ==================================================================== */
/* 1. Harga Coret & Harga Diskon */
.product-info-price { margin-bottom: 20px; }
.product-info-price .price-box { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.product-info-price .old-price .price-label, 
.product-info-price .special-price .price-label,
.product-info-price .normal-price .price-label { display: none !important; } /* Sembunyikan text 'Regular Price' */

.product-info-price .old-price .price { color: #a1a1aa !important; font-size: 16px !important; text-decoration: line-through !important; font-weight: 500; }
.product-info-price .special-price .price, 
.product-info-price .normal-price .price { color: #d32f2f !important; font-size: 32px !important; font-weight: 900 !important; }

/* 2. Action Buttons (Wishlist, Compare, Custom Share) */
.product-social-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 25px; border-top: 1px solid #f1f1f1; padding-top: 25px; }
.product-social-links .product-addto-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }

.product-social-links .action, 
.affiliate-share-wrapper .action.share {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; 
    background: #ffffff; border: 1px solid #d1d5db; border-radius: 30px; 
    padding: 10px 20px; color: #4b5563; font-size: 12px; font-weight: 700; 
    text-transform: uppercase; text-decoration: none; transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); margin: 0 !important;
}
.product-social-links .action:hover, 
.affiliate-share-wrapper .action.share:hover {
    background: #f8fafc; border-color: #e67e22; color: #e67e22; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(230,126,34,0.15);
}

/* Memastikan Native Icon Luma Muncul Rapi */
.product-social-links .action::before { font-family: 'luma-icons'; font-size: 16px; margin: 0; line-height: 1; color: currentColor; display: inline-block; }
.product-social-links .action.towishlist::before { content: '\e600'; }
.product-social-links .action.tocompare::before { content: '\e61e'; }
.product-social-links .action span { display: inline-block !important; }

/* Custom Share Icon Fix */
.affiliate-share-wrapper { margin: 0 !important; display: inline-flex; }
.affiliate-share-wrapper .action.share svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; margin: 0; }

/* 3. Modal Share Styling */
.share-modal-body { text-align: center; padding: 10px 0; }
.aff-input-box { width: 100%; padding: 12px; margin-bottom: 20px; border: 2px solid #eee; border-radius: 8px; text-align: center; font-weight: 700; color: #333; outline: none; transition: 0.3s; box-sizing: border-box; }
.aff-input-box:focus { border-color: #e67e22; }
.share-btn-group { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-share { padding: 12px 25px; border-radius: 30px; font-weight: bold; border: none; cursor: pointer; color: #fff; text-transform: uppercase; font-size: 13px; transition: 0.3s; }
.btn-share:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); color: #fff; }

@media (max-width: 767px) {
    .product-social-links { justify-content: center; }
    .product-info-price .price-box { justify-content: center; }
    .product-social-links .action, .affiliate-share-wrapper .action.share { width: 100%; justify-content: center; }
}

/* ====================================================================
   STYLING HALAMAN DETAIL PRODUK (PDP)
   ==================================================================== */
/* 1. Harga Coret & Harga Diskon */
.product-info-price { margin-bottom: 20px; }
.product-info-price .price-box { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.product-info-price .old-price .price-label, 
.product-info-price .special-price .price-label,
.product-info-price .normal-price .price-label { display: none !important; } /* Sembunyikan text 'Regular Price' */

.product-info-price .old-price .price { color: #a1a1aa !important; font-size: 16px !important; text-decoration: line-through !important; font-weight: 500; }
.product-info-price .special-price .price, 
.product-info-price .normal-price .price { color: #d32f2f !important; font-size: 32px !important; font-weight: 900 !important; }

/* 2. Action Buttons (Wishlist, Compare, Custom Share) */
.product-social-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 25px; border-top: 1px solid #f1f1f1; padding-top: 25px; }
.product-social-links .product-addto-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }

.product-social-links .action, 
.affiliate-share-wrapper .action.share {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; 
    background: #ffffff; border: 1px solid #d1d5db; border-radius: 30px; 
    padding: 10px 20px; color: #4b5563; font-size: 12px; font-weight: 700; 
    text-transform: uppercase; text-decoration: none; transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); margin: 0 !important;
}
.product-social-links .action:hover, 
.affiliate-share-wrapper .action.share:hover {
    background: #f8fafc; border-color: #e67e22; color: #e67e22; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(230,126,34,0.15);
}

/* Memastikan Native Icon Luma Muncul Rapi */
.product-social-links .action::before { font-family: 'luma-icons'; font-size: 16px; margin: 0; line-height: 1; color: currentColor; display: inline-block; }
.product-social-links .action.towishlist::before { content: '\e600'; }
.product-social-links .action.tocompare::before { content: '\e61e'; }
.product-social-links .action span { display: inline-block !important; }

/* Custom Share Icon Fix */
.affiliate-share-wrapper { margin: 0 !important; display: inline-flex; }
.affiliate-share-wrapper .action.share svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; margin: 0; }

/* 3. Modal Share Styling */
.share-modal-body { text-align: center; padding: 10px 0; }
.aff-input-box { width: 100%; padding: 12px; margin-bottom: 20px; border: 2px solid #eee; border-radius: 8px; text-align: center; font-weight: 700; color: #333; outline: none; transition: 0.3s; box-sizing: border-box; }
.aff-input-box:focus { border-color: #e67e22; }
.share-btn-group { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-share { padding: 12px 25px; border-radius: 30px; font-weight: bold; border: none; cursor: pointer; color: #fff; text-transform: uppercase; font-size: 13px; transition: 0.3s; }
.btn-share:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); color: #fff; }

@media (max-width: 767px) {
    .product-social-links { justify-content: center; }
    .product-info-price .price-box { justify-content: center; }
    
    /* FIX: Memaksa Wrapper Share untuk merentang 100% di layar HP */
    .affiliate-share-wrapper { width: 100%; display: flex; }
    
    .product-social-links .action, .affiliate-share-wrapper .action.share { width: 100%; justify-content: center; }
}

/* ====================================================================
   STYLING HALAMAN DETAIL PRODUK (PDP)
   ==================================================================== */
/* 1. Harga Coret & Harga Diskon */
.product-info-price { margin-bottom: 20px; }
.product-info-price .price-box { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.product-info-price .old-price .price-label, 
.product-info-price .special-price .price-label,
.product-info-price .normal-price .price-label { display: none !important; } /* Sembunyikan text 'Regular Price' */

.product-info-price .old-price .price { color: #a1a1aa !important; font-size: 16px !important; text-decoration: line-through !important; font-weight: 500; }
.product-info-price .special-price .price, 
.product-info-price .normal-price .price { color: #d32f2f !important; font-size: 32px !important; font-weight: 900 !important; }

/* 2. Action Buttons (Wishlist, Compare, Custom Share) */
.product-social-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 25px; border-top: 1px solid #f1f1f1; padding-top: 25px; }
.product-social-links .product-addto-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }

.product-social-links .action, 
.affiliate-share-wrapper .action.share {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; 
    background: #ffffff; border: 1px solid #d1d5db; border-radius: 30px; 
    padding: 10px 20px; color: #4b5563; font-size: 12px; font-weight: 700; 
    text-transform: uppercase; text-decoration: none; transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); margin: 0 !important;
}
.product-social-links .action:hover, 
.affiliate-share-wrapper .action.share:hover {
    background: #f8fafc; border-color: #e67e22; color: #e67e22; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(230,126,34,0.15);
}

/* Memastikan Native Icon Luma Muncul Rapi */
.product-social-links .action::before { font-family: 'luma-icons'; font-size: 16px; margin: 0; line-height: 1; color: currentColor; display: inline-block; }
.product-social-links .action.towishlist::before { content: '\e600'; }
.product-social-links .action.tocompare::before { content: '\e61e'; }
.product-social-links .action span { display: inline-block !important; }

/* Custom Share Icon Fix */
.affiliate-share-wrapper { margin: 0 !important; display: inline-flex; }
.affiliate-share-wrapper .action.share svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; margin: 0; }

/* 3. Modal Share Styling */
.share-modal-body { text-align: center; padding: 10px 0; }
.aff-input-box { width: 100%; padding: 12px; margin-bottom: 20px; border: 2px solid #eee; border-radius: 8px; text-align: center; font-weight: 700; color: #333; outline: none; transition: 0.3s; box-sizing: border-box; }
.aff-input-box:focus { border-color: #e67e22; }
.share-btn-group { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-share { padding: 12px 25px; border-radius: 30px; font-weight: bold; border: none; cursor: pointer; color: #fff; text-transform: uppercase; font-size: 13px; transition: 0.3s; }
.btn-share:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.2); color: #fff; }

@media (max-width: 767px) {
    .product-social-links { justify-content: center; }
    .product-info-price .price-box { justify-content: center; }
    
    /* FIX: Memaksa Wrapper Share untuk merentang 100% di layar HP */
    .affiliate-share-wrapper { width: 100%; display: flex; }
    
    .product-social-links .action, .affiliate-share-wrapper .action.share { width: 100%; justify-content: center; }
}

/* ====================================================================
   STYLING HALAMAN DETAIL PRODUK (PDP)
   ==================================================================== */
/* 1. Harga Coret & Harga Diskon */
.product-info-price { margin-bottom: 20px; }
.product-info-price .price-box { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.product-info-price .old-price .price-label, 
.product-info-price .special-price .price-label,
.product-info-price .normal-price .price-label { display: none !important; } /* Sembunyikan text 'Regular Price' */

.product-info-price .old-price .price { color: #a1a1aa !important; font-size: 16px !important; text-decoration: line-through !important; font-weight: 500; }
.product-info-price .special-price .price, 
.product-info-price .normal-price .price { color: #d32f2f !important; font-size: 32px !important; font-weight: 900 !important; }

/* 2. Action Buttons (Wishlist, Compare, Custom Share) */
.product-social-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 25px; border-top: 1px solid #f1f1f1; padding-top: 25px; }
.product-social-links .product-addto-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }

/* FIX BUTTON SHARE: Override inline style Share dengan !important agar sinkron */
.product-social-links .action, 
.affiliate-share-wrapper .action.share {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; 
    background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 30px !important; 
    padding: 10px 20px !important; color: #4b5563 !important; font-size: 12px !important; font-weight: 700 !important; 
    text-transform: uppercase !important; text-decoration: none !important; transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; margin: 0 !important; height: auto !important;
}
.product-social-links .action:hover, 
.affiliate-share-wrapper .action.share:hover {
    background: #f8fafc !important; border-color: #e67e22 !important; color: #e67e22 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(230,126,34,0.15) !important;
}

/* Memastikan Native Icon Luma Muncul Rapi */
.product-social-links .action::before { font-family: 'luma-icons'; font-size: 16px; margin: 0; line-height: 1; color: currentColor; display: inline-block; }
.product-social-links .action.towishlist::before { content: '\e600'; }
.product-social-links .action.tocompare::before { content: '\e61e'; }
.product-social-links .action span { display: inline-block !important; }

/* Custom Share Icon Fix */
.affiliate-share-wrapper { margin: 0 !important; display: inline-flex !important; vertical-align: top !important; }
.affiliate-share-wrapper .action.share svg { width: 16px !important; height: 16px !important; stroke: currentColor !important; fill: none !important; stroke-width: 2 !important; margin: 0 !important; }

@media (max-width: 767px) {
    .product-social-links { justify-content: center; }
    .product-info-price .price-box { justify-content: center; }
    
    /* FIX: Memaksa Wrapper Share untuk merentang 100% di layar HP */
    .affiliate-share-wrapper { width: 100% !important; display: flex !important; }
    
    .product-social-links .action, .affiliate-share-wrapper .action.share { width: 100% !important; justify-content: center !important; }
}

/* ====================================================================
   STYLING HALAMAN DETAIL PRODUK (PDP)
   ==================================================================== */
/* 1. Harga Coret & Harga Diskon */
.product-info-price { margin-bottom: 20px; }
.product-info-price .price-box { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.product-info-price .old-price .price-label, 
.product-info-price .special-price .price-label,
.product-info-price .normal-price .price-label { display: none !important; }

.product-info-price .old-price .price { color: #a1a1aa !important; font-size: 16px !important; text-decoration: line-through !important; font-weight: 500; }
.product-info-price .special-price .price, 
.product-info-price .normal-price .price { color: #d32f2f !important; font-size: 32px !important; font-weight: 900 !important; }

/* 2. Action Buttons (Wishlist, Compare, Custom Share) */
.product-social-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 25px; border-top: 1px solid #f1f1f1; padding-top: 25px; }
.product-social-links .product-addto-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }

/* FIX BUTTON SHARE: Override inline style Share dengan !important agar sinkron */
.product-social-links .action, 
.affiliate-share-wrapper .action.share {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; 
    background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 30px !important; 
    padding: 10px 20px !important; color: #4b5563 !important; font-size: 12px !important; font-weight: 700 !important; 
    text-transform: uppercase !important; text-decoration: none !important; transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; margin: 0 !important; height: auto !important;
}
.product-social-links .action:hover, 
.affiliate-share-wrapper .action.share:hover {
    background: #f8fafc !important; border-color: #e67e22 !important; color: #e67e22 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(230,126,34,0.15) !important;
}

/* Memastikan Native Icon Luma Muncul Rapi */
.product-social-links .action::before { font-family: 'luma-icons'; font-size: 16px; margin: 0; line-height: 1; color: currentColor; display: inline-block; }
.product-social-links .action.towishlist::before { content: '\e600'; }
.product-social-links .action.tocompare::before { content: '\e61e'; }
.product-social-links .action span { display: inline-block !important; }

/* Custom Share Icon Fix */
.affiliate-share-wrapper { margin: 0 !important; display: inline-flex !important; vertical-align: top !important; }
.affiliate-share-wrapper .action.share svg { width: 16px !important; height: 16px !important; stroke: currentColor !important; fill: none !important; stroke-width: 2 !important; margin: 0 !important; }

/* ====================================================================
   FIX MODAL MAGENTO TERTUTUP STICKY NAVBAR
   ==================================================================== */
.modals-wrapper .modals-overlay { z-index: 100004 !important; }
.modals-wrapper .modal-popup { z-index: 100005 !important; }
.modals-wrapper .modal-slide { z-index: 100005 !important; }

@media (max-width: 767px) {
    .product-social-links { justify-content: center; }
    .product-info-price .price-box { justify-content: center; }
    
    /* Memaksa Wrapper Share untuk merentang 100% di layar HP */
    .affiliate-share-wrapper { width: 100% !important; display: flex !important; }
    .product-social-links .action, .affiliate-share-wrapper .action.share { width: 100% !important; justify-content: center !important; }
}

/* ====================================================================
   STYLING HALAMAN DETAIL PRODUK (PDP)
   ==================================================================== */
/* 1. Harga Coret & Harga Diskon */
.product-info-price { margin-bottom: 20px; }
.product-info-price .price-box { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.product-info-price .old-price .price-label, 
.product-info-price .special-price .price-label,
.product-info-price .normal-price .price-label { display: none !important; }

.product-info-price .old-price .price { color: #a1a1aa !important; font-size: 16px !important; text-decoration: line-through !important; font-weight: 500; }
.product-info-price .special-price .price, 
.product-info-price .normal-price .price { color: #d32f2f !important; font-size: 32px !important; font-weight: 900 !important; }

/* 2. Action Buttons (Wishlist, Compare, Custom Share) */
.product-social-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 25px; border-top: 1px solid #f1f1f1; padding-top: 25px; }
.product-social-links .product-addto-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }

/* FIX BUTTON SHARE: Override inline style Share dengan !important agar sinkron */
.product-social-links .action, 
.affiliate-share-wrapper .action.share {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; 
    background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 30px !important; 
    padding: 10px 20px !important; color: #4b5563 !important; font-size: 12px !important; font-weight: 700 !important; 
    text-transform: uppercase !important; text-decoration: none !important; transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; margin: 0 !important; height: auto !important;
}
.product-social-links .action:hover, 
.affiliate-share-wrapper .action.share:hover {
    background: #f8fafc !important; border-color: #e67e22 !important; color: #e67e22 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(230,126,34,0.15) !important;
}

/* Memastikan Native Icon Luma Muncul Rapi */
.product-social-links .action::before { font-family: 'luma-icons'; font-size: 16px; margin: 0; line-height: 1; color: currentColor; display: inline-block; }
.product-social-links .action.towishlist::before { content: '\e600'; }
.product-social-links .action.tocompare::before { content: '\e61e'; }
.product-social-links .action span { display: inline-block !important; }

/* Custom Share Icon Fix */
.affiliate-share-wrapper { margin: 0 !important; display: inline-flex !important; vertical-align: top !important; }
.affiliate-share-wrapper .action.share svg { width: 16px !important; height: 16px !important; stroke: currentColor !important; fill: none !important; stroke-width: 2 !important; margin: 0 !important; }

/* ====================================================================
   FIX MODAL MAGENTO TERTUTUP STICKY NAVBAR
   ==================================================================== */
.modals-wrapper .modals-overlay { z-index: 100004 !important; }
.modals-wrapper .modal-popup { z-index: 100005 !important; }
.modals-wrapper .modal-slide { z-index: 100005 !important; }

@media (max-width: 767px) {
    .product-social-links { justify-content: center; }
    .product-info-price .price-box { justify-content: center; }
    
    /* Memaksa Wrapper Share untuk merentang 100% di layar HP */
    .affiliate-share-wrapper { width: 100% !important; display: flex !important; }
    .product-social-links .action, .affiliate-share-wrapper .action.share { width: 100% !important; justify-content: center !important; }
}

/* ====================================================================
   STYLING HALAMAN DETAIL PRODUK (PDP)
   ==================================================================== */
/* 1. Harga Coret & Harga Diskon */
.product-info-price { margin-bottom: 20px; }
.product-info-price .price-box { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.product-info-price .old-price .price-label, 
.product-info-price .special-price .price-label,
.product-info-price .normal-price .price-label { display: none !important; }

.product-info-price .old-price .price { color: #a1a1aa !important; font-size: 16px !important; text-decoration: line-through !important; font-weight: 500; }
.product-info-price .special-price .price, 
.product-info-price .normal-price .price { color: #d32f2f !important; font-size: 32px !important; font-weight: 900 !important; }

/* 2. Action Buttons (Wishlist, Compare, Custom Share) */
.product-social-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 25px; border-top: 1px solid #f1f1f1; padding-top: 25px; }
.product-social-links .product-addto-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }

/* FIX BUTTON SHARE: Override inline style Share dengan !important agar sinkron */
.product-social-links .action, 
.affiliate-share-wrapper .action.share {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; 
    background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 30px !important; 
    padding: 10px 20px !important; color: #4b5563 !important; font-size: 12px !important; font-weight: 700 !important; 
    text-transform: uppercase !important; text-decoration: none !important; transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; margin: 0 !important; height: auto !important;
}
.product-social-links .action:hover, 
.affiliate-share-wrapper .action.share:hover {
    background: #f8fafc !important; border-color: #e67e22 !important; color: #e67e22 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(230,126,34,0.15) !important;
}

/* Memastikan Native Icon Luma Muncul Rapi */
.product-social-links .action::before { font-family: 'luma-icons'; font-size: 16px; margin: 0; line-height: 1; color: currentColor; display: inline-block; }
.product-social-links .action.towishlist::before { content: '\e600'; }
.product-social-links .action.tocompare::before { content: '\e61e'; }
.product-social-links .action span { display: inline-block !important; }

/* Custom Share Icon Fix */
.affiliate-share-wrapper { margin: 0 !important; display: inline-flex !important; vertical-align: top !important; }
.affiliate-share-wrapper .action.share svg { width: 16px !important; height: 16px !important; stroke: currentColor !important; fill: none !important; stroke-width: 2 !important; margin: 0 !important; }

/* ====================================================================
   FIX MODAL MAGENTO TERTUTUP STICKY NAVBAR
   ==================================================================== */
.modals-wrapper .modals-overlay { z-index: 100004 !important; }
.modals-wrapper .modal-popup { z-index: 100005 !important; }
.modals-wrapper .modal-slide { z-index: 100005 !important; }

@media (max-width: 767px) {
    .product-social-links { justify-content: center; }
    .product-info-price .price-box { justify-content: center; }
    
    /* Memaksa Wrapper Share untuk merentang 100% di layar HP */
    .affiliate-share-wrapper { width: 100% !important; display: flex !important; }
    .product-social-links .action, .affiliate-share-wrapper .action.share { width: 100% !important; justify-content: center !important; }
}

/* ====================================================================
   STYLING HALAMAN DETAIL PRODUK (PDP)
   ==================================================================== */
/* 1. Harga Coret & Harga Diskon */
.product-info-price { margin-bottom: 20px; }
.product-info-price .price-box { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.product-info-price .old-price .price-label, 
.product-info-price .special-price .price-label,
.product-info-price .normal-price .price-label { display: none !important; }

.product-info-price .old-price .price { color: #a1a1aa !important; font-size: 16px !important; text-decoration: line-through !important; font-weight: 500; }
.product-info-price .special-price .price, 
.product-info-price .normal-price .price { color: #d32f2f !important; font-size: 32px !important; font-weight: 900 !important; }

/* 2. Action Buttons (Wishlist, Compare, Custom Share) */
.product-social-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 25px; border-top: 1px solid #f1f1f1; padding-top: 25px; }
.product-social-links .product-addto-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }

/* FIX BUTTON SHARE: Override inline style Share dengan !important agar sinkron */
.product-social-links .action, 
.affiliate-share-wrapper .action.share {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; 
    background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 30px !important; 
    padding: 10px 20px !important; color: #4b5563 !important; font-size: 12px !important; font-weight: 700 !important; 
    text-transform: uppercase !important; text-decoration: none !important; transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; margin: 0 !important; height: auto !important;
}
.product-social-links .action:hover, 
.affiliate-share-wrapper .action.share:hover {
    background: #f8fafc !important; border-color: #e67e22 !important; color: #e67e22 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(230,126,34,0.15) !important;
}

/* Memastikan Native Icon Luma Muncul Rapi */
.product-social-links .action::before { font-family: 'luma-icons'; font-size: 16px; margin: 0; line-height: 1; color: currentColor; display: inline-block; }
.product-social-links .action.towishlist::before { content: '\e600'; }
.product-social-links .action.tocompare::before { content: '\e61e'; }
.product-social-links .action span { display: inline-block !important; }

/* Custom Share Icon Fix */
.affiliate-share-wrapper { margin: 0 !important; display: inline-flex !important; vertical-align: top !important; }
.affiliate-share-wrapper .action.share svg { width: 16px !important; height: 16px !important; stroke: currentColor !important; fill: none !important; stroke-width: 2 !important; margin: 0 !important; }

/* ====================================================================
   FIX MODAL MAGENTO TERTUTUP STICKY NAVBAR
   ==================================================================== */
.modals-wrapper .modals-overlay { z-index: 100004 !important; }
.modals-wrapper .modal-popup { z-index: 100005 !important; }
.modals-wrapper .modal-slide { z-index: 100005 !important; }

@media (max-width: 767px) {
    .product-social-links { justify-content: center; }
    .product-info-price .price-box { justify-content: center; }
    
    /* Memaksa Wrapper Share untuk merentang 100% di layar HP */
    .affiliate-share-wrapper { width: 100% !important; display: flex !important; }
    .product-social-links .action, .affiliate-share-wrapper .action.share { width: 100% !important; justify-content: center !important; }
}

/* ====================================================================
   STYLING HALAMAN DETAIL PRODUK (PDP)
   ==================================================================== */
/* 1. Harga Coret & Harga Diskon */
.product-info-price { margin-bottom: 20px; }
.product-info-price .price-box { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.product-info-price .old-price .price-label, 
.product-info-price .special-price .price-label,
.product-info-price .normal-price .price-label { display: none !important; }

.product-info-price .old-price .price { color: #a1a1aa !important; font-size: 16px !important; text-decoration: line-through !important; font-weight: 500; }
.product-info-price .special-price .price, 
.product-info-price .normal-price .price { color: #d32f2f !important; font-size: 32px !important; font-weight: 900 !important; }

/* 2. Action Buttons (Wishlist, Compare, Custom Share) */
.product-social-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 25px; border-top: 1px solid #f1f1f1; padding-top: 25px; }
.product-social-links .product-addto-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }

/* FIX BUTTON SHARE: Override inline style Share dengan !important agar sinkron */
.product-social-links .action, 
.affiliate-share-wrapper .action.share {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; 
    background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 30px !important; 
    padding: 10px 20px !important; color: #4b5563 !important; font-size: 12px !important; font-weight: 700 !important; 
    text-transform: uppercase !important; text-decoration: none !important; transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; margin: 0 !important; height: auto !important;
}
.product-social-links .action:hover, 
.affiliate-share-wrapper .action.share:hover {
    background: #f8fafc !important; border-color: #e67e22 !important; color: #e67e22 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(230,126,34,0.15) !important;
}

/* Memastikan Native Icon Luma Muncul Rapi */
.product-social-links .action::before { font-family: 'luma-icons'; font-size: 16px; margin: 0; line-height: 1; color: currentColor; display: inline-block; }
.product-social-links .action.towishlist::before { content: '\e600'; }
.product-social-links .action.tocompare::before { content: '\e61e'; }
.product-social-links .action span { display: inline-block !important; }

/* Custom Share Icon Fix */
.affiliate-share-wrapper { margin: 0 !important; display: inline-flex !important; vertical-align: top !important; }
.affiliate-share-wrapper .action.share svg { width: 16px !important; height: 16px !important; stroke: currentColor !important; fill: none !important; stroke-width: 2 !important; margin: 0 !important; }

/* ====================================================================
   FIX MODAL MAGENTO TERTUTUP STICKY NAVBAR
   ==================================================================== */
.modals-wrapper .modals-overlay { z-index: 100004 !important; }
.modals-wrapper .modal-popup { z-index: 100005 !important; }
.modals-wrapper .modal-slide { z-index: 100005 !important; }

@media (max-width: 767px) {
    .product-social-links { justify-content: center; }
    .product-info-price .price-box { justify-content: center; }
    
    /* Memaksa Wrapper Share untuk merentang 100% di layar HP */
    .affiliate-share-wrapper { width: 100% !important; display: flex !important; }
    .product-social-links .action, .affiliate-share-wrapper .action.share { width: 100% !important; justify-content: center !important; }
}

/* ====================================================================
   STYLING HALAMAN DETAIL PRODUK (PDP)
   ==================================================================== */
/* 1. Harga Coret & Harga Diskon */
.product-info-price { margin-bottom: 20px; }
.product-info-price .price-box { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.product-info-price .old-price .price-label, 
.product-info-price .special-price .price-label,
.product-info-price .normal-price .price-label { display: none !important; }

.product-info-price .old-price .price { color: #a1a1aa !important; font-size: 16px !important; text-decoration: line-through !important; font-weight: 500; }
.product-info-price .special-price .price, 
.product-info-price .normal-price .price { color: #d32f2f !important; font-size: 32px !important; font-weight: 900 !important; }

/* 2. Action Buttons (Wishlist, Compare, Custom Share) */
.product-social-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 25px; border-top: 1px solid #f1f1f1; padding-top: 25px; }
.product-social-links .product-addto-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }

/* FIX BUTTON SHARE: Override inline style Share dengan !important agar sinkron */
.product-social-links .action, 
.affiliate-share-wrapper .action.share {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; 
    background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 30px !important; 
    padding: 10px 20px !important; color: #4b5563 !important; font-size: 12px !important; font-weight: 700 !important; 
    text-transform: uppercase !important; text-decoration: none !important; transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; margin: 0 !important; height: auto !important;
}
.product-social-links .action:hover, 
.affiliate-share-wrapper .action.share:hover {
    background: #f8fafc !important; border-color: #e67e22 !important; color: #e67e22 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(230,126,34,0.15) !important;
}

/* Memastikan Native Icon Luma Muncul Rapi */
.product-social-links .action::before { font-family: 'luma-icons'; font-size: 16px; margin: 0; line-height: 1; color: currentColor; display: inline-block; }
.product-social-links .action.towishlist::before { content: '\e600'; }
.product-social-links .action.tocompare::before { content: '\e61e'; }
.product-social-links .action span { display: inline-block !important; }

/* Custom Share Icon Fix */
.affiliate-share-wrapper { margin: 0 !important; display: inline-flex !important; vertical-align: top !important; }
.affiliate-share-wrapper .action.share svg { width: 16px !important; height: 16px !important; stroke: currentColor !important; fill: none !important; stroke-width: 2 !important; margin: 0 !important; }

/* ====================================================================
   FIX MODAL MAGENTO TERTUTUP STICKY NAVBAR
   ==================================================================== */
.modals-wrapper .modals-overlay { z-index: 100004 !important; }
.modals-wrapper .modal-popup { z-index: 100005 !important; }
.modals-wrapper .modal-slide { z-index: 100005 !important; }

@media (max-width: 767px) {
    .product-social-links { justify-content: center; }
    .product-info-price .price-box { justify-content: center; }
    
    /* Memaksa Wrapper Share untuk merentang 100% di layar HP */
    .affiliate-share-wrapper { width: 100% !important; display: flex !important; }
    .product-social-links .action, .affiliate-share-wrapper .action.share { width: 100% !important; justify-content: center !important; }
}

/* ====================================================================
   STYLING HALAMAN DETAIL PRODUK (PDP)
   ==================================================================== */
/* 1. Harga Coret & Harga Diskon */
.product-info-price { margin-bottom: 20px; }
.product-info-price .price-box { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.product-info-price .old-price .price-label, 
.product-info-price .special-price .price-label,
.product-info-price .normal-price .price-label { display: none !important; }

.product-info-price .old-price .price { color: #a1a1aa !important; font-size: 16px !important; text-decoration: line-through !important; font-weight: 500; }
.product-info-price .special-price .price, 
.product-info-price .normal-price .price { color: #d32f2f !important; font-size: 32px !important; font-weight: 900 !important; }

/* 2. Action Buttons (Wishlist, Compare, Custom Share) */
.product-social-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 25px; border-top: 1px solid #f1f1f1; padding-top: 25px; }
.product-social-links .product-addto-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }

/* FIX BUTTON SHARE: Override inline style Share dengan !important agar sinkron */
.product-social-links .action, 
.affiliate-share-wrapper .action.share {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; 
    background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 30px !important; 
    padding: 10px 20px !important; color: #4b5563 !important; font-size: 12px !important; font-weight: 700 !important; 
    text-transform: uppercase !important; text-decoration: none !important; transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; margin: 0 !important; height: auto !important;
}
.product-social-links .action:hover, 
.affiliate-share-wrapper .action.share:hover {
    background: #f8fafc !important; border-color: #e67e22 !important; color: #e67e22 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(230,126,34,0.15) !important;
}

/* Memastikan Native Icon Luma Muncul Rapi */
.product-social-links .action::before { font-family: 'luma-icons'; font-size: 16px; margin: 0; line-height: 1; color: currentColor; display: inline-block; }
.product-social-links .action.towishlist::before { content: '\e600'; }
.product-social-links .action.tocompare::before { content: '\e61e'; }
.product-social-links .action span { display: inline-block !important; }

/* Custom Share Icon Fix */
.affiliate-share-wrapper { margin: 0 !important; display: inline-flex !important; vertical-align: top !important; }
.affiliate-share-wrapper .action.share svg { width: 16px !important; height: 16px !important; stroke: currentColor !important; fill: none !important; stroke-width: 2 !important; margin: 0 !important; }

/* ====================================================================
   FIX GAP BANNER KATEGORI PRODUK (Sesuai temuan IT Lead)
   ==================================================================== */
@media (min-width: 768px) {
    .luma-extended-sticky-nav .page-main { padding-top: 20px !important; }
}

/* ====================================================================
   FIX MODAL MAGENTO TERTUTUP STICKY NAVBAR
   ==================================================================== */
.modals-wrapper .modals-overlay { z-index: 100004 !important; }
.modals-wrapper .modal-popup { z-index: 100005 !important; }
.modals-wrapper .modal-slide { z-index: 100005 !important; }

@media (max-width: 767px) {
    .product-social-links { justify-content: center; }
    .product-info-price .price-box { justify-content: center; }
    
    /* Memaksa Wrapper Share untuk merentang 100% di layar HP */
    .affiliate-share-wrapper { width: 100% !important; display: flex !important; }
    .product-social-links .action, .affiliate-share-wrapper .action.share { width: 100% !important; justify-content: center !important; }
}

/* ====================================================================
   STYLING HALAMAN DETAIL PRODUK (PDP)
   ==================================================================== */
/* 1. Harga Coret & Harga Diskon */
.product-info-price { margin-bottom: 20px; }
.product-info-price .price-box { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.product-info-price .old-price .price-label, 
.product-info-price .special-price .price-label,
.product-info-price .normal-price .price-label { display: none !important; }

.product-info-price .old-price .price { color: #a1a1aa !important; font-size: 16px !important; text-decoration: line-through !important; font-weight: 500; }
.product-info-price .special-price .price, 
.product-info-price .normal-price .price { color: #d32f2f !important; font-size: 32px !important; font-weight: 900 !important; }

/* 2. Action Buttons (Wishlist, Compare, Custom Share) */
.product-social-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 25px; border-top: 1px solid #f1f1f1; padding-top: 25px; }
.product-social-links .product-addto-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }

/* FIX BUTTON SHARE: Override inline style Share dengan !important agar sinkron */
.product-social-links .action, 
.affiliate-share-wrapper .action.share {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; 
    background: #ffffff !important; border: 1px solid #d1d5db !important; border-radius: 30px !important; 
    padding: 10px 20px !important; color: #4b5563 !important; font-size: 12px !important; font-weight: 700 !important; 
    text-transform: uppercase !important; text-decoration: none !important; transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important; margin: 0 !important; height: auto !important;
}
.product-social-links .action:hover, 
.affiliate-share-wrapper .action.share:hover {
    background: #f8fafc !important; border-color: #e67e22 !important; color: #e67e22 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 10px rgba(230,126,34,0.15) !important;
}

/* Memastikan Native Icon Luma Muncul Rapi */
.product-social-links .action::before { font-family: 'luma-icons'; font-size: 16px; margin: 0; line-height: 1; color: currentColor; display: inline-block; }
.product-social-links .action.towishlist::before { content: '\e600'; }
.product-social-links .action.tocompare::before { content: '\e61e'; }
.product-social-links .action span { display: inline-block !important; }

/* Custom Share Icon Fix */
.affiliate-share-wrapper { margin: 0 !important; display: inline-flex !important; vertical-align: top !important; }
.affiliate-share-wrapper .action.share svg { width: 16px !important; height: 16px !important; stroke: currentColor !important; fill: none !important; stroke-width: 2 !important; margin: 0 !important; }

/* ====================================================================
   FIX GAP BANNER KATEGORI PRODUK (Sesuai temuan IT Lead)
   ==================================================================== */
@media (min-width: 768px) {
    .luma-extended-sticky-nav .page-main { padding-top: 20px !important; }
}

/* ====================================================================
   FIX MODAL MAGENTO TERTUTUP STICKY NAVBAR
   ==================================================================== */
.modals-wrapper .modals-overlay { z-index: 100004 !important; }
.modals-wrapper .modal-popup { z-index: 100005 !important; }
.modals-wrapper .modal-slide { z-index: 100005 !important; }

/* ====================================================================
   FIX GAP WHATSAPP WIDGET (Menghilangkan margin-bottom bawaan Magento)
   ==================================================================== */
.page-wrapper > .widget.block.block-static-block { margin-bottom: 0 !important; }

@media (max-width: 767px) {
    .product-social-links { justify-content: center; }
    .product-info-price .price-box { justify-content: center; }
    
    /* Memaksa Wrapper Share untuk merentang 100% di layar HP */
    .affiliate-share-wrapper { width: 100% !important; display: flex !important; }
    .product-social-links .action, .affiliate-share-wrapper .action.share { width: 100% !important; justify-content: center !important; }
}

/* ====================================================================
   FIX TOP TICKER ALWAYS VISIBLE (COMPACT STACK MODE)
   ==================================================================== */
/* 1. Kembalikan Ticker saat di-scroll dan jadikan Fixed di pucuk layar */
.luma-extended-sticky-nav .luma-top-ticker {
    display: flex !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1005 !important;
    /* Kita gepengkan tingginya agar tidak makan tempat */
    height: 25px !important;
    line-height: 25px !important;
    font-size: 10px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 2. Turunkan Sticky Header agar pas berada di bawah Ticker (25px) */
.luma-extended-sticky-nav .page-header {
    top: 25px !important;
    transition: all 0.3s ease; /* Tambahkan animasi transisi halus */
}

/* 3. KOMPENSASI DESKTOP: Susutkan Navbar saat Sticky */
@media (min-width: 768px) {
    .luma-extended-sticky-nav .page-header {
        padding: 8px 50px !important; /* Padding atas-bawah diperkecil */
    }
    .luma-extended-sticky-nav .page-header .logo img {
        max-height: 30px !important; /* Logo menyusut */
        transition: all 0.3s ease;
    }
    .luma-extended-sticky-nav .header.content .block-search .control input {
        height: 38px !important; /* Kolom search lebih tipis */
    }
    .luma-extended-sticky-nav .nav-sections {
        top: 80px !important; /* Sesuaikan posisi menu kategori (25px ticker + 55px header) */
    }
}

/* 4. KOMPENSASI MOBILE: Susutkan Header HP saat Sticky */
@media (max-width: 767px) {
    .luma-extended-sticky-nav .header.content {
        min-height: 50px !important; /* Tinggi header susut */
    }
    .luma-extended-sticky-nav .header.content .logo {
        top: 10px !important;
    }
    .luma-extended-sticky-nav .header.content .logo img {
        max-height: 28px !important;
    }
    /* Sesuaikan posisi icon hamburger, cart, dan search agar tetap di tengah */
    .luma-extended-sticky-nav .nav-toggle,
    .luma-extended-sticky-nav .minicart-wrapper,
    .luma-extended-sticky-nav .header.content .compare.wrapper,
    .luma-extended-sticky-nav .block-search .label[data-role="minisearch-label"] {
        top: 8px !important; 
    }
}

/* ====================================================================
   FIX MENU TENGGELAM (OVERLAPPING STICKY HEADER)
   ==================================================================== */
@media (min-width: 768px) {
    /* 1. Reset kesalahan penempatan padding di container luar */
    .luma-extended-sticky-nav .page-header {
        padding: 0 !important; 
    }
    
    /* 2. Pindahkan padding tipis ke container dalam agar header benar-benar gepeng (tinggi ~55px) */
    .luma-extended-sticky-nav .header.content {
        padding: 8px 50px !important; 
        min-height: 55px !important;
    }
    
    /* 3. Atur posisi menu (nav-sections) agar pas menempel: 25px (Ticker) + 55px (Header) = 80px */
    .luma-extended-sticky-nav .nav-sections {
        top: 80px !important; 
    }
}

/* ====================================================================
   FIX MENU TENGGELAM (OVERLAPPING STICKY HEADER)
   ==================================================================== */
@media (min-width: 768px) {
    /* 1. Reset kesalahan penempatan padding di container luar */
    .luma-extended-sticky-nav .page-header {
        padding: 0 !important; 
    }
    
    /* 2. Pindahkan padding tipis ke container dalam agar header benar-benar gepeng (tinggi ~55px) */
    .luma-extended-sticky-nav .header.content {
        padding: 8px 50px !important; 
        min-height: 55px !important;
    }
    
    /* 3. Atur posisi menu (nav-sections) agar pas menempel: 25px (Ticker) + 55px (Header) = 80px */
    .luma-extended-sticky-nav .nav-sections {
        top: 80px !important; 
    }
}

/* ====================================================================
   FIX SEARCH ICON (DESKTOP) & SEARCH BOX GAP (MOBILE STICKY)
   ==================================================================== */
@media (min-width: 768px) {
    /* Posisi presisi untuk ikon search di desktop */
    .header.content .block-search .action.search {
        top: -2px !important;
    }
}

@media (max-width: 767px) {
    /* Saat sticky, header mobile menyusut menjadi 50px. 
       Maka kotak pencarian harus ikut naik ke 50px agar tidak ada celah bolong. */
    .luma-extended-sticky-nav .block-search .control {
        top: 50px !important; 
    }
}

/* ====================================================================
   FIX LOGO GEPENG (ASPECT RATIO PROTECTOR)
   ==================================================================== */
/* Memaksa browser mengabaikan atribut width/height bawaan Magento */
.header.content .logo img,
.luma-extended-sticky-nav .header.content .logo img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* ====================================================================
   FIX PEMISAHAN ICON SEARCH (NORMAL VS STICKY/GEPENG)
   ==================================================================== */
@media (min-width: 768px) {
    /* 1. STATE NORMAL: Kembalikan icon search ke posisi aslinya (2px) */
    .header.content .block-search .action.search {
        top: 2px !important;
        transition: top 0.3s ease; /* Tambahkan transisi halus saat berubah state */
    }
    
    /* 2. STATE GEPENG (STICKY): Terapkan -2px HANYA saat class sticky aktif */
    .luma-extended-sticky-nav .header.content .block-search .action.search {
        top: -2px !important;
    }
}

/* ====================================================================
   MARKETPLACE COMPACT GRID UI (SHOPEE/TOKOPEDIA STYLE)
   ==================================================================== */

/* 1. KEPADATAN GRID (GRID DENSITY) */
body .products-grid .product-items { 
    margin: 0 -6px !important; 
}
body .products-grid .product-item { 
    padding: 6px !important; 
}

/* Memaksa Desktop jadi 5 atau 6 kolom (Lebih hemat ruang) */
@media (min-width: 1200px) {
    body .products-grid .product-item { flex: 0 0 16.666% !important; max-width: 16.666% !important; } /* 6 Kolom */
}
@media (min-width: 992px) and (max-width: 1199px) {
    body .products-grid .product-item { flex: 0 0 20% !important; max-width: 20% !important; } /* 5 Kolom */
}

/* 2. KARTU PRODUK (CARD COMPACTNESS) */
body .products-grid .product-item-info {
    padding: 8px !important; /* Padding sangat tipis ala marketplace */
    border-radius: 8px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
body .products-grid .product-item-info:hover, 
body .products-grid .product-item-info.active {
    padding: 8px !important; /* Jangan biarkan padding bengkak saat di-hover */
    border-color: #e67e22 !important;
    box-shadow: 0 4px 12px rgba(230,126,34,0.15) !important;
    transform: translateY(-2px) !important;
    z-index: 9;
}

/* Gambar Produk */
body .products-grid .product-item-photo { 
    margin: 0 0 8px 0 !important; 
}

/* 3. TIPOGRAFI (RATA KIRI & RAMPING) */
body .products-grid .product-item-details {
    align-items: flex-start !important; /* Paksa semua elemen rata kiri */
}
body .products-grid .product-item-name { 
    margin: 0 0 4px 0 !important; 
    text-align: left !important; 
}
body .products-grid .product-item-name a { 
    font-size: 12px !important; 
    line-height: 1.3 !important; 
    height: 31px !important; /* Kunci tinggi maksimal 2 baris */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #333 !important;
    font-weight: 500 !important;
}

/* Area Harga */
body .products-grid .price-box { 
    margin: 0 0 8px 0 !important; 
    text-align: left !important; 
    width: 100%;
}
body .products-grid .price-box .price { 
    font-size: 15px !important; /* Ukuran harga sedikit disusutkan */
}
body .products-grid .price-box .old-price .price { 
    font-size: 11px !important; 
}

/* 4. MICRO ACTION BUTTONS (TOMBOL KOTAK MINI DI BAWAH HARGA) */
body .products-grid .product-item-actions {
    display: flex !important;
    flex-direction: row !important; /* Jejerkan ke samping */
    justify-content: flex-start !important; /* Rata kiri */
    gap: 6px !important;
    margin: 0 !important;
    width: 100%;
}
body .products-grid .product-item-actions .actions-primary, 
body .products-grid .product-item-actions .actions-secondary {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    margin: 0 !important;
    width: auto !important; /* Jangan paksa full width */
}

/* Styling Tombol Mini */
body .products-grid .product-item-actions .action {
    width: 32px !important; 
    height: 32px !important; 
    border-radius: 6px !important; /* Kotak dengan sudut lengkung */
    background: #f8f9fa !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
}
body .products-grid .product-item-actions .action::before,
body .products-grid .product-item-actions .actions-primary .action.tocart::before {
    font-size: 15px !important; /* Icon lebih kecil */
}
body .products-grid .product-item-actions .action:hover {
    background: #e67e22 !important;
    color: #fff !important;
    border-color: #e67e22 !important;
    transform: none !important; /* Matikan efek scale agar tidak overlapping */
}

/* Sorot Tombol Add to Cart dengan warna brand */
body .products-grid .product-item-actions .actions-primary .action.tocart {
    background: rgba(230,126,34,0.1) !important;
    border-color: rgba(230,126,34,0.3) !important;
    color: #e67e22 !important;
}
body .products-grid .product-item-actions .actions-primary .action.tocart::before {
    color: #e67e22 !important;
}
body .products-grid .product-item-actions .actions-primary .action.tocart:hover {
    background: #e67e22 !important;
}
body .products-grid .product-item-actions .actions-primary .action.tocart:hover::before {
    color: #ffffff !important;
}

/* 5. MOBILE OPTIMIZATION (SUPER TIGHT) */
@media (max-width: 767px) {
    body .products-grid .product-items { margin: 0 -4px !important; }
    body .products-grid .product-item { padding: 4px !important; }
    body .products-grid .product-item-info { padding: 6px !important; }
    
    body .products-grid .product-item-name a { font-size: 11px !important; height: 28px !important; }
    body .products-grid .price-box .price { font-size: 13px !important; }
    
    body .products-grid .product-item-actions .action {
        width: 28px !important; 
        height: 28px !important;
        border-radius: 4px !important;
    }
    body .products-grid .product-item-actions .action::before,
    body .products-grid .product-item-actions .actions-primary .action.tocart::before {
        font-size: 13px !important;
    }
}

/* ====================================================================
   MARKETPLACE COMPACT GRID UI (SHOPEE/TOKOPEDIA STYLE)
   ==================================================================== */

/* 1. KEPADATAN GRID (GRID DENSITY) */
body .products-grid .product-items { 
    margin: 0 -6px !important; 
}
body .products-grid .product-item { 
    padding: 6px !important; 
}

/* Memaksa Desktop jadi 5 atau 6 kolom (Lebih hemat ruang) */
@media (min-width: 1200px) {
    body .products-grid .product-item { flex: 0 0 16.666% !important; max-width: 16.666% !important; } /* 6 Kolom */
}
@media (min-width: 992px) and (max-width: 1199px) {
    body .products-grid .product-item { flex: 0 0 20% !important; max-width: 20% !important; } /* 5 Kolom */
}

/* 2. KARTU PRODUK (EXTREME COMPACTNESS) */
body .products-grid .product-item-info {
    padding: 4px !important; /* FIX: Dipersempit ekstrem menyisakan 4px saja */
    border-radius: 4px !important; /* Sudut lebih tajam, kotak ala Shopee */
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
body .products-grid .product-item-info:hover, 
body .products-grid .product-item-info.active {
    padding: 4px !important; 
    border-color: #e67e22 !important;
    box-shadow: 0 4px 10px rgba(230,126,34,0.15) !important;
    transform: translateY(-1px) !important;
    z-index: 9;
}

/* Gambar Produk */
body .products-grid .product-item-photo { 
    margin: 0 0 4px 0 !important; /* FIX: Gambar menempel lebih rapat ke teks */
}

/* 3. TIPOGRAFI (RATA KIRI, BOLD & RAMPING) */
body .products-grid .product-item-details {
    align-items: flex-start !important; 
    padding: 2px 4px 4px 4px !important; /* Sedikit ruang agar teks tidak menabrak garis kiri */
}
body .products-grid .product-item-name { 
    margin: 0 0 4px 0 !important; 
    text-align: left !important; 
}
body .products-grid .product-item-name a { 
    font-size: 12px !important; 
    line-height: 1.3 !important; 
    height: 31px !important; 
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #212121 !important;
    font-weight: 700 !important; /* FIX: JUDUL PRODUK TEBAL / BOLD */
}

/* Area Harga */
body .products-grid .price-box { 
    margin: 0 0 6px 0 !important; 
    text-align: left !important; 
    width: 100%;
}
body .products-grid .price-box .price { 
    font-size: 15px !important; 
}
body .products-grid .price-box .old-price .price { 
    font-size: 11px !important; 
}

/* 4. MICRO ACTION BUTTONS (TOMBOL KOTAK SUPER MINI DI BAWAH HARGA) */
body .products-grid .product-item-actions {
    display: flex !important;
    flex-direction: row !important; 
    justify-content: flex-start !important; 
    gap: 4px !important; /* FIX: Jarak antar tombol dipersempit */
    margin: 0 !important;
    width: 100%;
}
body .products-grid .product-item-actions .actions-primary, 
body .products-grid .product-item-actions .actions-secondary {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    margin: 0 !important;
    width: auto !important; 
}

/* Styling Tombol Mini */
body .products-grid .product-item-actions .action {
    width: 28px !important; /* FIX: Disusutkan menjadi 28px agar hemat tempat */
    height: 28px !important; 
    border-radius: 4px !important; 
    background: #f8f9fa !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
}
body .products-grid .product-item-actions .action::before,
body .products-grid .product-item-actions .actions-primary .action.tocart::before {
    font-size: 14px !important; /* Icon disesuaikan dengan box 28px */
}
body .products-grid .product-item-actions .action:hover {
    background: #e67e22 !important;
    color: #fff !important;
    border-color: #e67e22 !important;
    transform: none !important; 
}

/* Sorot Tombol Add to Cart dengan warna brand */
body .products-grid .product-item-actions .actions-primary .action.tocart {
    background: rgba(230,126,34,0.1) !important;
    border-color: rgba(230,126,34,0.3) !important;
    color: #e67e22 !important;
}
body .products-grid .product-item-actions .actions-primary .action.tocart::before {
    color: #e67e22 !important;
}
body .products-grid .product-item-actions .actions-primary .action.tocart:hover {
    background: #e67e22 !important;
}
body .products-grid .product-item-actions .actions-primary .action.tocart:hover::before {
    color: #ffffff !important;
}

/* 5. MOBILE OPTIMIZATION (SUPER TIGHT) */
@media (max-width: 767px) {
    body .products-grid .product-items { margin: 0 -4px !important; }
    body .products-grid .product-item { padding: 4px !important; }
    body .products-grid .product-item-info { padding: 6px !important; }
    
    body .products-grid .product-item-name a { font-size: 11px !important; height: 28px !important; }
    body .products-grid .price-box .price { font-size: 13px !important; }
    
    body .products-grid .product-item-actions .action {
        width: 28px !important; 
        height: 28px !important;
        border-radius: 4px !important;
    }
    body .products-grid .product-item-actions .action::before,
    body .products-grid .product-item-actions .actions-primary .action.tocart::before {
        font-size: 13px !important;
    }
}

/* ====================================================================
   V6: SUPER COMPACT & UNIFORM MARKETPLACE GRID
   ==================================================================== */

/* 1. KEPADATAN GRID (SAMARATAKAN FLASH SALE & TERLARIS) */
/* Kita gabungkan selector Carousel dan Normal Grid agar ukurannya 100% identik */
@media (min-width: 1200px) {
    body .products-grid .product-item,
    body .luma-extended-product-carousel .products-grid .product-item { 
        flex: 0 0 16.666% !important; 
        max-width: 16.666% !important; 
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    body .products-grid .product-item,
    body .luma-extended-product-carousel .products-grid .product-item { 
        flex: 0 0 20% !important; 
        max-width: 20% !important; 
    }
}
@media (max-width: 767px) {
    body .luma-extended-product-carousel .products-grid .product-item { 
        flex: 0 0 45% !important; /* Dibiarkan 45% agar user tahu bisa digeser (swipe) */
        max-width: 45% !important; 
    }
}

/* 2. KARTU PRODUK (GARIS HALUS & SHADOW TIPIS) */
body .products-grid .product-item-info {
    padding: 4px !important; 
    border-radius: 4px !important; 
    border: 1px solid #e8e8e8 !important; /* FIX: Garis halus pemisah antar produk */
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05) !important; /* FIX: Card shadow sangat tipis */
    background: #ffffff !important;
}
body .products-grid .product-item-info:hover, 
body .products-grid .product-item-info.active {
    border-color: #ea580c !important; /* Sorotan border orange saat di-hover */
    box-shadow: 0 4px 8px rgba(234,88,12,0.12) !important;
    transform: translateY(-1px) !important;
    z-index: 9;
}

/* Jarak antar card diperketat */
body .products-grid .product-items { margin: 0 -4px !important; }
body .products-grid .product-item { padding: 4px !important; }

/* 3. FIX BADGE FLASH SALE (Agar tidak meluber karena kotak makin sempit) */
body .flash-sale-section .products-grid .product-item-info::before {
    top: -6px !important; 
    left: -4px !important; 
    font-size: 10px !important; 
    padding: 3px 8px !important;
}

/* 4. TIPOGRAFI SUPER RAMPING */
body .products-grid .product-item-photo { 
    margin: 0 0 6px 0 !important; /* Jarak gambar ke teks dikurangi */
}
body .products-grid .product-item-details {
    padding: 0 2px 2px 2px !important; 
}
body .products-grid .product-item-name { 
    margin: 0 0 2px 0 !important; 
}
body .products-grid .product-item-name a { 
    font-size: 12px !important; 
    line-height: 1.25 !important; 
    height: 30px !important; /* Kunci presisi 2 baris */
    color: #212121 !important;
    font-weight: 700 !important; /* JUDUL BOLD */
}

/* Area Harga */
body .products-grid .price-box { 
    margin: 0 0 6px 0 !important; 
}
body .products-grid .price-box .price { 
    font-size: 14px !important; /* Sedikit dikecilkan agar proporsional di kotak sempit */
    color: #ea580c !important;
}
body .products-grid .price-box .old-price .price { 
    font-size: 10px !important; 
}

/* 5. MICRO ACTION BUTTONS (28px) */
body .products-grid .product-item-actions .action {
    width: 28px !important; 
    height: 28px !important; 
    border-radius: 4px !important; 
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
}
body .products-grid .product-item-actions .action::before,
body .products-grid .product-item-actions .actions-primary .action.tocart::before {
    font-size: 14px !important;
    line-height: 26px !important; /* Vertikal center icon */
}

/* ====================================================================
   FIX TOP TICKER OVERLAP DI FOTORAMA FULLSCREEN & MODALS
   ==================================================================== */

/* 1. Saklar Otomatis: Turunkan kasta Ticker saat Gallery/Modal terbuka */
body.fotorama-fullscreen .luma-top-ticker,
body._has-modal .luma-top-ticker {
    z-index: 99 !important; /* Turun jauh di bawah overlay (yang biasanya 1000+) */
}

/* 2. Kasta Tertinggi: Pastikan Fullscreen Fotorama selalu di atas segalanya */
.fotorama-fullscreen .fotorama__wrap--fullscreen {
    z-index: 999999 !important; /* Mengalahkan sticky nav (1001), ticker (1005), dan popup (10000) */
    background: #ffffff !important; /* Pastikan background solid agar ticker di belakangnya tidak membayang */
}

/* ====================================================================
   V8: THE ULTIMATE FOTORAMA FULLSCREEN FIX
   ==================================================================== */
/* FAKTA: Fotorama menyuntikkan class 'fotorama__fullscreen' ke tag <HTML>, BUKAN <body>. 
   Inilah alasan kenapa CSS sebelumnya tidak mempan! */
   
html.fotorama__fullscreen .luma-top-ticker,
html.fotorama__fullscreen .page-header,
html.fotorama__fullscreen .nav-sections,
body.fotorama__fullscreen .luma-top-ticker,
body.fotorama__fullscreen .page-header,
body.fotorama__fullscreen .nav-sections {
    z-index: -1 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Pastikan Container Fotorama memegang kasta tertinggi secara absolut */
.fotorama__wrap--fullscreen {
    z-index: 999999 !important;
    background: #ffffff !important;
}

/* ====================================================================
   SEMBUNYIKAN ICON RSS BLOG (MAGEPLAZA)
   ==================================================================== */
.mp-blog-rss {
    display: none !important;
}

/* ====================================================================
   FIX POPUP IMAGE ONLY (TRANSPARAN & CLICKABLE)
   ==================================================================== */
.luma-popup-content.image-only-popup {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    max-width: 450px !important; /* Ukuran ideal popup portrait/square */
}

/* Link Wrapper pembungkus gambar */
.luma-popup-content.image-only-popup .popup-image-link {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}
.luma-popup-content.image-only-popup .popup-image-link:hover {
    transform: scale(1.02); /* Efek membesar sedikit saat di-hover */
}

/* Gambar Promo di dalam link */
.luma-popup-content.image-only-popup .popup-image-link img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

/* Penyesuaian tombol Close (X) agar agak keluar dari gambar */
.luma-popup-content.image-only-popup .luma-popup-close {
    top: -15px !important;
    right: -15px !important;
    z-index: 100 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    background: #ffffff !important;
    color: #333 !important;
}

/* ====================================================================
   FIX POPUP IMAGE ONLY (TRANSPARAN & CLICKABLE)
   ==================================================================== */
.luma-popup-content.image-only-popup {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    max-width: 450px !important; 
}
.luma-popup-content.image-only-popup .popup-image-link {
    display: block; border-radius: 16px; overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3); transition: transform 0.3s ease;
}
.luma-popup-content.image-only-popup .popup-image-link:hover { transform: scale(1.02); }
.luma-popup-content.image-only-popup .popup-image-link img {
    width: 100%; height: auto; display: block; border-radius: 16px;
}
.luma-popup-content.image-only-popup .luma-popup-close {
    top: -15px !important; right: -15px !important; z-index: 100 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    background: #ffffff !important; color: #333 !important;
}

/* ====================================================================
   V15: FIX POPUP TRANSPARENT PNG (DROP SHADOW MAGICAL EFFECT)
   ==================================================================== */
/* 1. Cabut semua box-shadow, background, dan border-radius dari container HTML */
.luma-popup-content.image-only-popup .popup-image-link {
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important; /* Biarkan bayangan gambar keluar bebas */
}

/* 2. Berikan efek bayangan yang mengikuti lekuk asli gambar (Alpha Channel PNG) */
.luma-popup-content.image-only-popup .popup-image-link img {
    border-radius: 0 !important;
    background: transparent !important;
    /* Ini adalah mantra sihirnya: */
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.4)) !important; 
    transform: translateZ(0); /* Hardware acceleration agar rendering bayangan halus */
}

/* ====================================================================
   V17: FIX POPUP CENTER ALIGNMENT ON MOBILE
   ==================================================================== */
.luma-popup-overlay {
    padding: 20px !important; /* Memberi ruang aman agar gambar tidak mentok ke sisi layar HP */
    box-sizing: border-box !important;
}

.luma-popup-content.image-only-popup {
    margin: 0 auto !important; /* PAKSA ke tengah secara horizontal */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important; /* Memaksa elemen mengisi ruang yang tersedia */
    max-width: 380px !important; /* Batas maksimal ukuran agar tidak terlalu raksasa di Desktop/Tablet */
    display: block !important;
}

/* Penyesuaian khusus Mobile untuk tombol X agar tidak terpotong (keluar layar) */
@media (max-width: 767px) {
    .luma-popup-content.image-only-popup .luma-popup-close {
        top: -10px !important;
        right: -5px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 18px !important;
    }
}

/* ====================================================================
   V18.4: DATA-DRIVEN BOOTSTRAP CARD (BASED ON EXACT HTML SOURCE)
   ==================================================================== */

/* 1. KENDALI GRID UTAMA */
#mpblog-list-container .post-list-body {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

/* Reset float/width dari item list bawaan Magento */
#mpblog-list-container .post-list-item {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 2. BOOTSTRAP CARD: Inner Wrapper (post-item-wraper) */
#mpblog-list-container .post-item-wraper {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.125) !important;
    border-radius: 0.5rem !important; /* Radius ala Bootstrap (8px) */
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075) !important; /* Shadow default */
    height: 100% !important;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
    overflow: hidden !important;
}
#mpblog-list-container .post-item-wraper:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15) !important; /* Shadow membesar saat hover */
}

/* 3. GAMBAR CARD-TOP */
#mpblog-list-container .post-image {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
}
#mpblog-list-container .post-image img {
    width: 100% !important;
    height: 200px !important; /* KUNCI: Tinggi gambar diseragamkan agar rapi */
    object-fit: cover !important; /* Mencegah gambar gepeng */
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transition: transform 0.5s ease !important;
}
#mpblog-list-container .post-item-wraper:hover .post-image img {
    transform: scale(1.05) !important; /* Zoom halus saat di-hover */
}

/* 4. CARD BODY */
#mpblog-list-container .post-info-wraper {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* Mendorong tombol ke dasar kotak */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Judul (Max 2 Baris - Anti Overlap) */
#mpblog-list-container .mp-post-title {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}
#mpblog-list-container .post-link-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #212529 !important; /* Dark text Bootstrap */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-decoration: none !important;
    white-space: normal !important;
}
#mpblog-list-container .post-link-title:hover {
    color: #198754 !important; /* Green Success Bootstrap */
}

/* Meta Tanggal & Views */
#mpblog-list-container .mp-post-info {
    font-size: 12px !important;
    color: #6c757d !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
}

/* Deskripsi (Max 3 Baris - Anti Overlap) */
#mpblog-list-container .post-short-description {
    font-size: 14px !important;
    color: #495057 !important;
    line-height: 1.5 !important;
    margin: 0 0 20px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex-grow: 1 !important; /* Penting: agar sisa ruang membesar & dorong tombol */
}
#mpblog-list-container .post-short-description p {
    margin: 0 !important;
}

/* Tombol Read More (Bootstrap Success Button) */
#mpblog-list-container .mp-post-meta-info {
    margin-top: auto !important; /* Didorong ke bawah oleh flex-grow deskripsi */
    text-align: left !important;
    padding: 0 !important;
}
#mpblog-list-container .mp-read-more {
    background-color: #198754 !important;
    border: none !important;
    color: #fff !important;
    border-radius: 0.25rem !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease-in-out !important;
}
#mpblog-list-container .mp-read-more:hover {
    background-color: #157347 !important;
}

/* 5. MOBILE RESPONSIVE FULL WIDTH */
@media (max-width: 767px) {
    #mpblog-list-container .post-list-body {
        grid-template-columns: 1fr !important; /* Mekar 1 kolom penuh di HP */
        gap: 20px !important;
    }
    #mpblog-list-container .post-image img {
        height: 240px !important; /* Gambar sedikit ditinggikan di HP */
    }
}

/* ====================================================================
   V18.5: THE MISSING PIECE (MENGALAHKAN CSS GLOBAL)
   ==================================================================== */
/* Mageplaza mendaur ulang class "products-grid" & "product-item" yang sama
   persis dengan grid produk bawaan Magento. Karena kita mengunci grid produk
   di 25% (4 kolom), artikel blog ikut tercekik jadi gepeng 70 pixel!
   Ini adalah CSS untuk melepaskan jeratan tersebut khusus di area Blog. */
   
body #mpblog-list-container .products-grid .product-item {
    max-width: 100% !important;
    flex: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ====================================================================
   V20: CATEGORY CIRCLES SECTION
   ==================================================================== */
.category-circle-wrapper {
    position: relative;
    max-width: 100%;
    margin: 10px auto 40px auto; /* Jarak antara Carousel Utama & Flash Sale */
    padding: 0 40px; /* Ruang untuk panah navigasi */
    box-sizing: border-box;
}

.category-circle-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-behavior: smooth;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    gap: 25px;
    padding: 15px 5px; /* Padding agar shadow tidak terpotong */
    cursor: grab;
}
.category-circle-track::-webkit-scrollbar { display: none; } /* Hide Chrome/Safari scrollbar */
.category-circle-track.dragging-active { cursor: grabbing; scroll-behavior: auto; }

/* Item Lingkaran */
.cat-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none !important;
    flex: 0 0 auto;
    width: 90px;
    transition: transform 0.3s ease;
}
.cat-circle-item:hover { transform: translateY(-5px); }

/* Bungkus Gambar */
.cat-circle-item .cat-img-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #f8f9fa;
    border: 2px solid #519b84; /* Warna hijau luma extended */
    box-shadow: 0 4px 10px rgba(81, 155, 132, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}
.cat-circle-item:hover .cat-img-wrap {
    box-shadow: 0 6px 15px rgba(81, 155, 132, 0.4);
    border-color: #e67e22; /* Berubah oranye saat dihover */
}

/* Gambar di dalam lingkaran */
.cat-circle-item .cat-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Teks Kategori */
.cat-circle-item span {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-align: center;
    line-height: 1.3;
    transition: color 0.3s ease;
}
.cat-circle-item:hover span { color: #e67e22; }

/* Panah Navigasi */
.category-circle-wrapper .cc-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: all 0.2s;
}
.category-circle-wrapper .cc-btn:hover { background: #519b84; color: #fff; border-color: #519b84; }
.category-circle-wrapper .cc-prev { left: 0; }
.category-circle-wrapper .cc-next { right: 0; }

/* MOBILE RESPONSIVE */
@media (max-width: 767px) {
    .category-circle-wrapper { padding: 0 5px; margin-bottom: 25px; }
    .category-circle-wrapper .cc-btn { display: none !important; } /* Sembunyikan panah di HP, murni drag/swipe */
    .cat-circle-item { width: 75px; }
    .cat-circle-item .cat-img-wrap { width: 65px; height: 65px; margin-bottom: 8px; border-width: 1.5px; }
    .cat-circle-item span { font-size: 11px; }
    .category-circle-track { gap: 15px; padding: 10px 5px; }
}

/* ====================================================================
   V21: TOPBAR BRANDING & CATEGORY CIRCLES CENTERING
   ==================================================================== */
/* 1. MENGUBAH WARNA TOPBAR (Sign In / Create Account) */
.panel.wrapper {
    background-color: #205F80 !important;
    border-bottom: none !important;
}

/* 2. MEMBUAT CATEGORY CIRCLES KE TENGAH SECARA DEFAULT */
.category-circle-track {
    margin: 0 auto !important;
    max-width: max-content !important;
    /* Trik Cerdas: max-width max-content dan margin auto akan menengahkan div 
       jika isinya kurang dari lebar layar, tapi tetap scrollable jika isinya berlebih! */
}

/* ====================================================================
   V22: FIX FOOTER PAYMENT LOGO (MENGHAPUS FILTER PUTIH)
   ==================================================================== */
/* Membatalkan efek brightness dan invert agar gambar tampil
   dengan warna dan bentuk aslinya (sesuai yang diupload tim konten) */
.luma-extended-footer .footer-payment-strip img {
    filter: none !important;
    opacity: 1 !important; /* Kembalikan opacity agar tidak pucat */
    background-color: transparent !important;
}

/* Sedikit penyesuaian khusus jika gambar yang diupload tim konten
   memiliki background putih, kita beri radius agar tidak terlalu kaku */
.luma-extended-footer .footer-payment-strip img {
    border-radius: 4px !important;
}

.category-circle-track > div[data-content-type="html"] {
    display: contents !important;
}

/* ====================================================================
   V23: UNIVERSAL PAGE BUILDER ANTIDOTE (CSS ONLY)
   ==================================================================== */
/* Menetralkan <div> otomatis bawaan Page Builder khusus elemen HTML.
   Dengan 'display: contents', browser akan mengabaikan kotak div ini 
   dalam perhitungan tata letak (layout), sehingga Flexbox atau Grid 
   di luarnya akan langsung menargetkan elemen asli di dalamnya!
   Berlaku GLOBAL untuk semua custom block di masa depan! */
   
div[data-content-type="html"] {
    display: contents !important;
}

/* Fallback opsional jika Page Builder menyelipkan class wrapper lain */
div[data-content-type="html"] > .pagebuilder-html {
    display: contents !important;
}

/* ====================================================================
   V24: UX FIX - SHOW COMPARE ICON ON MOBILE NAVBAR
   ==================================================================== */
@media (max-width: 767px) {
    /* 1. Menarik link Compare yang disembunyikan Luma di top-links */
    .header.links .compare.wrapper {
        display: block !important;
        position: absolute;
        top: 0;
        right: 100px; /* Posisi di sebelah kiri icon Search */
        z-index: 10;
        height: 50px;
        line-height: 50px;
    }

    /* 2. Mengubah teks "Compare Products" menjadi Ikon Timbangan saja */
    .header.links .compare.wrapper .action.compare {
        display: inline-block;
        color: #333333;
        font-size: 0; /* Menyembunyikan teks asli */
        text-decoration: none;
    }

    /* 3. Menampilkan Ikon Timbangan Bawaan Magento Luma */
    .header.links .compare.wrapper .action.compare::before {
        font-family: 'luma-icons';
        content: '\e61e'; /* Kode unik icon scale/timbangan Luma */
        font-size: 22px;
        line-height: 50px;
        display: inline-block;
        vertical-align: middle;
        font-weight: normal;
    }

    /* 4. Mempercantik Badge Counter (Angka Jumlah Compare) */
    .header.links .compare.wrapper .counter.qty {
        display: inline-block;
        position: absolute;
        top: 8px;
        right: -8px;
        background: #e15b64; /* Warna orange/merah brand Anda */
        color: #ffffff;
        font-size: 10px;
        font-weight: bold;
        line-height: 16px;
        min-width: 16px;
        border-radius: 50%;
        text-align: center;
        padding: 0 4px;
        box-sizing: border-box;
    }
    
    /* Menyembunyikan teks "items" di dalam badge */
    .header.links .compare.wrapper .counter.qty .counter-label {
        display: none;
    }
}

/* ====================================================================
   V24.1: THE ULTIMATE COMPARE BUTTON RESCUE
   ==================================================================== */
@media (max-width: 767px) {
    /* 1. Paksa muncul dimanapun elemen ini berada, dan posisikan di kiri Cart */
    body .page-wrapper .compare.wrapper {
        display: block !important;
        position: absolute !important;
        top: 13px !important;
        right: 60px !important; /* Cart ada di right: 15px, Search di 100px */
        margin: 0 !important;
        z-index: 99 !important;
    }
    
    /* Naikkan sedikit jika mode Sticky Navbar sedang aktif */
    body.luma-extended-sticky-nav .page-wrapper .compare.wrapper {
        top: 8px !important;
    }

    /* 2. Format Icon Timbangan */
    body .page-wrapper .compare.wrapper .action.compare {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 35px !important;
        height: 35px !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
        font-size: 0 !important;
        color: transparent !important;
    }

    body .page-wrapper .compare.wrapper .action.compare::before {
        content: '\e61e' !important;
        font-family: 'luma-icons' !important;
        font-size: 24px !important;
        color: #757575 !important;
        line-height: 1 !important;
        margin: 0 !important;
        display: block !important;
    }

    /* 3. Format Angka (Badge) Compare */
    body .page-wrapper .compare.wrapper .action.compare .counter.qty {
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        background: #ea580c !important;
        color: #ffffff !important;
        width: 18px !important;
        height: 18px !important;
        border-radius: 50% !important;
        font-size: 11px !important;
        line-height: 18px !important;
        text-align: center !important;
        font-weight: bold !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Sembunyikan badge jika kosong */
    body .page-wrapper .compare.wrapper .action.compare.no-display .counter.qty,
    body .page-wrapper .compare.wrapper .action.compare .counter.qty.empty {
        display: none !important;
    }
    body .page-wrapper .compare.wrapper .action.compare .counter.qty .counter-label {
        display: none !important;
    }
}

/* ====================================================================
   V24.2: FIX MOBILE ICON OVERLAP (CART, SEARCH, COMPARE)
   ==================================================================== */
@media (max-width: 767px) {
    /* Merapatkan jarak antar icon di Navbar Kanan agar presisi dan tidak menabrak Logo */
    
    /* 1. Cart (Paling Kanan) */
    .minicart-wrapper { 
        right: 10px !important; 
    }
    
    /* 2. Search (Tengah) */
    .block-search .label[data-role="minisearch-label"] { 
        right: 38px !important; 
    }
    
    /* 3. Compare (Paling Kiri) */
    .header.content .compare.wrapper .action.compare { 
        right: 9px !important; 
        position: relative !important;
    }
    
    /* Mencegah logo menabrak icon di layar HP yang sangat sempit (misal iPhone SE) */
    @media (max-width: 360px) {
        .header.content .logo { 
            max-width: 110px !important; 
        }
        .header.content .logo img {
            max-height: 25px !important;
        }
    }
}

/* ====================================================================
   V25.2: USER-FRIENDLY CAROUSEL IMAGES (IMG TAG INSTEAD OF BACKGROUND)
   ==================================================================== */
.luma-extended-slide {
    background-image: none !important; /* Matikan sistem background lama */
}
.luma-extended-slide img.img-desktop,
.luma-extended-slide img.img-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Gambar selalu fit penuh tanpa gepeng */
    z-index: 0; /* Berada di bawah teks hero-content (z-index: 2) */
    pointer-events: none;
}
.luma-extended-slide img.img-mobile {
    display: none; /* Sembunyikan gambar khusus HP saat di Desktop */
}

@media (max-width: 767px) {
    .luma-extended-slide img.img-desktop {
        display: none; /* Sembunyikan gambar Desktop saat di HP */
    }
    .luma-extended-slide img.img-mobile {
        display: block; /* Munculkan gambar HP */
    }
}

/* ====================================================================
   V26: MOBILE WEBVIEW BACK BUTTON
   ==================================================================== */
/* Default: Sembunyikan tombol (karena untuk desktop tidak perlu) */
.webview-back-bar {
    display: none;
}

@media (max-width: 767px) {
    /* Munculkan HANYA JIKA BUKAN di Homepage (cms-index-index) */
    body:not(.cms-index-index) .webview-back-bar {
        display: flex !important;
        align-items: center;
        background-color: #f3f4f6; /* Warna abu-abu terang ala App Native */
        padding: 10px 20px;
        border-bottom: 1px solid #e5e7eb;
        font-size: 14px;
        font-weight: 600;
        color: #519b84; /* Warna hijau brand TheraSkin */
        text-decoration: none !important;
        width: 100%;
        box-sizing: border-box;
        z-index: 9;
        transition: background-color 0.2s ease;
    }
    
    .webview-back-bar:active {
        background-color: #e5e7eb; /* Efek ditekan */
    }

    .webview-back-bar span.icon-back {
        margin-right: 10px;
        font-size: 16px;
        line-height: 1;
    }
}

/* ====================================================================
   V29: FIX CAROUSEL HEIGHT (ASPECT RATIO MATCHING) DESKTOP & MOBILE
   ==================================================================== */
   
/* --- DESKTOP (Asumsi Kanvas 1920x600) --- */
@media (min-width: 768px) {
    .luma-extended-home-container .luma-extended-carousel-container {
        height: auto !important;
        aspect-ratio: 1920 / 600 !important; 
    }
}

/* --- MOBILE (Asumsi Kanvas 800x1000) --- */
@media (max-width: 767px) {
    .luma-extended-home-container .luma-extended-carousel-container {
        height: auto !important;
        aspect-ratio: 800 / 1000 !important; 
        
        /* Fallback (cadangan) untuk HP/Browser jadul */
        min-height: 125vw !important; 
    }
}

/* --- GLOBAL: Pastikan track dan slide mengikuti tinggi dinamis --- */
.luma-extended-carousel-track,
.luma-extended-slide {
    height: 100% !important;
}

/* ====================================================================
   V30: MINICART OVERFLOW SCROLL FIX & CUSTOM SCROLLBAR
   ==================================================================== */
/* Targetkan hanya area daftar produk (wrapper items) */
.block-minicart .minicart-items-wrapper {
    /* Maksimal tinggi adalah 45% dari tinggi layar monitor (agar tombol View Cart selalu terlihat) */
    max-height: 45vh !important; 
    overflow-y: auto !important; /* Munculkan scrollbar vertical jika produk banyak */
    overflow-x: hidden !important; /* Matikan scroll horizontal */
    padding-right: 10px !important; /* Beri ruang agar scrollbar tidak menimpa icon Delete/Edit */
}

/* Penyesuaian khusus untuk layar Mobile (HP) */
@media (max-width: 767px) {
    .block-minicart .minicart-items-wrapper {
        max-height: 55vh !important; /* Di HP bisa sedikit lebih tinggi (55%) */
    }
}

/* --- MEMPERCANTIK SCROLLBAR (Khusus WebKit: Chrome, Safari, Edge) --- */
.block-minicart .minicart-items-wrapper::-webkit-scrollbar {
    width: 6px; /* Lebar scrollbar yang elegan/tipis */
}

/* Track (Jalur Scrollbar) */
.block-minicart .minicart-items-wrapper::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 10px;
}

/* Thumb (Batang Scrollbar yang bisa ditarik) */
.block-minicart .minicart-items-wrapper::-webkit-scrollbar-thumb {
    background: #519b84; /* Warna hijau brand Theraskin */
    border-radius: 10px;
}

/* Saat hover pada Thumb */
.block-minicart .minicart-items-wrapper::-webkit-scrollbar-thumb:hover {
    background: #3c7a66; /* Hijau lebih gelap */
}

/* ====================================================================
   SMART POPUP: Content Wrapper (Guest & Member)
   ==================================================================== */
.luma-popup-content-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ====================================================================
   V29: SMART AJAX ADD TO COMPARE & WISHLIST INDICATOR
   ==================================================================== */
/* 1. Indikator Love Merah jika sudah ada di Wishlist */
.action.towishlist.in-wishlist::before {
    color: #e02b27 !important; /* Warna Merah Menyala */
    text-shadow: 0 0 5px rgba(224, 43, 39, 0.3);
}

/* 2. Efek denyut saat berhasil menambahkan ke Compare */
.action.tocompare.success-pulse::before,
.action.towishlist.success-pulse::before {
    color: #519b84 !important; /* Hijau Sukses Theraskin */
    transform: scale(1.3);
    transition: all 0.3s ease;
}

/* 3. Efek loading transparan saat AJAX berjalan */
.action.tocompare.is-loading,
.action.towishlist.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Indikator Timbangan Hijau jika sudah berhasil masuk Compare */
.action.tocompare.in-compare::before {
    color: #519b84 !important; /* Hijau Sukses Theraskin */
    text-shadow: 0 0 5px rgba(81, 155, 132, 0.3);
}

/* ====================================================================
   V32: KUNCI WARNA TOGGLE WISHLIST & COMPARE (ANTI TERTAMPA HOVER)
   ==================================================================== */
/* Mengunci warna Merah pada Wishlist meski mouse masih melayang (hover) */
.action.towishlist.in-wishlist::before,
.action.towishlist.in-wishlist:hover::before {
    color: #e02b27 !important; /* Merah Menyala */
    text-shadow: 0 0 5px rgba(224, 43, 39, 0.3);
}

/* Mengunci warna Hijau pada Compare meski mouse masih melayang (hover) */
.action.tocompare.in-compare::before,
.action.tocompare.in-compare:hover::before {
    color: #519b84 !important; /* Hijau Sukses */
    text-shadow: 0 0 5px rgba(81, 155, 132, 0.3);
}

/* ====================================================================
   V34: THE ULTIMATE INDICATOR COLOR OVERRIDE (BEATING GRID SPECIFICITY)
   ==================================================================== */

/* --------------------------------------------------------------------
   1. UNTUK GRID PRODUK (HOMEPAGE, CATEGORY PAGE, FLASH SALE)
   Menggunakan selector 'body .page-wrapper' agar kastanya paling tinggi
   -------------------------------------------------------------------- */
/* WISHLIST (LOVE MERAH) */
body .page-wrapper .products-grid .product-item-actions .action.towishlist.in-wishlist,
body .page-wrapper .products-grid .product-item-actions .action.towishlist.in-wishlist:hover {
    color: #e02b27 !important;
    border-color: #e02b27 !important;
    background: #fffafa !important; /* Efek background merah super tipis */
}
body .page-wrapper .products-grid .product-item-actions .action.towishlist.in-wishlist::before {
    color: #e02b27 !important;
    text-shadow: 0 0 5px rgba(224, 43, 39, 0.3) !important;
}

/* COMPARE (TIMBANGAN HIJAU) */
body .page-wrapper .products-grid .product-item-actions .action.tocompare.in-compare,
body .page-wrapper .products-grid .product-item-actions .action.tocompare.in-compare:hover {
    color: #519b84 !important;
    border-color: #519b84 !important;
    background: #f0fdf4 !important; /* Efek background hijau super tipis */
}
body .page-wrapper .products-grid .product-item-actions .action.tocompare.in-compare::before {
    color: #519b84 !important;
    text-shadow: 0 0 5px rgba(81, 155, 132, 0.3) !important;
}


/* --------------------------------------------------------------------
   2. UNTUK HALAMAN DETAIL PRODUK (PDP)
   -------------------------------------------------------------------- */
/* WISHLIST (LOVE MERAH) */
body .page-wrapper .product-social-links .action.towishlist.in-wishlist,
body .page-wrapper .product-social-links .action.towishlist.in-wishlist:hover {
    color: #e02b27 !important;
    border-color: #e02b27 !important;
    background: #fffafa !important;
}
body .page-wrapper .product-social-links .action.towishlist.in-wishlist::before {
    color: #e02b27 !important;
}

/* COMPARE (TIMBANGAN HIJAU) */
body .page-wrapper .product-social-links .action.tocompare.in-compare,
body .page-wrapper .product-social-links .action.tocompare.in-compare:hover {
    color: #519b84 !important;
    border-color: #519b84 !important;
    background: #f0fdf4 !important;
}
body .page-wrapper .product-social-links .action.tocompare.in-compare::before {
    color: #519b84 !important;
}

/* ====================================================================
   V34: THE ULTIMATE INDICATOR COLOR OVERRIDE (BEATING GRID SPECIFICITY)
   ==================================================================== */

/* --------------------------------------------------------------------
   1. UNTUK GRID PRODUK (HOMEPAGE, CATEGORY PAGE, FLASH SALE)
   Menggunakan selector 'body .page-wrapper' agar kastanya paling tinggi
   -------------------------------------------------------------------- */
/* WISHLIST (LOVE MERAH) */
body .page-wrapper .products-grid .product-item-actions .action.towishlist.in-wishlist,
body .page-wrapper .products-grid .product-item-actions .action.towishlist.in-wishlist:hover {
    color: #e02b27 !important;
    border-color: #e02b27 !important;
    background: #fffafa !important; /* Efek background merah super tipis */
}
body .page-wrapper .products-grid .product-item-actions .action.towishlist.in-wishlist::before {
    color: #e02b27 !important;
    text-shadow: 0 0 5px rgba(224, 43, 39, 0.3) !important;
}

/* COMPARE (TIMBANGAN HIJAU) */
body .page-wrapper .products-grid .product-item-actions .action.tocompare.in-compare,
body .page-wrapper .products-grid .product-item-actions .action.tocompare.in-compare:hover {
    color: #519b84 !important;
    border-color: #519b84 !important;
    background: #f0fdf4 !important; /* Efek background hijau super tipis */
}
body .page-wrapper .products-grid .product-item-actions .action.tocompare.in-compare::before {
    color: #519b84 !important;
    text-shadow: 0 0 5px rgba(81, 155, 132, 0.3) !important;
}


/* --------------------------------------------------------------------
   2. UNTUK HALAMAN DETAIL PRODUK (PDP)
   -------------------------------------------------------------------- */
/* WISHLIST (LOVE MERAH) */
body .page-wrapper .product-social-links .action.towishlist.in-wishlist,
body .page-wrapper .product-social-links .action.towishlist.in-wishlist:hover {
    color: #e02b27 !important;
    border-color: #e02b27 !important;
    background: #fffafa !important;
}
body .page-wrapper .product-social-links .action.towishlist.in-wishlist::before {
    color: #e02b27 !important;
}

/* COMPARE (TIMBANGAN HIJAU) */
body .page-wrapper .product-social-links .action.tocompare.in-compare,
body .page-wrapper .product-social-links .action.tocompare.in-compare:hover {
    color: #519b84 !important;
    border-color: #519b84 !important;
    background: #f0fdf4 !important;
}
body .page-wrapper .product-social-links .action.tocompare.in-compare::before {
    color: #519b84 !important;
}