/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* ...existing code... */

.topbar{
  position: relative;
  height: 67px;
  background: #e6e6e6;
  box-sizing: border-box;
}

/* left logo fixed inside the topbar and vertically centered */
.topbar .logo{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}
.topbar .logo img{
  height: 48px;
  width: auto;
  display: block;
}

/* centered search container */
.topbar .search{
  margin: 0 auto; /* centers horizontally */
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;                /* vertical centering of children */
  justify-content: space-between;     /* keep button to the right inside the box */
  padding: 6px 10px;
  box-sizing: border-box;
  background: #cfcfcf;                /* slightly darker than nav */
  width: min(900px, calc(100% - 160px)); /* responsive, leaves room for logo */
}

/* input styling: vertically centered */
.topbar .search input{
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  height: 28px;           /* explicit child height so vertical centering is exact */
  line-height: 28px;
  font-size: 16px;
  padding: 0 8px;
  box-sizing: border-box;
  margin: 0;
  border-radius: 4px;
}

/* smaller submit button, vertically centered */
.topbar .search button{
  flex: 0 0 auto;
  height: 28px;
  padding: 0 12px;
  font-size: 14px;
  border-radius: 4px;
  border: none;
  background: #111;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Sub-navigation: three sections, sits under the search bar */
.subnav {
  width: 100%;
  background: #f6f6f6;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.subnav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  box-sizing: border-box;
  gap: 12px;
}

/* left / center / right sections */
.subnav-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* center links look like navigation tabs */
.subnav-center a {
  color: #111;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 4px;
  font-weight: 500;
}
.subnav-center a:hover {
  background: rgba(0,0,0,0.06);
}

/* subdued links on left/right */
.subnav-left a,
.subnav-right a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}
.subnav-left a:hover,
.subnav-right a:hover {
  text-decoration: underline;
}

/* current page indicator */
.subnav-center a[aria-current="page"] {
  background: #e9e9e9;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06);
}

/* Responsive: stack center items on small screens */
@media (max-width: 640px) {
  .subnav-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px;
  }
  .subnav-center {
    justify-content: center;
    gap: 10px;
  }
}

/* responsive tweaks */
@media (max-width: 640px){
  .topbar .logo img{ height: 40px; }
  .topbar .search{ width: calc(100% - 96px); } /* keep room for logo and edges */
  .topbar .search input{ font-size: 14px; }
}

/* main nav placed under search, full-width dark stripe like Amazon */
.main-nav {
  width: 100%;
  background: #222;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  font-size: 15px;
}

/* container centers and limits width, nav-center takes full available space */
.main-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  box-sizing: border-box;
}

/* center section only — space links evenly across the center area */
.nav-center {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-evenly; /* evenly space the three links */
  gap: 20px;
  align-items: center;
}

/* link styling */
.main-nav a {
  color: #fff;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 4px;
}
.main-nav a:hover {
  background: rgba(255,255,255,0.06);
}
.main-nav a[aria-current="page"] {
  background: rgba(255,255,255,0.08);
  font-weight: 600;
}

/* responsive */
@media (max-width: 760px) {
  .main-nav-inner { padding: 8px 12px; }
  .main-nav { font-size: 14px; }
  .nav-center { justify-content: space-around; gap: 12px; }
}

#dealshead{
  text-align:center;
  font-size:150px;
  margin-top:120px;
}

#dealsectioncolorthing{
  width: 100%;
  height:100px;
  background-color: lightgrey;
  margin-top:120px;
  display:flex;
  justify-content:space-around;
}

#gridforhome{
  display:grid;

  grid-template-areas:
    "content1 content2 content3"
    "content4 content5 content6" 
    "content7 content8 content9"
    "content10 content11 content12";
    gap:20px;
}

/* -- deals section: headers aligned above their column content -- */
.deals-wrapper {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.deals-header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
  align-items: end;
  margin-bottom: 12px;
}

.deals-header h2 {
  margin: 0;
  font-size: 28px;              /* bigger text */
  font-weight: 800;             /* stronger emphasis */
  color: #111;
  background: #efefef;
  padding: 18px 16px;           /* larger box padding */
  min-height: 72px;             /* taller box */
  display: flex;                /* center text inside the larger box */
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  text-transform: none;         /* keep original capitalization */
  letter-spacing: 0.6px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.04);
}

.deals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* default styling for all grid cells */
.deals-grid > div {
  background: #fff;
  border: 1px solid #e3e3e3;
  box-sizing: border-box;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* larger item cards (1,2,3 and 7,8,9) */
.deals-grid > div:nth-child(1),
.deals-grid > div:nth-child(2),
.deals-grid > div:nth-child(3),
.deals-grid > div:nth-child(7),
.deals-grid > div:nth-child(8),
.deals-grid > div:nth-child(9) {
  min-height: 220px;   /* taller product card */
  padding: 16px;
}

/* smaller price blocks (4,5,6 and 10,11,12) */
.deals-grid > div:nth-child(4),
.deals-grid > div:nth-child(5),
.deals-grid > div:nth-child(6),
.deals-grid > div:nth-child(10),
.deals-grid > div:nth-child(11),
.deals-grid > div:nth-child(12) {
  min-height: 44px;    /* compact price row */
  padding: 6px 10px;
  background: #fafafa;
  border-color: #e8e8e8;
  font-weight: 700;
  font-size: 16px;
  align-items: center;
  justify-content: center;
}

/* center product content and images */
.deals-grid .product {
  display: flex;
  flex-direction: column;
  align-items: center;    /* horizontal centering */
  justify-content: center; /* vertical centering inside the product cell */
  text-align: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 8px;
}

.deals-grid .product img,
.deals-grid img {
  display: block;
  margin: 0 auto 10px;    /* center horizontally and keep spacing below */
  max-width: 100%;
  max-height: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* responsive: stack to single column on small screens */
@media (max-width: 760px) {
  .deals-header,
  .deals-grid {
    grid-template-columns: 1fr;
  }
  .deals-header h2 {
    text-align: left;
  }
}

/* footer styles */
.site-footer {
  background: #000;
  color: #fff;
  padding: 22px 0;
  font-size: 14px;
  box-sizing: border-box;
}
.site-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-footer .brand img {
  height: 34px;
  width: auto;
  display: block;
}
.site-footer .footer-links {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.site-footer .footer-links a {
  color: #dcdcdc;
  text-decoration: none;
}
.site-footer .footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}
.site-footer .copyright {
  color: #9a9a9a;
  font-size: 13px;
}

/* small-screen adjustments */
@media (max-width: 640px) {
  .site-footer .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .site-footer .brand img { height: 30px; }
}

/* Wireframe layout for About page: image left, description right, conclusion below */
.about-wireframe { padding: 32px 16px; }
.wf-block { max-width: 1100px; margin: 0 auto; }
.wf-row { display: flex; gap: 20px; align-items: flex-start; }
.wf-row.reverse { flex-direction: row-reverse; }
.wf-image { flex: 0 0 420px; height: 420px; background: #f3f3f3; display: flex; align-items: center; justify-content: center; border-radius: 8px; overflow: hidden; }
.wf-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wf-desc { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.wf-desc h2 { margin-top: 0; font-size: 24px; }
.wf-desc p { color: #444; font-size: 16px; line-height: 1.5; }
.wf-conclusion { margin-top: 18px; background: #fafafa; border: 1px solid #eee; padding: 18px; border-radius: 8px; }
.wf-conclusion p { margin: 0; color: #333; }

@media (max-width: 920px) {
  .wf-image { flex: 0 0 320px; height: 320px; }
}
@media (max-width: 640px) {
  .wf-row { flex-direction: column; }
  .wf-row.reverse { flex-direction: column; }
  .wf-image { width: 100%; height: 260px; flex: none; }
  .wf-desc { padding-top: 12px; }
}

/* Contact form styles */
.contact-form { max-width: 900px; margin: 26px auto 48px; padding: 18px; }
.contact-form h2 { margin: 0 0 12px; font-size: 20px; }
.contact { width: 100%; }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.field { display: flex; flex-direction: column; }
.label-text { font-weight: 600; margin-bottom: 6px; display: inline-block; }
.label-text .opt-label { font-weight: 400; color: #666; font-size: 13px; margin-left: 6px; }
.req { color: #d9534f; margin-left: 6px; }
.field input, .field textarea { padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; color: #111; }
.field input:focus, .field textarea:focus { outline: none; border-color: #999; box-shadow: 0 0 0 3px rgba(0,0,0,0.04); }
.field.required input, .field.required textarea { border-color: #e05b54; }
.field.full { grid-column: 1 / -1; }
.form-actions { margin-top: 12px; display: flex; gap: 10px; }

@media (max-width: 640px) {
  .contact-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
}

/* ----- Professional visual styles for About & Contact ----- */
:root{
  --page-max: 1100px;
  --muted: #6b7280;
  --text: #0f1720;
  --surface: #ffffff;
  --soft: #f6f8fa;
  --border: #e6eef8;
  --brand: #1f6feb; /* calm professional blue */
  --danger: #d9534f;
  --shadow-1: 0 6px 18px rgba(16,24,40,0.06);
}

/* Section container */
.about-wireframe { background: var(--soft); padding: 56px 16px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
.wf-block { max-width: var(--page-max); margin: 0 auto; background: var(--surface); border-radius: 10px; padding: 20px; box-shadow: var(--shadow-1); border: 1px solid rgba(15,23,32,0.03); }

/* Row layout */
.wf-row { display:flex; gap: 24px; align-items: center; }
.wf-row.reverse { flex-direction: row-reverse; }
.wf-image { flex: 0 0 420px; height: 420px; background: linear-gradient(180deg,#f4f6f9,#eef3fb); border-radius: 8px; overflow: hidden; display:flex; align-items:center; justify-content:center; border: 1px solid rgba(15,23,32,0.04); }
.wf-image img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .3s ease; }
.wf-image:hover img { transform: scale(1.02); }
.wf-desc { flex:1; padding: 8px 6px; }
.wf-desc h2 { margin: 0 0 8px; font-size: 22px; color: var(--text); }
.wf-desc p { margin:0; color: var(--muted); font-size: 15px; line-height: 1.6; }

.wf-conclusion { margin-top: 20px; padding: 18px; background: linear-gradient(180deg,#ffffff,#fbfdff); border-radius: 8px; border-left: 4px solid rgba(31,111,235,0.06); color: var(--text); font-size: 15px; }

/* Contact form */
.contact-form { max-width: var(--page-max); margin: 26px auto 48px; padding: 22px; background: #fff; border-radius: 10px; border: 1px solid rgba(15,23,32,0.04); box-shadow: 0 8px 24px rgba(16,24,40,0.04); }
.contact-form h2 { margin: 0 0 12px; font-size: 20px; color: var(--text); }
.contact { width:100%; }
.contact-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.field { display:flex; flex-direction:column; }
.label-text { font-weight:600; color:var(--text); margin-bottom:8px; font-size:14px; }
.req { color: var(--danger); margin-left:6px; font-weight:700; }
.opt-label { color: var(--muted); font-size:13px; margin-left:6px; font-weight:500; }
.field input, .field textarea { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: #fbfdff; font-size:14px; color: var(--text); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 6px 18px rgba(31,111,235,0.08); }
.field.required input, .field.required textarea { border-color: rgba(217,83,79,0.25); }
.field.full { grid-column: 1 / -1; }
.form-actions { margin-top: 14px; display:flex; justify-content:flex-end; }
.btn.primary { background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 8px; border: none; font-weight:700; box-shadow: 0 6px 18px rgba(31,111,235,0.12); }
.btn.primary:hover { filter: brightness(0.98); transform: translateY(-1px); }
.btn { transition: all .12s ease; cursor: pointer; }

/* Responsive adjustments */
@media (max-width: 920px) {
  .wf-image { flex: 0 0 320px; height: 320px; }
}
@media (max-width: 680px) {
  .wf-row, .wf-row.reverse { flex-direction: column; }
  .wf-image { width:100%; height:260px; flex:none; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-actions { justify-content:center; }
  .btn.primary { width: 100%; }
}

/* end professional styles */

/* Map section styling */
.map-section { max-width: var(--page-max); margin: 26px auto; padding: 0 16px; }
.map-card { display: flex; gap: 18px; align-items: stretch; background: #fff; border-radius: 10px; padding: 12px; border: 1px solid rgba(15,23,32,0.04); box-shadow: 0 6px 18px rgba(16,24,40,0.04); }
.map-embed { flex:0 0 420px; border-radius:8px; overflow:hidden; }
.map-embed iframe { width:100%; height:260px; border:0; display:block; }
.map-placeholder { width:100%; height: 260px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg,#e6eefb,#cfe0fb); color: #0f1720; font-weight:700; }
.map-details { flex:1; display:flex; flex-direction:column; justify-content:center; padding: 8px 10px; }
.map-details h3 { margin:0 0 8px; font-size:18px; }
.map-details address { font-style: normal; color: var(--muted); margin-bottom: 8px; }
.map-actions a { color: var(--brand); text-decoration: none; font-weight:600; }

@media (max-width: 880px) {
  .map-card { flex-direction: column; }
  .map-embed { flex: none; }
  .map-embed iframe { height: 200px; }
  .map-placeholder { height: 200px; }
}

/* Footer contact styling */
.site-footer .footer-contact { display:flex; flex-direction:column; gap:6px; align-items:flex-end; color: #dcdcdc; }
.site-footer .footer-contact .contact-item { font-size:14px; color:#dcdcdc; }
.site-footer .footer-contact a { color:#dcdcdc; text-decoration:none; }
.site-footer .footer-contact a:hover { text-decoration:underline; color:#fff; }

@media (max-width: 640px) {
  .site-footer .footer-contact { align-items:flex-start; }
}

#carthead{
  font-size:100px;
}

#cartbutton{
  font-size:20px;
  padding:10px 20px;
  background-color:grey;
  color:white;
  border: solid 2px;
  border-color:black;
  border-radius:8px;
  cursor:pointer;
}
/* Only for pages that need footer at the bottom */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ensures body is full height */
}

/* Main content grows to fill space */
main {
  flex: 1 0 auto;
}

/* Footer stays at the bottom */
.site-footer {
  flex-shrink: 0; /* prevent shrinking */
}