/*
Theme Name: Custom Body Kits Modern
Theme URI: https://www.custombodykits.co.za
Description: A modern, dark, automotive-industrial child theme for Custom Body Kits, built on Storefront (WooCommerce's official parent theme). Retains all Storefront/WooCommerce functionality while giving the storefront a rugged, techy, dark redesign with an accent color.
Author: Custom Body Kits
Template: storefront
Version: 1.0.0
Text Domain: custombodykits-modern
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  --cbk-bg: #0e0f11;
  --cbk-bg-alt: #17181b;
  --cbk-surface: #1e2023;
  --cbk-surface-hover: #26282c;
  --cbk-border: #2c2e33;
  --cbk-text: #e9e9ea;
  --cbk-text-muted: #9a9ca3;
  --cbk-accent: #2f7dff;      /* corporate blue */
  --cbk-accent-hover: #5b98ff;
  --cbk-accent-dark: #1a56c4;
  --cbk-success: #35c46a;
  --cbk-warning: #ffb020;
  --cbk-radius: 2px;
  --cbk-font-head: 'Rajdhani', 'Oswald', Arial, sans-serif;
  --cbk-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
body {
  background-color: var(--cbk-bg);
  color: var(--cbk-text);
  font-family: var(--cbk-font-body);
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: var(--cbk-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover,
a:focus {
  color: var(--cbk-accent-hover);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--cbk-font-head);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

::selection {
  background: var(--cbk-accent);
  color: #fff;
}

/* ==========================================================================
   3. LAYOUT / WRAPPERS
   ========================================================================== */
.site,
#page {
  background-color: var(--cbk-bg);
}

.col-full {
  max-width: 1240px;
}

/* subtle diagonal texture on main background for an industrial feel */
body.woocommerce-page,
body.home {
  background-image:
    linear-gradient(180deg, var(--cbk-bg) 0%, var(--cbk-bg) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 12px);
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.site-header {
  background-color: var(--cbk-bg-alt);
  border-bottom: 3px solid var(--cbk-accent);
  padding-top: 0.75em;
  padding-bottom: 0.75em;
}

.site-header .site-branding {
  padding: 0.5em 0;
}

.site-title a {
  color: #fff !important;
  font-size: 1.9em;
  font-weight: 800;
  font-style: italic;
}

.site-description {
  color: var(--cbk-text-muted);
  text-transform: uppercase;
  font-size: 0.72em;
  letter-spacing: 0.15em;
}

.site-header-cart .cart-contents,
.site-header a.cart-contents {
  background-color: var(--cbk-accent);
  color: #fff;
  border-radius: var(--cbk-radius);
  padding: 0.5em 1em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.05em;
}
.site-header-cart .cart-contents:hover {
  background-color: var(--cbk-accent-hover);
}

/* Primary nav */
/* Background/border moved to the full-width wrapper (instead of the
   inner, centered .main-navigation) so the bar always spans edge-to-edge
   and doesn't get clipped by the .col-full container's padding. */
.storefront-primary-navigation {
  background-color: var(--cbk-bg);
  border-top: 1px solid var(--cbk-border);
  border-bottom: 1px solid var(--cbk-border);
}

.main-navigation ul li a {
  color: var(--cbk-text);
  font-family: var(--cbk-font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.92em;
  padding: 1em 1.2em;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: var(--cbk-accent);
  background-color: rgba(47,125,255,0.10);
}

.main-navigation ul ul {
  background-color: var(--cbk-surface);
  border: 1px solid var(--cbk-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.main-navigation ul ul li a {
  color: var(--cbk-text);
}

/* Search field in header */
.site-search input.search-field,
.widget_product_search input[type="search"] {
  background-color: var(--cbk-surface);
  border: 1px solid var(--cbk-border);
  color: var(--cbk-text);
  border-radius: var(--cbk-radius);
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.button,
button,
input[type="button"],
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--cbk-accent);
  color: #fff !important;
  border: none;
  border-radius: var(--cbk-radius);
  font-family: var(--cbk-font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.9em 1.6em;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--cbk-accent-hover);
  color: #fff !important;
}

.button:active,
.woocommerce a.button:active {
  transform: translateY(1px);
}

.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background-color: transparent !important;
  color: #fff !important;
  border: 2px solid var(--cbk-accent) !important;
}
.button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--cbk-accent) !important;
  color: #fff !important;
}

/* ==========================================================================
   6. SHOP / PRODUCT ARCHIVE
   ========================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background-color: var(--cbk-surface);
  border: 1px solid var(--cbk-border);
  border-radius: var(--cbk-radius);
  padding: 1.1em;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.woocommerce ul.products li.product:hover {
  border-color: var(--cbk-accent);
  transform: translateY(-4px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1em;
  color: #fff;
  margin-top: 0.6em;
}

.woocommerce ul.products li.product .price {
  color: var(--cbk-accent);
  font-weight: 700;
  font-family: var(--cbk-font-head);
  font-size: 1.15em;
}

.woocommerce ul.products li.product .price del {
  color: var(--cbk-text-muted);
  opacity: 0.7;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
}

.woocommerce span.onsale {
  background-color: var(--cbk-accent);
  color: #fff;
  border-radius: var(--cbk-radius);
  text-transform: uppercase;
  font-family: var(--cbk-font-head);
  font-weight: 700;
  font-size: 0.75em;
  min-height: auto;
  min-width: auto;
  padding: 0.4em 0.8em;
  top: 0.5em;
  left: 0.5em;
}

.woocommerce nav.woocommerce-pagination ul {
  border: none;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: 1px solid var(--cbk-border);
  background-color: var(--cbk-surface);
  border-radius: var(--cbk-radius);
  margin: 0 0.2em;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  color: var(--cbk-text);
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--cbk-accent);
  color: #fff;
}

/* Sidebar widgets / category filters */
.widget {
  background-color: var(--cbk-surface);
  border: 1px solid var(--cbk-border);
  border-radius: var(--cbk-radius);
  padding: 1.4em;
}

.widget-title,
.widget h2, .widget h3 {
  color: #fff;
  font-family: var(--cbk-font-head);
  font-size: 1em;
  border-bottom: 2px solid var(--cbk-accent);
  padding-bottom: 0.5em;
  margin-bottom: 0.8em;
}

.widget ul li a {
  color: var(--cbk-text-muted);
}
.widget ul li a:hover {
  color: var(--cbk-accent);
}

/* Product filter / layered nav counts */
.woocommerce .widget_layered_nav ul li .count {
  background-color: var(--cbk-bg);
  color: var(--cbk-text-muted);
  border-radius: var(--cbk-radius);
}

/* ==========================================================================
   7. SINGLE PRODUCT PAGE
   ========================================================================== */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs {
  background: transparent;
  border-color: var(--cbk-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--cbk-text-muted);
  font-family: var(--cbk-font-head);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--cbk-accent);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--cbk-accent);
  font-family: var(--cbk-font-head);
  font-size: 1.6em;
}

.woocommerce div.product form.cart .quantity input.qty {
  background-color: var(--cbk-surface);
  border: 1px solid var(--cbk-border);
  color: var(--cbk-text);
}

.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta a {
  color: var(--cbk-text-muted);
}

/* Reviews */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  background-color: var(--cbk-surface);
  border: 1px solid var(--cbk-border);
  border-radius: var(--cbk-radius);
}

.woocommerce .star-rating span:before,
.woocommerce p.stars a::before {
  color: var(--cbk-accent);
}

/* ==========================================================================
   8. CART / CHECKOUT
   ========================================================================== */
.woocommerce table.shop_table,
.woocommerce table.shop_table tbody,
.woocommerce table.shop_table tr,
.woocommerce table.shop_table td,
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart tr {
  background-color: var(--cbk-surface) !important;
  border-color: var(--cbk-border) !important;
  color: var(--cbk-text) !important;
}
.woocommerce table.shop_table th {
  background-color: var(--cbk-bg-alt) !important;
  color: #fff !important;
  font-family: var(--cbk-font-head);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85em;
}
.woocommerce table.shop_table td a,
.woocommerce table.shop_table td .amount {
  color: var(--cbk-text) !important;
}
.woocommerce table.shop_table td.product-name a {
  color: #fff !important;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  background-color: var(--cbk-surface) !important;
  border: 1px solid var(--cbk-border);
  border-radius: var(--cbk-radius);
  padding: 1.4em;
}
.woocommerce-cart .cart-collaterals .cart_totals *,
.woocommerce-checkout #order_review * {
  color: var(--cbk-text) !important;
}
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-cart .cart-collaterals .cart_totals th {
  color: #fff !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-cart .coupon .input-text,
.woocommerce input.input-text,
.woocommerce-checkout select {
  background-color: var(--cbk-surface) !important;
  border: 1px solid var(--cbk-border) !important;
  color: var(--cbk-text) !important;
  border-radius: var(--cbk-radius);
}

.woocommerce form .form-row label {
  color: var(--cbk-text-muted) !important;
}

.select2-container--default .select2-selection--single {
  background-color: var(--cbk-surface);
  border: 1px solid var(--cbk-border);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--cbk-text);
}

/* ==========================================================================
   8b. CHECKOUT — PAYMENT BOX HARDENING
   These elements come from WooCommerce core (not Storefront) and ship with
   a white background + grey text by default, which earlier rules didn't
   catch. Forcing them dark here.
   ========================================================================== */
.woocommerce-checkout #payment,
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout ul#shipping_method,
.woocommerce-checkout .woocommerce-shipping-methods,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce-NoticeGroup,
.woocommerce-checkout-review-order-table {
  background-color: var(--cbk-surface) !important;
  color: var(--cbk-text) !important;
  border-color: var(--cbk-border) !important;
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--cbk-surface) !important;
}

.woocommerce-checkout #payment ul.payment_methods li,
.woocommerce-checkout #payment div.payment_box p,
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout label,
.woocommerce-checkout fieldset legend,
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .woocommerce-form-coupon {
  color: var(--cbk-text) !important;
}

.woocommerce-checkout #payment div.payment_box a {
  color: var(--cbk-accent) !important;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
  background-color: transparent !important;
  color: var(--cbk-text) !important;
}

/* ==========================================================================
   8c. FAQ / THIRD-PARTY PLUGIN CONTENT HARDENING
   Plugins like Helpie FAQ often ship their own light-mode CSS (white
   panels, grey/near-black text) that ignores the theme. These broad,
   safe selectors catch the common patterns without needing to touch the
   plugin itself.
   ========================================================================== */
.helpie-faq,
.helpie_faq,
.hfaq-container,
.hfaq-category,
.hfaq-question,
.hfaq-answer,
.helpie-faq-wrapper,
.entry-content .faq,
.entry-content .faq-item,
.entry-content .accordion,
.entry-content .accordion-item,
.entry-content .panel,
.entry-content .panel-body,
.entry-content .panel-heading,
.entry-content .card,
.entry-content .card-body,
.entry-content .card-header,
.entry-content [class*="faq"],
.entry-content [class*="accordion"] {
  background-color: var(--cbk-surface) !important;
  color: var(--cbk-text) !important;
  border-color: var(--cbk-border) !important;
}

.entry-content [class*="faq"] h1,
.entry-content [class*="faq"] h2,
.entry-content [class*="faq"] h3,
.entry-content [class*="faq"] h4,
.entry-content [class*="faq"] strong,
.entry-content [class*="accordion"] h1,
.entry-content [class*="accordion"] h2,
.entry-content [class*="accordion"] h3,
.entry-content [class*="accordion"] h4 {
  color: #fff !important;
}

.entry-content [class*="faq"] a,
.entry-content [class*="accordion"] a {
  color: var(--cbk-accent) !important;
}

/* Precise Helpie FAQ plugin selectors (confirmed via browser inspector) */
.helpie-faq.accordions,
.helpie-faq-row,
.helpie-faq-col,
li.accordion_item,
.accordion-header,
.accordion-title,
.accordion-body,
[id^="accordion-content-post"] {
  background-color: var(--cbk-surface) !important;
  background: var(--cbk-surface) !important;
  color: var(--cbk-text) !important;
  border-color: var(--cbk-border) !important;
}

.accordion-header .accordion-title,
.accordion-header {
  color: #fff !important;
}

.helpie-faq input[type="search"],
.helpie-faq input[type="text"] {
  background-color: var(--cbk-surface) !important;
  color: var(--cbk-text) !important;
  border: 1px solid var(--cbk-border) !important;
}

/* Generic safety net: any inline white/near-white background inside the
   main content area gets forced dark, since page-builder shortcodes often
   set backgrounds via inline styles rather than a stylesheet. */
.entry-content [style*="background-color: #fff"],
.entry-content [style*="background-color:#fff"],
.entry-content [style*="background-color: #ffffff"],
.entry-content [style*="background-color:#ffffff"],
.entry-content [style*="background: #fff"],
.entry-content [style*="background:#fff"] {
  background-color: var(--cbk-surface) !important;
  color: var(--cbk-text) !important;
}

/* ==========================================================================
   9. MY ACCOUNT
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background-color: var(--cbk-surface);
  border: 1px solid var(--cbk-border);
  border-radius: var(--cbk-radius);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  color: var(--cbk-text-muted);
  text-transform: uppercase;
  font-family: var(--cbk-font-head);
  font-size: 0.85em;
  letter-spacing: 0.04em;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--cbk-accent);
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--cbk-bg-alt);
  border-top: 3px solid var(--cbk-accent);
  color: var(--cbk-text-muted);
}

.site-footer .widget-title,
.site-footer h2, .site-footer h3 {
  color: #fff;
}

.site-footer a {
  color: var(--cbk-text-muted);
}
.site-footer a:hover {
  color: var(--cbk-accent);
}

.site-info {
  background-color: var(--cbk-bg);
  color: var(--cbk-text-muted);
  border-top: 1px solid var(--cbk-border);
  font-size: 0.85em;
}

/* Header social media icons — sit next to the product search box */
.site-header .col-full {
  flex-wrap: wrap;
}

.cbk-header-social {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-left: 0.75em;
  vertical-align: middle;
}

.cbk-header-social .cbk-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff !important;
  border: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.cbk-header-social .cbk-social-icon:hover {
  transform: translateY(-2px) scale(1.06);
  filter: brightness(1.12);
  color: #fff !important;
}

/* Brand-colored icon buttons */
.cbk-social-facebook { background-color: #1877f2; }
.cbk-social-twitter  { background-color: #1d9bf0; }
.cbk-social-youtube  { background-color: #ff0000; }

@media (max-width: 768px) {
  .cbk-header-social {
    margin-left: 0;
    margin-top: 0.5em;
  }
}

/* ==========================================================================
   11. MISC / BADGES / NOTICES
   ========================================================================== */
.woocommerce-message,
.woocommerce-info {
  background-color: var(--cbk-surface);
  border-top-color: var(--cbk-accent);
  color: var(--cbk-text);
}
.woocommerce-message::before {
  color: var(--cbk-accent);
}

.woocommerce-error {
  background-color: var(--cbk-surface);
  border-top-color: #d92c2c;
  color: var(--cbk-text);
}

/* Scrollbar (webkit) for that techy feel */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--cbk-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--cbk-border);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cbk-accent);
}

/* ==========================================================================
   12. RESPONSIVE TWEAKS
   ========================================================================== */
@media screen and (max-width: 768px) {
  .site-title a {
    font-size: 1.4em;
  }
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    padding: 0.8em;
  }
}