/* ============================================================
   MIRA — refined editorial theme layer
   Warm paper base, richer earthy color accents.
   Bricolage Grotesque display + Hanken Grotesk body.
   ============================================================ */

:root {
  --bone:   #f4f1ea;   /* primary paper background */
  --sand:   #ece7dc;   /* secondary surface / panels */
  --ink:    #1b1a17;   /* warm near-black text */
  --ink-2:  #55524a;   /* secondary text */
  --muted:  #8c887c;   /* tertiary text / captions */

  /* accent palette — earthy, saturated-but-grown-up */
  --sage:   #6f7b5d;
  --forest: #3f4d31;
  --clay:   #c06a3e;   /* terracotta */
  --ochre:  #c7972f;   /* golden */
  --blue:   #4f6579;   /* dusty blue */
  --berry:  #9e3a44;   /* muted red (sale) */

  /* soft tints for color-blocked surfaces */
  --tint-sage: #e7ebe0;
  --tint-clay: #f3e6dc;
  --tint-blue: #e3e9ed;

  --line:   rgba(27,26,23,.14);
  --line-2: rgba(27,26,23,.28);
  --white:  #ffffff;

  --shadow-soft: 0 14px 34px -20px rgba(27,26,23,.32);
  --radius: 8px;
  --radius-lg: 18px;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body.wp-theme-botiga {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--bone);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5,
.site-title,
.botiga-wc-loop-product__title,
.woocommerce-loop-product__title,
.product_title,
.entry-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
}

p, li, .price, button, input, select, textarea { font-family: var(--font-body); }
p, li { color: var(--ink-2); }

a { color: var(--ink); text-decoration-color: var(--line-2); text-underline-offset: .2em; transition: color .2s ease; }
a:hover { color: var(--clay); }

::selection { background: var(--ochre); color: var(--ink); }

/* ---------- Header / nav ---------- */
.site-header { background: rgba(244,241,234,.86); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-title a { color: var(--ink) !important; font-weight: 700; letter-spacing: -.02em; }
.site-description { display: none !important; }   /* hide tagline text in header */

.botiga-dropdown.main-navigation .menu > li > a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .96rem;
  color: var(--ink);
  position: relative;
}
.botiga-dropdown.main-navigation .menu > li > a::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 0; height: 2px; background: var(--clay); transition: width .25s ease;
}
.botiga-dropdown.main-navigation .menu > li > a:hover::after,
.botiga-dropdown.main-navigation .menu > li.current-menu-item > a::after { width: 100%; }
.botiga-dropdown.main-navigation .menu > li.current-menu-item > a { color: var(--clay); }

#site-header-cart .botiga-menu-cart-count,
.botiga-header-cart-count span { background: var(--clay) !important; color: var(--bone) !important; }

/* ---------- Buttons ---------- */
.wp-block-button__link,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit,
button.single_add_to_cart_button,
.button.add_to_cart_button {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: .95rem !important;
  background: var(--ink) !important;
  color: var(--bone) !important;
  border: 1px solid var(--ink) !important;
  border-radius: var(--radius) !important;
  padding: .8em 1.7em !important;
  box-shadow: none !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .15s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
button.single_add_to_cart_button:hover,
.button.add_to_cart_button:hover {
  background: var(--clay) !important;
  border-color: var(--clay) !important;
  color: var(--bone) !important;
  transform: translateY(-1px);
}
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.mira-ghost {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
}
.wp-block-button__link.mira-ghost:hover {
  background: var(--ink) !important;
  color: var(--bone) !important;
  border-color: var(--ink) !important;
}

/* ---------- Product cards ---------- */
.woocommerce ul.products li.product,
ul.products li.product {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px 20px !important;
  box-shadow: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
  border-color: var(--clay);
}
.woocommerce ul.products li.product img,
ul.products li.product .loop-image-wrap img { border-radius: 5px; background: var(--sand); }
.botiga-wc-loop-product__title,
.woocommerce-loop-product__title {
  font-size: 1.08rem !important;
  font-weight: 600 !important;
  margin-top: .6em !important;
  color: var(--ink) !important;
}
.woocommerce ul.products li.product .price,
.price { color: var(--ink) !important; font-weight: 600 !important; font-size: 1rem !important; }
.woocommerce ul.products li.product .price del { color: var(--muted) !important; }
.woocommerce ul.products li.product .price ins { color: var(--berry) !important; text-decoration: none; }

/* badges */
.woocommerce span.onsale, .botiga-badge {
  background: var(--berry) !important; color: var(--bone) !important;
  border: none !important; border-radius: 999px !important;
  font-family: var(--font-body) !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: .04em; font-size: .7rem !important;
}

/* single product */
.single-product .product_title { font-size: clamp(2rem, 4vw, 3rem); }
.single-product p.price, .single-product .price { font-size: 1.4rem !important; }

/* customer upload field (Bags & Accessories) */
.wau_wrapper_div {
  background: var(--tint-clay);
  border: 1px solid var(--clay);
  border-radius: var(--radius);
  padding: 18px; margin: 18px 0;
}
.wau_wrapper_div label { font-weight: 600; color: var(--ink); display:block; margin-bottom:.5em; }

/* ============================================================
   HOMEPAGE SECTIONS
   ============================================================ */

/* HERO — warm panel with a subtle color wash */
.mira-hero {
  position: relative;
  border-radius: var(--radius-lg);
  margin: 10px auto 0;
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.4rem, 5vw, 4rem) !important;
  background:
    radial-gradient(70% 90% at 88% 8%, rgba(192,106,62,.16), transparent 60%),
    radial-gradient(70% 90% at 6% 100%, rgba(111,123,93,.18), transparent 60%),
    linear-gradient(165deg, #efe9dc, var(--sand));
  border: 1px solid var(--line);
  color: var(--ink);
}
.mira-hero h1 {
  font-size: clamp(2.7rem, 6.6vw, 5.1rem) !important;
  font-weight: 700 !important;
  margin: 0 0 .35em !important;
  color: var(--ink) !important;
}
.mira-hero h1::after { content: "."; color: var(--clay); }
.mira-hero .mira-hero-sub {
  font-size: clamp(1.02rem, 1.8vw, 1.22rem) !important;
  max-width: 46ch; margin-inline: auto; color: var(--ink-2) !important; font-weight: 400;
}

/* SECTION HEADINGS */
.mira-section h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); text-align:center; }
.mira-eyebrow {
  display:inline-block;
  font-family: var(--font-body); font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; font-size:.72rem; color: var(--clay);
}

/* CATEGORY SHOWCASE — soft color-blocked cards */
.mira-cat-card {
  border: 1px solid var(--line);
  border-top-width: 4px;
  border-radius: var(--radius);
  padding: clamp(1.6rem,3vw,2.4rem) !important;
  min-height: 190px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition: transform .2s ease, box-shadow .2s ease;
  color: var(--ink);
}
.mira-cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.mira-cat-card h3 { font-size: clamp(1.35rem,2.4vw,1.85rem); margin:0; font-weight: 700; }
.mira-cat-card h3 a { color: var(--ink); text-decoration: none; }
.mira-cat-card p { margin:.45em 0 0; color: var(--ink-2); font-size: .96rem; }
.mira-cat--apparel { background: var(--tint-sage); border-top-color: var(--sage); }
.mira-cat--wall    { background: var(--tint-clay); border-top-color: var(--clay); }
.mira-cat--bags    { background: var(--tint-blue); border-top-color: var(--blue); }
.mira-cat--apparel h3 a:hover { color: var(--forest); }
.mira-cat--wall    h3 a:hover { color: var(--clay); }
.mira-cat--bags    h3 a:hover { color: var(--blue); }
.mira-cat-emoji { display: none; }

/* HOW IT WORKS — filled color numerals */
.mira-step { text-align:center; }
.mira-step .mira-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:50%;
  font-family: var(--font-display); font-weight:700; font-size:1.45rem;
  color: var(--bone); margin-bottom:.7em; border: none;
}
.mira-step:nth-child(1) .mira-num { background: var(--clay); }
.mira-step:nth-child(2) .mira-num { background: var(--sage); }
.mira-step:nth-child(3) .mira-num { background: var(--blue); }
.mira-step h3 { font-size:1.25rem; font-weight: 700; }
.mira-step p { color: var(--ink-2); }

/* CLOSING CTA BAND — rich forest block */
.mira-cta {
  border-radius: var(--radius-lg);
  padding: clamp(2.8rem,6vw,4.8rem) !important;
  text-align:center;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(192,106,62,.35), transparent 55%),
    linear-gradient(160deg, var(--forest), #2f3a25);
  color: var(--bone);
}
.mira-cta h2 { font-size: clamp(2rem,4.5vw,3.2rem) !important; color: var(--bone) !important; }
.mira-cta p { color: rgba(244,241,234,.82) !important; }
.mira-cta .wp-block-button__link {
  background: var(--bone) !important; color: var(--ink) !important; border-color: var(--bone) !important;
}
.mira-cta .wp-block-button__link:hover { background: var(--clay) !important; color: var(--bone) !important; border-color: var(--clay) !important; }

/* ---------- Footer ---------- */
.site-footer, .bhfb-footer { background: var(--ink); color: rgba(244,241,234,.72); }
.site-footer a, .bhfb-footer a, .botiga-credits a { color: var(--bone); }
.site-footer a:hover { color: var(--clay); }

/* ---------- Entrance motion (quiet) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .mira-hero > *, .mira-section > * { animation: mira-rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .mira-hero > *:nth-child(2){ animation-delay:.07s }
  .mira-hero > *:nth-child(3){ animation-delay:.14s }
  @keyframes mira-rise { from { opacity:0; transform: translateY(12px) } to { opacity:1; transform:none } }
}