/*
Theme Name:   Triple Z Bakery Equipment
Description:  Child theme for Triple Z Bakery Equipment — "Crust & Steel" rebrand. Parent: Hello Elementor.
Template:     hello-elementor
Version:      1.2.0
Author:       Triple Z Bakery Equipment
Text Domain:  triple-z
*/

/* ============================================================================
   FONT LOADING
   Barlow Condensed (display) — lighter weights from Google Fonts CDN;
   Bold 700 self-hosted from /wp-content/themes/triple-z/fonts/
   Roboto (body) — self-hosted from /wp-content/themes/triple-z/fonts/
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600&display=swap');

@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/BarlowCondensed-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   DESIGN TOKENS — maps to Elementor Global Colors / Global Fonts settings
   Set these in Elementor > Site Settings > Global Colors:
     Primary   = #B86514  (Crust Gold)
     Secondary = #E0A22A  (Amber)
     Text      = #1E1A15  (Warm Ink)
     Accent    = #211C16  (Charcoal)
   ============================================================================ */
:root {
  /* Color palette */
  --tz-cream-50:  #FDFBF6;
  --tz-cream-100: #FBF6EE;
  --tz-cream-200: #F4EADA;
  --tz-cream-300: #EBDDC7;
  --tz-surface:   #FFFFFF;

  --tz-ink-900: #1E1A15;
  --tz-ink-700: #3A332B;
  --tz-ink-500: #6B6157;
  --tz-ink-400: #8C8275;
  --tz-char:    #211C16;

  --tz-gold:        #B86514;  /* primary */
  --tz-gold-hover:  #9E540E;
  --tz-gold-press:  #7E430B;
  --tz-gold-light:  #FBF1E1;
  --tz-amber:       #E0A22A;  /* accent */

  --tz-olive:   #6E7A4F;
  --tz-toast:   #5A3A22;

  --tz-border:  #E7DCC9;
  --tz-border-s:#D8C7AC;

  --tz-success: #3F8E4F; --tz-success-bg: #E7F2E8;
  --tz-error:   #C0432B; --tz-error-bg:   #F8E4DE;

  /* Typography */
  --tz-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --tz-font-body:    'Roboto', system-ui, sans-serif;

  /* Radii */
  --tz-r-sm:   6px;
  --tz-r-md:   10px;
  --tz-r-lg:   16px;
  --tz-r-xl:   24px;
  --tz-r-pill: 999px;

  /* Shadows */
  --tz-shadow-sm: 0 1px 2px rgba(33,28,22,.06), 0 1px 3px rgba(33,28,22,.05);
  --tz-shadow-md: 0 4px 12px rgba(33,28,22,.08), 0 2px 4px rgba(33,28,22,.05);
  --tz-shadow-lg: 0 16px 40px rgba(33,28,22,.12), 0 4px 12px rgba(33,28,22,.06);
  --tz-focus:     0 0 0 3px rgba(184,101,20,.28);

  /* Motion */
  --tz-ease: cubic-bezier(0.22,1,0.36,1);
  --tz-fast: 140ms;
  --tz-med:  240ms;
}

/* ============================================================================
   GLOBAL BASE
   ============================================================================ */
body {
  background-color: var(--tz-cream-100);
  color: var(--tz-ink-900);
  font-family: var(--tz-font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--tz-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.04;
}

a { transition: color var(--tz-fast) var(--tz-ease); }
::selection { background: var(--tz-gold-light); }

/* ============================================================================
   ELEMENTOR GLOBAL OVERRIDES
   ============================================================================ */

/* ---- Buttons ---- */
.elementor-button,
.elementor-button-wrapper .elementor-button {
  font-family: var(--tz-font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-radius: var(--tz-r-md) !important;
  transition: background var(--tz-fast) var(--tz-ease),
              transform var(--tz-fast) var(--tz-ease) !important;
}

/* Primary button style — assign via Elementor > Button Style > Type: Primary */
.elementor-button.elementor-button-primary,
.elementor-button[style*="background-color: #B86514"],
.tz-btn-primary .elementor-button {
  background-color: var(--tz-gold) !important;
  color: #fff !important;
  border: none !important;
}
.elementor-button.elementor-button-primary:hover,
.tz-btn-primary .elementor-button:hover {
  background-color: var(--tz-gold-hover) !important;
}

/* Outline / secondary button */
.elementor-button.elementor-button-link,
.tz-btn-secondary .elementor-button {
  background: transparent !important;
  color: var(--tz-ink-900) !important;
  border: 1.5px solid var(--tz-border-s) !important;
}
.tz-btn-secondary .elementor-button:hover {
  border-color: var(--tz-ink-900) !important;
  background: var(--tz-cream-200) !important;
}

/* ---- Sections ---- */
/* Dark / charcoal section — add CSS class "tz-dark" in Elementor > Advanced > CSS Classes */
.tz-dark {
  background-color: var(--tz-char) !important;
  color: #F3ECE0;
}
.tz-dark h1, .tz-dark h2, .tz-dark h3,
.tz-dark .elementor-heading-title { color: #fff; }
.tz-dark p, .tz-dark .elementor-widget-text-editor { color: rgba(243,236,224,.85); }

/* Cream alt section */
.tz-cream {
  background-color: var(--tz-cream-200) !important;
}

/* Primary / gold section */
.tz-gold-bg {
  background-color: var(--tz-gold) !important;
}
.tz-gold-bg h1, .tz-gold-bg h2, .tz-gold-bg h3,
.tz-gold-bg .elementor-heading-title { color: #fff; }
.tz-gold-bg p { color: rgba(255,255,255,.9); }

/* ---- Icon Box ---- */
.elementor-icon-box-wrapper .elementor-icon {
  transition: transform var(--tz-fast) var(--tz-ease);
}
.elementor-icon-box-wrapper:hover .elementor-icon {
  transform: scale(1.08);
}

/* Trust strip icon box */
.tz-trust .elementor-icon-box-icon .elementor-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background: var(--tz-gold-light) !important;
  color: var(--tz-gold-hover) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Category cards */
.tz-cat-card .elementor-icon-box-icon .elementor-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: var(--tz-char) !important;
  color: var(--tz-amber) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---- Eyebrow / label text ---- */
.tz-eyebrow,
.tz-eyebrow .elementor-heading-title {
  font-family: var(--tz-font-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--tz-gold) !important;
}

/* Amber eyebrow (for dark sections) */
.tz-dark .tz-eyebrow,
.tz-dark .tz-eyebrow .elementor-heading-title,
.tz-eyebrow-amber .elementor-heading-title {
  color: var(--tz-amber) !important;
}

/* ---- Card style ---- */
.tz-card,
.elementor-widget.tz-card .elementor-widget-container {
  background: #fff;
  border: 1px solid var(--tz-border);
  border-radius: var(--tz-r-lg);
  box-shadow: var(--tz-shadow-sm);
  transition: box-shadow var(--tz-fast) var(--tz-ease), transform var(--tz-fast) var(--tz-ease);
}
.tz-card:hover,
.elementor-widget.tz-card .elementor-widget-container:hover {
  box-shadow: var(--tz-shadow-md);
  transform: translateY(-2px);
}

/* ---- Testimonial ---- */
.tz-testimonial .elementor-testimonial-name {
  font-family: var(--tz-font-body);
  font-weight: 700;
}
.tz-testimonial .elementor-testimonial-job { color: var(--tz-ink-500); }
.tz-testimonial .elementor-testimonial-content {
  font-family: var(--tz-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
  color: var(--tz-ink-900);
}

/* ---- Links ---- */
a { color: var(--tz-ink-900); }
a:hover { color: var(--tz-gold); }
.tz-dark a { color: rgba(243,236,224,.9); }
.tz-dark a:hover { color: var(--tz-amber); }

/* ---- Price display ---- */
.tz-price,
.price,
.woocommerce-Price-amount {
  font-family: var(--tz-font-display) !important;
  font-weight: 700 !important;
  color: var(--tz-ink-900) !important;
}

/* ============================================================================
   HEADER — Hello Elementor header overrides
   ============================================================================ */
.site-header,
.elementor-location-header {
  background: rgba(251,246,238,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tz-border);
}

/* Utility bar — add a section above the header with CSS class "tz-util-bar" */
.tz-util-bar {
  background: var(--tz-char) !important;
  color: #F3ECE0 !important;
  font-size: 13px !important;
}
.tz-util-bar .elementor-widget-text-editor,
.tz-util-bar a { color: rgba(243,236,224,.9); }
.tz-util-bar a:hover { color: var(--tz-amber); }

/* Navigation */
.elementor-nav-menu .elementor-item {
  font-family: var(--tz-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.02em !important;
  color: var(--tz-ink-900) !important;
  transition: color var(--tz-fast) !important;
}
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active { color: var(--tz-gold) !important; }
.elementor-nav-menu .elementor-item.elementor-item-active {
  border-bottom: 2px solid var(--tz-gold) !important;
}

/* ============================================================================
   FOOTER — Hello Elementor footer overrides
   ============================================================================ */
.site-footer,
.elementor-location-footer {
  background-color: var(--tz-char);
  color: #F3ECE0;
}
.site-footer h1, .site-footer h2, .site-footer h3,
.elementor-location-footer .elementor-heading-title { color: #fff; }
.site-footer p,
.elementor-location-footer .elementor-widget-text-editor { color: rgba(243,236,224,.75); }
.site-footer a,
.elementor-location-footer a { color: rgba(243,236,224,.85); }
.site-footer a:hover,
.elementor-location-footer a:hover { color: var(--tz-amber); }

/* ============================================================================
   WOOCOMMERCE — complete styling to match the design
   ============================================================================ */

/* ---- Shop archive ---- */
.woocommerce-page .site-main,
.woocommerce .site-main {
  background: var(--tz-cream-100);
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: #fff;
  border: 1px solid var(--tz-border);
  border-radius: var(--tz-r-lg);
  box-shadow: var(--tz-shadow-sm);
  overflow: hidden;
  padding: 0 !important;
  transition: transform var(--tz-fast) var(--tz-ease), box-shadow var(--tz-fast) var(--tz-ease);
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: var(--tz-shadow-md);
}

.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--tz-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 18px;
  line-height: 1.05;
  color: var(--tz-ink-900);
  padding: 14px 15px 0;
}

.woocommerce ul.products li.product .price {
  font-family: var(--tz-font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--tz-ink-900);
  padding: 6px 15px 0;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button {
  font-family: var(--tz-font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  background: var(--tz-gold) !important;
  color: #fff !important;
  border-radius: var(--tz-r-md) !important;
  padding: 10px 18px !important;
  border: none !important;
  margin: 10px 15px 15px !important;
  display: inline-block !important;
  transition: background var(--tz-fast) !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
  background: var(--tz-gold-hover) !important;
}

/* Shop header / breadcrumb area */
.woocommerce .woocommerce-breadcrumb {
  background: var(--tz-cream-200);
  padding: 16px 24px;
  border-bottom: 1px solid var(--tz-border);
  font-size: 13px;
  color: var(--tz-ink-500);
}
.woocommerce .woocommerce-breadcrumb a { color: var(--tz-ink-500); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--tz-gold); }

/* WooCommerce category filter / shop ordering */
.woocommerce .woocommerce-ordering select,
.woocommerce select {
  font-family: var(--tz-font-body);
  font-size: 14px;
  color: var(--tz-ink-900);
  padding: 9px 12px;
  border: 1.5px solid var(--tz-border-s);
  border-radius: var(--tz-r-md);
  background: #fff;
  outline: none;
  cursor: pointer;
}
.woocommerce .woocommerce-ordering select:focus { border-color: var(--tz-gold); }

/* ---- Single product ---- */
.woocommerce div.product .woocommerce-product-gallery__image img {
  border-radius: var(--tz-r-lg);
  border: 1px solid var(--tz-border);
}

.woocommerce div.product .product_title {
  font-family: var(--tz-font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  font-size: clamp(2rem,4vw,3rem) !important;
  line-height: 1.04 !important;
  color: var(--tz-ink-900) !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--tz-font-display) !important;
  font-weight: 700 !important;
  font-size: 2.5rem !important;
  color: var(--tz-ink-900) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--tz-ink-500);
  font-size: 16px;
  line-height: 1.55;
}

/* Star rating */
.woocommerce .star-rating { color: var(--tz-amber); }

/* Add to cart */
.woocommerce div.product form.cart .qty {
  font-family: var(--tz-font-body);
  font-size: 15px;
  border: 1.5px solid var(--tz-border-s);
  border-radius: var(--tz-r-md);
  padding: 10px 14px;
  width: 80px;
}
.woocommerce div.product form.cart .qty:focus { border-color: var(--tz-gold); box-shadow: var(--tz-focus); }

.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: var(--tz-font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  background: var(--tz-gold) !important;
  color: #fff !important;
  border-radius: var(--tz-r-md) !important;
  padding: 14px 28px !important;
  border: none !important;
  font-size: 16px !important;
  transition: background var(--tz-fast) var(--tz-ease) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--tz-gold-hover) !important; }
.woocommerce div.product form.cart .single_add_to_cart_button:active { background: var(--tz-gold-press) !important; }

/* Related products */
.woocommerce .related h2,
.woocommerce .up-sells h2 {
  font-family: var(--tz-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 2rem;
}

/* ---- Cart ---- */
.woocommerce-cart .woocommerce table.shop_table {
  border: 1px solid var(--tz-border);
  border-radius: var(--tz-r-lg);
  box-shadow: var(--tz-shadow-sm);
  background: #fff;
}
.woocommerce-cart .cart-subtotal th,
.woocommerce-cart .order-total th {
  font-family: var(--tz-font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.woocommerce-cart .woocommerce td.product-name a { font-weight: 600; }
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  background: var(--tz-gold) !important;
  border-radius: var(--tz-r-md) !important;
  font-family: var(--tz-font-display) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 18px !important;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
  background: var(--tz-gold-hover) !important;
}
.woocommerce .cart-collaterals .cart_totals {
  background: #fff;
  border: 1px solid var(--tz-border);
  border-radius: var(--tz-r-lg);
  box-shadow: var(--tz-shadow-sm);
  padding: 24px;
}

/* ---- Checkout ---- */
.woocommerce-checkout #order_review {
  background: #fff;
  border: 1px solid var(--tz-border);
  border-radius: var(--tz-r-lg);
  box-shadow: var(--tz-shadow-sm);
  padding: 24px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  font-family: var(--tz-font-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1.5px solid var(--tz-border-s);
  border-radius: var(--tz-r-md);
  background: #fff;
  color: var(--tz-ink-900);
  outline: none;
  transition: border-color var(--tz-fast), box-shadow var(--tz-fast);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--tz-gold);
  box-shadow: var(--tz-focus);
}
.woocommerce form .form-row label { font-weight: 600; font-size: 13px; color: var(--tz-ink-900); }

/* ---- Notices ---- */
.woocommerce-message {
  background: var(--tz-success-bg) !important;
  color: var(--tz-success) !important;
  border-left: 4px solid var(--tz-success) !important;
  border-radius: var(--tz-r-md) !important;
}
.woocommerce-error {
  background: var(--tz-error-bg) !important;
  color: var(--tz-error) !important;
  border-left: 4px solid var(--tz-error) !important;
  border-radius: var(--tz-r-md) !important;
}

/* ============================================================================
   UTILITY CLASSES — use in Elementor > Advanced > CSS Classes
   ============================================================================ */
.tz-center { text-align: center; }
.tz-muted { color: var(--tz-ink-500) !important; }
.tz-amber { color: var(--tz-amber) !important; }
.tz-gold-text { color: var(--tz-gold) !important; }
.tz-shadow { box-shadow: var(--tz-shadow-md); }
.tz-rounded { border-radius: var(--tz-r-lg) !important; }
.tz-rounded-xl { border-radius: var(--tz-r-xl) !important; }
.tz-border { border: 1px solid var(--tz-border); }
.tz-no-margin { margin: 0 !important; }

/* Divider in dark section */
.tz-dark .elementor-divider-separator { border-color: rgba(243,236,224,.2); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:768px) {
  .woocommerce ul.products[class*="columns-"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width:480px) {
  .woocommerce ul.products[class*="columns-"] {
    grid-template-columns: 1fr !important;
  }
}