:root { --brand-teal: #00bcd4; }

/* ============ Global ============ */
* { box-sizing: border-box; }
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  scroll-padding-top: 64px;

  /* NEW: make footer sit at bottom and avoid overlap issues */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Let main content fill the space between header and footer */
main {
  flex: 1;
}

a { color: var(--brand-teal); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Accessibility focus ring */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand-teal);
  outline-offset: 2px;
}

/* ===========================================================
   HEADER (larger logo + balanced height)
   =========================================================== */
.site-header {
  background:#333; color:#fff;
  position: sticky; top: 0; z-index: 100;
}
.site-header .wrap {
  width:100%; margin:0; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:72px; /* taller for visual balance */
}
.site-header .brand {
  display:flex; align-items:center; gap:12px;
  color:#fff; text-decoration:none; flex-shrink:0;
  margin-right:auto;
}
.brand-logo{
  width:58px; height:58px; aspect-ratio:1/1;
  object-fit:cover; border-radius:10px;
}
.brand-name{ font-size:23px; font-weight:800; white-space:nowrap; }

.site-header nav{
  display:flex; align-items:center; gap:20px;
  margin-left:auto;
}
.site-header nav a{
  color:#fff; text-decoration:none; font-weight:bold; font-size:16px;
  padding:8px 10px; border-radius:8px; border-bottom:2px solid transparent;
  transition:color .2s, background .2s, border-bottom .2s;
}
.site-header nav a:hover{
  color:var(--brand-teal);
  background:rgba(255,255,255,.06);
}
.site-header nav a.active{
  color:var(--brand-teal);
  background:rgba(255,255,255,.15);
  border-bottom-color:var(--brand-teal);
}

/* Cart badge */
.site-header .cart-count{
  display:inline-block; min-width:18px; padding:0 6px; margin-left:6px;
  font-size:12px; line-height:18px; text-align:center;
  border-radius:9px; background:var(--brand-teal); color:#fff; font-weight:700;
}

/* ===========================================================
   PRODUCT GRID
   =========================================================== */
.grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr));
  gap:1.5rem; margin:1.5rem auto; max-width:1200px; padding:0 1rem;
}
.card{
  border:1px solid #eee; border-radius:16px; padding:.75rem; background:#fff;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 3px 14px rgba(0,0,0,.12); }
.thumb-link{ display:block; overflow:hidden; border-radius:12px; cursor:pointer; }
.thumb{
  width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 10%;
  transition:transform .3s ease;
}
.card:hover .thumb{ transform:scale(1.06); }
.info{ padding:.6rem .25rem .4rem; }
.info h3{ margin:.4rem 0 .3rem; font-size:1.25rem; color:#222; }
.info .short{ color:#666; font-size:1rem; margin:.2rem 0 .5rem; min-height:2.4em; }
.price{ font-weight:600; margin-bottom:.7rem; font-size:1.05rem; }
.btn.add-btn{
  background:var(--brand-teal); color:#fff; border:0; padding:.6rem .9rem;
  border-radius:8px; cursor:pointer; font-weight:600; width:100%; text-align:center;
  transition:background .2s;
}
.btn.add-btn:hover{ background:#00a3ba; }

/* ===========================================================
   CART PAGE
   =========================================================== */
.cart-wrap{ max-width:1100px; margin:24px auto; padding:0 16px; }
.cart-grid{ display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }
@media (max-width:900px){ .cart-grid{ grid-template-columns:1fr; } }
.cart-items{ display:grid; gap:12px; }
.cart-item{
  display:grid; grid-template-columns:92px 1fr auto; gap:12px;
  background:#fff; border:1px solid #eee; border-radius:12px; padding:12px; overflow:hidden;
}
.cart-item img.thumb{ width:92px; height:92px; object-fit:cover; border-radius:8px; }
.cart-item .title{ font-weight:600; margin:2px 0 6px; color:#333; }
.cart-item .meta{ color:#666; font-size:.92rem; }
.cart-item .actions{ margin-top:8px; display:flex; gap:10px; flex-wrap:wrap; }
.cart-item .actions .link{ font-size:.92rem; color:var(--brand-teal); text-decoration:none; border-bottom:1px dashed currentColor; }
.cart-item .actions .link:hover{ opacity:.9; }
.cart-item .controls{ display:grid; align-content:center; justify-items:end; gap:8px; }
.qty-control{ display:inline-flex; align-items:center; border:1px solid #ddd; border-radius:10px; overflow:hidden; }
.qty-control button{ border:0; background:#e6f4f1; padding:6px 10px; cursor:pointer; }
.qty-control span.qty{ min-width:28px; text-align:center; padding:0 6px; }
.item-price{ font-weight:700; font-size:1.02rem; color:#111; }

.cart-summary{
  position:sticky; top:16px; background:#fff; border:1px solid #eee;
  border-radius:12px; padding:14px;
}
.cart-summary h3{ margin:0 0 10px; font-size:1.12rem; }
.cart-summary .row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:8px 0; }
.cart-summary .btn{ width:100%; margin-top:10px; }

/* ===========================================================
   PRODUCT SPECS
   =========================================================== */
.specs{ display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-top:16px; }
.spec{ background:#fff; border:1px solid #eee; border-radius:10px; padding:12px; }
.spec h4{ margin:0 0 6px; font-size:1rem; }
.spec p{ margin:0; color:#444; line-height:1.5; }
@media (max-width:700px){ .specs{ grid-template-columns:1fr; } }

/* ===========================================================
   GALLERY
   =========================================================== */
.gallery{ background:#fff; border:1px solid #eee; border-radius:10px; padding:12px; }
.gallery .hero{ width:100%; border-radius:10px; display:block; }
.gallery .thumbs{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.gallery .thumbs img{ width:76px; height:76px; object-fit:cover; border-radius:8px; border:1px solid #eee; cursor:pointer; }
.gallery .thumbs img.active{ outline:2px solid var(--brand-teal); }

/* ===========================================================
   LIGHTBOX
   =========================================================== */
#lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:none; align-items:center; justify-content:center; z-index:9999;
}
#lightbox.visible{ display:flex; }
#lightbox img{ max-width:90%; max-height:90%; border-radius:10px; box-shadow:0 0 25px rgba(0,0,0,.4); display:block; }
#lightbox .arrow{ position:absolute; top:50%; transform:translateY(-50%); font-size:3rem; color:#fff; cursor:pointer; user-select:none; padding:0 .4em; opacity:.6; transition:opacity .2s; }
#lightbox .arrow:hover{ opacity:1; }
#lightbox .prev{ left:1rem; }
#lightbox .next{ right:1rem; }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer {
  background:#333;
  color:#fff;
  text-align:center;
  padding:12px;
  margin-top:30px;
}

/* Make sure footer text stays white even if pages style <p> differently */
.site-footer p {
  color:#fff;
  margin:4px 0;
}


/* ===========================================================
   RESPONSIVE TWEAKS
   =========================================================== */
@media (max-width:700px){
  .site-header .wrap{ flex-direction:row; min-height:66px; }
  .brand-logo{ width:52px; height:52px; }
  .brand-name{ font-size:18px; }
  .site-header nav{ flex-wrap:wrap; justify-content:flex-end; gap:10px; }

  .grid{ grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); }
  .card{ padding:.5rem; }
}

/* Mobile header tidy – only phones */
@media (max-width:700px){

  /* make header a bit slimmer */
  .site-header {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .site-header nav a {
    font-size: 14px;
    padding: 4px 6px;
  }

  /* replace rounded pill with clean teal underline */
  .site-header nav a.active {
    background: none;
    border-radius: 0;
    position: relative;
    border-bottom-color: transparent;
  }

  .site-header nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: var(--brand-teal, #00bcd4);
    border-radius: 999px;
  }
}

/* Keep mobile header menu in one line */
@media (max-width:700px){
  .site-header nav {
    flex-wrap: nowrap;
    gap: 12px; /* smaller spacing so it fits */
  }
  
  .site-header nav a {
    padding: 4px 4px;
    font-size: 13px; /* slight reduction to fit */
    white-space: nowrap;
  }
}

/* On phones, hide the text label next to the logo to save space */
@media (max-width:700px){
  .brand-name {
    display: none;
  }

  .site-header .wrap {
    gap: 8px; /* a bit tighter horizontally */
  }
}