/*
Theme Name: DX-Link RX King Store V2 (Screenshots Match)
Theme URI: https://dxlinkstore.com
Author: DX-Link
Description: Tema yang disesuaikan percis dengan tangkapan layar asli. Memperbaiki masalah foto produk yang terpotong.
Version: 2.2.0
License: GNU General Public License v2 or later
Text Domain: dxlink
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Bebas+Neue&display=swap');

:root {
  --red: #c0392b;
  --red-dark: #a93226;
  --dark-bg: #111418;
  --dark-accent: #1a1f26;
  --body-bg: #f4f4f4;
  --white: #ffffff;
}

body {
  font-family: 'Inter', sans-serif;
  color: #333;
  background: var(--body-bg);
  margin: 0;
  line-height: 1.6;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* === TOPBAR (Screenshot 1) === */
.topbar { background: #0c0e11; color: #aaa; padding: 10px 0; font-size: 11px; border-bottom: 1px solid #1a1a1a; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; }
.topbar-left { display: flex; gap: 15px; }
.topbar-left span { display: flex; align-items: center; gap: 5px; }
.topbar-right { color: font-weight: 600; color: #ff9f43; } /* Orange-gold like screenshot */

/* === HEADER (Screenshot 1) === */
.site-header { background: var(--dark-bg); padding: 20px 0; color: white; position: sticky; top: 0; z-index: 999; }
.site-header::after { content: ''; display: block; height: 2px; background: var(--red); position: absolute; bottom: 0; left: 0; right: 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.site-logo { text-decoration: none; display: flex; flex-direction: column; }
.logo-title { font-family: 'Bebas Neue', cursive; font-size: 38px; color: white; letter-spacing: 2px; line-height: 1; }
.logo-title span { color: var(--red); }
.logo-sub { font-size: 10px; color: #666; letter-spacing: 3px; font-weight: bold; margin-top: 4px; }

.header-search { flex: 1; max-width: 450px; display: flex; }
.header-search input { flex: 1; padding: 10px 15px; border-radius: 5px 0 0 5px; border: 1px solid #222; background: #000; color: white; font-size: 13px; }
.header-search button { background: var(--red); color: white; border: none; padding: 0 20px; border-radius: 0 5px 5px 0; cursor: pointer; font-weight: bold; }

.cart-btn { background: var(--red); color: white; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-weight: bold; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cart-count { background: white; color: var(--red); width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; }

.promo-tag-btn { background: #e67e22; color: white; font-size: 10px; font-weight: bold; padding: 4px 12px; border-radius: 20px; display: inline-block; margin-top: 10px; text-decoration: none; text-transform: uppercase; float: right; }

/* === HERO (Screenshot 1) === */
.hero-section { background: var(--dark-bg); padding: 60px 0; border-bottom: 20px solid white; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.hero-content h2 { font-family: 'Bebas Neue', cursive; font-size: 60px; line-height: 0.95; color: white; margin-bottom: 20px; }
.hero-content h2 span { color: var(--red); }
.hero-content p { color: #888; font-size: 14px; margin-bottom: 30px; line-height: 1.7; }
.hero-btns { display: flex; gap: 15px; }
.btn-solid { background: var(--red); color: white; padding: 12px 25px; border-radius: 5px; text-decoration: none; font-weight: bold; }
.btn-outline { border: 1px solid #333; color: white; padding: 12px 25px; border-radius: 5px; text-decoration: none; font-weight: bold; }

.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.stat-item { background: #1a1f26; border: 1px solid #2e3540; padding: 25px; border-radius: 12px; }
.stat-num { font-family: 'Bebas Neue', cursive; font-size: 40px; color: var(--red); }
.stat-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; }

.hero-footer-bar { background: #1a1f26; padding: 15px 30px; border-radius: 10px; display: flex; gap: 30px; margin-top: 30px; font-size: 12px; color: #888; border: 1px solid #2e3540; }

/* === PRODUCT SECTION (Screenshot 2) === */
.section-heading-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.section-title { font-family: 'Bebas Neue', cursive; font-size: 28px; color: #111; display: flex; align-items: center; gap: 10px; }
.section-title::before { content: ''; width: 4px; height: 28px; background: var(--red); display: block; }
.btn-view-all { background: var(--red); color: white; padding: 8px 18px; border-radius: 6px; font-size: 12px; font-weight: bold; text-decoration: none; }

/* FORCE REMOVE WOOCOMMERCE GRID GAPS AND CLEARING */
.woocommerce ul.products::before, 
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { 
  content: none !important; 
  display: none !important; 
}

.woocommerce ul.products, 
.woocommerce-page ul.products { 
  display: grid !important; 
  grid-template-columns: repeat(4, 1fr) !important; 
  gap: 15px !important; 
  margin: 0 !important; 
  padding: 0 !important;
}

/* Ensure no items are skipped - Resetting all Woo defaults */
.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product { 
  background: white !important; 
  padding: 0 !important; 
  margin: 0 !important; 
  width: 100% !important; 
  float: none !important;
  clear: none !important; 
  list-style: none !important;
  border: 1px solid #eee !important; 
  border-radius: 6px !important; 
  overflow: hidden !important; 
  display: flex !important; 
  flex-direction: column !important; 
  position: relative !important;
}

/* Fix for the Empty First Slot - Sometimes "first" class has clear:both */
.woocommerce ul.products li.first,
.woocommerce-page ul.products li.first {
    clear: none !important;
}

/* IMAGE FILL FIX - USE COVER TO REMOVE WHITE SPACES BUT KEEP RATIO */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  width: 100% !important;
  height: 220px !important; /* Set fixed height to ensure total uniformity */
  aspect-ratio: 1 / 1 !important; 
  object-fit: cover !important; /* This will fill the box completely */
  background: #f9f9f9 !important;
  padding: 0 !important; /* Zero padding to fill edge to edge */
  border-radius: 0 !important;
  display: block !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  padding: 12px 12px 5px !important;
  font-size: 13px !important;
  color: #111 !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  height: 48px !important; /* Slightly taller for 2 lines */
  overflow: hidden !important;
  text-align: left !important;
  margin-bottom: 0 !important;
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  padding: 0 12px 12px !important;
  font-family: 'Bebas Neue', cursive !important;
  color: var(--red) !important;
  font-size: 20px !important;
  margin: 0 !important;
  font-weight: normal !important;
  display: block !important;
  text-align: left !important;
}

.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
  background: var(--red) !important;
  color: white !important;
  border-radius: 4px !important;
  margin: 0 10px 10px !important; 
  padding: 10px 5px !important;
  font-size: 10px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  text-align: center !important;
  display: block !important;
  width: auto !important;
  float: none !important;
}

/* Fix for mobile grid */
@media (max-width: 768px) {
    .woocommerce ul.products, 
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* === TRUST BAR (Screenshot 3) === */
.trust-bar { background: #1a1f26; border-top: 2px solid var(--red); border-bottom: 2px solid var(--red); padding: 25px 0; margin-top: 60px; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trust-item { display: flex; align-items: center; gap: 15px; color: white; }
.trust-icon { font-size: 30px; }
.trust-text h4 { margin: 0; font-size: 13px; font-weight: bold; }
.trust-text p { margin: 2px 0 0; font-size: 11px; color: #888; }

/* === FOOTER (Screenshot 3) === */
.site-footer { background: var(--dark-bg); color: #888; padding: 60px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
.footer-logo { font-family: 'Bebas Neue', cursive; font-size: 32px; color: white; letter-spacing: 2px; margin-bottom: 20px; }
.footer-col h5 { color: white; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; font-weight: bold; }

.footer-contact-list { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.footer-contact-list li { font-size: 12px; display: flex; align-items: center; gap: 10px; }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: #888; text-decoration: none; font-size: 13px; transition: 0.2s; }
.footer-links a:hover { color: var(--red); }

.footer-bottom { border-top: 1px solid #1a1f26; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.woo-pill { background: #1a1f26; border: 1px solid #2e3540; color: #8b5cf6; padding: 5px 15px; border-radius: 20px; text-decoration: none; }

@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: 1fr; gap: 20px; }
}