/* ==================== Grey Theme (no blue) ==================== */
:root {
  --bg: #0b0b0b;
  --panel: #111111;
  --text: #f5f5f5;
  --muted: #b7b7b7;
  --accent: #6b7280;        /* Gray 500 */
  --accent-hover: #4b5563;  /* Gray 600 */
  --accent-press: #374151;  /* Gray 700 */
  --border: #262626;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  line-height: 1.5;
}

/* ==================== Header with CENTERED nav ==================== */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--panel); border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: .8rem 1rem;
}
.brand { display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text);}
.brand img { height:40px; width:auto; display:block; }

.site-nav { display:flex; gap:.05rem; justify-content:center; }
.site-nav .nav-link {
  color: var(--muted); text-decoration:none; padding:.5rem .85rem; border-radius:.5rem;
}
.site-nav .nav-link:hover { color:#fff; background:#1a1a1a; }
.site-nav .nav-link[aria-current="page"] { background:#1f1f1f; color:#fff; }



.cart-footer { border-top: 1px solid var(--border); display:grid; gap:.5rem; }
.checkout-btn { composes: btn from none; } /* ensure same look via .btn */

/* ==================== Layout ==================== */
.page { max-width: 1000px; margin: 0 auto; padding: 1.25rem; }
.hero { padding: 2rem 0 1rem; }
.hero h1 { margin: 0 0 .5rem; font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.hero p { color: var(--muted); max-width: 70ch; }

.content h2 { margin-top: 1.25rem; }
.content ul { padding-left: 1.25rem; }

/* ==================== Forms (Contact) ==================== */
.contact-section {
  max-width: 760px; margin: 0 auto; padding: 1rem;
  background: #0f0f0f; border: 1px solid var(--border); border-radius: 12px;
}
.row { display:grid; gap:.5rem; margin-bottom:1rem; }
input, textarea, select {
  width:100%; padding:.8rem .9rem; border-radius:.6rem;
  border: 1px solid var(--border); background:#121212; color:#fff;
}
input::placeholder, textarea::placeholder { color:#9a9a9a; }
.status { margin-top:.75rem; min-height:1.2em; }

/* ==================== Shop ==================== */
.shop-hero { padding: 2rem 0 1rem; }
.products-grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem; margin-top: 1rem;
}
.product-card {
  background:#0f0f0f; border:1px solid var(--border); border-radius:12px; padding:1rem; display:grid; gap:.75rem;
}
.product-card img {
  width:100%; height:180px; object-fit:contain; background:#111; border-radius:10px; border:1px solid var(--border);
}
.product-title { font-weight: 700; }
.product-price { color: var(--muted); }
.product-card select, .product-card input { width:100%; }

/* ==================== Buttons (CONSISTENT style) ==================== */
.btn {
  padding: .8rem 1.1rem; border: 1px solid var(--border); border-radius: .7rem;
  background: var(--accent); color: #fff; font-weight: 800; cursor: pointer;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { background: var(--accent-press); }
.btn:disabled { opacity: .7; cursor: not-allowed; }
.add-btn { composes: btn from none; } /* ensure same look everywhere */
#submitBtn { composes: btn from none; }

/* ==================== Footer ==================== */
.site-footer {
  color: var(--muted); border-top: 1px solid var(--border); padding: 1.25rem; text-align: center;
}


/* ===== Centered + Bigger footer icons ===== */
.site-footer { text-align: center; padding: 1.25rem 1rem; }

.footer-wrap{
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;      /* stack copyright then icons */
  align-items: center;         /* center horizontally */
  justify-content: center;     /* center vertically within footer */
  gap: .65rem;
}

/* center the icon row */
.footer-social{
  display: inline-flex;
  gap: .6rem;                  /* spacing between icons */
  justify-content: center;
}

/* make the buttons larger */
.footer-social a{
  width: 56px;                 /* size of the circle */
  height: 56px;
  border-radius: 999px;
  background: #111;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* make the glyphs inside larger too */
.footer-social svg{
  width: 26px;
  height: 26px;
}

/* smaller on very small screens, optional */
@media (max-width: 420px){
  .footer-social a{ width: 48px; height: 48px; }
  .footer-social svg{ width: 22px; height: 22px; }
}


/* Floating cart toggle */
.cart-toggle {
  position: fixed; bottom: 16px; right: 16px;
  padding: 10px 14px; border-radius: 999px;
  background: #fff; color: #000; border: 0; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  z-index: 1001;
}
.cart-toggle .count {
  display:inline-block; min-width: 22px; padding: 2px 6px; margin-left: 6px; border-radius: 999px;
  background:#000; color:#fff; text-align:center; font-weight:700;
}

/* Cart drawer */
.cart-drawer {
  position: fixed; inset: 0 0 0 auto; width: 360px; max-width: 100%;
  background: rgba(0,0,0,.35); display: none; z-index: 1000;
}
.cart-drawer.open { display: block; }
.cart-drawer .cart-header,
.cart-drawer .cart-footer {
  background: #111; color: #fff; padding: 12px 16px;
}
.cart-drawer .cart-items {
  background: #fff; color: #000; padding: 12px 16px; max-height: 55vh; overflow: auto;
}
.cart-drawer > .cart-header,
.cart-drawer > .cart-items,
.cart-drawer > .cart-footer {
  width: 360px; margin-left: auto; box-shadow: -4px 0 16px rgba(0,0,0,.25);
}
.qty-btn { background: transparent; color: #fff; border: 0; font-size: 18px; cursor: pointer; }
.cart-items li { list-style: none; padding-left: 0; }

.cart-toggle{position:fixed;bottom:16px;right:16px;padding:10px 14px;border-radius:999px;background:#fff;color:#000;border:0;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:1001}
.cart-toggle .count{display:inline-block;min-width:22px;padding:2px 6px;margin-left:6px;border-radius:999px;background:#000;color:#fff;text-align:center;font-weight:700}
.cart-drawer{position:fixed;inset:0;display:none;background:rgba(0,0,0,.35);z-index:1000}
.cart-drawer.open{display:block}
.cart-panel{width:360px;max-width:100%;margin-left:auto;height:100%;background:#fff;display:grid;grid-template-rows:auto 1fr auto;box-shadow:-4px 0 16px rgba(0,0,0,.25)}
.cart-header,.cart-footer{padding:12px 16px;background:#111;color:#fff}
.cart-items{padding:12px 16px;overflow:auto;color:#000}
.cart-row{padding:6px 0;border-bottom:1px solid #eee}
.qty-btn{background:transparent;color:#fff;border:0;font-size:18px;cursor:pointer}

/* Prevent page jump/zoom when cart opens */
body.cart-open { overflow: hidden; }

/* Keep product images from looking zoomed/cropped */
.product-card .product-image,
.product-card img {
  width: 100%;
  height: auto;
  max-height: 420px;     /* tweak if you want */
  object-fit: contain;   /* key to avoid crop/zoom */
}

/* Avoid iOS tap-to-zoom on controls */
.cart-toggle,
.checkout-btn,
.qty-btn {
  font-size: 16px;
}

/* (Only if you show thumbnails in the cart) */
.cart-items .cart-row img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-right: 8px;
  vertical-align: middle;
}