/* ==========================================================================
   KINGMARU PLATFORM ENGINE - MASTER STYLESHEET (v14.0.0 INLINE COUPON & SAAS CHECKOUT)
   Design System: Obsidian Teal (#061217) & Luminous Gold (#FACC15)
   Scope: Inline Coupon Above Payment, SaaS Modern Cart & Checkout,
          Smooth Single Product, Responsive Menu, 1920x1080 Banner, Infinite Grid
   ========================================================================== */

/* ==========================================================================
   1. ROOT DESIGN TOKENS
   ========================================================================== */
:root {
  --bg-main: #061217;
  --bg-card: #0a1b22;
  --bg-surface-subtle: #10262e;
  --border-subtle: #23414d;
  --bg-footer: #040d11;

  --text-primary: #f3f7f8;
  --text-secondary: #a0b7bf;
  --text-muted: #6d8b96;
  --text-on-accent: #061217;

  --accent-primary: #facc15;
  --accent-primary-hover: #eab308;
  --accent-secondary: #06b6d4;
  --accent-secondary-hover: #0891b2;
  --accent-gold: #f59e0b;
  --accent-red: #ef4444;

  --glow-accent: 0 0 16px rgba(250, 204, 21, 0.28);
  --glow-cyan: 0 0 14px rgba(6, 182, 212, 0.3);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   2. GLOBAL BODY & HIDE PAGE TITLES (HOME, CART, CHECKOUT)
   ========================================================================== */
html, body {
  background-color: #061217 !important;
  color: #f3f7f8 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: clip !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

#page, .site, .site-content, .entry-content, #content, .content-area, #primary, main {
  background-color: #061217 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: none !important;
}

/* Sembunyikan Title di Home, Cart, dan Checkout */
body.home h1.entry-title,
body.home .entry-header,
body.home .page-title,
body.woocommerce-cart h1.entry-title,
body.woocommerce-cart .entry-header,
body.woocommerce-cart .page-title,
body.woocommerce-cart .wp-block-post-title,
body.woocommerce-checkout h1.entry-title,
body.woocommerce-checkout .entry-header,
body.woocommerce-checkout .page-title,
body.woocommerce-checkout .wp-block-post-title,
.site-title,
.site-branding,
header#masthead .site-branding,
header#masthead .site-title,
.site-header .site-branding,
.site-header .site-title,
h1.site-title,
p.site-title {
  display: none !important;
}

.km-catalog-scope {
  background-color: #061217 !important;
  color: #f3f7f8 !important;
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}
.km-catalog-scope *,
.km-global-header *,
.km-global-footer *,
.woocommerce *,
.woocommerce-page * {
  box-sizing: border-box !important;
}

.km-catalog-scope a,
.km-global-header a,
.km-global-footer a,
.woocommerce a,
.woocommerce-page a {
  text-decoration: none !important;
  color: inherit !important;
}

/* ==========================================================================
   3. NATIVE SMOOTH SINGLE PRODUCT LAYOUT
   ========================================================================== */
.single-product .site-main,
.woocommerce div.product {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 40px auto !important;
  padding: 0 20px !important;
  display: block !important;
  position: relative !important;
}

.woocommerce div.product::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

.woocommerce div.product div.images,
.woocommerce-product-gallery {
  float: left !important;
  width: 48% !important;
  margin-bottom: 40px !important;
  background: #0a1b22 !important;
  border: 1px solid #23414d !important;
  border-radius: 16px !important;
  padding: 14px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.woocommerce-product-gallery img {
  width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
  display: block !important;
}

.woocommerce div.product div.summary {
  float: right !important;
  width: 48% !important;
  margin-bottom: 40px !important;
  background: #0a1b22 !important;
  border: 1px solid #23414d !important;
  border-radius: 16px !important;
  padding: 30px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.single-product div.product .product_title {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #f3f7f8 !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.3 !important;
}

.single-product div.product p.price,
.single-product div.product span.price {
  color: #facc15 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  margin-bottom: 16px !important;
  display: block !important;
}
.single-product div.product p.price del { color: #6d8b96 !important; font-size: 16px !important; opacity: 0.7 !important; }
.single-product div.product p.price ins { text-decoration: none !important; color: #facc15 !important; }

.single-product div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #d2e3e8 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin: 18px 0 22px 0 !important;
  padding: 16px !important;
  background: #10262e !important;
  border: 1px solid #23414d !important;
  border-radius: 10px !important;
}

.woocommerce-product-details__short-description p { color: #d2e3e8 !important; margin: 0 0 8px 0 !important; }
.woocommerce-product-details__short-description ul { list-style: disc !important; padding-left: 20px !important; margin: 8px 0 !important; }
.woocommerce-product-details__short-description ol { list-style: decimal !important; padding-left: 20px !important; margin: 8px 0 !important; }
.woocommerce-product-details__short-description li { margin-bottom: 6px !important; color: #e2eff2 !important; line-height: 1.5 !important; }
.woocommerce-product-details__short-description strong, .woocommerce-product-details__short-description b { color: #facc15 !important; font-weight: 700 !important; }

.single-product div.product form.cart {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}
.single-product div.product form.cart .quantity input.qty {
  background: #10262e !important;
  border: 1px solid #23414d !important;
  color: #f3f7f8 !important;
  border-radius: 10px !important;
  padding: 10px !important;
  font-size: 16px !important;
  height: 48px !important;
  width: 65px !important;
}
.single-product div.product form.cart .button {
  flex: 1 !important;
  background-color: #facc15 !important;
  color: #061217 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 12px 24px !important;
  border-radius: 10px !important;
  border: none !important;
  height: 48px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.single-product div.product form.cart .button:hover { background-color: #eab308 !important; transform: translateY(-1px) !important; }

.woocommerce div.product .woocommerce-tabs { clear: both !important; width: 100% !important; padding-top: 20px !important; }
.woocommerce-tabs ul.tabs { background: transparent !important; border-bottom: 1px solid #23414d !important; display: flex !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; }
.woocommerce-tabs ul.tabs li { background: #0a1b22 !important; border: 1px solid #23414d !important; border-bottom: none !important; border-radius: 10px 10px 0 0 !important; padding: 12px 22px !important; margin: 0 !important; }
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce-tabs ul.tabs li a { color: #a0b7bf !important; font-weight: 700 !important; font-size: 14px !important; }
.woocommerce-tabs ul.tabs li.active { background: #10262e !important; border-color: #06b6d4 !important; }
.woocommerce-tabs ul.tabs li.active a { color: #f3f7f8 !important; }

.woocommerce-tabs .panel { background: #0a1b22 !important; border: 1px solid #23414d !important; border-radius: 0 0 16px 16px !important; padding: 30px !important; color: #a0b7bf !important; line-height: 1.7 !important; }
.woocommerce-tabs .panel h2, .woocommerce-tabs .panel h3 { color: #f3f7f8 !important; }
.woocommerce-tabs .panel div, .woocommerce-Tabs-panel--description div[style*="background"], .woocommerce-Tabs-panel--description div[style*="background-color: white"] {
  background: #10262e !important; color: #f3f7f8 !important; border: 1px solid #23414d !important; border-radius: 10px !important; padding: 18px !important;
}

.woocommerce div.product section.related, .woocommerce div.product .related.products, .woocommerce .related.products { clear: both !important; width: 100% !important; padding-top: 40px !important; }
.woocommerce .related.products h2 { color: #f3f7f8 !important; font-size: 22px !important; font-weight: 800 !important; margin-bottom: 20px !important; }
.woocommerce .related ul.products, .woocommerce ul.products { display: flex !important; flex-wrap: wrap !important; gap: 20px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; float: none !important; }
.woocommerce .related ul.products li.product, .woocommerce ul.products li.product {
  flex: 1 1 240px !important; max-width: 320px !important; width: auto !important; margin: 0 !important; float: none !important;
  background-color: #0a1b22 !important; border: 1px solid #23414d !important; border-radius: 14px !important; padding: 16px !important;
  display: flex !important; flex-direction: column !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
.woocommerce ul.products li.product img { width: 100% !important; height: 180px !important; object-fit: cover !important; border-radius: 8px !important; margin-bottom: 12px !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2 { font-size: 15px !important; font-weight: 700 !important; color: #f3f7f8 !important; margin-bottom: 8px !important; }
.woocommerce ul.products li.product .price { color: #facc15 !important; font-size: 16px !important; font-weight: 800 !important; margin-bottom: 14px !important; }
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product a.button {
  background-color: #facc15 !important; color: #061217 !important; font-weight: 800 !important; font-size: 13px !important;
  border-radius: 8px !important; padding: 10px 16px !important; display: block !important; width: 100% !important; text-align: center !important; border: none !important; margin-top: auto !important;
}
.woocommerce span.onsale { background-color: #ef4444 !important; color: #fff !important; font-weight: 800 !important; border-radius: 6px !important; }

@media (max-width: 768px) {
  .woocommerce div.product div.images, .woocommerce div.product div.summary { float: none !important; width: 100% !important; margin-bottom: 24px !important; padding: 20px !important; }
  .woocommerce .related ul.products li.product { max-width: 100% !important; flex: 1 1 100% !important; }
}

/* ==========================================================================
   4. SAAS MODERN CART UI/UX (CLEAN, NO TITLE, DARK OBSIDIAN)
   ========================================================================== */
body.woocommerce-cart .woocommerce,
body.woocommerce-cart .wp-block-woocommerce-cart {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 48px auto 80px auto !important;
  padding: 0 20px !important;
}

.woocommerce-cart table.cart,
.woocommerce table.shop_table {
  background: #0a1b22 !important;
  border: 1px solid #23414d !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin-bottom: 30px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

.woocommerce table.shop_table thead th {
  background: #10262e !important;
  color: #a0b7bf !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid #23414d !important;
}

.woocommerce table.shop_table tbody td {
  padding: 20px !important;
  border-bottom: 1px solid #10262e !important;
  color: #f3f7f8 !important;
  vertical-align: middle !important;
  background: transparent !important;
}

.woocommerce-cart table.cart img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  border: 1px solid #23414d !important;
}

.woocommerce-cart table.cart td.product-name a {
  color: #f3f7f8 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.woocommerce-cart table.cart td.product-name a:hover { color: #facc15 !important; }

.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
  color: #facc15 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

.woocommerce-cart table.cart a.remove {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border-radius: 8px !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 28px !important;
  text-align: center !important;
  display: inline-block !important;
  font-size: 18px !important;
}
.woocommerce-cart table.cart a.remove:hover { background: #ef4444 !important; color: #fff !important; }

.woocommerce-cart table.cart td.actions {
  background: #0d2129 !important;
  padding: 18px 20px !important;
}
.woocommerce-cart table.cart td.actions .coupon {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
  background: #061217 !important;
  border: 1px solid #23414d !important;
  color: #f3f7f8 !important;
  border-radius: 10px !important;
  padding: 11px 16px !important;
  min-width: 200px !important;
  font-size: 14px !important;
}
.woocommerce-cart table.cart td.actions .button {
  background: #10262e !important;
  color: #06b6d4 !important;
  border: 1px solid #06b6d4 !important;
  border-radius: 10px !important;
  padding: 11px 20px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
}
.woocommerce-cart table.cart td.actions .button:hover {
  background: #06b6d4 !important;
  color: #061217 !important;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  background: #0a1b22 !important;
  border: 1px solid #23414d !important;
  border-radius: 18px !important;
  padding: 28px !important;
  width: 100% !important;
  max-width: 440px !important;
  float: right !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}
.woocommerce .cart-collaterals .cart_totals h2 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #f3f7f8 !important;
  margin: 0 0 18px 0 !important;
  border-bottom: 1px solid #23414d !important;
  padding-bottom: 12px !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background: #facc15 !important;
  color: #061217 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 16px 24px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(250, 204, 21, 0.3) !important;
  margin-top: 16px !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: #eab308 !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   5. SAAS MODERN CHECKOUT UI/UX + COUPON DI ATAS PEMBAYARAN
   ========================================================================== */
body.woocommerce-checkout .woocommerce {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 48px auto 90px auto !important;
  padding: 0 20px !important;
}

/* Sembunyikan form kupon lama di atas & field tidak perlu */
.woocommerce-form-coupon-toggle,
form.checkout_coupon,
.woocommerce-additional-fields,
.woocommerce-shipping-fields {
  display: none !important;
}

form.checkout.woocommerce-checkout {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 32px !important;
  align-items: start !important;
  width: 100% !important;
}

form.checkout.woocommerce-checkout #customer_details {
  grid-column: 1 !important;
  width: 100% !important;
  background: #0a1b22 !important;
  border: 1px solid #23414d !important;
  border-radius: 18px !important;
  padding: 32px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

form.checkout.woocommerce-checkout #customer_details .col-1,
form.checkout.woocommerce-checkout #customer_details .col-2 {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

.woocommerce-billing-fields h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #f3f7f8 !important;
  margin: 0 0 22px 0 !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #23414d !important;
}

.woocommerce form .form-row {
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
}

.woocommerce form .form-row label {
  display: block !important;
  color: #a0b7bf !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.woocommerce form .form-row label .required {
  color: #facc15 !important;
  text-decoration: none !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100% !important;
  background-color: #10262e !important;
  border: 1px solid #23414d !important;
  color: #f3f7f8 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2) !important;
  background-color: #061217 !important;
}

/* Kolom Kanan Checkout: Order Summary, Inline Coupon & Payment */
#order_review_heading {
  display: none !important;
}

#order_review {
  grid-column: 2 !important;
  width: 100% !important;
  background: #0a1b22 !important;
  border: 1px solid #23414d !important;
  border-radius: 18px !important;
  padding: 28px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

#order_review table.shop_table {
  border: 1px solid #23414d !important;
  border-radius: 12px !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
}

#order_review table.shop_table tfoot th,
#order_review table.shop_table tfoot td {
  background: #10262e !important;
  color: #f3f7f8 !important;
  padding: 14px 18px !important;
  border-top: 1px solid #23414d !important;
  font-weight: 700 !important;
}

#order_review table.shop_table tfoot tr.order-total td strong {
  color: #facc15 !important;
  font-size: 20px !important;
}

/* KOTAK KUPON MODERN TEPAT DI ATAS METODE PEMBAYARAN (DEBIT / CREDIT CARD / PAYPAL) */
.km-checkout-coupon-box {
  background: #10262e !important;
  border: 1px dashed #06b6d4 !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  margin: 0 0 22px 0 !important;
}

.km-coupon-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #f3f7f8 !important;
  margin-bottom: 10px !important;
}

.km-coupon-input-group {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.km-coupon-input {
  flex: 1 !important;
  background: #061217 !important;
  border: 1px solid #23414d !important;
  color: #f3f7f8 !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  outline: none !important;
  text-transform: uppercase !important;
}
.km-coupon-input:focus {
  border-color: #facc15 !important;
}

.km-coupon-btn {
  background: #06b6d4 !important;
  color: #061217 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 11px 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}
.km-coupon-btn:hover {
  background: #facc15 !important;
}

.km-coupon-msg {
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-top: 8px !important;
}
.km-coupon-msg.is-success { color: #10b981 !important; }
.km-coupon-msg.is-error { color: #ef4444 !important; }

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  background-color: #0a1b22 !important;
  color: #f3f7f8 !important;
  border: 1px solid #23414d !important;
  border-left: 4px solid #06b6d4 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 24px !important;
}
.woocommerce-info a, .woocommerce-message a { color: #facc15 !important; font-weight: 700 !important; }

@media (max-width: 900px) {
  form.checkout.woocommerce-checkout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  form.checkout.woocommerce-checkout #customer_details,
  #order_review {
    grid-column: 1 !important;
    padding: 22px !important;
  }
  .woocommerce .cart-collaterals .cart_totals {
    max-width: 100% !important;
    float: none !important;
  }
}

/* ==========================================================================
   6. GLOBAL HEADER & SMART MOBILE MENU
   ========================================================================== */
.km-global-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  height: 72px !important;
  width: 100% !important;
  background-color: rgba(6, 18, 23, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid #23414d !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
}

.km-header-container {
  max-width: 1360px !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  position: relative !important;
}

.km-logo { font-size: 22px !important; font-weight: 800 !important; letter-spacing: 1px !important; color: #f3f7f8 !important; flex-shrink: 0 !important; }
.km-text-gold { color: #facc15 !important; }

.km-nav-menu { display: flex !important; gap: 24px !important; align-items: center !important; }
.km-nav-link { color: #a0b7bf !important; font-size: 14px !important; font-weight: 500 !important; transition: color 0.2s ease !important; }
.km-nav-link:hover, .km-nav-link.km-active { color: #f3f7f8 !important; }

.km-vip-pill {
  font-size: 10px !important; background: rgba(250, 204, 21, 0.15) !important; border: 1px solid #facc15 !important;
  color: #facc15 !important; padding: 2px 6px !important; border-radius: 4px !important; margin-left: 6px !important; font-weight: 700 !important;
}
.km-btn-header { padding: 9px 22px !important; font-size: 13px !important; }

.km-mobile-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 42px; height: 42px; background: #10262e !important; border: 1px solid #23414d !important; border-radius: 10px; cursor: pointer; padding: 8px;
}
.km-burger-bar { display: block; width: 22px; height: 2px; background-color: #facc15; border-radius: 2px; transition: all 0.3s ease; }
.km-mobile-cta-wrapper { display: none; }

@media (max-width: 860px) {
  .km-global-header { height: 64px !important; padding: 0 16px !important; }
  .km-desktop-only { display: none !important; }
  .km-mobile-toggle { display: flex !important; }
  .km-mobile-toggle.is-open .km-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .km-mobile-toggle.is-open .km-burger-bar:nth-child(2) { opacity: 0; }
  .km-mobile-toggle.is-open .km-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .km-nav-menu {
    position: absolute !important; top: 64px !important; left: 0 !important; right: 0 !important; width: 100% !important;
    background: #0a1b22 !important; border-bottom: 1px solid #23414d !important; flex-direction: column !important;
    align-items: stretch !important; gap: 0 !important; padding: 12px 20px 20px 20px !important; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.8) !important; display: none !important;
  }
  .km-nav-menu.km-menu-active { display: flex !important; }
  .km-nav-link { padding: 14px 10px !important; border-bottom: 1px solid #10262e !important; font-size: 15px !important; color: #f3f7f8 !important; }
  .km-mobile-cta-wrapper { display: block !important; margin-top: 16px; }
  .km-mobile-cta { width: 100% !important; text-align: center !important; padding: 13px !important; font-size: 15px !important; }
}

/* ==========================================================================
   7. HERO BANNER 1920x1080 & SUBBAR
   ========================================================================== */
.km-hero-banner-wrapper { max-width: 1360px !important; width: 100% !important; margin: 0 auto 40px auto !important; padding: 0 20px !important; }
@media (max-width: 600px) { .km-hero-banner-wrapper { padding: 0 12px !important; } }

.km-banner-slider-container { position: relative !important; width: 100% !important; }
.km-pure-banner-link {
  display: none !important; width: 100% !important; border-radius: 18px !important; overflow: hidden !important;
  border: 1px solid #23414d !important; background: #000000 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}
.km-pure-banner-link.km-slide-active { display: block !important; }
.km-pure-banner-img { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; display: block !important; object-fit: cover !important; }

.km-slider-dots { display: flex !important; justify-content: center !important; gap: 8px !important; margin-top: 14px !important; }
.km-dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #10262e !important; border: 1px solid #23414d !important; cursor: pointer !important; padding: 0 !important; }
.km-dot.is-active { background: #facc15 !important; border-color: #facc15 !important; width: 24px !important; border-radius: 6px !important; }

.km-promo-subbar {
  margin-top: 18px !important; background-color: #0a1b22 !important; border: 1px solid #23414d !important; border-radius: 14px !important;
  padding: 16px 20px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 16px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
@media (max-width: 768px) {
  .km-promo-subbar { flex-direction: column !important; align-items: flex-start !important; }
  .km-promo-subbar-right { width: 100% !important; }
  .km-promo-subbar-right .km-btn-gold { width: 100% !important; text-align: center !important; }
}

.km-promo-subbar-left { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important; }
.km-flash-badge { background: #facc15 !important; color: #061217 !important; font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important; padding: 5px 12px !important; border-radius: 20px !important; }
.km-subbar-title { color: #f3f7f8 !important; font-size: 15px !important; font-weight: 700 !important; }

/* ==========================================================================
   8. CURATED TRUST CARD & TOP PROMO DEALS
   ========================================================================== */
.km-trust-card, .km-weekly-featured-wrapper {
  max-width: 1360px !important; width: 100% !important; margin: 0 auto 46px auto !important; padding: 28px !important;
  background-color: #0a1b22 !important; border: 1px solid #23414d !important; border-radius: 18px !important;
}
@media (max-width: 600px) {
  .km-trust-card, .km-weekly-featured-wrapper { padding: 18px !important; margin: 0 12px 30px 12px !important; width: calc(100% - 24px) !important; }
}
.km-trust-header h2, .km-flash-section-header h2 { margin: 0 0 6px 0 !important; font-size: 24px !important; font-weight: 800 !important; color: #f3f7f8 !important; }
.km-trust-header p, .km-flash-section-header p { margin: 0 0 22px 0 !important; font-size: 14px !important; color: #a0b7bf !important; }

.km-trust-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
@media (max-width: 900px) { .km-trust-grid { grid-template-columns: 1fr !important; } }

.km-trust-item { background: #10262e !important; border: 1px solid #23414d !important; border-radius: 12px !important; padding: 18px !important; }
.km-trust-item p { margin: 8px 0 0 0 !important; font-size: 13px !important; color: #a0b7bf !important; line-height: 1.5 !important; }
.km-trust-item a { color: #06b6d4 !important; text-decoration: underline !important; }

.km-badge-cyan { display: inline-block !important; font-size: 11px !important; font-weight: 700 !important; color: #06b6d4 !important; background: rgba(6, 182, 212, 0.12) !important; border: 1px solid #06b6d4 !important; border-radius: 6px !important; padding: 4px 10px !important; }
.km-badge-gold { display: inline-block !important; font-size: 11px !important; font-weight: 700 !important; color: #f59e0b !important; background: rgba(245, 158, 11, 0.12) !important; border: 1px solid #f59e0b !important; border-radius: 6px !important; padding: 4px 10px !important; }
.km-badge-outline { display: inline-block !important; font-size: 11px !important; font-weight: 700 !important; color: #f3f7f8 !important; border: 1px solid #23414d !important; background: #0a1b22 !important; border-radius: 6px !important; padding: 4px 10px !important; }

.km-flash-title-wrap { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 6px !important; flex-wrap: wrap !important; }
.km-pill-flash { background: #facc15 !important; color: #061217 !important; font-size: 11px !important; font-weight: 800 !important; padding: 5px 12px !important; border-radius: 20px !important; }

/* ==========================================================================
   9. CATALOG & INFINITE GRID
   ========================================================================== */
.km-catalog-wrapper { max-width: 1360px !important; width: 100% !important; margin: 0 auto !important; padding: 0 20px !important; }
@media (max-width: 600px) { .km-catalog-wrapper { padding: 0 12px !important; } }

.km-section-heading h2 { margin: 0 0 6px 0 !important; font-size: 24px !important; font-weight: 800 !important; color: #f3f7f8 !important; }
.km-section-heading p { margin: 0 0 24px 0 !important; font-size: 14px !important; color: #a0b7bf !important; }

.km-toolbar { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 16px !important; margin-bottom: 28px !important; flex-wrap: wrap !important; }
.km-search-box { position: relative !important; flex: 1 !important; max-width: 440px !important; }
@media (max-width: 600px) { .km-search-box { max-width: 100% !important; } }

.km-search-box input {
  width: 100% !important; background: #10262e !important; border: 1px solid #23414d !important; color: #f3f7f8 !important;
  padding: 12px 40px 12px 16px !important; border-radius: 12px !important; font-size: 14px !important; outline: none !important;
}
.km-search-icon { position: absolute !important; right: 14px !important; top: 13px !important; color: #6d8b96 !important; }

#km-filter-bestseller {
  background: #0a1b22 !important; border: 1px solid #23414d !important; color: #f3f7f8 !important;
  padding: 11px 18px !important; border-radius: 12px !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important;
}
#km-filter-bestseller.is-active { border-color: #facc15 !important; color: #facc15 !important; }

.km-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; }
@media (max-width: 1100px) { .km-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 768px) { .km-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } }
@media (max-width: 480px) { .km-grid { grid-template-columns: 1fr !important; } }

.km-card { background: #0a1b22 !important; border: 1px solid #23414d !important; border-radius: 14px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; }
.km-card-thumb-wrapper { position: relative !important; width: 100% !important; height: 180px !important; background: #10262e !important; overflow: hidden !important; }
.km-card-thumb-wrapper a { display: block !important; width: 100% !important; height: 100% !important; }
.km-card-thumb { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.km-badge-wrapper { position: absolute !important; top: 10px !important; left: 10px !important; display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
.km-pill { font-size: 11px !important; font-weight: 700 !important; padding: 4px 8px !important; border-radius: 6px !important; }
.km-pill-cyan { background: rgba(6, 18, 23, 0.9) !important; color: #06b6d4 !important; border: 1px solid #06b6d4 !important; }
.km-pill-amber { background: rgba(6, 18, 23, 0.9) !important; color: #f59e0b !important; border: 1px solid #f59e0b !important; }
.km-pill-discount { background: #ef4444 !important; color: #ffffff !important; border: 1px solid #ef4444 !important; }

.km-card-content { padding: 18px !important; display: flex !important; flex-direction: column !important; flex-grow: 1 !important; }
.km-card-title { margin: 0 0 6px 0 !important; font-size: 16px !important; font-weight: 700 !important; }
.km-card-title a { color: #f3f7f8 !important; }
.km-card-excerpt { font-size: 13px !important; color: #a0b7bf !important; line-height: 1.4 !important; margin: 0 0 16px 0 !important; flex-grow: 1 !important; }

.km-pricing-block { margin-bottom: 16px !important; }
.km-price-strikethrough { font-size: 13px !important; text-decoration: line-through !important; color: #6d8b96 !important; margin-right: 6px !important; }
.km-price-usd { font-size: 20px !important; font-weight: 800 !important; color: #f3f7f8 !important; }
.km-price-usd small { font-size: 11px !important; color: #6d8b96 !important; margin-left: 2px !important; }

.km-btn-gold {
  display: block !important; width: 100% !important; text-align: center !important; background: #facc15 !important; color: #061217 !important;
  padding: 12px 16px !important; border-radius: 10px !important; font-weight: 800 !important; font-size: 14px !important; border: none !important; cursor: pointer !important;
}
.km-btn-gold:hover { background: #eab308 !important; }

#km-infinite-sentinel { width: 100% !important; padding: 36px 0 !important; text-align: center !important; }
.km-hidden { display: none !important; }
#km-loading-spinner { display: inline-flex !important; align-items: center !important; gap: 8px !important; color: #06b6d4 !important; }
.km-spin { width: 20px !important; height: 20px !important; animation: km-spin 0.8s linear infinite !important; }
@keyframes km-spin { 100% { transform: rotate(360deg); } }

/* ==========================================================================
   10. QUICK CART MODAL POPUP & PAYMENT GATEWAYS
   ========================================================================== */
.km-modal-backdrop {
  position: fixed !important; inset: 0 !important; background-color: rgba(4, 13, 17, 0.88) !important; backdrop-filter: blur(8px) !important;
  display: flex !important; align-items: center !important; justify-content: center !important; z-index: 99999 !important; padding: 16px !important;
}
.km-modal-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.km-modal-dialog {
  background: #0a1b22 !important; border: 1px solid #23414d !important; border-radius: 18px !important;
  max-width: 420px !important; width: 100% !important; padding: 26px !important; position: relative !important; text-align: center !important;
}
.km-modal-close { position: absolute !important; top: 12px !important; right: 14px !important; background: none !important; border: none !important; color: #6d8b96 !important; font-size: 24px !important; cursor: pointer !important; }
.km-modal-header h3 { margin: 0 0 6px 0 !important; color: #f3f7f8 !important; font-size: 19px !important; font-weight: 800 !important; }
.km-modal-product-preview { display: flex !important; align-items: center !important; gap: 12px !important; background: #10262e !important; border: 1px solid #23414d !important; border-radius: 10px !important; padding: 12px !important; margin: 16px 0 !important; text-align: left !important; }
.km-modal-img-wrap { width: 48px !important; height: 48px !important; border-radius: 6px !important; overflow: hidden !important; flex-shrink: 0 !important; }
.km-modal-thumb { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.km-modal-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.km-btn-secondary { background: #10262e !important; color: #f3f7f8 !important; border: 1px solid #23414d !important; padding: 12px !important; border-radius: 10px !important; font-weight: 700 !important; cursor: pointer !important; }

#add_payment_method #payment, .woocommerce-checkout #payment {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}
#payment ul.payment_methods {
  border-bottom: 1px solid #23414d !important;
  padding: 0 0 16px 0 !important;
  margin: 0 0 20px 0 !important;
  list-style: none !important;
}
#payment .payment_method_paypal,
#payment .payment_method_ppcp-gateway,
#payment .wc_payment_method {
  background: #10262e !important;
  border: 1px solid #23414d !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
}
#payment .wc_payment_method label { color: #f3f7f8 !important; font-weight: 700 !important; cursor: pointer !important; }
#payment div.payment_box { background-color: #061217 !important; color: #a0b7bf !important; border: 1px solid #23414d !important; border-radius: 8px !important; padding: 12px !important; margin-top: 10px !important; }
#payment div.payment_box::before { display: none !important; }

#place_order {
  width: 100% !important;
  background-color: #facc15 !important;
  color: #061217 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  padding: 16px 24px !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 18px rgba(250, 204, 21, 0.3) !important;
}
#place_order:hover { background-color: #eab308 !important; }

/* ==========================================================================
   11. FOOTER & CLEANUP DUPLICATES
   ========================================================================== */
.km-global-footer { background-color: #040d11 !important; border-top: 1px solid #23414d !important; margin-top: 60px !important; padding: 50px 20px 24px 20px !important; width: 100% !important; }
.km-footer-container { max-width: 1360px !important; margin: 0 auto !important; }
.km-footer-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 30px !important; margin-bottom: 36px !important; }
.km-footer-logo { font-size: 20px !important; font-weight: 800 !important; color: #f3f7f8 !important; }
.km-footer-col h4 { font-size: 14px !important; font-weight: 700 !important; color: #f3f7f8 !important; margin: 0 0 14px 0 !important; }
.km-footer-col ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.km-footer-col ul li { margin-bottom: 8px !important; }
.km-footer-col ul li a { font-size: 13px !important; color: #a0b7bf !important; }
.km-footer-trust-strip { border-top: 1px solid #23414d !important; padding: 18px 0 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; }
.km-payment-badges { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.km-pay-pill { font-size: 11px !important; font-weight: 700 !important; background: #10262e !important; border: 1px solid #23414d !important; color: #a0b7bf !important; padding: 4px 10px !important; border-radius: 6px !important; }

.km-footer-bottom, .site-info, footer .site-info, footer .copyright, .site-footer .site-info, body > .site-info, #colophon .site-info, .entry-footer, p:empty {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}