/* FriscoGreen Organics - Fresh modern theme (no heavy gradients) */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f6fbff;
  --text:#0b1b2b;
  --muted:#546476;
  --border:rgba(11,27,43,.12);

  --blue:#1976D2;
  --blue-2:#4FC3F7;
  --green:#2E7D32;
  --green-2:#7CB342;
  --sun:#FBC02D;
  --earth:#8D5A2B;

  --radius:18px;
  --radius-sm:12px;
  --shadow: 0 10px 28px rgba(11,27,43,.08);
  --container: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%; background:var(--bg); color:var(--text); margin:0;}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.55;}
img{max-width:100%; display:block}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--green)}
.container{max-width:var(--container); margin:0 auto; padding:0 18px;}
.section{padding:56px 0;}
.section--soft{background:var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
h1,h2,h3{margin:0 0 10px; line-height:1.15}
p{margin:0 0 12px; color:var(--muted)}
.small{font-size:13px; color:var(--muted)}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:rgba(79,195,247,.18);
  border:1px solid rgba(0,0,0,0.15);
  color:var(--text);
  font-size:13px;
}

.topbar{
  height:4px;
  background: linear-gradient(90deg, var(--blue), var(--blue-2), var(--green-2));
}

/* Header */
.header{position:sticky; top:0; z-index:30; background:#fff; border-bottom:1px solid var(--border);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:62px; height:62px; object-fit:contain; background:#fff;}
.brand .name{font-weight:700; font-size:18px; color:var(--text); letter-spacing:.2px;}
.brand .sub{font-size:12px; color:var(--muted); margin-top:2px;}
.nav{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.nav a{font-weight:600; font-size:14px; color:var(--text); padding:8px 10px; border-radius:10px;}
.nav a:hover{background:rgba(25,118,210,.08); color:var(--blue);}
.nav a.active{background:rgba(46,125,50,.10); color:var(--green);}

/* Hero (white background for readability) */
.hero{padding:54px 0 34px; background:#fff;}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:center;}
.hero h1{font-size:40px; letter-spacing:-.4px;}
.hero .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:14px;
  border:1px solid var(--border);
  background:#fff; color:var(--text); font-weight:700;
  box-shadow: none;
}
.btn-primary{background:var(--blue); border-color:rgba(25,118,210,.45); color:#fff;}
.btn-primary:hover{background:#1565C0; color:#fff;}
.btn-ghost{background:#fff;}
.hero-card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  padding:16px;
}
.hero-card .row{display:flex; gap:12px; align-items:flex-start; margin:10px 0;}
.dot{width:12px; height:12px; border-radius:999px; margin-top:5px; background:var(--green-2);}
.dot.blue{background:var(--blue-2);}
.dot.sun{background:var(--sun);}

/* Cards */
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
.card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  padding:16px;
}
.icon-chip{
  width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(79,195,247,.18);
  border:1px solid rgba(0,0,0,0.15);
  margin-bottom:10px;
  font-size:18px;
}
.card:nth-child(3n+1) .icon-chip{background: rgba(124,179,66,.18); border-color: rgba(46,125,50,.18);}
.card:nth-child(3n+2) .icon-chip{background: rgba(251,192,45,.18); border-color: rgba(141,90,43,.18);}
.card h3{font-size:18px; margin-bottom:8px;}
.card p{margin:0; color:var(--muted);}

/* Product cards */
.product-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
.product-card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.product-card .thumb{height:160px; background:#fff; border-bottom:1px solid var(--border);}
.product-card .thumb img{width:100%; height:100%; object-fit:cover;}
.product-card .body{padding:14px 14px 16px;}
.product-card .body h3{margin:0 0 6px; font-size:18px;}
.product-card .body p{margin:0; color:var(--muted); font-size:14px;}

/* Gallery */
.gallery-grid{display:grid; grid-template-columns: repeat(4,1fr); gap:12px;}
.tile{
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow);
}
.tile img{width:100%; height:150px; object-fit:cover;}
.tile .cap{padding:10px 12px; font-size:13px; color:var(--muted);}

/* Footer */
.footer{border-top:1px solid var(--border); padding:28px 0; background:#fff;}
.footer-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px;}
.footer small{color:var(--muted);}
.footer .line{height:1px; background:var(--border); margin:14px 0;}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .grid-3, .product-grid{grid-template-columns: repeat(2,1fr);}
  .gallery-grid{grid-template-columns: repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  .grid-3, .product-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:1fr;}
  .hero h1{font-size:34px;}
}

/* Header logo sizing fix */
.brand img{
  width: 42px !important;
  height: 42px !important;
}
.header-inner{
  padding: 10px 0 !important;
}
.brand .name{
  font-size: 16px !important;
}
.brand .sub{
  font-size: 11px !important;
}

/* === HARD HEADER COMPACT FIX === */
.header{
  height: 72px !important;
}
.header-inner{
  height: 72px !important;
  padding: 0 !important;
  align-items: center !important;
}
.brand{
  align-items: center !important;
}
.brand img{
  width: 36px !important;
  height: 36px !important;
  max-height: 36px !important;
}
.brand .name{
  font-size: 15px !important;
  line-height: 1.1 !important;
}
.brand .sub{
  display: none !important; /* remove subtitle that causes height bloat */
}

/* Ensure hero starts immediately after header */
.hero{
  padding-top: 28px !important;
  margin-top: 0 !important;
}

/* Logo sizing: prevent any oversized logo in hero/banner */
.hero img, .hero svg{
  max-width: 260px;
  width: 100%;
  height: auto;
}
.brand img{
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
}

.header-inner{min-height:64px;}

.hero-logo{max-width:260px;height:auto;}

/* Hero/banner: blend with white-logo background + subtle border separation */
.hero{
  background:#ffffff !important;
  border-bottom: 1px solid var(--border) !important;
}
.section--soft{ background: var(--surface-2) !important; }

/* Bigger, bolder page titles */
.hero h1{
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.6px;
}
@media (max-width: 560px){
  .hero h1{ font-size: 36px; }
}

/* Badge readability: ensure text visible on colored pills */
.badge{
  background: rgba(25,118,210,.12) !important;
  border: 1px solid rgba(25,118,210,.22) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}

/* Footer separation */
.footer{
  border-top: 2px solid rgba(11,27,43,.16) !important;
  background: #ffffff !important;
}

/* === Banner/Header blending fix === */
.header{
  background:#ffffff !important;
  border-bottom: 1px solid rgba(11,27,43,.14) !important;
}
.hero{
  background:#ffffff !important;
  border-top: 1px solid rgba(11,27,43,.06) !important;
  border-bottom: 2px solid rgba(11,27,43,.14) !important;
  box-shadow: 0 6px 18px rgba(11,27,43,.06) !important;
}

/* === Badge visibility fix (Catalog, location pill, etc.) === */
.badge{
  background: #2E7D32 !important; /* dark green */
  border: 1px solid rgba(46,125,50,.55) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* v17 fixes */
/* Header logo larger but constrained */
.brand img{
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
}

/* Pleasant page titles */
.hero h1{
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px !important;
}
@media (max-width:560px){
  .hero h1{ font-size: 30px !important; }
}

/* Softer home headline */
.hero .home-title{
  font-size: 34px !important;
  font-weight: 750 !important;
}
@media (max-width:560px){
  .hero .home-title{ font-size: 28px !important; }
}

/* Contact cards */
.contact-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){
  .contact-wrap{ grid-template-columns: 1fr; }
}
.form-card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  padding:16px;

.form-card--form{
  background:#f3f4f6;
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}
.field label{
  font-weight:600;
  font-size:14px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}
.field textarea{
  min-height:140px;
  resize:vertical;
}
}

/* v18: Header logo visibility */
.brand img{
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
}

/* v19: select styling */
select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border: 1px solid rgba(11,27,43,.18);
  outline:none;
  font-size:14px;
  background:#fff;
}
select:focus{
  border-color: rgba(25,118,210,.55);
  box-shadow: 0 0 0 3px rgba(79,195,247,.22);
}


/* v20: Green background for section titles */
.section-title h2,
.section h2{
  display: inline-block;
  background: rgba(46,125,50,0.12);
  color: #1B5E20;
  padding: 6px 14px;
  border-radius: 10px;
  font-weight: 700;
}

/* tighten spacing so pills don't look bulky */
.section-title{ margin-bottom: 16px; }

/* v21: Page title pills (inner pages only) */
.hero h1{
  display:inline-block;
  background:#2E7D32;
  color:#ffffff;
  padding:6px 14px;
  border-radius:999px;
  font-weight:650;
  font-size:20px;
  letter-spacing:-0.2px;
}
@media (max-width:560px){
  .hero h1{ font-size:19px; padding:6px 12px; }
}

/* Home hero title should be normal black on white */
.home-hero .home-h1{
  background: transparent !important;
  color: var(--text) !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 800 !important;
  font-size: 34px !important;
  letter-spacing: -0.5px !important;
  display:block !important;
}
@media (max-width:560px){
  .home-hero .home-h1{ font-size: 28px !important; }
}

/* v21: Contact form polish */
.form-card{
  background:#f5f6f7 !important;
}
.form-card input, .form-card textarea, .form-card select{
  background:#ffffff !important;
}
.form-row{
  margin-bottom: 14px !important;
}