/*
Theme Name: COSCOOL
Theme URI: https://coscool.com
Description: Kadence child theme for COSCOOL Military 3D Mug store
Author: COSCOOL
Template: kadence
Version: 1.0.0
License: GPL-2.0+
*/

/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
  --color-primary: #2C2C2C;
  --color-secondary: #4A5D4A;
  --color-accent: #C4A35A;
  --color-dark: #1A1A1A;
  --color-light: #F5F3EE;
  --color-red: #8B1A1A;
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.12);
  --shadow-btn: 0 2px 4px rgba(0,0,0,0.2);
}

/* ============================================
   Global Typography
   ============================================ */
body {
  font-family: var(--font-body);
  background-color: var(--color-light);
  color: var(--color-dark);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-primary);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--color-primary);
}

/* ============================================
   Header / Navigation — Kadence overrides
   ============================================ */
.site-header {
  background-color: var(--color-primary) !important;
  border-bottom: 2px solid var(--color-accent);
}

.site-header a,
.site-header .menu-toggle {
  color: var(--color-light) !important;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.85rem;
}

.site-header a:hover {
  color: var(--color-accent) !important;
}

.site-branding .custom-logo-link img {
  max-height: 48px;
}

/* Cart icon in header */
.site-header .cart-contents {
  color: var(--color-accent) !important;
}

.site-header .cart-count {
  background-color: var(--color-accent);
  color: var(--color-primary);
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 0.7rem;
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
  background-color: var(--color-primary);
  color: var(--color-light);
  padding: 48px 0 24px;
}

.site-footer a {
  color: var(--color-accent);
}

.site-footer a:hover {
  color: var(--color-light);
}

/* Footer newsletter form */
.coscool-newsletter input[type="email"] {
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-light);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}

.coscool-newsletter button {
  background-color: var(--color-accent);
  color: var(--color-primary);
  border: none;
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
}

/* ============================================
   Buttons
   ============================================ */
.coscool-btn,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-block;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: var(--radius-sm);
  transition: all 0.25s ease;
  cursor: pointer;
}

/* Primary CTA — gold border on dark */
.coscool-btn-primary,
.woocommerce div.product .single_add_to_cart_button {
  background-color: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
}

.coscool-btn-primary:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

/* Secondary — solid dark */
.coscool-btn-secondary,
.woocommerce a.button.alt {
  background-color: var(--color-primary);
  color: var(--color-light);
  border: 2px solid var(--color-primary);
}

.coscool-btn-secondary:hover {
  background-color: transparent;
  color: var(--color-primary);
}

/* ============================================
   Product Cards (Shop Grid)
   ============================================ */
.products .product {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.products .product:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
}

.products .product .woocommerce-loop-product__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-primary);
  padding: 0 16px;
}

.products .product .price {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0 16px 16px;
}

.products .product .price del {
  color: #999;
  font-weight: 400;
  font-size: 0.9rem;
}

.products .product .button {
  display: block;
  text-align: center;
  margin: 0 16px 16px;
}

/* Badge override — "VETERAN PICK" */
.woocommerce span.onsale,
.coscool-veteran-badge {
  background-color: var(--color-red);
  color: #fff;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
}

/* ============================================
   Product Detail Page
   ============================================ */
.woocommerce div.product .product_title {
  font-family: var(--font-heading);
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-primary);
}

.woocommerce div.product .price {
  color: var(--color-accent);
  font-size: 1.5rem;
  font-weight: 700;
}

/* Variant selector */
.woocommerce div.product form.cart .variations select {
  border: 1px solid #ccc;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-family: var(--font-body);
  background: #fff;
}

/* Branch variant radio buttons */
.coscool-branch-selector {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}
.coscool-branch-option {
  flex: 1;
  text-align: center;
  border: 2px solid #ddd;
  border-radius: var(--radius-md);
  padding: 12px 8px;
  cursor: pointer;
  transition: border-color 0.2s ease;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.8rem;
}
.coscool-branch-option.active {
  border-color: var(--color-accent);
  background: rgba(196, 163, 90, 0.08);
}

/* Trust badges below ATC */
.coscool-trust-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
.coscool-trust-badge {
  font-size: 0.85rem;
  color: var(--color-secondary);
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom: 2px solid var(--color-accent);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Product gallery custom */
.coscool-product-gallery {
  position: relative;
}
.coscool-gallery-main {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 12px;
}
.coscool-gallery-main-image {
  width: 100%;
  display: block;
}
.coscool-gallery-thumbs {
  display: flex;
  gap: 8px;
}
.coscool-gallery-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.coscool-gallery-thumb.active {
  border-color: var(--color-accent);
}

/* Quantity buttons */
.coscool-qty-btn {
  background: var(--color-primary);
  color: var(--color-light);
  border: none;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
}
.quantity input.qty {
  width: 48px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  padding: 6px;
  margin: 0 4px;
}

/* ============================================
   Checkout
   ============================================ */
.coscool-checkout-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 20px;
}
.coscool-checkout-trust-header {
  background: var(--color-primary);
  color: var(--color-accent);
  text-align: center;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 32px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
}
.coscool-checkout-billing h3 {
  font-size: 1.2rem;
  margin-bottom: 16px;
}
.coscool-shipping-notice {
  background: var(--color-secondary);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ============================================
   Responsive — Mobile
   ============================================ */
@media (max-width: 768px) {
  /* Header */
  .site-header .menu {
    background-color: var(--color-primary);
  }

  /* Hero text sizing */
  .coscool-hero h1 {
    font-size: 2rem !important;
    letter-spacing: 2px;
  }
  .coscool-hero p {
    font-size: 1rem !important;
  }

  /* Branch grid — 2x2 */
  .coscool-branch-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* PDP stack */
  .woocommerce div.product .product_title {
    font-size: 1.5rem;
  }

  /* Single column checkout */
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    width: 100%;
    float: none;
  }

  /* Branch selector horizontal scroll */
  .coscool-branch-selector {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}