/*
Theme Name: Shine N Go Custom
Theme URI: https://shinengo-detail.com
Author: Custom Build
Description: Modern, high-performance custom theme built for Elementor to match the SNG mockup.
Version: 2.1.0
Requires at least: 6.0
*/

/* ==========================================================================
   1. GLOBAL SITE TYPOGRAPHY & VARIABLES (Fixes White-on-White Globally)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;0,800;0,900;1,700;1,800;1,900&family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --brand-red: #f90300;
    --brand-red-glow: #ff1a1a;
    --brand-blue: #002277;
    --brand-electric-blue: #0055ff;
    --brand-silver: #e2e4e9;
    --brand-dark: #020203;
}


/* 1. Ensure the fixed header doesn't create unwanted spacing layers */
header#site-header {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
}

/* 2. Push the body down precisely so content starts right below the header */
body {
    padding-top: 105px !important; /* Adjust this number up or down if the gap is still slightly off */
}

/* 3. Strip any accidental default top margins on the first content block */
main > *:first-child,
.site-content > *:first-child,
#primary > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}








header#site-header + main,
header#site-header + div {
    margin-top: 0px !important;
    padding-top: 0px !important;
}
/* Forcefully strip the top padding from the layout wrapper */
main.mb-auto {
    padding-top: 0px !important;
    margin-top: 0px !important;
}



/* Reduce the 120px top gap on all custom pages */
main {
    padding-top: 0px !important; 
}
/* Ensure global body and standard text elements have high contrast */
html, body {
    background-color: #ffffff !important;
    color: #334155;
    font-family: 'Roboto', sans-serif !important;
}

body { padding-top: 100px !important; }
body.admin-bar { padding-top: 132px !important; }
@media (min-width: 768px) {
    body { padding-top: 120px !important; }
    body.admin-bar { padding-top: 152px !important; }
}

p {
    color: #334155;
    line-height: 1.75 !important;
    margin-bottom: 1.25rem !important;
}

/* ==========================================================================
   2. LOCK HEADER TO TOP
   ========================================================================== */
header#site-header {
    top: 0 !important;
}
body.admin-bar header#site-header {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    body.admin-bar header#site-header {
        top: 46px !important;
    }
}

/* ==========================================================================
   3. HEADER NAVIGATION STYLES & FLEXBOX FIX
   ========================================================================== */
@media (max-width: 1023px) {
    header#site-header nav.lg\:flex {
        display: none !important;
    }
}

header nav div,
header nav ul,
header nav .menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    position: relative !important;
    float: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
}

header nav li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
    float: none !important;
}

header#site-header nav li a,
header#site-header nav .nav-link,
header#site-header nav ul li a,
header#site-header nav div ul li a,
header#site-header nav li a span {
    color: #0f172a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-style: italic !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    text-shadow: none !important; 
}

header#site-header nav li a:hover, 
header#site-header nav li.current-menu-item a, 
header#site-header nav li.current_page_item a,
header#site-header nav li a:hover span {
    color: var(--brand-red) !important;
    text-shadow: none !important; 
}

/* Header Buttons */
.btn-sng-red {
    background: linear-gradient(to right, #8a0000, #d00000) !important;
    color: #ffffff !important;
    border: 1px solid #ff1a1a !important;
    box-shadow: 0 0 15px rgba(204, 0, 0, 0.4) !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-style: italic !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
}
.btn-sng-red:hover {
    background: linear-gradient(to right, #b30000, #ff1a1a) !important;
    box-shadow: 0 0 20px rgba(255, 26, 26, 0.6) !important;
    transform: scale(1.02) !important;
    color: #ffffff !important;
}

.btn-sng-blue {
    background: linear-gradient(to right, #001166, #0033cc) !important;
    color: #ffffff !important;
    border: 1px solid #0055ff !important;
    box-shadow: 0 0 15px rgba(0, 85, 255, 0.4) !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-style: italic !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
}
.btn-sng-blue:hover {
    background: linear-gradient(to right, #002299, #0055ff) !important;
    box-shadow: 0 0 20px rgba(0, 85, 255, 0.6) !important;
    transform: scale(1.02) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   4. FOOTER
   ========================================================================== */
footer, .site-footer, .woocommerce-page footer {
    background-color: #000000 !important;
    width: 100% !important; 
    position: relative !important; 
    z-index: 10 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: 4rem !important;
}
footer *, .site-footer * { color: #cbd5e1 !important; }
footer h1, footer h2, footer h3, footer h4, footer strong { color: #ffffff !important; }
footer a { color: var(--brand-electric-blue) !important; transition: color 0.2s ease !important; font-weight: bold !important; }
footer a:hover { color: var(--brand-red-glow) !important; text-shadow: 0 0 8px rgba(255, 26, 26, 0.5) !important; }

/* ==========================================================================
   5. HIDE HAMBURGER MENU & MENU BUTTON OVERRIDES
   ========================================================================== */
@media (min-width: 1024px) {
    #menu-toggle {
        display: none !important;
    }
}

header#site-header nav li.menu-btn-red a,
header#site-header nav li.menu-btn-red a span {
    background: linear-gradient(to right, #8a0000, #d00000) !important;
    color: #ffffff !important;
    border: 1px solid #ff1a1a !important;
    box-shadow: 0 0 15px rgba(204, 0, 0, 0.4) !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    text-shadow: none !important;
}
header#site-header nav li.menu-btn-red a:hover,
header#site-header nav li.menu-btn-red a:hover span {
    background: linear-gradient(to right, #b30000, #ff1a1a) !important;
    box-shadow: 0 0 20px rgba(255, 26, 26, 0.6) !important;
    transform: scale(1.02) !important;
    color: #ffffff !important;
}

header#site-header nav li.menu-btn-blue a,
header#site-header nav li.menu-btn-blue a span {
    background: linear-gradient(to right, #001166, #0033cc) !important;
    color: #ffffff !important;
    border: 1px solid #0055ff !important;
    box-shadow: 0 0 15px rgba(0, 85, 255, 0.4) !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    text-shadow: none !important;
}
header#site-header nav li.menu-btn-blue a:hover,
header#site-header nav li.menu-btn-blue a:hover span {
    background: linear-gradient(to right, #002299, #0055ff) !important;
    box-shadow: 0 0 20px rgba(0, 85, 255, 0.6) !important;
    transform: scale(1.02) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   6. SNG LANDING PAGE STYLES (Scoped strictly to .sng-wrap)
   ========================================================================== */
.sng-wrap * {
    box-sizing: border-box !important;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}

.sng-wrap {
    background-color: #0B0F19 !important;
    color: #f8fafc !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

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

/* Hero Section */
.sng-wrap .sng-hero {
    position: relative !important;
    padding: 100px 20px 90px !important;
    background: linear-gradient(180deg, rgba(11, 15, 25, 0.8) 0%, rgba(11, 15, 25, 0.95) 100%), 
                url('https://chatgpt.com/imagestorage/ChatGPT_Image_Aug_19_2026_09_58_51_PM.png') center/cover no-repeat !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
}

.sng-wrap .sng-hero-flex {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 50px !important;
}

.sng-wrap .sng-hero-content {
    flex: 1 !important;
    text-align: left !important;
    max-width: 620px !important;
}

.sng-wrap .sng-hero-image-wrap {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.sng-wrap .sng-hero-image-wrap img {
    width: 100% !important;
    max-width: 650px !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 30px rgba(249, 3, 0, 0.25)) !important;
    transition: transform 0.4s ease !important;
}

.sng-wrap .sng-hero-image-wrap img:hover {
    transform: scale(1.02) translateY(-4px) !important;
}

.sng-wrap .sng-badge {
    display: inline-block !important;
    background: rgba(249, 3, 0, 0.12) !important;
    border: 1px solid rgba(249, 3, 0, 0.3) !important;
    color: #f90300 !important;
    padding: 6px 16px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 24px !important;
}

.sng-wrap .sng-hero h1 {
    font-size: 48px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #ffffff !important;
    margin: 0 0 20px !important;
}

.sng-wrap .sng-hero-gradient {
    background: linear-gradient(135deg, #f90300 0%, #FFFFFF 50%, #1D4ED8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.sng-wrap .sng-hero p {
    font-size: 18px !important;
    color: #94a3b8 !important;
    margin: 0 0 36px !important;
    line-height: 1.6 !important;
}

/* Landing Page Buttons */
.sng-wrap .sng-btn-group {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.sng-wrap .sng-btn-primary {
    background: #f90300 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 16px 32px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 10px 25px -5px rgba(249, 3, 0, 0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.sng-wrap .sng-btn-primary:hover {
    background: #d00000 !important;
    transform: translateY(-2px) !important;
}

.sng-wrap .sng-btn-secondary {
    background: rgba(17, 24, 39, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
    font-weight: 600 !important;
    padding: 16px 32px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.sng-wrap .sng-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Sections & Cards */
.sng-wrap .sng-section {
    padding: 80px 0 !important;
}

.sng-wrap .sng-section-header {
    text-align: center !important;
    margin-bottom: 50px !important;
}

.sng-wrap .sng-section-header h2 {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 10px !important;
}

.sng-wrap .sng-section-header p {
    color: #94a3b8 !important;
    font-size: 16px !important;
    margin: 0 !important;
}

.sng-wrap .sng-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 24px !important;
}

.sng-wrap .sng-card {
    background: rgba(17, 24, 39, 0.85) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.sng-wrap .sng-card:hover {
    border-color: rgba(249, 3, 0, 0.4) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px -10px rgba(249, 3, 0, 0.25) !important;
}

.sng-wrap .sng-card-img-wrap {
    width: 100% !important;
    height: 180px !important;
    overflow: hidden !important;
    position: relative !important;
}

.sng-wrap .sng-card-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}

.sng-wrap .sng-card:hover .sng-card-img-wrap img {
    transform: scale(1.05) !important;
}

.sng-wrap .sng-card-body {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    justify-content: space-between !important;
}

.sng-wrap .sng-card h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 10px !important;
}

.sng-wrap .sng-card p {
    font-size: 14px !important;
    color: #94a3b8 !important;
    line-height: 1.6 !important;
    margin: 0 0 20px !important;
}

.sng-wrap .sng-card-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 16px !important;
}

.sng-wrap .sng-card-list li {
    font-size: 13px !important;
    color: #cbd5e1 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Icons */
.sng-wrap .sng-icon-box {
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
}

.sng-wrap .sng-icon-box svg {
    width: 26px !important;
    height: 26px !important;
}

.sng-wrap .sng-icon-red {
    background: rgba(249, 3, 0, 0.12) !important;
    color: #f90300 !important;
    border: 1px solid rgba(249, 3, 0, 0.2) !important;
}

.sng-wrap .sng-icon-blue {
    background: rgba(29, 78, 216, 0.12) !important;
    color: #1D4ED8 !important;
    border: 1px solid rgba(29, 78, 216, 0.2) !important;
}

/* Testimonials */
.sng-wrap .sng-review-card {
    background: rgba(17, 24, 39, 0.75) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 16px !important;
    padding: 28px !important;
}

.sng-wrap .sng-stars {
    color: #fbbf24 !important;
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 12px !important;
}

.sng-wrap .sng-stars svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}

.sng-services-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    box-sizing: border-box !important;
}
.sng-value-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    box-sizing: border-box !important;
}
@media (max-width: 1024px) {
    .sng-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 768px) {
    .sng-services-grid, .sng-value-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Responsive Media Queries */
@media (max-width: 992px) {
    .sng-wrap .sng-hero-flex {
        flex-direction: column !important;
        text-align: center !important;
    }
    .sng-wrap .sng-hero-content {
        max-width: 100% !important;
        text-align: center !important;
    }
    .sng-wrap .sng-btn-group {
        justify-content: center !important;
    }
    .sng-wrap .sng-hero-image-wrap {
        justify-content: center !important;
        margin-top: 20px !important;
    }
}

@media (max-width: 768px) {
    .sng-wrap .sng-hero h1 { font-size: 32px !important; }
    .sng-wrap .sng-hero p { font-size: 16px !important; }
    .sng-wrap .sng-section-header h2 { font-size: 28px !important; }
}

/* ==========================================
   7. WOOCOMMERCE SHOP & CATALOG STYLING
   ========================================== */
.sng-shop-hero {
    position: relative;
    padding: 100px 20px 90px;
    text-align: center;
    background: linear-gradient(180deg, rgba(11, 15, 25, 0.75) 0%, rgba(11, 15, 25, 0.95) 100%), url('https://atyourservicedomains.com/shinengo-detail/wp-content/uploads/2026/08/redbluegradiant.png') center/cover no-repeat !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sng-shop-badge {
    display: inline-block;
    background: rgba(249, 3, 0, 0.12);
    border: 1px solid rgba(249, 3, 0, 0.3);
    color: #f90300;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.sng-shop-hero h1 {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 auto 20px;
    max-width: 900px;
}

.sng-shop-gradient-text {
    background: linear-gradient(135deg, #f90300 0%, #FFFFFF 50%, #1D4ED8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sng-shop-hero p {
    font-size: 18px;
    color: #cbd5e1;
    max-width: 680px;
    margin: 0 auto 36px;
    line-height: 1.6;
}

/* Hide default WooCommerce archive header */
.woocommerce-products-header,
#store-catalog .page-title {
  display: none !important;
}

/* Catalog Top Bar (Result count & Ordering dropdown) */
#store-catalog .woocommerce-result-count {
  color: #94a3b8 !important;
  font-size: 14px !important;
  margin: 0 0 20px !important;
  float: left !important;
}

#store-catalog .woocommerce-ordering {
  float: right !important;
  margin: 0 0 25px !important;
}

.woocommerce-result-count,
.woocommerce-ordering select {
  color: #cbd5e1 !important;
}

.woocommerce-ordering select {
  background-color: #111827 !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: #f8fafc !important;
  font-size: 14px !important;
}

.woocommerce-ordering select option {
  background-color: #111827 !important;
  color: #f8fafc !important;
}

/* Strict 3-Column WooCommerce Product Grid */
#store-catalog {
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 60px 20px !important;
  box-sizing: border-box !important;
}

#store-catalog ul.products {
  clear: both !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  float: none !important;
}

#store-catalog ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(11, 15, 25, 0.95) 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  box-sizing: border-box !important;
}

#store-catalog ul.products li.product img {
  border-radius: 12px !important;
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  margin: 0 0 16px !important;
}

#store-catalog ul.products li.product h2.woocommerce-loop-product__title {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

#store-catalog ul.products li.product span.price {
  color: #f90300 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  margin-bottom: 20px !important;
  display: block !important;
}

#store-catalog ul.products li.product span.price del {
  color: #64748b !important;
  font-weight: 400 !important;
  margin-right: 6px !important;
}

#store-catalog ul.products li.product span.price ins {
  text-decoration: none !important;
}

#store-catalog ul.products li.product a.button {
  background-color: #f90300 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 20px !important;
  border-radius: 10px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: block !important;
  margin-top: auto !important;
  box-shadow: 0 8px 20px -4px rgba(249, 3, 0, 0.4) !important;
  transition: opacity 0.2s ease !important;
}

#store-catalog ul.products li.product a.button:hover {
  opacity: 0.9 !important;
}

/* Sale Badge Styling */
#store-catalog span.onsale {
  background-color: #1D4ED8 !important;
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 50px !important;
  padding: 6px 14px !important;
  min-height: auto !important;
  min-width: auto !important;
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.5) !important;
}

/* Responsive fallback for mobile devices */
@media screen and (max-width: 768px) {
  #store-catalog ul.products {
    grid-template-columns: 1fr !important;
  }
  .sng-shop-hero h1 { font-size: 32px !important; }
  .sng-shop-hero p { font-size: 16px !important; }
}

/* ==========================================
   Custom Dark Cart Page Styling
   ========================================== */
.woocommerce-cart .sng-cart-wrap,
.woocommerce-cart .site-content,
.woocommerce-cart .content-area {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 60px 20px 90px !important;
  box-sizing: border-box !important;
  background-color: #0B0F19 !important;
  color: #f8fafc !important;
}

/* Cart Table Styling */
.woocommerce-cart table.shop_table {
  background: rgba(17, 24, 39, 0.85) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  color: #f8fafc !important;
}

.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
  border-color: rgba(255, 255, 255, 0.08) !important;
  padding: 16px !important;
  color: #f8fafc !important;
}

.woocommerce-cart table.shop_table a {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.woocommerce-cart table.shop_table a:hover {
  color: #f90300 !important;
}

/* Cart Totals Box */
.woocommerce-cart .cart-collaterals .cart_totals {
  background: rgba(17, 24, 39, 0.85) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  color: #f8fafc !important;
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
  color: #ffffff !important;
  font-size: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

/* Proceed to Checkout Button */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background-color: #f90300 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
  text-align: center !important;
  box-shadow: 0 8px 20px -4px rgba(249, 3, 0, 0.4) !important;
  transition: opacity 0.2s ease !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  opacity: 0.9 !important;
  background-color: #d00000 !important;
}

/* ==========================================
   WooCommerce Cart Dark Theme Overrides
   ========================================== */
.woocommerce-cart .sng-cart-container table.shop_table {
  background: rgba(17, 24, 39, 0.85) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  color: #f8fafc !important;
  width: 100% !important;
}

.woocommerce-cart .sng-cart-container table.shop_table th {
  background: rgba(11, 15, 25, 0.95) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 16px !important;
  font-weight: 700 !important;
}

.woocommerce-cart .sng-cart-container table.shop_table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 16px !important;
  color: #cbd5e1 !important;
}

.woocommerce-cart .sng-cart-container table.shop_table a {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.woocommerce-cart .sng-cart-container table.shop_table a:hover {
  color: #f90300 !important;
}

/* Cart Quantities & Inputs */
.woocommerce-cart .sng-cart-container input.input-text.qty {
  background-color: #111827 !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: #f8fafc !important;
  border-radius: 8px !important;
  padding: 8px !important;
}

/* Cart Totals Box */
.woocommerce-cart .sng-cart-container .cart-collaterals .cart_totals {
  background: rgba(17, 24, 39, 0.85) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  color: #f8fafc !important;
  margin-top: 30px !important;
}

.woocommerce-cart .sng-cart-container .cart-collaterals .cart_totals h2 {
  color: #ffffff !important;
  font-size: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

.woocommerce-cart .sng-cart-container .cart-collaterals .cart_totals table.shop_table th,
.woocommerce-cart .sng-cart-container .cart-collaterals .cart_totals table.shop_table td {
  background: transparent !important;
  color: #f8fafc !important;
}

/* Proceed to Checkout Button */
.woocommerce-cart .sng-cart-container .wc-proceed-to-checkout a.checkout-button {
  background-color: #f90300 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
  text-align: center !important;
  display: block !important;
  box-shadow: 0 8px 20px -4px rgba(249, 3, 0, 0.4) !important;
  text-decoration: none !important;
}

.woocommerce-cart .sng-cart-container .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: #d00000 !important;
}


/* ==========================================
   Header Cart Button Styling (Direct SVG)
   ========================================== */
header#site-header nav li.menu-btn-cart,
header#site-header nav li.menu-btn-cart a,
header#site-header nav li.menu-btn-cart.current-menu-item a,
header#site-header nav li.menu-btn-cart.current_page_item a {
    background: #ffffff !important;
    color: #0f172a !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    padding: 10px 14px !important; 
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    text-shadow: none !important;
}

/* Force-kill any red borders or theme underline lines */
header#site-header nav li.menu-btn-cart *,
header#site-header nav li.menu-btn-cart a::after,
header#site-header nav li.menu-btn-cart a::before {
    border: none !important;
}

header#site-header nav li.menu-btn-cart a:hover {
    background: #f1f5f9 !important;
    transform: translateY(-1px) !important;
}

/* Accessibility helper */
.sng-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Live Item Count Badge Styling */
header#site-header nav li.menu-btn-cart .cart-count {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background-color: #f90300 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 1px 6px !important;
    border-radius: 50px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    display: inline-block !important;
    z-index: 10 !important;
}

/* Ensure visibility on mobile */
@media screen and (max-width: 1023px) {
  header#site-header nav li.menu-btn-cart {
    display: inline-flex !important;
  }
}

/* ==========================================
   Hide Cart Button When Empty
   ========================================== */
header#site-header nav li.menu-btn-cart.empty-cart {
    display: none !important;
}



/* ==========================================
   Polished Dark Checkout Form & Summary Fix
   ========================================== */

/* 1. Fix White-on-White Quantity / Product Details in Order Summary */
.woocommerce-checkout .sng-checkout-container table.shop_table td,
.woocommerce-checkout .sng-checkout-container table.shop_table td strong,
.woocommerce-checkout .sng-checkout-container table.shop_table .product-name,
.woocommerce-checkout .sng-checkout-container table.shop_table .product-total {
    color: #f8fafc !important;
}

.woocommerce-checkout .sng-checkout-container table.shop_table .product-quantity {
    color: #94a3b8 !important; /* Soft slate color for quantities */
    font-weight: 600 !important;
}

/* 2. Modern Form Field Styling */
.woocommerce-checkout .sng-checkout-container .form-row {
    margin-bottom: 20px !important;
}

.woocommerce-checkout .sng-checkout-container label {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Required field red asterisk styling */
.woocommerce-checkout .sng-checkout-container .required {
    color: #f90300 !important;
    text-decoration: none !important;
}

/* Sleek inputs with smooth focus states */
.woocommerce-checkout .sng-checkout-container .input-text,
.woocommerce-checkout .sng-checkout-container select,
.woocommerce-checkout .sng-checkout-container textarea {
    background-color: #0b0f19 !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.25s ease !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.woocommerce-checkout .sng-checkout-container .input-text:focus,
.woocommerce-checkout .sng-checkout-container select:focus,
.woocommerce-checkout .sng-checkout-container textarea:focus {
    border-color: #f90300 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(249, 3, 0, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.woocommerce-checkout .sng-checkout-container select option {
    background-color: #111827 !important;
    color: #f8fafc !important;
    padding: 10px !important;
}

/* Select2 Country / State Dropdown Fixes */
.woocommerce-checkout .sng-checkout-container .select2-container--default .select2-selection--single {
    background-color: #0b0f19 !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 10px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 4px !important;
}

.woocommerce-checkout .sng-checkout-container .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    font-size: 15px !important;
}

.woocommerce-checkout .sng-checkout-container .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px !important;
    right: 10px !important;
}

/* 3. Section Headings & Containers Styling */
.woocommerce-checkout .sng-checkout-container h3,
.woocommerce-checkout .sng-checkout-container #order_review_heading {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 12px !important;
    margin-bottom: 24px !important;
}

.woocommerce-checkout .sng-checkout-container table.shop_table {
    background: rgba(17, 24, 39, 0.85) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    width: 100% !important;
    margin-bottom: 30px !important;
}

.woocommerce-checkout .sng-checkout-container table.shop_table th {
    background: rgba(11, 15, 25, 0.95) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px !important;
}

.woocommerce-checkout .sng-checkout-container table.shop_table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 16px !important;
}

.woocommerce-checkout .sng-checkout-container table.shop_table tfoot th,
.woocommerce-checkout .sng-checkout-container table.shop_table tfoot td {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* 4. Payment Box & Place Order Button */
.woocommerce-checkout .sng-checkout-container #payment {
    background: rgba(17, 24, 39, 0.85) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 16px !important;
    padding: 24px !important;
}

.woocommerce-checkout .sng-checkout-container #payment ul.payment_methods {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 20px !important;
}

.woocommerce-checkout .sng-checkout-container #payment div.payment_box {
    background-color: #111827 !important;
    color: #94a3b8 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.woocommerce-checkout .sng-checkout-container #place_order {
    background: linear-gradient(to right, #8a0000, #d00000) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 10px !important;
    padding: 18px 24px !important;
    width: 100% !important;
    text-align: center !important;
    box-shadow: 0 10px 25px rgba(204, 0, 0, 0.4) !important;
    transition: all 0.3s ease !important;
    border: 1px solid #ff1a1a !important;
    float: none !important;
}

.woocommerce-checkout .sng-checkout-container #place_order:hover {
    background: linear-gradient(to right, #b30000, #ff1a1a) !important;
    box-shadow: 0 15px 30px rgba(255, 26, 26, 0.6) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================
   Ultimate Quantity Text Color Fix (Checkout)
   ========================================== */
.woocommerce-checkout .sng-checkout-container table.shop_table td strong.product-quantity,
.woocommerce-checkout .sng-checkout-container table.shop_table .product-name strong,
.woocommerce-checkout .sng-checkout-container table.shop_table td.product-name,
.woocommerce-checkout .sng-checkout-container table.shop_table td.product-total {
    color: #f8fafc !important;
}

.woocommerce-checkout .sng-checkout-container table.shop_table strong.product-quantity {
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

/* ==========================================
   Checkout Block Order Summary Quantity Badge Fix
   ========================================== */
.woocommerce-checkout .sng-checkout-container .wc-block-components-order-summary-item__quantity {
    background-color: #0b0f19 !important;
    color: #ffffff !important;           
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.woocommerce-checkout .sng-checkout-container .wc-block-components-order-summary-item__quantity span[aria-hidden="true"] {
    color: #ffffff !important;
}

/* ==========================================
   Mobile Product Grid Fix (1 Column on Small Screens)
   ========================================== */
@media screen and (max-width: 768px) {
  #store-catalog .sng-custom-product-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ==========================================
   Mobile Header Cart Button Visibility Fix
   ========================================== */
@media screen and (max-width: 1023px) {
  header#site-header nav li.menu-btn-cart {
    display: inline-flex !important;
  }
  
  header#site-header nav li.menu-btn-cart a {
    padding: 12px 16px !important;
    margin: 0 5px !important;
  }
}

/* ==========================================
   Forced Pixel-Shift Mobile Header Cart Alignment
   ========================================== */
@media screen and (max-width: 1023px) {
  .sng-mobile-header-cart {
    display: inline-flex !important;
    position: absolute !important;
    right: 70px !important;
    top: 50% !important;
    transform: translateY(calc(-50% + 20px)) !important; 
    z-index: 99999 !important;
  }

  .sng-mobile-header-cart a {
    background: #ffffff !important;
    color: #0f172a !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  .sng-mobile-header-cart .cart-count {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background-color: #f90300 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 1px 6px !important;
    border-radius: 50px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    display: inline-block !important;
    z-index: 10 !important;
  }

  .sng-mobile-header-cart.empty-cart {
    display: none !important;
  }

  .mobile-menu li.menu-btn-cart,
  .ast-mobile-popup-drawer li.menu-btn-cart,
  .mobile-navigation li.menu-btn-cart,
  header#site-header .menu-item:has(a[href*="cart"]) {
    display: none !important;
  }
}

/* ==========================================
   Dark Theme Gallery Styling
   ========================================== */
.woocommerce-page .sng-gallery-container,
.page-template-page-gallery .sng-gallery-container {
  color: #f8fafc !important;
}

.page-template-page-gallery .gallery,
.page-template-page-gallery .wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.page-template-page-gallery .gallery-item,
.page-template-page-gallery .wp-block-image {
  background: rgba(17, 24, 39, 0.85) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  margin: 0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.page-template-page-gallery .gallery-item:hover,
.page-template-page-gallery .wp-block-image:hover {
  border-color: rgba(249, 3, 0, 0.4) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.page-template-page-gallery .gallery-item img,
.page-template-page-gallery .wp-block-image img {
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: transform 0.4s ease !important;
}

.page-template-page-gallery .gallery-item:hover img,
.page-template-page-gallery .wp-block-image:hover img {
  transform: scale(1.03) !important;
}

.page-template-page-gallery .gallery-caption,
.page-template-page-gallery figcaption {
  padding: 16px !important;
  color: #cbd5e1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: rgba(11, 15, 25, 0.95) !important;
  margin: 0 !important;
  text-align: center !important;
}

@media screen and (max-width: 768px) {
  .page-template-page-gallery .gallery,
  .page-template-page-gallery .wp-block-gallery {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   8. & 9. WOOCOMMERCE SINGLE PRODUCT DARK GLASS STYLING
   ========================================================================== */
body.single-product .woocommerce,
body.single-product #content,
body.single-product .site-content {
    background-color: #0B0F19 !important;
    color: #f8fafc !important;
}

.sng-single-product-wrapper {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 32px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

.sng-single-product-container .product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 768px) {
    .sng-single-product-container .product {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.sng-single-product-container h1.product_title,
.sng-single-product-container .woocommerce-tabs h2,
.sng-single-product-container section.products h2 {
    color: #ffffff !important;
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    margin-bottom: 1rem !important;
}

.sng-single-product-container .price,
.sng-single-product-container .price amount,
.sng-single-product-container ins {
    color: var(--brand-red) !important;
    font-size: 1.875rem !important;
    font-weight: 800 !important;
    margin-bottom: 1.5rem !important;
    text-decoration: none !important;
}

.sng-single-product-container p, 
.sng-single-product-container .woocommerce-product-details__short-description,
.sng-single-product-container .woocommerce-Tabs-panel {
    color: #cbd5e1 !important;
    line-height: 1.75 !important;
    margin-bottom: 1.5rem !important;
}

.sng-single-product-container button.single_add_to_cart_button,
.sng-single-product-container .button,
.sng-single-product-container input.button {
    background-color: var(--brand-red) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 24px !important;
    border: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.sng-single-product-container button.single_add_to_cart_button:hover,
.sng-single-product-container .button:hover {
    background-color: #d00000 !important;
    transform: scale(1.02) !important;
}

.sng-single-product-container input.input-text.qty {
    background-color: #0B0F19 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    text-align: center;
}

.sng-single-product-container .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex;
    gap: 15px;
    padding-left: 0;
    list-style: none;
    margin-top: 40px;
}

.sng-single-product-container .woocommerce-tabs ul.tabs li a {
    color: #94a3b8 !important;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.875rem;
}

.sng-single-product-container .woocommerce-tabs ul.tabs li.active a {
    color: var(--brand-red) !important;
    border-bottom: 2px solid var(--brand-red);
    padding-bottom: 4px;
}

/* ==========================================================================
   FORCE PURE BRAND RED ON SINGLE PRODUCT PAGES
   ========================================================================== */
.sng-single-product-container .price,
.sng-single-product-container .price amount,
.sng-single-product-container ins,
.sng-single-product-container .woocommerce-tabs ul.tabs li.active a {
    color: #f90300 !important;
    border-bottom-color: #f90300 !important;
}

.sng-single-product-container button.single_add_to_cart_button,
.sng-single-product-container .button,
.sng-single-product-container input.button {
    background-color: #f90300 !important;
    background: #f90300 !important;
    color: #ffffff !important;
    border-color: #f90300 !important;
}

.sng-single-product-container button.single_add_to_cart_button:hover,
.sng-single-product-container .button:hover,
.sng-single-product-container input.button:hover {
    background-color: #d00000 !important;
    background: #d00000 !important;
}

/* ==========================================================================
   FORCE OVERRIDE WOOCOMMERCE SINGLE PRODUCT PINK/MAGENTA BUTTONS
   ========================================================================== */
body.single-product .woocommerce div.product form.cart button.button.single_add_to_cart_button,
body.single-product .woocommerce div.product form.cart .button,
body.single-product .woocommerce #respond input#submit.alt, 
body.single-product .woocommerce a.button.alt, 
body.single-product .woocommerce button.button.alt, 
body.single-product .woocommerce input.button.alt {
    background-color: #f90300 !important;
    background: #f90300 !important;
    color: #ffffff !important;
    border: 1px solid #f90300 !important;
    box-shadow: 0 8px 20px -4px rgba(249, 3, 0, 0.4) !important;
}

body.single-product .woocommerce div.product form.cart button.button.single_add_to_cart_button:hover,
body.single-product .woocommerce div.product form.cart .button:hover,
body.single-product .woocommerce #respond input#submit.alt:hover, 
body.single-product .woocommerce a.button.alt:hover, 
body.single-product .woocommerce button.button.alt:hover, 
body.single-product .woocommerce input.button.alt:hover {
    background-color: #d00000 !important;
    background: #d00000 !important;
    border-color: #d00000 !important;
}

/* ==========================================================================
   FORCE DARK BACKGROUND ON ALL WOOCOMMERCE SHOP & PRODUCT PAGES
   ========================================================================== */
body.woocommerce-page,
body.post-type-archive-product,
body.single-product,
body.woocommerce-shop,
.woocommerce-page #content,
.woocommerce-page .site-content,
.woocommerce-page main {
    background-color: #0B0F19 !important;
    background: #0B0F19 !important;
    color: #f8fafc !important;
}

/* Ensure inner wrappers don't revert to white */
.woocommerce-page .content-area,
.woocommerce-page site-main,
.woocommerce-products-header {
    background-color: #0B0F19 !important;
}

/* ==========================================================================
   RELATED PRODUCTS GRID & BUTTON STYLING ON SINGLE PRODUCT PAGES
   ========================================================================== */
.sng-single-product-container .related.products {
    margin-top: 60px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 40px !important;
}

.sng-single-product-container .related.products > h2 {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    margin-bottom: 24px !important;
}

/* Transform related products into clean dark glass cards */
.sng-single-product-container .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
}

@media (max-width: 768px) {
    .sng-single-product-container .related.products ul.products {
        grid-template-columns: 1fr !important;
    }
}

.sng-single-product-container .related.products ul.products li.product {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(11, 15, 25, 0.95) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
    box-sizing: border-box !important;
}

/* Fix Related Product Images */
.sng-single-product-container .related.products ul.products li.product img {
    border-radius: 12px !important;
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    margin-bottom: 16px !important;
}

/* Related Product Titles */
.sng-single-product-container .related.products ul.products li.product h2,
.sng-single-product-container .related.products ul.products li.product .woocommerce-loop-product__title {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 10px !important;
}

/* Related Product Prices */
.sng-single-product-container .related.products ul.products li.product span.price {
    color: #f90300 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    margin-bottom: 16px !important;
    display: block !important;
}

/* Related Product Add-to-Cart Buttons */
.sng-single-product-container .related.products ul.products li.product a.button {
    background-color: #f90300 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    text-align: center !important;
    text-decoration: none !important;
    display: block !important;
    margin-top: auto !important;
    box-shadow: 0 6px 16px -4px rgba(249, 3, 0, 0.4) !important;
    transition: opacity 0.2s ease !important;
}

.sng-single-product-container .related.products ul.products li.product a.button:hover {
    background-color: #d00000 !important;
    opacity: 0.9 !important;
}

/* ==========================================================================
   WIDER SINGLE PRODUCT LAYOUT & FULL-WIDTH SECTIONS FIX
   ========================================================================== */
.sng-single-product-wrapper {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix main product two-column split */
.sng-single-product-container .product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 50px !important;
    align-items: start !important;
}

@media (max-width: 900px) {
    .sng-single-product-container .product {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

/* Force tabs and related products to break out to full width below the main grid */
.sng-single-product-container .woocommerce-tabs,
.sng-single-product-container .related.products,
.sng-single-product-container .upsells.products {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 50px !important;
}

/* ==========================================================================
   8. WOOCOMMERCE SINGLE PRODUCT DARK GLASS STYLING
   ========================================================================== */

/* Outer Wrappers */
body.single-product .woocommerce,
body.single-product #content,
body.single-product .site-content {
    background-color: #0B0F19 !important;
    color: #f8fafc !important;
}

.sng-single-product-wrapper {
    background-color: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 
   CRITICAL FIX: WooCommerce injects hidden 'clearfix' pseudo-elements. 
   These break CSS Grid by acting as the first column. This removes them.
*/
.sng-single-product-container .product::before,
.sng-single-product-container .product::after {
    display: none !important;
}

/* Main Layout Grid */
.sng-single-product-container .product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 50px !important;
    align-items: start !important;
}

@media (max-width: 900px) {
    .sng-single-product-container .product {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

/* Force tabs and related products to break out to full width */
.sng-single-product-container .woocommerce-tabs,
.sng-single-product-container .related.products,
.sng-single-product-container .upsells.products {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 50px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 40px !important;
}

/* Typography & Colors */
.sng-single-product-container h1.product_title {
    color: #ffffff !important;
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    margin-bottom: 1rem !important;
}

.sng-single-product-container h2, 
.sng-single-product-container h3 {
    color: #ffffff !important;
}

.sng-single-product-container .price,
.sng-single-product-container .price ins,
.sng-single-product-container .woocommerce-Price-amount {
    color: #f90300 !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}

.sng-single-product-container .price del {
    color: #64748b !important;
    font-weight: 400 !important;
}

.sng-single-product-container p, 
.sng-single-product-container .woocommerce-product-details__short-description,
.sng-single-product-container .woocommerce-Tabs-panel {
    color: #cbd5e1 !important;
    line-height: 1.75 !important;
}

/* Primary Add to Cart Button */
.sng-single-product-container form.cart button.single_add_to_cart_button,
body.single-product .woocommerce div.product form.cart button.button,
body.single-product .woocommerce a.button.alt, 
body.single-product .woocommerce button.button.alt {
    background-color: #f90300 !important;
    background: #f90300 !important;
    color: #ffffff !important;
    border: 1px solid #f90300 !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 14px 28px !important;
    box-shadow: 0 8px 20px -4px rgba(249, 3, 0, 0.4) !important;
    transition: all 0.2s ease !important;
}

.sng-single-product-container form.cart button.single_add_to_cart_button:hover,
body.single-product .woocommerce div.product form.cart button.button:hover,
body.single-product .woocommerce button.button.alt:hover {
    background-color: #d00000 !important;
    background: #d00000 !important;
    border-color: #d00000 !important;
    transform: translateY(-2px) !important;
}

/* Input Fields */
.sng-single-product-container form.cart .quantity input.qty {
    background-color: #0B0F19 !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px !important;
    font-weight: 700 !important;
    height: 48px !important;
    width: 70px !important;
    text-align: center !important;
}

/* Tabs */
.sng-single-product-container .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex;
    gap: 15px;
    padding-left: 0;
    list-style: none;
    margin-top: 40px;
}

.sng-single-product-container .woocommerce-tabs ul.tabs li a {
    color: #94a3b8 !important;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

.sng-single-product-container .woocommerce-tabs ul.tabs li.active a {
    color: #f90300 !important;
    border-bottom: 2px solid #f90300 !important;
    padding-bottom: 4px;
}

/* ==========================================================================
   9. RELATED PRODUCTS GRID
   ========================================================================== */
/* Kill WooCommerce invisible clearfixes that break the grid */
.sng-single-product-container .related.products ul.products::before,
.sng-single-product-container .related.products ul.products::after {
    display: none !important;
    content: none !important;
}

.sng-single-product-container .related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sng-single-product-container .related.products ul.products li.product {
    width: 100% !important; /* Overrides WC Default 22% */
    float: none !important; /* Overrides WC Float Layout */
    margin: 0 !important;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(11, 15, 25, 0.95) 100%) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.sng-single-product-container .related.products ul.products li.product img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
}

.sng-single-product-container .related.products ul.products li.product a.button {
    background-color: #f90300 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    text-align: center !important;
    text-decoration: none !important;
    display: block !important;
    margin-top: auto !important;
    box-shadow: 0 8px 20px -4px rgba(249, 3, 0, 0.4) !important;
}

.sng-single-product-container .related.products ul.products li.product a.button:hover {
    background-color: #d00000 !important;
}

@media (max-width: 900px) {
    .sng-single-product-container .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .sng-single-product-container .related.products ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   PRODUCT IMAGE FIT FIX (Catalog & Related Products)
   ========================================================================== */
.sng-custom-product-grid .sng-product-card img,
#store-catalog ul.products li.product img,
.sng-single-product-container .related.products ul.products li.product img,
.sng-single-product-container .sng-single-image img {
    height: 280px !important;
    object-fit: contain !important; 
    background-color: transparent !important;
    padding: 10px !important;
}

/* Add a clean, subtle backdrop behind the bottles */
.sng-product-card > a > div,
.sng-single-product-container .sng-single-image {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   RESTORE BULLET POINTS IN PRODUCT DESCRIPTIONS
   ========================================================================== */
.sng-single-product-container .woocommerce-product-details__short-description ul,
.sng-single-product-container .woocommerce-Tabs-panel ul,
.sng-single-summary ul {
    list-style-type: disc !important;
    padding-left: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.sng-single-product-container .woocommerce-product-details__short-description ol,
.sng-single-product-container .woocommerce-Tabs-panel ol,
.sng-single-summary ol {
    list-style-type: decimal !important;
    padding-left: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.sng-single-product-container .woocommerce-product-details__short-description li,
.sng-single-product-container .woocommerce-Tabs-panel li,
.sng-single-summary li {
    color: #cbd5e1 !important;
    line-height: 1.75 !important;
    margin-bottom: 0.5rem !important;
    display: list-item !important;
}

/* Fix white text in WooCommerce product inputs */
.single-product form.cart input[type="text"],
.single-product form.cart input[type="number"],
.single-product form.cart input[type="email"],
.single-product form.cart select,
.single-product form.cart textarea {
    color: #333333 !important; 
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important;
}

/* Specific fix if using a Name Your Price or Gift Card plugin */
.single-product form.cart .amount,
.single-product form.cart .ywgc-amount,
.single-product form.cart .gift-card-amount {
    color: #333333 !important;
}

/* Contact Form 7 Dark Theme Styling */
.wpcf7 form label {
    color: #ffffff;
    font-weight: 600;
    width: 100%;
    margin-bottom: 15px;
    display: block;
}
.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="tel"],
.wpcf7 form select,
.wpcf7 form textarea {
    width: 100%;
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #cccccc;
    border-radius: 8px;
    padding: 10px 15px;
    margin-top: 5px;
}
.wpcf7 form input[type="submit"] {
    background-color: #f90300;
    color: #ffffff;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 12px 30px;
    cursor: pointer;
    transition: background 0.3s ease;
}
.wpcf7 form input[type="submit"]:hover {
    background-color: #d10200;
}





/* Fix WooCommerce Checkmark Alignment */
.wc-block-components-checkbox {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.wc-block-components-checkbox__input {
    position: relative !important;
    margin-right: 10px !important;
    appearance: checkbox !important; /* Forces native browser box sizing if theme overrode it */
}

.wc-block-components-checkbox__mark {
    position: absolute !important;
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 12px !important;
    height: 12px !important;
    pointer-events: none !important;
}