/*
 Theme Name:   TC Gear Child
 Description:  Child theme for Tri County Gear built on Hello Elementor
 Author:       Viking Sign Solutions
 Version:      1.0.0
 Template:     hello-elementor
 Text Domain:  tc-gear
*/

/* Root palette */
:root{
  --tcg-maroon:#800000;
  --tcg-black:#000000;
  --tcg-white:#ffffff;
  --tcg-text:#333333;
  --tcg-gold:#FFD700; /* optional accent */
}

/* Header styles */
.tcg-header{position:sticky; top:0; z-index:9999; background:var(--tcg-black); color:var(--tcg-white); font-family:Roboto,system-ui,-apple-system,Segoe UI,Arial,sans-serif; box-shadow:0 2px 8px rgba(0,0,0,.15)}
.tcg-bar{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 22px; max-width:1200px; margin:0 auto}
.tcg-logo a{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none}
.tcg-logo img{height:60px; width:auto; display:block}
.tcg-logo-mark{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:8px; background:var(--tcg-maroon); font:700 18px/1 Oswald, sans-serif; letter-spacing:.5px; color:#fff}
.tcg-logo-type{font:700 20px/1 Oswald, sans-serif; color:#fff}

.tcg-nav .menu{display:flex; gap:18px; list-style:none; margin:0; padding:0}
.tcg-nav a{color:var(--tcg-white); text-decoration:none; font-weight:500}
.tcg-nav a:hover{color:var(--tcg-gold)}

.tcg-utils{display:flex; align-items:center; gap:14px}
.tcg-icon{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:999px; color:#e9e9e9}
.tcg-icon:hover{background:rgba(255,255,255,.08); color:#fff}
.tcg-cart{position:relative}
.tcg-badge{position:absolute; top:-4px; right:-6px; background:var(--tcg-maroon); color:#fff; font:700 11px/1 Roboto,sans-serif; padding:3px 6px; border-radius:999px; min-width:18px; text-align:center}

.tcg-burger{display:none; background:none; border:0; cursor:pointer; width:38px; height:38px; border-radius:8px}
.tcg-burger span{display:block; width:22px; height:2px; background:#fff; margin:4px auto; transition:.18s}

/* Drawer */
.tcg-drawer{position:fixed; inset:0; display:none; background:rgba(0,0,0,.35)}
.tcg-drawer[aria-hidden="false"]{display:block}
.tcg-drawer-panel{position:absolute; right:0; top:0; bottom:0; width:80%; max-width:400px; background:#0f0f0f; color:#fff; padding:20px 18px; overflow:auto; box-shadow:-8px 0 24px rgba(0,0,0,.35)}
.tcg-search{display:flex; gap:8px; margin-bottom:10px}
.tcg-search input{flex:1; padding:10px 12px; border-radius:8px; border:1px solid #333; background:#121212; color:#fff}
.tcg-search button{padding:10px 14px; border-radius:8px; border:0; background:var(--tcg-maroon); color:#fff; font-weight:600}
.tcg-mob-menu{list-style:none; padding:8px 0 24px; margin:0}
.tcg-mob-menu a{display:block; padding:12px; color:#fff; text-decoration:none; border-radius:8px}
.tcg-mob-menu a:hover{background:rgba(255,255,255,.06)}

/* Responsive */
@media (max-width: 1024px){
  .tcg-nav{display:none}
  .tcg-burger{display:inline-grid; place-items:center}
  .tcg-bar{padding:12px 16px}
}


/* 1) Make the page fill the viewport */
html, body { height: 100%; }

/* 2) Use a robust grid layout for the whole page */
body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto; /* header | content | footer */
}

/* 3) Tell typical wrappers to act as the middle (content) row */
.site, #page, .site-content, .site-main, main, .elementor-location-single {
  grid-row: 2;
  min-height: auto !important; /* avoid weird min-heights */
}

/* 4) Your header + footer explicitly occupy top/bottom rows */
header.tcg-header,
header.site-header { grid-row: 1; }

.elementor-location-footer,
.site-footer { 
  grid-row: 3; 
  margin-top: 0 !important; 
}

/* 5) Shrink footer padding if it's visually tall */
.elementor-location-footer .elementor-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

/* --- Woo Cart: mobile width + padding + wrapping --- */
@media (max-width: 768px){

  /* keep everything inside the viewport */
  .woocommerce-cart .woocommerce,
  .woocommerce-cart .woocommerce-notices-wrapper,
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals {
    max-width: 100%;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* table behaves on small screens */
  .woocommerce-cart table.shop_table {
    width: 100%;
    table-layout: fixed;
    margin: 0;
    display: block;            /* allow horizontal scroll fallback */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .woocommerce-cart table.shop_table th,
  .woocommerce-cart table.shop_table td {
    padding-left: 8px;
    padding-right: 8px;
    word-wrap: break-word;
    white-space: normal;
  }

  /* thumbnails + qty don’t blow out the layout */
  .woocommerce-cart td.product-thumbnail img { max-width: 72px; height: auto; }
  .woocommerce .quantity .qty { max-width: 70px; }

  /* actions row wraps nicely */
  .woocommerce-cart .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .woocommerce-cart .coupon {
    display: flex;
    flex: 1 1 100%;
    gap: 8px;
  }
  .woocommerce-cart .coupon .input-text { flex: 1 1 auto; min-width: 0; }
  .woocommerce .cart .button,
  .woocommerce .cart input[name="update_cart"] { width: 100%; }
}

/* safety: prevent any horizontal scroll on the whole page */
.woocommerce-cart body,
.woocommerce-cart html { overflow-x: hidden; }