/*
Theme Name: Mug & Bloom
Theme URI: https://mugandbloom.com
Description: A lightweight Storefront child theme for Mug & Bloom.
Author: Mug & Bloom
Template: storefront
Version: 1.0.3
Text Domain: mug-and-bloom
*/

:root {
  --mb-ink: #183127;
  --mb-forest: #274f3d;
  --mb-sage: #9eae8e;
  --mb-cream: #f8f3e9;
  --mb-paper: #fffdf8;
  --mb-rose: #c98f8b;
  --mb-gold: #c39652;
  --mb-line: rgba(24, 49, 39, .14);
  --mb-shadow: 0 18px 50px rgba(24, 49, 39, .1);
}

html { scroll-behavior: smooth; }
body {
  color: var(--mb-ink);
  background: var(--mb-paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}
h1, h2, h3, h4, .site-title {
  color: var(--mb-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.025em;
}
a { color: var(--mb-forest); }
a:hover { color: #10241b; }
.col-full { max-width: 1240px; padding-inline: 24px; }
.site-content .col-full { max-width: 1240px; }

.mb-announcement {
  padding: 8px 20px;
  color: white;
  background: var(--mb-forest);
  font-size: 13px;
  letter-spacing: .035em;
  text-align: center;
}
.mb-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--mb-line);
  background: rgba(255,253,248,.96);
}
.mb-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 84px;
  gap: 24px;
}
.mb-header__inner::before,
.mb-header__inner::after,
.mb-values::before,
.mb-values::after,
.mb-story::before,
.mb-story::after { display: none !important; content: none !important; }
.mb-brand {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 11px;
  color: var(--mb-ink);
  text-decoration: none !important;
}
.mb-brand img { width: 34px; height: 34px; }
.mb-brand__name { font: 500 27px/1 Georgia, serif; letter-spacing: -.03em; }
.mb-nav { display: flex; gap: 24px; align-items: center; }
.mb-nav a, .mb-header__actions a {
  color: var(--mb-ink);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}
.mb-header__actions { justify-self: end; display: flex; gap: 18px; align-items: center; }
.mb-cart { padding: 9px 14px; border: 1px solid var(--mb-line); border-radius: 999px; }

.mb-hero {
  min-height: 660px;
  display: grid;
  align-items: center;
  background-color: var(--mb-cream);
  background-image: linear-gradient(90deg, rgba(248,243,233,.96) 0%, rgba(248,243,233,.88) 29%, rgba(248,243,233,.05) 58%), url('assets/images/hero-botanical-mugs.webp');
  background-position: center, center;
  background-size: cover;
}
.mb-hero__copy { max-width: 560px; padding: 80px 0; }
.mb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--mb-forest);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mb-eyebrow:before { content: ""; width: 34px; height: 1px; background: var(--mb-gold); }
.mb-hero h1 { margin: 0 0 22px; max-width: 540px; font-size: clamp(48px, 6vw, 78px); line-height: .98; }
.mb-hero p { max-width: 470px; margin-bottom: 32px; font-size: 18px; }
.mb-button, .button, button, input[type="submit"], .added_to_cart {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  color: #fff !important;
  background: var(--mb-forest) !important;
  font-weight: 750;
  text-decoration: none !important;
  transition: transform .2s ease, background .2s ease;
}
.mb-button:hover, .button:hover, button:hover, input[type="submit"]:hover { transform: translateY(-1px); background: #183b2c !important; }
.mb-button--light { color: var(--mb-ink) !important; background: white !important; }

.mb-section { padding: 92px 0; }
.mb-section--cream { background: var(--mb-cream); }
.mb-section__head { max-width: 680px; margin: 0 auto 42px; text-align: center; }
.mb-section__head h2 { margin: 0 0 14px; font-size: clamp(36px, 4vw, 52px); }
.mb-section__head p { margin: 0; color: #53665e; font-size: 17px; }
.mb-collections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.mb-collection {
  position: relative;
  min-height: 330px;
  display: flex;
  align-items: end;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--mb-line);
  border-radius: 22px;
  background: var(--mb-paper);
  box-shadow: 0 8px 30px rgba(24,49,39,.06);
  text-decoration: none !important;
}
.mb-collection:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 76% 25%, var(--accent), transparent 44%); opacity: .8; }
.mb-collection:after { content: "❀"; position: absolute; right: 24px; top: 22px; color: var(--mb-forest); font: 90px/1 Georgia, serif; opacity: .18; transform: rotate(12deg); }
.mb-collection__copy { position: relative; z-index: 1; }
.mb-collection h3 { margin: 0 0 6px; font-size: 31px; }
.mb-collection span { color: #52645d; font-size: 14px; }

.mb-values { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.mb-value { text-align: center; padding: 8px 24px; }
.mb-value__icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 18px; border: 1px solid var(--mb-line); border-radius: 50%; color: var(--mb-forest); font-size: 21px; }
.mb-value h3 { margin: 0 0 8px; font-size: 23px; }
.mb-value p { margin: 0; color: #5d6e67; font-size: 14px; }

.mb-story { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.mb-story__art { min-height: 470px; border-radius: 24px; background: linear-gradient(145deg,#c6d0b9,#f0d8cd 56%,#d9b96d); position: relative; overflow: hidden; }
.mb-story__art:before { content:""; position:absolute; width:280px; height:280px; border: 2px solid rgba(255,255,255,.65); border-radius: 50%; left: -40px; bottom:-20px; }
.mb-story__art:after { content:"BOTANICAL\A ART FOR\A EVERYDAY RITUALS"; white-space:pre; position:absolute; inset:0; display:grid; place-items:center; color:white; font:500 33px/1.15 Georgia,serif; text-align:center; letter-spacing:.03em; text-shadow:0 2px 20px rgba(24,49,39,.2); }
.mb-story h2 { margin: 0 0 20px; font-size: clamp(38px,4vw,56px); }
.mb-story p { color:#53665e; font-size:17px; }

.site-main { margin-bottom: 0; }
.mb-home .site-main { margin: 0; }
.mb-products ul.products, ul.products { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.mb-products ul.products:before, .mb-products ul.products:after, ul.products:before, ul.products:after { display:none; }
ul.products li.product { width: auto !important; margin: 0 !important; text-align:left; }
ul.products li.product img { border-radius: 18px; background: var(--mb-cream); }
ul.products li.product .woocommerce-loop-product__title { color:var(--mb-ink); font:500 20px/1.25 Georgia,serif; }
.price { color:var(--mb-forest) !important; font-weight:750 !important; }

.mb-newsletter { padding: 72px 24px; color: white; background: var(--mb-forest); text-align:center; }
.mb-newsletter h2 { color:white; margin:0 0 12px; font-size:42px; }
.mb-newsletter p { max-width:570px; margin:0 auto 28px; color:rgba(255,255,255,.82); }
.mb-newsletter form { display:flex; max-width:540px; margin:auto; gap:10px; }
.mb-newsletter input[type="email"] { flex:1; min-height:50px; padding:0 18px; border:0; border-radius:999px; background:white; }

.mb-footer { padding: 58px 0 28px; background:#10271e; color:rgba(255,255,255,.74); }
.mb-footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:60px; }
.mb-footer .mb-brand { color:white; justify-self:start; margin-bottom:16px; }
.mb-footer h3 { color:white; font:700 13px/1.2 Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.mb-footer a { display:block; margin:8px 0; color:rgba(255,255,255,.72); text-decoration:none; }
.mb-footer__bottom { margin-top:42px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:12px; }

.woocommerce-breadcrumb { margin-top:24px; font-size:12px; }
.woocommerce-message, .woocommerce-info { border-left-color:var(--mb-forest); background:var(--mb-cream); }
input, textarea, select { border-radius:10px; border:1px solid var(--mb-line); background:white; }

@media (max-width: 900px) {
  .mb-nav { display:none; }
  .mb-header__inner { grid-template-columns:1fr auto; min-height:70px; }
  .mb-brand { justify-self:start; }
  .mb-header__actions a:first-child { display:none; }
  .mb-hero { min-height:640px; background-image:linear-gradient(90deg,rgba(248,243,233,.97),rgba(248,243,233,.74)),url('assets/images/hero-botanical-mugs.webp'); background-position:center; }
  .mb-hero__copy { padding:72px 0; }
  .mb-collections, .mb-values { grid-template-columns:1fr; }
  .mb-story { grid-template-columns:1fr; gap:36px; }
  .mb-story__art { min-height:340px; }
  .mb-products ul.products, ul.products { grid-template-columns:repeat(2,1fr); }
  .mb-footer__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px) {
  .col-full { padding-inline:18px; }
  .mb-brand__name { font-size:23px; }
  .mb-hero { min-height:590px; background-position:64% center; }
  .mb-hero h1 { font-size:48px; }
  .mb-section { padding:68px 0; }
  .mb-collections { gap:14px; }
  .mb-collection { min-height:240px; }
  .mb-products ul.products, ul.products { gap:14px; }
  .mb-newsletter form { flex-direction:column; }
  .mb-footer__grid { grid-template-columns:1fr; gap:28px; }
}