/*
Theme Name: Camp & Braai Child
Theme URI: https://campandbraai.co.za
Description: Astra child theme for Camp & Braai — carries the brand palette, typography, and global styling. Built to sit under WooCommerce.
Author: Camp & Braai
Template: astra
Version: 1.0.0
Text Domain: camp-and-braai-child
*/

/* =========================================================
   BRAND TOKENS — the whole palette in one place.
   Change a value here and it cascades across the site.
   ========================================================= */
:root{
  --cb-charcoal:#14110F;
  --cb-charcoal-2:#1C1815;
  --cb-ember:#E4572E;
  --cb-ember-dim:#B8431F;
  --cb-flame:#F5A623;
  --cb-bone:#EDE6D6;
  --cb-bone-dim:#C9C0AE;
  --cb-ash:#6B645C;
  --cb-rust:#3A1D14;
}

/* =========================================================
   GLOBAL BASE
   ========================================================= */
html,
body,
.ast-container,
.site,
#page,
.site-content,
.ast-separate-container,
.site-header,
.main-header-bar,
.ast-above-header,
#masthead{
  background-color:var(--cb-charcoal);
  color:var(--cb-bone);
  font-family:'Inter',sans-serif;
}

/* Subtle vine/leaf texture behind every page (matches the strength already
   used on the About/Contact Elementor blocks — this is NOT meant to be a
   bold pattern, just enough grain that flat charcoal doesn't look empty).
   Applied to the whole document instead of per-section so WooCommerce's
   own templates (Shop/Cart/Checkout/My Account) get it too, since those
   aren't built from our Elementor blocks. */
body{
  background-image:url('assets/vine-bg.png');
  background-repeat:repeat;
  background-size:300px auto;
}

/* Headlines — Anton, the display face. Anton is ultra-condensed:
   it NEEDS letter-spacing or the characters crowd together.
   !important on color because Astra's own heading rules are more
   specific and will otherwise win — this already happened once on
   the homepage h1, so it's locked down everywhere from the start. */
h1,h2,h3,
.entry-title,
.ast-single-post .entry-title{
  font-family:'Anton',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.035em;
  line-height:1.15;
  color:var(--cb-bone) !important;
}

/* Labels / eyebrows / buttons — Barlow Condensed */
.cb-eyebrow,
.woocommerce-breadcrumb,
.button, button, input[type="submit"]{
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:700;
}

a{color:var(--cb-ember);}
a:hover{color:var(--cb-flame);}

/* =========================================================
   BUTTONS — metallic-orange fill on primary actions.
   Replace __METAL_ORANGE_WIDE__ with the real image URL once
   you've uploaded metal_orange_wide.jpg to the theme (see guide).
   ========================================================= */
.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit,
.wc-block-components-button{
  background-color:var(--cb-ember) !important;
  background-image:url('assets/metal_orange_wide.jpg');
  background-size:cover;
  background-position:center;
  color:#241305 !important;
  border:none !important;
  border-radius:2px !important;
  text-transform:uppercase;
  letter-spacing:0.08em;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(228,87,46,0.35);
  color:#241305 !important;
}

/* =========================================================
   WOOCOMMERCE — skin the store to the dark theme
   ========================================================= */
.woocommerce ul.products li.product,
.woocommerce div.product,
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart table.cart,
.woocommerce table.shop_table{
  background:var(--cb-charcoal-2);
  border:1px solid rgba(237,230,214,0.07);
  color:var(--cb-bone);
}

.woocommerce ul.products li.product{
  border-radius:4px;
  overflow:hidden;
  padding-bottom:16px;
  transition:transform 0.25s ease, border-color 0.25s ease;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-6px);
  border-color:rgba(228,87,46,0.4);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Anton',sans-serif;
  text-transform:uppercase;
  color:var(--cb-bone);
  letter-spacing:0.02em;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color:var(--cb-ember) !important;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:1.2rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce span.onsale{
  background:var(--cb-ember);
  color:#241305;
}

/* Inputs / forms */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], textarea, select{
  background:var(--cb-charcoal-2);
  border:1.5px solid rgba(237,230,214,0.15);
  color:var(--cb-bone);
  border-radius:2px;
}
input:focus, textarea:focus, select:focus{
  border-color:var(--cb-ember) !important;
  outline:none;
}

/* Free-shipping / notice bars */
.woocommerce-message, .woocommerce-info{
  border-top-color:var(--cb-ember);
  background:var(--cb-charcoal-2);
  color:var(--cb-bone);
}

/* =========================================================
   WOOCOMMERCE BLOCK CHECKOUT (Cart & Checkout blocks)
   These use a different set of classes (wc-block-*) than the
   legacy WooCommerce templates above — without this, section
   headings render in Astra's default dark heading color (barely
   readable on charcoal) and every input stays plain white.
   ========================================================= */
.wc-block-components-title,
.wc-block-checkout__title,
.wc-block-components-checkout-step__title,
h2.wc-block-components-title,
h3.wc-block-components-title{
  color:var(--cb-bone) !important;
}

.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-combobox input,
.wc-block-components-address-form input,
.wc-block-components-address-form select,
select.wc-block-components-country-input,
select.wc-block-components-state-input{
  background:var(--cb-charcoal-2) !important;
  border:1.5px solid rgba(237,230,214,0.15) !important;
  color:var(--cb-bone) !important;
  border-radius:2px !important;
}
.wc-block-components-text-input label,
.wc-block-components-textarea label{
  color:var(--cb-bone-dim) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea textarea:focus{
  border-color:var(--cb-ember) !important;
  box-shadow:none !important;
}

.wc-block-components-order-summary,
.wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar,
.wc-block-components-panel{
  background:var(--cb-charcoal-2) !important;
  color:var(--cb-bone) !important;
  border-color:rgba(237,230,214,0.08) !important;
}

.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__description{
  color:var(--cb-bone-dim) !important;
}

/* =========================================================
   ASTRA SCROLL-TO-TOP BUTTON
   Default is a stock blue, which clashes with the whole palette.
   ========================================================= */
#ast-scroll-top,
.ast-scroll-top-icon{
  background-color:var(--cb-ember) !important;
  color:#241305 !important;
}
#ast-scroll-top:hover{
  background-color:var(--cb-flame) !important;
}

/* =========================================================
   SIGNATURE ELEMENTS (reusable classes for Elementor HTML blocks)
   ========================================================= */

/* Charred torn-edge divider */
.cb-charred-edge{
  height:34px;
  background:var(--cb-charcoal-2);
  clip-path:polygon(
    0% 100%, 0% 30%, 3% 45%, 6% 15%, 9% 50%, 12% 20%, 15% 55%, 18% 10%,
    21% 40%, 24% 60%, 27% 25%, 30% 50%, 33% 15%, 36% 45%, 39% 30%, 42% 55%,
    45% 20%, 48% 50%, 51% 10%, 54% 45%, 57% 25%, 60% 55%, 63% 15%, 66% 40%,
    69% 60%, 72% 20%, 75% 50%, 78% 30%, 81% 55%, 84% 15%, 87% 45%, 90% 25%,
    93% 55%, 96% 20%, 100% 45%, 100% 100%
  );
}
.cb-charred-edge.flip{transform:scaleY(-1);}

.cb-eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.28em;
  font-size:0.78rem;
  color:var(--cb-ember);
}

/* Metallic clipped display text (e.g. a "BRAAI" accent word) */
.cb-metal-text{
  background-image:url('assets/metal_orange_wide.jpg');
  background-size:220% 220%;
  background-position:center;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 14px rgba(228,87,46,0.45));
}

/* =========================================================
   3D PRODUCT VIEWER — toggle + canvas (single product page)
   ========================================================= */
.cb-view-toggle{
  display:flex;gap:8px;margin-bottom:14px;
}
.cb-view-toggle .cb-view-btn{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:0.06em;font-size:0.85rem;padding:9px 18px;border-radius:2px;
  border:1.5px solid rgba(237,230,214,0.25);background:transparent;color:var(--cb-bone);
  cursor:pointer;transition:all 0.15s ease;
}
.cb-view-toggle .cb-view-btn.active{
  background-image:url('assets/metal_orange_wide.jpg');background-size:cover;background-position:center;
  color:#241305;border-color:transparent;
}
#cb-3d-canvas-wrap{
  position:relative;width:100%;aspect-ratio:1/1;min-height:380px;
  background:var(--cb-charcoal-2);
  border-radius:4px;overflow:hidden;margin-bottom:14px;
}
@media(min-width:900px){
  #cb-3d-canvas-wrap{min-height:480px;}
}
#cb-3d-canvas{width:100%;height:100%;display:block;cursor:grab;}
#cb-3d-canvas:active{cursor:grabbing;}
.cb-3d-hint{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  background:rgba(20,17,15,0.7);color:var(--cb-bone-dim);font-size:0.75rem;
  padding:6px 14px;border-radius:20px;font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;letter-spacing:0.06em;pointer-events:none;
}