:root{
  --bg:#ffffff; --bg-soft:#f6f7f8;
  --ink:#0f172a; --ink-2:#1f2937; --muted:#6b7280;
  --ring:rgba(15,23,42,.08);
  --brand:#111827; --accent:#0ea5e9;
  --radius:14px; --r-sm:10px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.container{ max-width:1200px; margin:0 auto; padding:0 24px }
.section{ padding:72px 0 }
.center{ text-align:center }
.tiny{ font-size:12px; color:var(--muted) }
.lead{ color:var(--muted) }
.h2{ font-size:32px; line-height:1.15; margin:0 0 8px }
.p{ padding:16px }

/* Nav */
.nav{ position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.85); border-bottom:1px solid var(--ring) }
.nav-inner{ display:flex; align-items:center; gap:18px; height:64px }
.brand{ color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:.3px }
.brand b{ font-weight:800 }
.brand .dot{ color:var(--accent) }
.links{ margin-left:auto; display:flex; gap:22px }
.links a{ color:var(--ink); text-decoration:none; font-weight:500 }
.links a:hover{ opacity:.65 }
.menu{ display:none; margin-left:8px; width:40px; height:40px; border-radius:999px; border:1px solid var(--ring); background:#fff; align-items:center; justify-content:center; flex-direction:column; gap:4px }
.menu span{ width:16px; height:2px; background:var(--ink) }

/* Search */
.search{ display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--ring); border-radius:999px; background:#fff; min-width:260px }
.search input{ border:0; outline:0; background:transparent; width:100%; font: inherit; color:var(--ink) }
.search button{ border:0; background:var(--ink); color:#fff; padding:6px 12px; border-radius:999px; cursor:pointer }
.search button:hover{ opacity:.9 }
.cart{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; border:1px solid var(--ring); background:#fff; border-radius:999px; padding:6px 10px; cursor:pointer }
#cartCount{ font-weight:700 }

/* Drawers */
.mobile-drawer{ display:none; position:fixed; top:64px; left:0; right:0; background:#fff; border-bottom:1px solid var(--ring); padding:16px; z-index:45; }
.mobile-drawer a{ display:block; padding:10px 6px; color:var(--ink); text-decoration:none }
.cart-drawer{ position:fixed; top:0; right:-400px; width:360px; height:100vh; background:#fff; border-left:1px solid var(--ring); box-shadow:-20px 0 40px var(--ring); transition:right .25s ease; z-index:60; display:flex; flex-direction:column }
.cart-drawer.open{ right:0 }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 16px; border-bottom:1px solid var(--ring) }
.cart-items{ flex:1; overflow:auto; padding:12px 16px; display:grid; gap:10px }
.cart-item{ display:grid; grid-template-columns:56px 1fr auto; gap:10px; align-items:center; border:1px solid var(--ring); border-radius:12px; padding:8px }
.cart-item img{ width:56px; height:56px; object-fit:cover; border-radius:8px; background:var(--bg-soft) }
.cart-foot{ border-top:1px solid var(--ring); padding:16px }
.cart-foot .row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }

/* Hero */
.hero{ background:linear-gradient(180deg,#fff 0%,#f7fafc 100%); border-bottom:1px solid var(--ring) }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:64px 0 }
.hero h1{ font-size:48px; line-height:1.08; margin:8px 0 12px; letter-spacing:-.02em }
.stack{ display:flex; gap:12px; margin:12px 0 4px }
.cta{ display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; background:var(--ink); color:#fff; text-decoration:none; font-weight:600; box-shadow:0 10px 30px var(--ring) }
.cta.secondary{ background:#fff; color:var(--ink); border:1px solid var(--ring) }
.badge{ display:inline-block; padding:4px 10px; border-radius:999px; background:#eef2ff; color:#3730a3; font-weight:600; font-size:12px }
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }
.pill{ padding:6px 10px; border-radius:999px; border:1px solid var(--ring); background:#fff; font-size:12px; cursor:pointer }
.hero-img{ width:100%; height:auto; border-radius:var(--radius) }

/* Tiles */
.grid{ display:grid; gap:22px }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.tile{ background:#fff; border:1px solid var(--ring); border-radius:var(--radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease }
.tile:hover{ transform:translateY(-3px); box-shadow:0 20px 40px var(--ring) }
.tile img{ width:100%; height:220px; object-fit:cover; background:var(--bg-soft) }

/* Make tile links look like cards */
.tile.link{ display:block; text-decoration:none; color:inherit }
.tile.link h3, .tile.link p{ margin:0 }
.tile.link:visited{ color:inherit }
.tile.link img{ display:block }

/* Products */
.split{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.filter-row{ display:flex; gap:8px; flex-wrap:wrap }
.chip{ border:1px solid var(--ring); background:#fff; border-radius:999px; padding:6px 12px; cursor:pointer; font-weight:500 }
.chip.active{ background:#0f172a; color:#fff; }
.card{ background:#fff; border:1px solid var(--ring); border-radius:var(--radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column }
.card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px var(--ring) }
.card img{ width:100%; height:260px; object-fit:cover; background:var(--bg-soft) }
.card .pad{ padding:16px }
.price{ font-weight:800 }
.muted{ color:var(--muted) }
.card .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px }

/* About */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:28px }
.about-grid img{ width:100%; height:auto; border-radius:var(--radius) }
.bullets{ margin:10px 0 0; padding-left:18px }
.bullets li{ margin:4px 0; color:var(--ink-2) }

/* Footer */
.footer{ border-top:1px solid var(--ring); background:#fff; margin-top:48px; padding-top:32px }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px }
.footer a{ color:var(--ink-2); text-decoration:none }
.footer a:hover{ color:var(--ink) }
.footer h4{ margin:0 0 8px; font-size:14px; letter-spacing:.3px }
.foot-grid a{ display:block; margin:4px 0 }

/* Responsive */
@media (max-width: 980px){
  .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .hero-grid{ grid-template-columns:1fr }
  .links{ display:none }
  .menu{ display:flex }
  .search{ display:none }
}
@media (max-width: 640px){
  .grid-3{ grid-template-columns:1fr }
  .h2{ font-size:26px }
}
.form{ border:1px solid var(--ring); border-radius:12px; padding:16px; background:#fff }
.form label{ display:block; margin:.6rem 0 .3rem; font-weight:600 }
.form input,.form textarea{ width:100%; padding:10px; border:1px solid var(--ring); border-radius:8px; background:#fff; font:inherit; color:var(--ink) }
.form textarea{ min-height:120px; resize:vertical }
.form .actions{ margin-top:12px; display:flex; gap:10px }

/* --- Hero carousel (no cropping) --- */
.hero-carousel{ border-bottom:1px solid var(--ring); padding:0 }
.carousel{ position:relative; overflow:hidden; }
.car-track{ display:flex; transition:transform .5s ease }

/* fixed-height banner */
.car-slide{
  min-width:100%;
  position:relative;
  height:500px;                
  margin:0; padding:0;
}

/* image fills area without cropping */
.car-media, .car-media img{ width:100%; height:100% }
.car-media{ position:relative; background:var(--bg-soft) }
.car-media img{
  object-fit: contain;          /* <- key change: show whole image */
  object-position: center;      /* center the art */
  display:block;
  border-radius:0;
}

/* soft gradient at bottom for button/dots legibility */
.car-media::after{
  content:""; position:absolute; inset:auto 0 0 0;
  height:96px; background:linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,.05));
  pointer-events:none;
}

/* overlay button + controls */
.car-btn{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:40px; padding:12px 24px; z-index:6;
}
.car-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px; border:1px solid var(--ring);
  background:#fff; color:var(--ink); display:grid; place-items:center;
  box-shadow:0 10px 30px var(--ring); z-index:6; cursor:pointer;
}
.car-arrow.prev{ left:14px } .car-arrow.next{ right:14px }
.car-dots{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:8px; z-index:6 }
.car-dots button{ width:8px; height:8px; border-radius:999px; border:0; background:rgba(0,0,0,.18); cursor:pointer }
.car-dots button[aria-current="true"]{ background:#0f172a }

/* Mobile: switch back to cover to avoid tall letterboxing on narrow screens */
@media (max-width: 640px){
  .car-slide{ height:360px }
  .car-media img{ object-fit: cover }  /* fill the small screen */
}