/*
Theme Name: Voiara Child
Template: kadence
Author: Voiara
Description: Voiara child theme — premium corporate & ethnic wear, UAE. Brand styling layer.
Version: 1.0.0
*/

/* ════════════════════════════════════════════════
   VOIARA BRAND STYLING
   Paste everything below into your child theme's style.css
   (Appearance → Theme File Editor → style.css)

   If the header comment block above already exists in your
   file, do NOT paste it twice — only paste from the
   "BRAND TOKENS" line downward.
   ════════════════════════════════════════════════ */


/* ── 1. BRAND TOKENS (colour + font variables) ── */
:root {
  --voiara-mocha:        #4A3B32; /* Deep Mocha Brown — primary */
  --voiara-alabaster:    #FDFBF7; /* Warm Alabaster — background */
  --voiara-latte:        #8C6D58; /* Soft Taupe / Rich Latte — accent */
  --voiara-latte-light:  #C4A896;
  --voiara-latte-xlight: #EDE3DC;
  --voiara-border:       rgba(74,59,50,0.12);
  --voiara-muted:        #9A8478;
}


/* ── 2. GOOGLE FONTS ──
   (also enqueued in functions.php; this @import is a fallback) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Montserrat:wght@300;400;500;600&display=swap');


/* ── 3. GLOBAL BASE ── */
body {
  font-family: 'Montserrat', sans-serif !important;
  background-color: var(--voiara-alabaster) !important;
  color: var(--voiara-mocha) !important;
  overflow-y: scroll;                 /* iOS Safari sticky-nav fix */
  -webkit-overflow-scrolling: touch;
}

/* Headings in Playfair Display */
h1, h2, h3, h4, h5, h6,
.entry-title, .product_title, .woocommerce-loop-product__title,
.wp-block-heading {
  font-family: 'Playfair Display', serif !important;
  color: var(--voiara-mocha) !important;
  font-weight: 500;
}


/* ── 4. HEADER / NAVIGATION ── */
.site-header,
.site-header-wrap,
#masthead {
  background-color: var(--voiara-alabaster) !important;
  border-bottom: 1px solid var(--voiara-border) !important;
}

/* Logo / site title */
.site-title, .site-branding a {
  font-family: 'Playfair Display', serif !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--voiara-mocha) !important;
}

/* Main menu links */
.main-navigation a,
.header-navigation a,
.menu-item a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--voiara-mocha) !important;
}
.main-navigation a:hover,
.menu-item a:hover {
  color: var(--voiara-latte) !important;
}


/* ── 5. BUTTONS ── */
.button, button, input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button.alt {
  background-color: var(--voiara-mocha) !important;
  color: var(--voiara-alabaster) !important;
  border: none !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px !important;
  padding: 12px 26px !important;
  transition: background-color 0.2s ease;
}
.button:hover, button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover {
  background-color: #3A2D26 !important;
}

/* Accent / secondary buttons */
.voiara-accent-btn,
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: var(--voiara-latte) !important;
  color: var(--voiara-alabaster) !important;
}

/* WhatsApp order button — keep it WhatsApp green */
.voiara-whatsapp-order,
.order-on-whatsapp,
a[href*="wa.me"].button {
  background-color: #25D366 !important;
  color: #ffffff !important;
}
.voiara-whatsapp-order:hover,
a[href*="wa.me"].button:hover {
  background-color: #1EB857 !important;
}


/* ── 6. WOOCOMMERCE PRODUCT CARDS ── */
.woocommerce ul.products li.product,
.wc-block-grid__product {
  background: #ffffff;
  border: 1px solid var(--voiara-border);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
  padding-bottom: 12px;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  border-color: var(--voiara-latte-light);
}

/* Product title on cards */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Playfair Display', serif !important;
  font-size: 14px !important;
  font-weight: 500;
  color: var(--voiara-mocha) !important;
  padding: 0 12px;
}

/* Price */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--voiara-mocha) !important;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif !important;
}

/* Category label above title */
.woocommerce ul.products li.product .posted_in,
.product_meta .posted_in a {
  color: var(--voiara-latte) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 9px;
}


/* ── 7. SINGLE PRODUCT PAGE ── */
.woocommerce div.product .product_title {
  font-family: 'Playfair Display', serif !important;
  color: var(--voiara-mocha) !important;
}
.woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--voiara-mocha) !important;
}

/* Sale badge */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background-color: var(--voiara-latte) !important;
  color: var(--voiara-alabaster) !important;
  border-radius: 2px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}


/* ── 8. VARIATION SWATCHES (size buttons + colour circles) ── */
.variations .button-variable-item,
.woo-variation-swatches .variable-item.button-variable-item {
  border: 1px solid rgba(74,59,50,0.25) !important;
  border-radius: 2px !important;
  color: var(--voiara-muted) !important;
  font-weight: 500;
}
.variations .button-variable-item.selected,
.woo-variation-swatches .variable-item.button-variable-item.selected {
  background-color: var(--voiara-mocha) !important;
  color: var(--voiara-alabaster) !important;
  border-color: var(--voiara-mocha) !important;
}
.woo-variation-swatches .variable-item.color-variable-item.selected {
  outline: 2px solid var(--voiara-mocha) !important;
  outline-offset: 2px;
}


/* ── 9. SIDEBAR FILTERS (BeRocket) ── */
.berocket_filter_widget .bapf_head h3,
.widget-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--voiara-mocha) !important;
}
.berocket_filter_widget a {
  color: var(--voiara-muted) !important;
}
.berocket_filter_widget a:hover {
  color: var(--voiara-mocha) !important;
}


/* ── 10. WISHLIST (YITH) heart ── */
.yith-wcwl-add-to-wishlist a,
.yith-wcwl-wishlistexistsbrowse a {
  color: var(--voiara-latte) !important;
}
.yith-wcwl-wishlistaddedbrowse i,
.yith-wcwl-add-to-wishlist .feedback i {
  color: #C95B5B !important;
}


/* ── 11. FOOTER ── */
.site-footer, #colophon {
  background-color: var(--voiara-mocha) !important;
  color: rgba(253,251,247,0.7) !important;
}
.site-footer a, #colophon a {
  color: rgba(253,251,247,0.55) !important;
}
.site-footer a:hover, #colophon a:hover {
  color: rgba(253,251,247,0.9) !important;
}
.site-footer h2, .site-footer h3,
#colophon h2, #colophon h3 {
  color: #FDFBF7 !important;
}


/* ── 12. TRUST STRIP (optional top bar) ── */
.voiara-trust-strip {
  background-color: var(--voiara-mocha);
  color: rgba(253,251,247,0.85);
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 8px 20px;
}


/* ── 13. LINKS ── */
a { color: var(--voiara-latte); }
a:hover { color: var(--voiara-mocha); }


/* ── 14. OCCASION BUCKETS (homepage tiles) ── */
.voiara-bucket {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.voiara-bucket:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(74,59,50,0.18);
}
.voiara-bucket-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #FDFBF7;
}


/* ── 15. MOBILE RESPONSIVENESS ── */
@media (max-width: 768px) {
  .woocommerce ul.products[class*="columns-"] li.product {
    width: 48% !important;
  }
  .main-navigation a, .menu-item a {
    font-size: 12px !important;
  }
}

/* CSS Grid fallback for very old Smart TV browsers */
@supports not (display: grid) {
  .woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
  }
}