/*
 Theme Name:   Hatehugger Child
 Theme URI:    https://hatehugger.com
 Description:  Hatehugger Manufacturing child theme for WooCommerce — Orange Man Bad! store.
 Author:       Hatehugger Manufacturing / Seely Pratt
 Author URI:   https://hatehugger.com
 Template:     storefront
 Version:      1.0.0
 Text Domain:  hatehugger-child
*/

/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap');

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --hh-copper:       #b87333;
  --hh-copper-light: #d4956a;
  --hh-copper-dark:  #8b5a2b;
  --hh-cream:        #fdf6ed;
  --hh-dark:         #1a1208;
  --hh-mid:          #3d2b1a;
  --hh-gold:         #d4a017;
  --hh-red:          #c0392b;
}

/* ============================================================
   GLOBAL
   ============================================================ */
body {
  font-family: 'DM Sans', sans-serif !important;
  background: var(--hh-cream) !important;
  color: var(--hh-dark) !important;
}

h1, h2, h3, h4 {
  font-family: 'Bebas Neue', cursive !important;
  letter-spacing: 0.04em;
}

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  background: linear-gradient(135deg, #2a1a0e 0%, #1a0f06 100%) !important;
  border-bottom: 3px solid var(--hh-copper) !important;
}

.site-header a,
.site-branding .site-title a {
  color: var(--hh-copper-light) !important;
  font-family: 'Bebas Neue', cursive !important;
  font-size: 28px !important;
  letter-spacing: 0.08em !important;
}

.main-navigation a {
  color: rgba(255,255,255,0.75) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
}

.main-navigation a:hover {
  color: var(--hh-copper-light) !important;
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
  background: #2a1a0e !important;
  color: rgba(255,255,255,0.6) !important;
  border-top: 3px solid var(--hh-copper) !important;
}

.site-footer a {
  color: var(--hh-copper-light) !important;
}

/* ============================================================
   WOOCOMMERCE — PRODUCT PAGE
   ============================================================ */

/* Product images */
.woocommerce div.product div.images img {
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

/* Product title */
.woocommerce div.product .product_title {
  font-family: 'Bebas Neue', cursive !important;
  font-size: 64px !important;
  line-height: 0.95 !important;
  color: var(--hh-dark) !important;
  margin-bottom: 4px !important;
}

/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: 'Bebas Neue', cursive !important;
  font-size: 48px !important;
  color: var(--hh-dark) !important;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-size: 20px !important;
  color: var(--hh-mid) !important;
  line-height: 1.6 !important;
  border-left: 4px solid var(--hh-copper) !important;
  padding-left: 20px !important;
  margin: 20px 0 !important;
}

/* Add to cart button */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: linear-gradient(135deg, var(--hh-copper) 0%, var(--hh-copper-dark) 100%) !important;
  color: white !important;
  font-family: 'Bebas Neue', cursive !important;
  font-size: 22px !important;
  letter-spacing: 0.1em !important;
  padding: 16px 48px !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 20px rgba(184,115,51,0.4) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  text-transform: uppercase !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: linear-gradient(135deg, var(--hh-copper-light) 0%, var(--hh-copper) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(184,115,51,0.5) !important;
}

/* Product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: 'Bebas Neue', cursive !important;
  font-size: 18px !important;
  letter-spacing: 0.06em !important;
  color: var(--hh-mid) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--hh-copper) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--hh-copper) !important;
}

/* ============================================================
   WOOCOMMERCE — SHOP / ARCHIVE
   ============================================================ */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Bebas Neue', cursive !important;
  font-size: 24px !important;
  letter-spacing: 0.04em !important;
}

.woocommerce ul.products li.product .price {
  color: var(--hh-copper) !important;
  font-family: 'Bebas Neue', cursive !important;
  font-size: 22px !important;
}

.woocommerce ul.products li.product a img {
  border-radius: 6px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.woocommerce ul.products li.product:hover a img {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.15);
}

/* ============================================================
   WOOCOMMERCE — CART
   ============================================================ */
.woocommerce table.cart thead th,
.woocommerce-cart table.cart thead th {
  font-family: 'Bebas Neue', cursive !important;
  font-size: 16px !important;
  letter-spacing: 0.08em !important;
  color: var(--hh-dark) !important;
  border-bottom: 2px solid var(--hh-copper) !important;
}

.cart-collaterals .cart_totals h2 {
  font-family: 'Bebas Neue', cursive !important;
}

/* ============================================================
   WOOCOMMERCE — CHECKOUT
   ============================================================ */
.woocommerce-checkout #payment {
  background: white !important;
  border-radius: 8px !important;
  border: 1px solid rgba(184,115,51,0.2) !important;
}

.woocommerce form .form-row label {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--hh-copper-dark) !important;
  font-weight: 500 !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
  border: 1.5px solid rgba(184,115,51,0.25) !important;
  border-radius: 5px !important;
  font-family: 'DM Sans', sans-serif !important;
  padding: 12px 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--hh-copper) !important;
  box-shadow: 0 0 0 3px rgba(184,115,51,0.12) !important;
  outline: none !important;
}

#order_review_heading,
.woocommerce-checkout h3 {
  font-family: 'Bebas Neue', cursive !important;
  font-size: 26px !important;
  letter-spacing: 0.05em !important;
  color: var(--hh-dark) !important;
  border-bottom: 2px solid rgba(184,115,51,0.3) !important;
  padding-bottom: 10px !important;
}

/* Proceed to checkout / place order */
.woocommerce #payment #place_order {
  font-family: 'Bebas Neue', cursive !important;
  font-size: 22px !important;
  letter-spacing: 0.1em !important;
  background: linear-gradient(135deg, var(--hh-copper) 0%, var(--hh-copper-dark) 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 16px 40px !important;
  box-shadow: 0 4px 20px rgba(184,115,51,0.35) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.woocommerce #payment #place_order:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(184,115,51,0.5) !important;
}

/* ============================================================
   ORDER RECEIVED / THANK YOU
   ============================================================ */
.woocommerce-order h2 {
  font-family: 'Bebas Neue', cursive !important;
  color: var(--hh-copper) !important;
}

/* ============================================================
   DECORATIVE GOLD BAR — PAGE TOPS
   ============================================================ */
.woocommerce-page .entry-header,
.page-template-default .entry-header {
  border-bottom: 3px solid var(--hh-copper) !important;
  background: linear-gradient(90deg, rgba(184,115,51,0.06), transparent) !important;
  padding: 32px 0 !important;
}

/* ============================================================
   NOTICES
   ============================================================ */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--hh-copper) !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--hh-copper) !important;
}