@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  --bg:#f5f5f5;
  --surface:#ffffff;
  --text:#0f0f0f;
  --muted:#6e6e6e;
  --border:#e4e4e4;
  --accent:#111;
  --accent-muted:#ececec;
}

* { box-sizing:border-box; }

body {
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; border-radius:16px; }

.site-nav {
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem 1.2rem;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}

.brand {
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:.9rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}

.brand img {
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
}

.site-nav ul {
  list-style:none;
  display:flex;
  gap:1.2rem;
  margin:0;
  padding:0;
}

.site-nav a { color:var(--muted); font-size:.9rem; }
.site-nav a.active,
.site-nav a:hover { color:var(--text); }

.cart-link {
  display:inline-flex;
  gap:.4rem;
  align-items:center;
  padding:.5rem 1rem;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:.85rem;
}

.cart-link span {
  display:inline-flex;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#111;
  color:#fff;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
}

.hero-banner {
  position:relative;
  padding:0;
  color:#fff;
}

.hero-collage {
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:4px;
}

.hero-collage img {
  width:100%;
  height:64vh;
  object-fit:cover;
  filter:saturate(0.9) contrast(1.05);
}

.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.5));
  pointer-events:none;
}

.hero-content {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  z-index:1;
  padding:1rem 1.5rem;
}

/* Simple hero variant: normal flow (no overlay centering) */
.hero--simple .hero-content {
  position:static;
  transform:none;
  color:var(--text);
  padding:1.2rem 1rem;
}
.hero--simple .hero-content h1 {
  font-size:2rem;
  margin:.5rem 0 0;
  color:var(--text);
}
.hero--simple { color:var(--text); background:var(--surface); }

/* Carousel arrows */
.carousel-wrap { position:relative; }
.carousel-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.4rem .6rem;
  cursor:pointer;
}
.carousel-arrow.prev { left:.5rem; }
.carousel-arrow.next { right:.5rem; }

/* Larger carousel cards on homepage: fill width with 3 columns */
.carousel { overflow-x:hidden; }
.carousel .product-card { flex:0 0 calc((100% - 2rem)/3); min-width:0; }
.carousel .product-card img { height:320px; object-fit:cover; }
@media (max-width: 900px) {
  .carousel .product-card { flex:0 0 calc((100% - 1rem)/2); }
  .carousel .product-card img { height:260px; }
}
@media (max-width: 560px) {
  .carousel .product-card { flex:0 0 100%; }
  .carousel .product-card img { height:220px; }
}

.hero-content .kicker {
  display:inline-flex;
  text-transform:uppercase;
  letter-spacing:.25em;
  font-size:.8rem;
  padding:.3rem 1rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(2px);
}

.hero-content h1 {
  font-size:3.2rem;
  margin:1.2rem 0 .6rem;
  letter-spacing:.02em;
}

.hero-content p { color:rgba(255,255,255,.9); max-width:780px; margin:0 auto; }

.art-line {
  display:inline-block;
  padding:.5rem 1rem;
  border:1px solid rgba(255,255,255,.5);
  border-radius:.8rem;
  margin-top:1rem;
  font-size:.85rem;
  letter-spacing:.12em;
}

.btn-row {
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:2rem;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.85rem 2.2rem;
  border-radius:999px;
  border:1px solid var(--text);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.75rem;
  background:transparent;
  color:var(--text);
  transition:background .25s ease, color .25s ease, transform .15s ease, box-shadow .15s ease;
}

.btn-primary {
  background:var(--text);
  color:#fff;
}

.btn:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.12); }
.btn:active { transform:translateY(0); box-shadow:0 4px 10px rgba(0,0,0,.1); }

.btn-ghost {
  border-color:rgba(255,255,255,.6);
  color:#fff;
}

.page-shell {
  max-width:1100px;
  margin:0 auto;
  padding:3rem 1.5rem 4rem;
}

.section + .section { margin-top:3rem; }
.section-title { margin:0 0 1rem; font-size:2rem; }

/* Centered, styled section titles */
.section-title--center {
  text-align:center;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.section-title--center::after {
  content:"";
  display:block;
  width:72px;
  height:2px;
  background:var(--text);
  margin:.6rem auto 0;
  border-radius:2px;
}
.section-title--accent {
  font-size:2.4rem;
}

/* Full-width homepage drop section */
.section--full {
  width:100%;
  padding:3rem 0 2rem;
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section--full .carousel {
  max-width:1200px;
  margin:0 auto;
}
.section--full .btn-row {
  margin-top:1.5rem;
}

/* Styled, centered title for drop */
.section-title--drop {
  text-align:center;
  font-size:2.4rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 1rem;
}
.section-title--drop::after {
  content:"";
  display:block;
  width:80px;
  height:2px;
  background:var(--text);
  margin:.6rem auto 0;
  border-radius:2px;
}

.story-block {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1.5rem;
  padding:2rem;
}

.product-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
}

.product-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1.2rem;
  padding:1.2rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.product-card img { height:180px; object-fit:cover; width:100%; }
.product-card h3 { margin:.3rem 0; }
.product-card p { color:var(--muted); font-size:.9rem; }
.product-meta { font-size:.8rem; color:var(--muted); line-height:1.4; }
.product-price { font-weight:600; letter-spacing:.1em; }

.product-card button {
  margin-top:auto;
  align-self:flex-start;
}

.info-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1.2rem;
  padding:1.5rem;
}

.navbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.2rem 1.6rem;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}

.navbar ul {
  list-style:none;
  display:flex;
  gap:1rem;
  margin:0;
  padding:0;
}

.navbar a { color:var(--muted); font-size:.9rem; }
.navbar a.active,
.navbar a:hover { color:var(--text); }

.badge {
  display:inline-flex;
  padding:.3rem 1rem;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:.7rem;
  border:1px solid var(--border);
}

.site-hero {
  padding:4.5rem 1.5rem;
  text-align:center;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}

.site-hero .hero-content {
  max-width:720px;
  margin:0 auto;
}

.btn-outline {
  border-color:var(--text);
  color:var(--text);
  background:transparent;
}

.btn-outline:hover {
  background:var(--text);
  color:#fff;
}

.grid-3,
.grid-2 {
  display:grid;
  gap:1.5rem;
}

.grid-3 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1.2rem;
  padding:1.5rem;
}

.info-list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.4rem;
  color:var(--muted);
}

.form {
  display:grid;
  gap:1rem;
}

.gallery {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}

.gallery img {
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:1rem;
}

/* Improve gallery modal usability on mobile */
[data-gallery-modal] .gallery-panel {
  display:block;
  max-height:100vh;
  overflow:auto;
}
[data-gallery-modal] .gallery-main { position:sticky; top:0; background:var(--surface); padding:1rem; touch-action:none; }
[data-gallery-modal] .gallery-main img { transform:scale(1.04); transform-origin:center; }
[data-gallery-modal] .gallery-info { padding:.8rem 1rem; }
[data-gallery-modal] .gallery-thumbs { padding:.5rem 1rem; display:flex; gap:.5rem; overflow-x:auto; }
@media (max-width: 560px) {
  [data-gallery-modal] .gallery-main img { max-height:48vh; object-fit:cover; width:100%; }
}

.floating-cart {
  position:fixed;
  right:1.5rem;
  bottom:1.5rem;
  display:flex;
  gap:.8rem;
  align-items:center;
  padding:1rem 1.2rem;
  border-radius:1.2rem;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 15px 35px rgba(0,0,0,.12);
  color:var(--text);
  transition:transform .2s ease;
  z-index:90;
}

.floating-cart:hover { transform:translateY(-3px); }

.cart-count {
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cart-table {
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
  overflow:hidden;
}

.cart-table th,
.cart-table td {
  padding:1rem;
  border-bottom:1px solid var(--border);
  text-align:left;
}

.cart-table th { background:var(--accent-muted); font-weight:500; }
.cart-table tr:last-child td { border-bottom:none; }

.qty-input {
  width:60px;
  padding:.35rem .5rem;
  text-align:center;
}

.cart-empty {
  padding:2rem;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
}

.summary-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.5rem;
}

.summary-row {
  display:flex;
  justify-content:space-between;
  margin-bottom:.5rem;
  font-size:.95rem;
}

.form-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
}

.form-grid input,
form textarea,
form select {
  width:100%;
  padding:.9rem 1rem;
  border-radius:.7rem;
  border:1px solid var(--border);
  background:#fff;
}

.footer {
  padding:2.5rem 1.5rem;
  text-align:center;
  background:var(--text);
  color:#fff;
  border-top:none;
}

.footer nav {
  margin-top:1rem;
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

.footer a { color:rgba(255,255,255,.85); }
.footer a:hover { color:#fff; }

.mini-cart {
  position:fixed;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(0,0,0,.2);
  backdrop-filter:blur(2px);
  z-index:100;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}

.mini-cart.is-visible {
  opacity:1;
  pointer-events:auto;
}

.mini-cart-backdrop {
  position:absolute;
  inset:0;
  pointer-events:none;
}

.mini-cart-panel {
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  margin:0 1rem 1.5rem;
  background:var(--surface);
  border-radius:1.2rem;
  border:1px solid var(--border);
  box-shadow:0 20px 45px rgba(0,0,0,.15);
  transform:translateY(20px);
  transition:transform .2s ease;
  pointer-events:none;
}

.mini-cart.is-visible .mini-cart-panel { transform:translateY(0); }
.mini-cart.is-visible .mini-cart-backdrop { pointer-events:auto; }
.mini-cart.is-visible .mini-cart-panel { pointer-events:auto; }

.mini-cart-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--border);
}

.mini-cart-close {
  background:transparent;
  border:none;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
}

.mini-cart-body {
  max-height:300px;
  overflow:auto;
  padding:1rem 1.25rem;
  display:grid;
  gap:.9rem;
}

.mini-cart-item {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.9rem;
}

.mini-cart-item span { color:var(--muted); font-size:.85rem; }

.mini-cart-footer {
  padding:1rem 1.25rem 1.4rem;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
}

.mini-cart-total { font-weight:600; letter-spacing:.1em; }
.cart-fab {
  position:fixed;
  right:1rem;
  bottom:1rem;
  width:50px;
  height:50px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--text);
  color:#fff;
  border:1px solid var(--border);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  cursor:pointer;
  z-index:110;
  transition:transform .15s ease, box-shadow .15s ease;
}

.cart-fab:hover { transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.22); }
.cart-fab:active { transform:translateY(0); }

.cart-fab svg { width:22px; height:22px; }

/* Ensure hidden attribute removes element from layout */
[hidden] { display:none !important; }

@media (max-width:720px) {
  .hero-content h1 { font-size:2.2rem; }
  .site-nav ul { flex-wrap:wrap; justify-content:center; }
  .site-nav { justify-content:center; }
}

@media (max-width:520px) {
  .btn-row { flex-direction:column; }
  .hero-collage img { height:46vh; }
  .hero-content h1 { font-size:2rem; }
}

/* Gallery (lightbox) */
.gallery-modal {
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.6);
  z-index:120;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}

.gallery-modal.is-visible { opacity:1; pointer-events:auto; }

.gallery-panel {
  width:min(900px, 94vw);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow:0 25px 60px rgba(0,0,0,.35);
  overflow:hidden;
}

.gallery-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.8rem 1rem;
  border-bottom:1px solid var(--border);
}

.gallery-close {
  background:transparent;
  border:none;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
}

.gallery-main {
  position:relative;
  background:var(--surface);
}

.gallery-main img {
  width:100%;
  height:520px;
  object-fit:contain;
  background:#fff;
}

.gallery-nav {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}

.gallery-btn {
  pointer-events:auto;
  width:46px;
  height:46px;
  margin:0 1rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:rgba(255,255,255,.85);
  cursor:pointer;
}

.gallery-thumbs {
  display:flex;
  gap:.6rem;
  padding: .8rem 1rem 1rem;
  overflow-x:auto;
  background:var(--surface);
  border-top:1px solid var(--border);
}

.gallery-thumbs img {
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:.6rem;
  border:1px solid var(--border);
  cursor:pointer;
}

.gallery-thumbs img.active { outline:2px solid var(--text); }

/* Size pills selector */
.size-pills {
  display:flex;
  gap:.5rem;
}

.size-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:36px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  font-size:.8rem;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease;
}

.size-pill:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.12); }
.size-pill:active { transform:translateY(0); }
.size-pill.is-active { background:var(--accent-muted); border-color:var(--text); }