/*
Theme Name: Bag Avenue (Shoptimizer Child)
Theme URI:
Description: Bag Avenue storefront — child theme of Shoptimizer. Brand palette and typography derived from the approved concept design.
Author: CommerceGurus
Author URI:
Template: shoptimizer
Version: 1.3.0
License:         	GNU General Public License v2 or later
License URI:     	http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   1. Brand tokens
   Keep this block in sync with design/assets/css/brand.css in the prototype.
   ========================================================================== */
:root {
  --ba-rose:        #C97278;
  --ba-rose-dark:   #B0575E;
  --ba-rose-deep:   #A8646A;
  --ba-rose-soft:   #E5B9BB;
  --ba-blush:       #F7E2E1;
  --ba-blush-light: #FCF0F0;

  --ba-cream:       #FDF8F5;
  --ba-sand:        #F6F0EA;
  --ba-ink:         #2B1A12;
  --ba-body:        #5A4A42;
  --ba-muted:       #8C7C74;
  --ba-line:        #EADFD8;

  --ba-gold:        #BE8C3A;
  --ba-gold-light:  #E3C173;
  --ba-gold-deep:   #8A5F14;

  /* Logo pink — brighter than the UI rose. Small accents only; large fills
     stay on --ba-rose so text keeps its contrast. */
  --ba-pink:        #E96B84;
  --ba-pink-dark:   #D4526C;
  --ba-whatsapp:    #25D366;

  --ba-font-display: "Cormorant Garamond", Georgia, serif;
  --ba-font-body:    "Jost", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ba-track-wide:   .18em;
}

/* ==========================================================================
   2. Typography
   Set the same families under Customizer > Typography so the editor matches.
   ========================================================================== */
body,
button, input, select, textarea,
.main-navigation ul li a {
  font-family: var(--ba-font-body);
}

h1, h2, h3,
.entry-title,
.section-title,
.product_title,
.site-title {
  font-family: var(--ba-font-display);
  color: var(--ba-ink);
  font-weight: 600;
  letter-spacing: .04em;
}

body { color: var(--ba-body); background-color: var(--ba-cream); }

/* ==========================================================================
   3. Top bar (announcement)
   ========================================================================== */
.top-bar {
  background-color: var(--ba-rose);
  color: #fff;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.top-bar a { color: #fff; }
.top-bar a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   4. Header + navigation
   ========================================================================== */
.site-header { background-color: var(--ba-blush-light); }

/* Shoptimizer prints an inline `height:38px` (22px on mobile) for the custom
   logo, which is far too small for the Bag Avenue lockup — the tagline stops
   being legible. Override it and size by width instead. */
.site-header .custom-logo-link img,
body.wp-custom-logo .site-header .custom-logo-link img {
  height: auto !important;
  width: 250px;
  max-width: 100%;
}
@media (max-width: 768px) {
  .site-header .custom-logo-link img,
  body.wp-custom-logo .site-header .custom-logo-link img { width: 190px; }
}

/* The logo's pink goes flat on the rose band — never place it there. */
.ba-band .custom-logo-link img { display: none; }

.main-navigation ul li a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--ba-track-wide);
  text-transform: uppercase;
  color: var(--ba-ink);
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: var(--ba-rose-dark);
}
.main-navigation ul li.current-menu-item > a::after,
.main-navigation ul li a:hover::after {
  background-color: var(--ba-rose);
}

.site-search .widget_product_search form::before { color: var(--ba-ink); }
.site-header-cart .count,
.header-account-title { color: var(--ba-ink); }

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.button,
button.button,
input[type="submit"],
.woocommerce #respond input#submit,
.wp-block-button__link,
.added_to_cart {
  background-color: var(--ba-rose);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--ba-track-wide);
  text-transform: uppercase;
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.button:hover,
button.button:hover,
input[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.wp-block-button__link:hover,
.added_to_cart:hover {
  background-color: var(--ba-rose-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(176, 87, 94, .28);
}

/* Secondary / outline buttons */
.button.alt-button,
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--ba-rose-dark);
  border: 1px solid var(--ba-rose);
}

a { color: var(--ba-rose-dark); }
a:hover { color: var(--ba-rose); }

/* ==========================================================================
   6. Product loop + single product
   ========================================================================== */
.woocommerce-loop-product__title,
.product_infos .product_title {
  color: var(--ba-ink);
}
.price, .amount, ins .amount { color: var(--ba-ink); font-weight: 600; }
.onsale, .wc-block-grid__product-onsale,
span.new-badge {
  background-color: var(--ba-rose);
  color: #fff;
  border: 0;
  border-radius: 3px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.star-rating span::before, .star-rating::before { color: var(--ba-gold); }

/* Category tiles built with the Shoptimizer product-categories block */
.wc-block-product-categories-list-item a,
.woocommerce ul.products li.product-category h2 {
  font-family: var(--ba-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ba-ink);
}

/* ==========================================================================
   7. Section headings with the gold rule
   Add class `ba-heading` to a Heading block to get the concept treatment.
   ========================================================================== */
.ba-heading {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ba-heading::after {
  content: "";
  display: block;
  width: 84px; height: 1px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, var(--ba-gold-light) 20%, var(--ba-gold) 50%, var(--ba-gold-light) 80%, transparent);
}

/* ==========================================================================
   8. Reusable brand blocks (CTA band, trust strip, values strip)
   Drop these classes on Group blocks to rebuild the concept sections.
   ========================================================================== */
.ba-band {
  background-color: var(--ba-rose);
  color: #fff;
  padding: 34px 0;
}
.ba-band h2, .ba-band h3 {
  font-family: var(--ba-font-display);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ba-band p { color: rgba(255, 255, 255, .88); margin: 0; }
.ba-band .button { background-color: #fff; color: var(--ba-rose-dark); }
.ba-band .button:hover { background-color: var(--ba-sand); color: var(--ba-rose-dark); }

.ba-trust {
  background: #fff;
  border: 1px solid var(--ba-line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(43, 26, 18, .08);
  margin-top: -42px;
  position: relative;
  z-index: 3;
}
.ba-trust strong {
  font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ba-ink);
}
.ba-trust p { font-size: 12.5px; color: var(--ba-muted); margin: 0; }

.ba-values { background-color: var(--ba-sand); }
.ba-values strong {
  font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ba-ink);
}
.ba-values p { font-size: 13.5px; color: var(--ba-muted); margin: 0; }

/* ==========================================================================
   9. Footer
   ========================================================================== */
.site-footer { background-color: #FBF4F1; color: var(--ba-body); }
.site-footer .widget-title,
.site-footer h2, .site-footer h3, .site-footer h4 {
  font-family: var(--ba-font-body);
  font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ba-ink);
}
.site-footer a { color: var(--ba-body); }
.site-footer a:hover { color: var(--ba-rose-dark); }
.site-info { border-top: 1px solid var(--ba-line); color: var(--ba-muted); }

/* ==========================================================================
   10. Floating WhatsApp button (see functions.php)
   ========================================================================== */
.ba-whatsapp-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 999;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--ba-whatsapp); color: #fff;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .38);
  transition: transform .25s ease;
}
.ba-whatsapp-fab:hover { transform: scale(1.07); color: #fff; }
.ba-whatsapp-fab svg { width: 28px; height: 28px; fill: currentColor; }

@media (max-width: 768px) {
  .ba-whatsapp-fab { right: 14px; bottom: 74px; }
}

/* ==========================================================================
   11. Homepage sections (front-page.php)
   Ported from design/assets/css/home.css. Keep the two in sync.
   ========================================================================== */

.ba-home .col-full { max-width: 1290px; margin: 0 auto; padding: 0 24px; }

.ba-section { padding: 64px 0; }
.ba-section--tight { padding-top: 0; }

/* --- hero --- */
.ba-hero {
  background: linear-gradient(180deg, #F3E5DA 0%, #EADACE 100%);
  padding: 56px 0 78px;
}
.ba-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}
.ba-eyebrow {
  display: inline-block;
  padding: 8px 20px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(185, 138, 75, .3);
  border-radius: 100px;
  color: var(--ba-rose-dark);
  font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
}
.ba-hero__title {
  margin: 22px 0 18px;
  font-family: var(--ba-font-display);
  font-size: clamp(48px, 7.4vw, 86px);
  line-height: .95;
  letter-spacing: .02em;
}
.ba-hero__line-1 { display: block; color: var(--ba-ink); }
.ba-hero__line-2 { display: block; color: var(--ba-rose-deep); }
.ba-hero__lede { max-width: 340px; font-size: 16px; color: #4A382E; margin: 0 0 30px; }

.ba-hero__media { position: relative; display: flex; justify-content: center; }
.ba-hero__bag-link { display: block; width: min(100%, 500px); }
.ba-hero__media img {
  width: 100%; height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 26px 44px rgba(74, 48, 34, .26);
}

/* Circular new-arrivals stamp */
.ba-stamp {
  position: absolute; top: 6%; right: -6px;
  width: 128px; height: 128px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background: rgba(255, 255, 255, .58);
  border: 1px solid var(--ba-gold-light);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .32);
  transition: transform .35s ease;
}
.ba-stamp:hover { transform: rotate(-4deg) scale(1.04); }
.ba-stamp span {
  display: block;
  font-family: var(--ba-font-display);
  font-size: 19px; line-height: 1.15; letter-spacing: .05em;
  color: var(--ba-rose-deep); text-transform: uppercase;
}
.ba-stamp small {
  display: block; margin-top: 7px;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ba-rose);
}

/* --- trust strip --- */
.ba-trust--grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 22px 0;
}
.ba-trust__item {
  padding: 4px 24px;
  border-left: 1px solid var(--ba-line);
  text-align: center;
}
.ba-trust__item:first-child { border-left: 0; }

/* --- category grid --- */
.ba-category-grid {
  display: grid;
  grid-template-columns: repeat(var(--ba-cols, 3), 1fr);
  gap: 20px;
  margin-top: 38px;
}
.ba-category-card {
  display: block;
  background: var(--ba-blush);
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.ba-category-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(43, 26, 18, .14); }
.ba-category-card__media { aspect-ratio: 1 / 1.05; overflow: hidden; background: #EFE2D8; }
.ba-category-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.ba-category-card:hover .ba-category-card__media img { transform: scale(1.05); }
.ba-category-card__body { padding: 16px 12px 20px; }
.ba-category-card h3 {
  font-family: var(--ba-font-body);
  font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ba-ink);
  margin: 0 0 12px;
}
.button--sm { padding: 8px 18px; font-size: 10px; }

/* --- new arrivals --- */
.ba-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 30px;
}
.ba-heading--left { text-align: left; }
.ba-heading--left::after { margin-left: 0; }
.ba-view-all {
  font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ba-rose-dark);
}
.ba-product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.ba-product-card { display: block; text-align: center; }
.ba-product-card__media {
  position: relative;
  background: #fff;
  border: 1px solid var(--ba-line);
  border-radius: 10px;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.ba-product-card:hover .ba-product-card__media {
  box-shadow: 0 18px 40px rgba(43, 26, 18, .14);
  transform: translateY(-5px);
}
.ba-product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ba-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--ba-rose); color: #fff;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 3px;
}
.ba-product-card h3 {
  font-family: var(--ba-font-body);
  font-size: 13.5px; font-weight: 500; color: var(--ba-ink);
  margin: 16px 0 5px;
  min-height: 2.8em;   /* set names run to two lines; keep prices aligned */
}
.ba-price { font-size: 14px; font-weight: 600; color: var(--ba-ink); margin: 0; }
.ba-price--tbc { font-weight: 400; font-style: italic; color: var(--ba-muted); }

/* --- CTA band --- */
.ba-band--cta { margin-top: 20px; }
.ba-band__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}
.ba-band__msg h2 { font-size: 24px; margin: 0 0 4px; }
.ba-band__msg p { font-size: 13px; }
.ba-band__msg--wa { border-left: 1px solid rgba(255, 255, 255, .35); padding-left: 30px; }
.ba-band__cta { white-space: nowrap; }

/* --- values strip --- */
.ba-values { padding: 34px 0; }
.ba-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ba-values__item { text-align: left; }
.ba-values__item strong { display: block; margin-bottom: 4px; }

/* --- responsive --- */
@media (max-width: 1024px) {
  .ba-product-grid { grid-template-columns: repeat(3, 1fr); }
  .ba-stamp { width: 104px; height: 104px; }
  .ba-stamp span { font-size: 16px; }
}

@media (max-width: 860px) {
  .ba-hero__inner { grid-template-columns: 1fr; }
  .ba-hero__media { order: -1; }
  .ba-hero__lede { max-width: none; }
  .ba-trust--grid { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .ba-trust__item:nth-child(odd) { border-left: 0; }
  .ba-band__msg--wa { border-left: 0; padding-left: 0; }
}

@media (max-width: 640px) {
  .ba-section { padding: 44px 0; }
  .ba-category-grid,
  .ba-product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ba-values__grid { grid-template-columns: repeat(2, 1fr); }
  .ba-stamp { top: 2%; right: 2px; width: 88px; height: 88px; }
  .ba-stamp span { font-size: 14px; }
  .ba-stamp small { display: none; }
}

/* ==========================================================================
   12. Reclaiming type and accents from Shoptimizer's Customizer CSS

   Shoptimizer renders its Typography and Colour settings through Kirki as an
   inline <style id="kirki-inline-styles"> block that is printed AFTER this
   stylesheet. Those rules use bare element selectors (h1 { font-family: Inter })
   so they win on document order at equal specificity.

   Structural colours are handled properly at the setting, in functions.php.
   What is left here is type and a few accents that live in Shoptimizer's
   "Typography 2.0" JSON settings, which are not worth overriding one by one.
   Each rule below is deliberately one step more specific than the Kirki rule it
   corrects -- no !important anywhere.
   ========================================================================== */

body h1, body h2, body h3, body h4, body h5,
body .entry-title,
body .section-title,
body .product_title,
body .site-title,
body .ba-heading,
body .ba-hero__title,
body .ba-band h2,
body .ba-band h3 {
  font-family: var(--ba-font-display);
}

body,
body p,
body .main-navigation ul li a,
body .button,
body input,
body select,
body textarea,
body .ba-product-card h3,
body .ba-category-card h3 {
  font-family: var(--ba-font-body);
}

/* Product and category card titles stay in the body face at small sizes --
   Cormorant is too fine to read at 12-13px. */
body .woocommerce-loop-product__title,
body ul.products li.product h2 {
  font-family: var(--ba-font-body);
}

/* Sale badge: Shoptimizer ships green, the brand accent is rose. */
body .onsale,
body .product-label,
body .wc-block-grid__product-onsale {
  background-color: var(--ba-rose);
  color: #fff;
}

/* Navigation sits on blush, so menu text is ink rather than white-on-black. */
body .main-navigation ul.menu > li > a,
body .main-navigation ul li a {
  color: var(--ba-ink);
}
body .main-navigation ul.menu > li > a:hover,
body .main-navigation ul li.current-menu-item > a {
  color: var(--ba-rose-dark);
}