/* =========================================
   wb-cio — base.css (full file)
   Global layout, header, drawers, hero, sections, cards, footer
   Theme-aware (light/dark/seasonal) via CSS variables
   ========================================= */

/* Reset & base */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
:root{
  --container: 1200px;
}

/* Header shell spacing */
.wbc-page{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

/* Utilities */
.wbc-center{display:flex;justify-content:center}
.wbc-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.6rem 1rem;border-radius:999px;border:1px solid var(--border);
  background:var(--surface,#fff);box-shadow:var(--shadow);font-weight:700
}
.wbc-btn--primary{background:var(--brand-burnt,#E17A30);color:#fff;border-color:transparent}

/* ================= Hero =================== */
.wbc-hero{
  position:relative;            /* <— NEW for overlay positioning */
  display:grid; grid-template-columns:1.1fr .9fr; gap:24px;
  max-width:var(--container); margin:24px auto; padding:0 24px
}
.wbc-hero__text h1{font-size:56px;line-height:1.05;margin:.2em 0}
.wbc-hero__text p{color:var(--muted);margin-bottom:16px}
.wbc-hero__image{
  aspect-ratio:1/1;border-radius:50%;box-shadow:var(--shadow);
  background:radial-gradient(circle at 30% 30%, var(--surface,#fff), var(--brand-tan));
}

/* Sections & grids */
.wbc-section{max-width:var(--container);margin:28px auto;padding:0 24px}
.wbc-section>h2{margin:0 0 12px 0}

/* Product cards */
.wbc-products{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px
}
.wbc-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column
}
.wbc-card__media{background:#fafafa;display:grid;place-items:center;min-height:160px}
.wbc-card__body{padding:12px}
.wbc-card__title{font-weight:700;display:block;margin-bottom:6px}
.wbc-card__price{font-weight:700}

/* Responsive tweak */
@media (max-width:900px){
  .wbc-hero{grid-template-columns:1fr}
}

/* ===== Hero Overlay (editable widget area) ===== */
.wbc-hero__overlay{
  position:absolute;
  z-index:3;
  right:clamp(24px,6vw,80px);
  top:clamp(80px,12vh,160px);
  max-width:360px;
  width:min(90vw,360px);
}
.wbc-hero__overlay .hero-overlay__widget{
  background:var(--surface, #fff);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 18px;
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}
.wbc-hero__overlay .hero-overlay__title{
  margin:0 0 .35rem 0;
  font-weight:700;
  font-size:clamp(18px,2.2vw,22px);
}
.wbc-hero__overlay .wp-block-button__link,
.wbc-hero__overlay a.button{
  background:var(--brand-burnt, #E17A30);
  color:#fff;
  border-radius:999px;
  padding:.55rem 1rem;
  font-weight:700;
  text-decoration:none;
  border:0;
  box-shadow:0 4px 14px rgba(225,122,48,.35);
}
.wbc-hero__overlay .wp-block-button__link:hover,
.wbc-hero__overlay a.button:hover{
  filter:brightness(.95);
}
@media (max-width:768px){
  .wbc-hero__overlay{
    right:16px;
    left:16px;
    top:auto;
    bottom:24px;
    margin:0 auto;
  }
}