/*
Theme Name:   Zu-B
Theme URI:    https://www.zu-b.com/
Description:  Zu-B's standalone WordPress theme. Forked from Avanam
              (Base/Neve framework) so it no longer requires the
              Avanam parent theme to be installed or active. Cream &
              gold heritage brand identity across every page: home,
              shop, product, cart, checkout, account, blog, and the
              legal/info pages.
Author:       Zu-B
Version:      1.0.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain:  zu-b


@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --zb-bg:         #FFF9DB;
  --zb-bg-soft:    #F7EDB0;
  --zb-surface:    #FFFFFF;
  --zb-text:       #3B2A15;
  --zb-text-muted: #7A6A4D;
  --zb-copper:     #C88A00;
  --zb-copper-dark:#8F5F00;
  --zb-pink:       #E62A65;
  --zb-teal:       #199588;
  --zb-border:     #EADFB8;
}

/* =====================================================================
   BASE
   ===================================================================== */
body{ background-color: var(--zb-bg); color: var(--zb-text); font-family:'Inter', sans-serif; }

h1,h2,h3,h4,h5,h6,.site-title,.entry-title,
.woocommerce-loop-product__title,.product_title{
  font-family:'Fraunces', Georgia, serif !important;
  color: var(--zb-text);
}

a{ color: var(--zb-copper); }
a:hover{ color: var(--zb-copper-dark); }

.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button, .add_to_cart_button, #place_order{
  background: linear-gradient(180deg, #DA9F1F 0%, var(--zb-copper) 55%, var(--zb-copper-dark) 100%) !important;
  border: 1px solid var(--zb-copper-dark) !important;
  color: #fff !important;
  border-radius: 5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 2px rgba(0,0,0,0.08),
    0 2px 0 var(--zb-copper-dark),
    0 6px 14px rgba(143,95,0,0.32);
  transition: transform .18s ease, box-shadow .18s ease, background .25s;
  position: relative;
}
.button:hover, button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.single_add_to_cart_button:hover, .add_to_cart_button:hover, #place_order:hover{
  background: linear-gradient(180deg, #E5AC2D 0%, #DA9F1F 55%, var(--zb-copper) 100%) !important;
  border-color: var(--zb-copper-dark) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 2px rgba(0,0,0,0.06),
    0 3px 0 var(--zb-copper-dark),
    0 10px 20px rgba(143,95,0,0.38);
  transform: translateY(-2px);
}
.button:active, button:active,
.woocommerce a.button:active, .woocommerce button.button:active,
.single_add_to_cart_button:active, .add_to_cart_button:active, #place_order:active{
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.18),
    0 1px 0 var(--zb-copper-dark),
    0 3px 8px rgba(143,95,0,0.28);
  transform: translateY(1px);
}
.button:disabled, button:disabled, .button.disabled{
  background: var(--zb-border) !important; border-color: var(--zb-border) !important; color: var(--zb-text-muted) !important;
  box-shadow: none !important; transform: none !important; cursor: not-allowed;
}

.woocommerce ul.products li.product .price,.price{ color: var(--zb-copper); font-weight: 600; }
.woocommerce ul.products li.product .price del{ color: var(--zb-text-muted); }
.onsale{ background-color: var(--zb-teal) !important; color: #fff !important; }

/* =====================================================================
   SITE HEADER / TOP BAR / UTILITY BAR
   Real classes confirmed from your live theme (Neve "Base" framework +
   TemplateMela header addons): .site-header, .header-html-inner (used
   for any "Header HTML" addon block — this is where an announcement
   bar or ship-to selector built via Customizer > Header Builder lives).
   ===================================================================== */
.site-header, header#masthead{
  background-color: var(--zb-surface) !important;
  border-bottom: 1px solid var(--zb-border);
}
.site-header a{ color: var(--zb-text); }

/* Row used for a top announcement/utility bar built with a "Header HTML"
   addon row in Customizer > Header Builder — see HEADER-BUILDER-GUIDE.txt */
.nv-top-bar, .header-html-inner.zb-announcement-bar{
  background-color: var(--zb-copper) !important;
  color: #fff !important;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 8px 16px;
}
.header-html-inner.zb-announcement-bar a{ color: #fff; text-decoration: underline; }
@media (max-width: 760px){
  .nv-top-bar, .header-html-inner.zb-announcement-bar{ display: none !important; }
}

/* [zub_ship_to] shortcode output — see functions.php */
.zb-ship-to{ font-size: 13px; color: var(--zb-text); display: inline-flex; align-items: center; gap: 6px; }

/* Logo — force natural aspect ratio regardless of what width/height the
   PARENT THEME's own markup or Customizer settings try to apply, so the
   logo can never render stretched into an oval on Shop/Cart/Account
   pages (which use the parent theme's default header, not our custom
   one). Deliberately does NOT touch .header-logo img — that's our own
   homepage/inner-page header, already correctly sized in zub-front.css. */
.custom-logo,
.site-logo img,
.site-branding img,
.nv-logo-wrap img{
  max-height:52px !important;
  width:auto !important;
  height:auto !important;
  max-width:200px;
  object-fit:contain;
}
@media (max-width: 768px){
  .custom-logo,
  .site-logo img,
  .site-branding img,
  .nv-logo-wrap img{
    max-height:40px !important;
  }
}
.site-title-wrap .site-title{ font-family:'Fraunces', serif !important; }

/* =====================================================================
   PRIMARY NAVIGATION + MEGA MENU
   Confirmed real classes from templatemela-core/includes/addons/mega-menu:
   .header-navigation .header-menu-container ul.menu > li.base-menu-mega-enabled
   > ul.sub-menu (CSS grid, N columns) > li (each a column, its own title
   = column heading, its own children = the links inside that column).
   ===================================================================== */
.header-navigation, .primary-menu-container, .secondary-menu-container{
  background-color: var(--zb-surface) !important;
}
.header-menu-container ul.menu > li > a{
  color: var(--zb-text) !important;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.header-menu-container ul.menu > li > a:hover,
.header-menu-container ul.menu > li.current-menu-item > a{
  color: var(--zb-copper) !important;
}

/* Mega-menu panel */
.header-menu-container ul.menu > li.base-menu-mega-enabled > ul.sub-menu{
  background-color: var(--zb-surface) !important;
  border: 1px solid var(--zb-border);
  border-top: 3px solid var(--zb-copper);
  box-shadow: 0 20px 40px rgba(59,42,21,0.12);
  padding: 32px !important;
}
/* Each depth-1 <li> inside the mega panel = one column */
.header-menu-container ul.menu > li.base-menu-mega-enabled > ul.sub-menu > li{
  border-right: 1px solid var(--zb-border);
  padding-right: 24px;
}
.header-menu-container ul.menu > li.base-menu-mega-enabled > ul.sub-menu > li:last-child{
  border-right: none;
}
/* Column heading (top-level item text inside the column — use "Menu
   Label" in the menu item editor so it renders as a plain heading,
   not a clickable link — see MENU-BUILD-GUIDE.txt) */
.header-menu-container ul.menu > li.base-menu-mega-enabled > ul.sub-menu > li > a,
.header-menu-container ul.menu > li.base-menu-mega-enabled > ul.sub-menu > li .menu-label-content{
  font-family:'Fraunces', serif !important;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--zb-text-muted) !important;
  margin-bottom: 10px;
  display: block;
}
/* Links inside each column (depth-2 items) */
.header-menu-container ul.menu > li.base-menu-mega-enabled > ul.sub-menu > li ul.sub-menu{
  position: static !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.header-menu-container ul.menu > li.base-menu-mega-enabled > ul.sub-menu > li ul.sub-menu li a{
  color: var(--zb-text) !important;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  padding: 6px 0 !important;
}
.header-menu-container ul.menu > li.base-menu-mega-enabled > ul.sub-menu > li ul.sub-menu li a:hover{
  color: var(--zb-copper) !important;
  padding-left: 4px !important;
}

/* Promo column — populated via a "Custom Element" (Elementor mini
   template) assigned to a menu item; give it room to breathe */
.zb-mega-promo{
  background: var(--zb-bg-soft);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}
.zb-mega-promo img{ border-radius: 6px; margin-bottom: 12px; }
.zb-mega-promo h6{ font-family:'Fraunces', serif; margin: 0 0 10px; }
.zb-mega-promo a.mp-link{
  display: inline-block; background: var(--zb-copper); color: #fff !important;
  padding: 8px 18px; border-radius: 3px; font-size: 13px; font-weight: 600;
}

/* =====================================================================
   MOBILE / DRAWER MENU (real classes: .drawer-toggle, .mobile-menu-container,
   .popup-drawer, .menu-toggle-icon — restyles the drawer that already works)
   ===================================================================== */
.menu-toggle-icon, .menu-toggle-close, .drawer-toggle{ color: var(--zb-text) !important; }
.mobile-menu-container.drawer-menu-container, .popup-drawer{
  background-color: var(--zb-bg) !important;
}
.mobile-menu-container.drawer-menu-container a{ color: var(--zb-text) !important; }
.mobile-menu-container.drawer-menu-container a:hover{ color: var(--zb-copper) !important; }
.header-cart-button, .header-cart-total{ color: var(--zb-text) !important; }
.header-cart-button:hover{ color: var(--zb-copper) !important; }

/* =====================================================================
   CART DRAWER / FLYOUT (real classes: .drawer-content.woocommerce
   .widget_shopping_cart, .mini-cart-container, .side-cart-header)
   ===================================================================== */
.drawer-content.woocommerce.widget_shopping_cart, .side-cart-header{
  background-color: var(--zb-surface) !important;
}
.side-cart-header{ border-bottom: 1px solid var(--zb-border); }
.mini-cart-container .woocommerce-mini-cart-item{ border-bottom: 1px solid var(--zb-border); }
.mini-cart-container .woocommerce-mini-cart__total{
  border-top: 1px solid var(--zb-border); font-weight: 700;
}
.mini-cart-container .woocommerce-mini-cart__buttons .button{ width: 100%; text-align: center; }

/* =====================================================================
   WISHLIST / COMPARE / QUICK VIEW
   Exact classes confirmed from the actual WPC Smart Wishlist / Compare
   / Quick View plugin source (WPClever): .woosw-* / .woosc-* / .woosq-*
   ===================================================================== */

/* --- Wishlist (woosw) --- */
.woosw-btn{ color: var(--zb-text-muted); transition: color .2s, transform .2s; }
.woosw-btn:hover{ color: var(--zb-pink) !important; transform: scale(1.08); }
.woosw-btn.woosw-added, .woosw-btn.woosw-added .woosw-btn-icon{ color: var(--zb-pink) !important; }
.woosw-popup .woosw-popup-inner, .woosw-popup .woosw-popup-content{ background: var(--zb-surface) !important; }
.woosw-list .woosw-items .woosw-item--name a{ color: var(--zb-text) !important; font-family:'Fraunces', serif; }
.woosw-list .woosw-items .woosw-item--price{ color: var(--zb-copper); font-weight: 600; }
.woosw-list .woosw-actions .button, #woosw_copy_btn{
  background: linear-gradient(180deg, #DA9F1F 0%, var(--zb-copper) 55%, var(--zb-copper-dark) 100%) !important;
  border-color: var(--zb-copper-dark) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 0 var(--zb-copper-dark), 0 6px 14px rgba(143,95,0,0.32);
}
.woosw-menu-item .woosw-menu-item-inner[data-count]:not([data-count="0"])::after{
  content: attr(data-count); background: var(--zb-pink); color: #fff;
  border-radius: 50%; font-size: 10px; padding: 1px 5px; margin-left: 4px;
}

/* --- Compare (woosc) --- */
.woosc-btn{ color: var(--zb-text-muted); transition: color .2s, transform .2s; }
.woosc-btn:hover{ color: var(--zb-teal) !important; transform: scale(1.08); }
.woosc-bar{ background: var(--zb-surface) !important; border-top: 2px solid var(--zb-teal); }
.woosc-bar-item-remove, .woosc-remove, .woosc-remove-all{ color: var(--zb-pink) !important; }
.woosc-bar .button, .woosc-table-settings, .woosc-popup .button{
  background: linear-gradient(180deg, #26AFA0 0%, var(--zb-teal) 55%, #12766B 100%) !important;
  border: 1px solid #12766B !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 0 #12766B, 0 6px 14px rgba(18,118,107,0.32);
}
.woosc-popup .woosc-popup-inner, .woosc-popup .woosc-popup-content{ background: var(--zb-surface) !important; }
.woosc-sidebar-item-price{ color: var(--zb-copper); font-weight: 600; }

/* --- Quick View (woosq) --- */
.woosq-btn{ color: var(--zb-text-muted); transition: color .2s, transform .2s; }
.woosq-btn:hover{ color: var(--zb-copper) !important; transform: scale(1.08); }
.woosq-popup .woosq-popup-content, .woosq-sidebar{ background: var(--zb-surface) !important; }
.woosq-popup .single_add_to_cart_button{
  background: linear-gradient(180deg, #DA9F1F 0%, var(--zb-copper) 55%, var(--zb-copper-dark) 100%) !important;
  border-color: var(--zb-copper-dark) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 0 var(--zb-copper-dark), 0 6px 14px rgba(143,95,0,0.32);
}

/* =====================================================================
   PRODUCT CARDS + SHOP ARCHIVE
   ===================================================================== */
.woocommerce ul.products{ gap: 24px; }
.woocommerce ul.products li.product{
  background-color: var(--zb-surface);
  border: 1px solid var(--zb-border);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow .25s, transform .25s;
}
.woocommerce ul.products li.product:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(138,70,0,0.12);
}
.woocommerce-ordering select, .woocommerce .woocommerce-result-count{
  background: var(--zb-surface); border: 1px solid var(--zb-border); border-radius: 4px;
  color: var(--zb-text); padding: 8px 14px;
}
.widget_price_filter .price_slider_amount .button{
  background: linear-gradient(180deg, #DA9F1F 0%, var(--zb-copper) 55%, var(--zb-copper-dark) 100%) !important;
  border: 1px solid var(--zb-copper-dark) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 0 var(--zb-copper-dark), 0 4px 10px rgba(143,95,0,0.28);
}
.widget_price_filter .ui-slider .ui-slider-range{ background-color: var(--zb-copper); }
.widget_price_filter .ui-slider .ui-slider-handle{ background: var(--zb-copper-dark); border: none; }
.widget_layered_nav ul li.chosen a, .widget_layered_nav ul li a:hover{ color: var(--zb-copper); }
.woocommerce-pagination ul.page-numbers li span.current,
.woocommerce-pagination ul.page-numbers li a:hover{
  background: var(--zb-copper) !important; color: #fff !important; border-radius: 4px;
}

/* =====================================================================
   CART / CHECKOUT PAGES
   ===================================================================== */
.woocommerce-cart table.cart{ background: var(--zb-surface); border: 1px solid var(--zb-border); border-radius: 8px; overflow: hidden; }
.woocommerce-cart table.cart thead th{ background: var(--zb-bg-soft); color: var(--zb-text); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; }
.woocommerce-cart .cart-collaterals .cart_totals{ background: var(--zb-bg-soft); border-radius: 8px; padding: 24px; border: 1px solid var(--zb-border); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{ font-size: 15px; padding: 14px !important; }
.woocommerce-checkout #payment{ background: var(--zb-bg-soft) !important; border-radius: 8px; }
.woocommerce-checkout #payment div.payment_box{ background: var(--zb-surface) !important; }
.woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select{
  border: 1px solid var(--zb-border); border-radius: 4px; background: var(--zb-surface);
}

/* =====================================================================
   MY ACCOUNT
   ===================================================================== */
.woocommerce-account .woocommerce-MyAccount-navigation{ background: var(--zb-bg-soft); border-radius: 8px; padding: 10px 0; border: 1px solid var(--zb-border); }
.woocommerce-account .woocommerce-MyAccount-navigation li a{ display: block; padding: 12px 20px; color: var(--zb-text); font-weight: 600; font-size: 14px; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ color: var(--zb-copper); }
.woocommerce-account .woocommerce-MyAccount-content{ background: var(--zb-surface); border: 1px solid var(--zb-border); border-radius: 8px; padding: 30px; }
.woocommerce-form-login, .woocommerce-form-register{ background: var(--zb-surface); border: 1px solid var(--zb-border); border-radius: 8px; padding: 30px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer, footer#colophon{ background-color: var(--zb-bg-soft) !important; color: var(--zb-text) !important; }
.site-footer a, footer#colophon a{ color: var(--zb-copper) !important; }
.site-footer .footer-widget-area{ transition: transform .3s ease; }
.site-footer .footer-widget-area:hover{ transform: translateY(-4px); }
.footer-social a{ transition: transform .25s ease, background-color .25s ease; border-radius: 50%; }
.footer-social a:hover{ transform: translateY(-4px) scale(1.08); background-color: var(--zb-copper) !important; }

/* =====================================================================
   RIBBON COMPONENT (wrap any Elementor text/HTML block in a container
   with class "zb-ribbon" + "zb-ribbon-copper"/"zb-ribbon-cream")
   ===================================================================== */
.zb-ribbon{
  position: relative;
  clip-path: polygon(2.5% 0%, 97.5% 0%, 100% 50%, 97.5% 100%, 2.5% 100%, 0% 50%);
  padding: 60px 8vw;
  text-align: center;
}
.zb-ribbon-copper{ background: linear-gradient(120deg, var(--zb-copper), var(--zb-copper-dark)); color: #fff; }
.zb-ribbon-cream{ background: var(--zb-bg-soft); color: var(--zb-text); }

/* =====================================================================
   SCROLL-TO-TOP — brand-match any plugin/theme's own default "back to
   top" button so it can never show up as an unstyled square with a
   mismatched color. Our own custom one already has its own correctly-
   styled ".totop" class in zub-front.css — this catches OTHER common
   plugin/theme class name patterns for the same kind of button.
   ===================================================================== */
.scroll-top, .scrolltop, .scroll-to-top, .back-to-top, .backtotop, #back-to-top,
.scrollup, .go-to-top, .totopbtn, .wpfront-scroll-top-container,
[class*="scroll-top-button"], [class*="back-to-top-button"]{
  background: var(--zb-copper) !important;
  border-radius: 50% !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25) !important;
  color: #fff !important;
}
.scroll-top:hover, .scrolltop:hover, .scroll-to-top:hover, .back-to-top:hover,
.backtotop:hover, #back-to-top:hover, .scrollup:hover, .go-to-top:hover,
.totopbtn:hover, .wpfront-scroll-top-container:hover{
  background: var(--zb-copper-dark) !important;
}