:root {
  --brand:#e3000f;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --card:#f8fafc;
  --topbars-h:72px;

  --gold-h: 36px;
  --header-h: 120px;
  --hg-h: calc(var(--gold-h) + var(--header-h) - 20px);
  --nav-h: 48px;
}

    *{box-sizing:border-box}
    html,body{margin:0;height:100%;scroll-behavior:smooth}
    body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
    a{color:var(--brand);text-decoration:none}
    .container{max-width:1120px;margin:0 auto;padding:0 20px}
    header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid #e2e8f0}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
    .brand{display:flex;gap:12px;align-items:center}
    .brand img{height:36px;width:36px;border-radius:8px;object-fit:cover}
    .brand-name{font-weight:700;letter-spacing:.2px}
    .cta{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border:none;padding:10px 16px;border-radius:12px;font-weight:600}
    .cta:hover{opacity:.9}
	.error{ display:none; color:#e01e2d; }
	.error.show{ display:block !important; }
	
	/* Add breathing room so anchors don't hide under fixed bars */
	section[id], nav[id], footer[id], header[id]{
	scroll-margin-top: calc(var(--hg-h) + var(--nav-h) + 8px); /* when bars are visible */
	}
	body.hg-hidden section[id],
	body.hg-hidden nav[id],
	body.hg-hidden footer[id],
	body.hg-hidden header[id]{
	scroll-margin-top: calc(var(--nav-h) + 8px);               /* when bars are hidden */
	}
	/* make text sit above the image */
	.hero * {
	position: relative;
	z-index: 1;
	}
	
	/* Force right alignment */
	.hero .hero-grid{
		display:flex !important;
		flex-direction: row;
		justify-content:space-between; /* left + right cards */
		align-items:center;
		min-height:500px;
	}


    .badge{display:inline-block;background:#fee2e2;color:#991b1b;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
    h1{font-size:44px;line-height:1.05;margin:.4em 0}
    .sub{font-size:18px;color:var(--muted);max-width:52ch}

	.hero {
	position: relative;
	background: url('logos/Ontario-Seed-Home-Hardware-Seed-Wall.jpg') center top / cover no-repeat;
	height: 700px; /* adjust for taller or shorter image */
	min-height: 400px;
	display: block;
	align-items: center;
	justify-content: flex-end; /* push the card to the right */
	padding: 40px 80px; /* top/bottom + left/right space inside hero */
	}
	
.hero-card{
  background:#e01e2d;
  color:#fff;
  border-radius:16px;
  padding:40px 40px;      /* smaller padding = smaller box */
  max-width:420px;        /* make the box narrower */
  width:100%;

  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center; /* or center if you prefer */
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}

.hero-card img{
  width:100%;        /* image width follows box width */
  height:auto;       /* keep aspect ratio */
  max-height:180px;  /* cap height so it doesn’t get huge */
  object-fit:contain;
}

    .hero-card div{background:#111827;border:1px solid #1f2937;border-radius:12px;padding:12px}
    .chips{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
    .chip{background:#e2e8f0;border-radius:999px;padding:8px 12px;font-size:14px}
    section{padding:48px 0}
    .card{background:var(--card);border:1px solid #e2e8f0;border-radius:16px;padding:18px}
    .card h3{margin:8px 0}
    .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
    .list{padding:0;margin:0;list-style:none;display:grid;gap:8px}
    .list li{display:flex;gap:8px;align-items:flex-start}
    .dot{height:8px;width:8px;border-radius:999px;background:var(--brand);margin-top:8px}
    .hours{font-variant-numeric:tabular-nums}
    .map{position:relative;padding-bottom:56%;height:0;border-radius:16px;overflow:hidden;border:1px solid #e2e8f0}
    .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
    footer{padding:28px 0;border-top:1px solid #e2e8f0;background:#fff}
    .footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
    .notice{font-size:12px;color:var(--muted)}
    @media (max-width:980px){.hero-grid,.grid-2,.cards,.footgrid{grid-template-columns:1fr}.hero-card{grid-template-columns:1fr}}
/* Heights you can tweak */

/* Hiding group is fixed; content offset via body padding */
#headerGroup{
  position: fixed; top:0; left:0; right:0; z-index:100;
  transform:translateY(0);
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), /* smooth both ways */
    box-shadow .2s ease;
  will-change: transform;
}
#headerGroup.header-hidden{ transform: translateY(calc(-1 * var(--hg-h))); }
body.hg-hidden .bar--nav {
  top:0;  /* already at top when bars hidden */
}

body:not(.hg-hidden) .bar--nav {
  top: var(--hg-h); /* slides down same distance as bars */
}
#headerGroup.header-stuck{ box-shadow: 0 6px 16px rgba(0,0,0,.06); }


/* Smooth body offset transition (no jump) */
body{
  padding-top: calc(var(--hg-h) + var(--nav-h));   /* when bars visible */
  transition: padding-top .4s cubic-bezier(0.4,0,0.2,1);
}
body.hg-hidden{
  padding-top: var(--nav-h);                        /* when bars hidden */
}


/* Bars */
.bar{
  height: var(--gold-h);
  display:flex; align-items:center; justify-content:center;
  padding: 0 12px; font-size:14px; line-height:1;
}
.bar--gold{ background:#f0cf30; color:#111; }
.bar a{ color:inherit; text-decoration:underline; margin:0 8px; }

/* Red logo header */
header.site-header.site-header--red{
  background:#e01e2d; color:#fff; border-bottom:1px solid #e2e8f0;
  height: var(--header-h);
}

/* Dark-red nav: always visible, sticks to top of viewport */
.bar--nav{
  background:#992029;
  position: fixed; left:0; right:0; top:0 ; z-index:110;
  height: var(--nav-h);
  display:flex; gap:20px; align-items:center; justify-content:center; flex-wrap:wrap;
  font-weight:600;
  transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1), background .2s ease;
}
.bar--nav a{ color:#fff; text-decoration:none; line-height:48px; padding:0 6px; }
.bar--nav a:hover{ opacity:.78; }

/* Layout for red header */
.site-header--red .header-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

/* Support block (left side) */
.support-inner {
  display: flex;
  align-items: center;
  gap: 10px; /* space between icon and text */
}

.phone-icon {
  font-size: 32px; /* adjust to match height of both text lines */
  line-height: 1;
  color: #fff;
}
.support-header{
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#fff;
  text-align:left;
  line-height:1.2;
}
.support-header h3{
  margin:0;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.3px;
  text-transform:uppercase;
}
.support-header .phone-link{
  font-size:22px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
}
.support-header .phone-link:hover{
  text-decoration:underline;
}

/* Keep the logo and OSC button aligned */
.site-header--red .brand img{
  display:block;
  height:60px;
  width:auto;
}

/*Logo bar goes bye bye*/
@media (max-width: 900px){
	#osc-logo{
		display: none;
		}
	.today-hours{
		margin-right: 50px;
		}
}
@media (max-width: 800px){
	.support-header .support-inner{
		display: none;
		}
	.promo-banner {
		height: 200px !important;
	}
	.promo-banner img {
		width:: 100%;
		height: auto;
		object-fit:contain;
	}
	
}
@media (max-width:600px){
  .site-header--red .header-content{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
  }
	.today-hours{
			display:none !important;
  }
  #getDirections {
	  font-size: 15px !important;
  }
	.promo-banner {
		height: 180px !important;
	}
	.promo-banner img {
		width:: 100%;
		height: auto;
		object-fit:contain;
	}
}

/* Step 1 – shrink the gap between buttons */
@media (max-width: 1100px){
  .bar--nav{
    gap: 14px;
  }
}

/* Step 2 – smaller gap + slightly smaller text */
@media (max-width: 900px){
  .bar--nav{
    gap: 8px;
  }
  .bar--nav a{
    font-size: 12px;
  }
}

.card img{
  display:block;
  width:100%;
  height:220px;              /* consistent image area */
  object-fit:contain;        /* fit any image nicely */
  border-radius:12px;
  margin-bottom:10px;
}

/* push the button to the bottom so text bottoms align */
.card .cta{
  margin-top:auto;
}

.today-hours{
  display:flex;
  flex-direction:column;
  text-align:left;
  line-height:1.2;
  color:#fff;
}

.today-hours h3{
  margin:0;
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.3px;
}

#hoursOpen{
  font-size:18px;
  font-weight:700;
}

#holiday{
	font-size:10px;
	font-weight:400;
}	

.today-hours a:hover{
  text-decoration:underline;
}

#hhmv div{
	font-size:12px;
	font-weight:400;
}

.list.hours li{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.list.hours .day{
  width: 80px;      /* adjusts alignment — change if needed */
  font-weight: 600;
}

.list.hours .time{
  flex: 1;
}
#scenetag {
	align-items: flex-start;
	text-align:center;
	font-size:15px;
}
.sale-image {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden; /* keeps the sale tag inside the rounded corners */
}

.sale-image img {
  width: 100%;
  display: block;
}

.sale-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #e01e2d; /* Home Hardware red */
  color: #fff;
  padding: 6px 12px;
  font-weight: 700;
  border-radius: 6px;
  font-size: 25px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
	
	/* Make services span wider */
	#services .container{
	max-width: 1400px;   /* increase from your default 1120px */
	}
	
	#money{
	font-size:20px;
	}
	
	.nav-links{
	display:flex;
	gap:20px;
	align-items:center;
	}
	
	.nav-toggle{
	display:none;
	background:transparent;
	border:1px solid rgba(255, 255, 255, .6);
	color:#fff;
	border-radius:6px;
	padding:6px 10px;
	font-size: 14px;
	cursor:pointer;
	}
	
	@media (max-width: 800px){
		.bar--nav{
		justify-content:space-between;
		padding:0 12px;
		}
	.nav-toggle{
		display:inline-flex;
		align-items:center;
		gap:6px;
		}
	.nav-links{
		position:absolute;
		top:var(--nav-h);
		left:0;
		right:0;
		background:#992029;
		flex-direction:column;
		align-items:flex-start;
		padding:8px 16px 12px;
		gap:6px;
		box-shadow:0 8px 16px rgba(0, 0, 0, .25);
		display:none;
		}
	.bar--nav.nav-open .nav-links{
		display:flex;
		}
	.bar--nav a{
		line-height:1.5;
		padding:4px;
		font-size:14px;
		}
	}
	/* Make services and products span wider on desktop */
	#services .container{
		max-width: 1400px;
	}
	#products .container{
		max-width: 1200px;
	}

	/* Desktop / tablet: normal grid layout for cards */
	.cards{
		display: grid;
		gap: 18px;
		grid-template-columns: repeat(4, minmax(220px, 1fr));
		margin-top: 20px;
	}

/* Mobile: horizontal side-scroll for Services and Products */

	@media (max-width: 720px){
		.services-grid, #products .cards{
			display: flex !important;
			gap: 12px;
			overflow-x: auto;
			padding-bottom: 8px;
			scroll-snap-type: x mandatory;
			-webkit-overflow-scrolling: touch;
		}

		.services-grid .card,
			#products .cards .card{
			flex: 0 0 80%;          /* width of each card in the strip */
			min-width: 260px;       /* don’t get too small */
			scroll-snap-align: start;
		}
	}

/* Left hero card */
.hero-card--left {
  background: #ffffffCC;
  color: #111;
  border-radius: 16px;
  padding-top: 20px;
  padding-left:30px;
  padding-right:30px;
  padding-bottom: 0;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
  order: 1;            /* left side */
  align-self: flex-start;
  margin-right: auto;   /* push it to the left */
  margin-top: 150px;
  margin-left: 150px;
}
.hero-card:not(.hero-card--left) {
  order: 2;            /* right side */
  margin-left: auto;    /* push it to the right */
  margin-right: 150px
}

@media (max-width: 1260px){

  /* Make the hero section behave like a normal container */
    .hero{
    justify-content: center;   /* center the whole block */
    padding: 40px 20px;        /* optional: less side padding on small screens */
	margin-bottom: 380px;
  }

  .hero-card{
	margin: 0 auto;            /* keeps the card centered within hero-grid */
    text-align: center;
  }
  .hero-card:not(.hero-card--left){
	margin-left: auto;
	margin-right: auto;
  }
  .hero .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;         /* background stays the same */
    min-height: 700px;    /* ensures the background stays tall enough */
    padding: 20px;
    margin-bottom: 0;
  }

  /* VIP card – sits at the top */
  .hero-card--left {
    position: static;
    width: 100%;
    max-width: 450px;
    margin-bottom: 0px;   /* spacing between VIP and Scene+ card */
	margin-top: 50px;
  }

  /* Scene+ card – sits directly under VIP card */
  .hero-card--scene {
    position: static;
    width: 100%;
    max-width: 450px;
    margin-top: 50px;
  }

}
.card h3 {
	font-size: 15px; /* or whatever you want */
	margin: 8px 0;
}
.cards  p{
	font-size:15px;
}
.not-landing-page {
  padding-top: 80px; /* adjust to taste */
}
.card {
	display: flex;
	flex-direction:column;
}
.card .cta {
	margin-top: auto;
	background:#005229 !important;
}
#getDirections {
	font-size: 20px;
}
#hoursCol{
	display: flex;
	flex-direction: column;
}
#hoursCol .contact-box {
	margin-top: auto;
}
.promo-banner {
  width: 100%;
  height: 250px;          /* ← set your fixed height */
  background: #000;       /* always full-width black */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;       /* hides any image overflow */
}

.promo-banner a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.promo-banner img {
  height: 100%;
  width: auto;            /* maintains perfect proportions */
  object-fit: contain;    /* keeps image centered nicely */
}

#vip .sub {
	width:100%;
	max-width:none;
	display: block;
}