@import url('https://fonts.googleapis.com/css2?family=BBH+Hegarty&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

:root{
  --mint:#A7C6C8;
  --rust:#9B6959;
  --main-pink:#FFBFAD;
  --vanilla-cream:#FFF3ED;
  --charcoal:#3A3E42;
  --white:#ffffff;
  --footer:#F9C7CF;
  --sage:#99A459;
  --overlay: rgba(0,0,0,.35);
}

/* ✅ Safer reset (doesn't break bootstrap spacing as much) */
*,
*::before,
*::after{
  box-sizing: border-box;
}

html, body{
  height:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  min-height:100vh;
  font-family:"Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--charcoal);      /* ✅ default text color */
  background: var(--white);
}

/* =========================
   HEADER / LOGO BAR
========================= */
.logo-bar{
  background: var(--mint);
}

.brand-logo{
  color: var(--white);
  font-weight: 700;
}

.brand-logo:hover{
  color: var(--white);
  opacity: .9;
}

/* =========================
   HERO 3-COLUMN LAYOUT
   (Works for 4/4/4 columns)
========================= */
main{
  flex: 1 1 auto;
  display:flex;
}

.hero-row{
  flex: 1 1 auto;
  min-height: 0; /* important for flex children */
}

.hero-panel{
  min-height: 100%;
  display:flex;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* overlay area fills its panel */
.hero-overlay{
  width:100%;
  height:100%;
  display:flex;
  background: var(--overlay);
}

/* Center panel stays white with dark text */
.hero-center{
  background: var(--white);
  color: var(--charcoal);
}
.hero-center h1,
.hero-center p,
.hero-center .small{
  color: var(--charcoal);
}

/* Make hero row fill the viewport between header and footer */
body.d-flex.flex-column.min-vh-100 main{
  flex: 1 1 auto;
}

/* =========================
   BUTTON STYLES
========================= */
.btn-shop,
.btn-contact{
  padding: 12px 24px;
  font-size: 16px;
  text-transform: uppercase;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .5px;
}

.btn-shop{
  background: var(--white);
  border: 2px solid var(--sage);
  color: var(--sage);
}

.btn-shop:hover{
  background: var(--sage);
  color: var(--white);
}

.btn-contact{
  background: var(--sage);
  border: 2px solid var(--white);
  color: var(--white);
}

.btn-contact:hover{
  filter: brightness(.95);
}

a{
  color:#fff;
}
/* =========================
   FOOTER
========================= */
footer.footer{
  margin-top: 0 !important;
  background: var(--sage);
}

footer a{
  color: var(--white);
  text-decoration: underline;
}

/* =========================
   MODALS (DIFFERENT BACKGROUNDS)
========================= */
.modal-title{
  text-align:center;
  width:100%;
  font-family:"BBH Hegarty", sans-serif;
}

.modal-shop{
  background:#ac8da9;
  color: var(--white);
}

.modal-contact{
  background: var(--sage);
  color: var(--white);
}

/* Make modal content readable */
.modal-shop .card,
.modal-contact .card{
  background: transparent;
  border-color: rgba(255,255,255,.35);
}

.rounded{
  margin-bottom:15px;
}
/* Shop product text – remove heavy ALL CAPS on paragraphs (looks too loud) */
.product-description{
  text-transform:none;
  font-weight:400;
  text-shadow:none;
}


.card-header{
  margin-bottom:15px;
}
/* If you want ONLY titles/prices uppercase */
.card-header,
.product-price{
  text-transform:uppercase;
  font-weight:700;
  
}

/* Center all content inside product cards */
.product-card {
  text-align: center;
}

/* Product title */
.product-card .card-header {
  font-weight: 600;
  letter-spacing: 0.5px;
  text-align: center;
}

/* Product price */
.product-card .product-price {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Product description */
.product-card .product-description {
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

/* Center the button inside footer */
.product-card .card-footer {
  display: flex;
  justify-content: center;
  background: transparent; /* optional */
  border-top: none;        /* optional */
}

/* Optional: button styling */
.product-card .btn {
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 30px;
}







/* =========================
   RESPONSIVE
========================= */

/* On mobile, stacks the 3 panels */
@media (max-width: 991.98px){
  .hero-panel{
    min-height: 33vh;
  }
}

/* Shop modal: better width on larger screens */
@media (min-width: 992px){
  .modal-dialog{
    max-width: 80%;
  }
}

/* Product grid in modal: 3 columns desktop, 2 columns tablet, 1 column mobile */
@media (max-width: 991.98px){
  .product-col{
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 575.98px){
  .product-col{
    flex: 0 0 100%;
    max-width: 100%;
  }
}