/* ===== RESET / BASE ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:#0b1220;
  background-color:#fff7ed;

  /* smooth brand glow + paw prints (non-overlapping tile, more paws) */
  background-image:
    radial-gradient(1400px 900px at 18% -8%, rgba(59,130,246,.045), transparent 70%),
    radial-gradient(1400px 900px at 105% 6%, rgba(249,115,22,.045), transparent 70%),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22900%22%20height%3D%22900%22%20viewBox%3D%220%200%20900%20900%22%3E%0A%20%20%3Cdefs%3E%0A%3Cg%20id%3D%22paw%22%3E%0A%20%20%3Cellipse%20cx%3D%2278%22%20cy%3D%2262%22%20rx%3D%2212%22%20ry%3D%2216%22/%3E%0A%20%20%3Cellipse%20cx%3D%22104%22%20cy%3D%2252%22%20rx%3D%2211%22%20ry%3D%2215%22/%3E%0A%20%20%3Cellipse%20cx%3D%22136%22%20cy%3D%2252%22%20rx%3D%2211%22%20ry%3D%2215%22/%3E%0A%20%20%3Cellipse%20cx%3D%22162%22%20cy%3D%2262%22%20rx%3D%2212%22%20ry%3D%2216%22/%3E%0A%20%20%3Cellipse%20cx%3D%22120%22%20cy%3D%22116%22%20rx%3D%2260%22%20ry%3D%2244%22/%3E%0A%3C/g%3E%0A%3C/defs%3E%0A%20%20%3Cg%20fill%3D%22%230b1220%22%20fill-opacity%3D%220.085%22%3E%0A%20%20%20%20%3Cg%20transform%3D%27translate%28120%20150%29%20scale%280.28%29%20rotate%28-12%20120%2090%29%27%3E%3Cuse%20href%3D%27%23paw%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28420%20120%29%20scale%280.36%29%20rotate%2818%20120%2090%29%27%3E%3Cuse%20href%3D%27%23paw%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28720%20210%29%20scale%280.44%29%20rotate%28-8%20120%2090%29%27%3E%3Cuse%20href%3D%27%23paw%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28210%20420%29%20scale%280.52%29%20rotate%2810%20120%2090%29%27%3E%3Cuse%20href%3D%27%23paw%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28560%20420%29%20scale%280.62%29%20rotate%28-16%20120%2090%29%27%3E%3Cuse%20href%3D%27%23paw%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28780%20560%29%20scale%280.32%29%20rotate%2814%20120%2090%29%27%3E%3Cuse%20href%3D%27%23paw%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28360%20700%29%20scale%280.4%29%20rotate%28-4%20120%2090%29%27%3E%3Cuse%20href%3D%27%23paw%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28640%20740%29%20scale%280.26%29%20rotate%288%20120%2090%29%27%3E%3Cuse%20href%3D%27%23paw%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28140%20720%29%20scale%280.34%29%20rotate%2822%20120%2090%29%27%3E%3Cuse%20href%3D%27%23paw%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28820%20120%29%20scale%280.28%29%20rotate%286%20120%2090%29%27%3E%3Cuse%20href%3D%27%23paw%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%2890%20520%29%20scale%280.3%29%20rotate%28-18%20120%2090%29%27%3E%3Cuse%20href%3D%27%23paw%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28460%20560%29%20scale%280.34%29%20rotate%2812%20120%2090%29%27%3E%3Cuse%20href%3D%27%23paw%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28720%20760%29%20scale%280.38%29%20rotate%28-10%20120%2090%29%27%3E%3Cuse%20href%3D%27%23paw%27/%3E%3C/g%3E%3Cg%20transform%3D%27translate%28300%20250%29%20scale%280.3%29%20rotate%288%20120%2090%29%27%3E%3Cuse%20href%3D%27%23paw%27/%3E%3C/g%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-repeat:no-repeat,no-repeat,repeat;
  background-size:auto,auto,900px 900px;
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

:root{
  --cream:#fff7ed;
  --ink:#0b1220;
  --muted:#5b667a;
  --card:#ffffff;
  --blue:#2563eb;
  --orange:#f97316;
  --purple:#06b6d4;
  --shadow:0 18px 50px rgba(10,20,40,.14);
  --shadow2:0 10px 30px rgba(10,20,40,.12);
  --radius:20px
}

.container{width:min(1120px,92vw);margin:0 auto}
.grad-text{
  background:linear-gradient(90deg,var(--blue),var(--purple),var(--orange));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.bg-blobs{position:fixed;inset:0;pointer-events:none;z-index:-1}
.blob{position:absolute;filter:blur(42px);opacity:.55;transform:translateZ(0)}
.blob.b1{width:520px;height:520px;background:radial-gradient(circle at 30% 30%,#60a5fa,transparent 60%);left:-140px;top:-120px}
.blob.b2{width:520px;height:520px;background:radial-gradient(circle at 60% 40%,#fb7185,transparent 60%);right:-220px;top:-160px}
.blob.b3{width:520px;height:520px;background:radial-gradient(circle at 40% 60%,#c4b5fd,transparent 60%);left:-180px;bottom:-220px}
.blob.b4{width:520px;height:520px;background:radial-gradient(circle at 60% 40%,#fdba74,transparent 60%);right:-220px;bottom:-220px}

/* ===== TOPBAR ===== */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(255,247,237,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(10,20,40,.06)
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:44px;height:44px;border-radius:14px;object-fit:cover;box-shadow:0 8px 22px rgba(10,20,40,.12)}
.brand-name{font-weight:900;letter-spacing:.2px}

.nav{display:flex;align-items:center;gap:16px}
.nav a{font-weight:700;color:rgba(11,18,32,.85)}
.nav a:hover{color:rgba(11,18,32,1)}
.nav-toggle{display:none;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;border-radius:14px;border:1px solid rgba(10,20,40,.08);background:#fff}
.nav-toggle span{display:block;width:18px;height:2px;background:#111827;border-radius:2px}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:999px;font-weight:800;
  border:1px solid rgba(10,20,40,.12);
  box-shadow:0 12px 26px rgba(10,20,40,.10);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease
}
.btn:hover{transform:translateY(-1px);box-shadow:0 18px 40px rgba(10,20,40,.16)}
.btn:active{transform:translateY(0)}
.btn-grad{border-color:transparent;background:linear-gradient(120deg,var(--blue),var(--purple),var(--orange));color:#fff}
.btn-ghost{background:rgba(255,255,255,.7)}
.btn-small{padding:10px 14px;font-size:14px}

/* ===== HERO ===== */
.hero{padding:34px 0 26px}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:28px;align-items:center}
.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(10,20,40,.08);
  font-weight:800;color:rgba(11,18,32,.84);
  width:max-content
}
.hero h1{font-size:clamp(34px,4.2vw,56px);line-height:1.03;margin:14px 0 10px;letter-spacing:-.8px}
.lead{font-size:18px;color:rgba(11,18,32,.72);line-height:1.55;margin:0 0 16px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 14px}
.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.mini-stat{background:rgba(255,255,255,.75);border:1px solid rgba(10,20,40,.08);border-radius:18px;padding:12px 14px;box-shadow:var(--shadow2)}
.mini-stat-top{font-weight:900;color:rgba(11,18,32,.62);font-size:12px;text-transform:uppercase;letter-spacing:.9px}
.mini-stat-big{font-weight:900;margin-top:4px}

.hero-media{position:relative}
.hero-card{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.55)}
.hero-img{width:100%;height:460px;object-fit:cover;transform:scale(1.02)}

/* UPDATED: hero overlay less blocking (glass gradient) */
.hero-card-overlay{
  position:absolute;left:18px;right:18px;bottom:18px;
  padding:10px 12px;border-radius:18px;
  background:linear-gradient(
    to top,
    rgba(255,255,255,.78),
    rgba(255,255,255,.30) 60%,
    rgba(255,255,255,0)
  );
  backdrop-filter:blur(10px);
  border:1px solid rgba(10,20,40,.06);
  box-shadow:none;
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px
}
.hero-card-title{font-weight:900}
.hero-card-sub{color:rgba(11,18,32,.68);font-weight:700;font-size:14px}

.hero-floats{position:absolute;inset:0;pointer-events:none}

/* UPDATED: chips more transparent */
.float-chip{
  position:absolute;
  padding:10px 12px;border-radius:999px;
  font-weight:900;font-size:13px;color:#0b1220;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(10px);
  border:1px solid rgba(10,20,40,.06);
  box-shadow:0 10px 22px rgba(10,20,40,.10)
}
.float-chip.c1{top:18px;left:-10px}
.float-chip.c2{top:86px;right:-12px}
.float-chip.c3{bottom:72px;left:-6px}

/* ===== SECTIONS ===== */
.section{padding:58px 0}
.section-compact{padding:52px 0 70px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.section-head h2{margin:0;font-size:clamp(24px,2.7vw,34px);letter-spacing:-.5px}
.section-head p{margin:0;color:rgba(11,18,32,.70);font-weight:700;max-width:560px}

/* ===== CUSTOMER GALLERY CARDS (img-card) ===== */
.cards-3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:14px
}
.img-card{
  border-radius:26px;overflow:hidden;
  background:rgba(255,255,255,.72);
  box-shadow:var(--shadow2);
  border:1px solid rgba(255,255,255,.55);
  display:flex;flex-direction:column
}
.img-card img{
  width:100%;
  height:260px;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .35s ease,filter .35s ease; /* added */
}
.img-card:hover img{transform:scale(1.06)}

/* UPDATED: caption less blocking (glass gradient) */
.img-card-cap{
  position:relative;
  margin:12px;
  margin-top:-10px; /* less overlap (blocks less of the dog/photo) */
  padding:10px 12px;
  border-radius:18px;
  background:linear-gradient(
    to top,
    rgba(255,255,255,.78),
    rgba(255,255,255,.35) 60%,
    rgba(255,255,255,0)
  );
  backdrop-filter:blur(10px);
  border:1px solid rgba(10,20,40,.06);
  align-self:stretch;
  box-shadow:none
}
.img-card-title{font-weight:900;font-size:16px;line-height:1.15}
.img-card-sub{color:rgba(11,18,32,.70);font-weight:800;margin-top:2px;font-size:12px;line-height:1.2}

/* ===== BANNER (image 3) ===== */
.banner{
  margin-top:18px;border-radius:28px;overflow:hidden;
  background:linear-gradient(120deg,rgba(37,99,235,.10),rgba(59,130,246,.05),rgba(249,115,22,.12));
  border:1px solid rgba(10,20,40,.07);
  box-shadow:var(--shadow2);
  display:grid;grid-template-columns:1.1fr .9fr;align-items:center
}
.banner-copy{padding:22px 22px}
.banner-copy h3{margin:0 0 6px;font-size:22px;letter-spacing:-.3px}
.banner-copy p{margin:0 0 14px;color:rgba(11,18,32,.72);font-weight:700;line-height:1.55}

/* UPDATED: show the full image (no heavy crop) */
.banner-img{
  width:100%;
  height:260px;
  object-fit:contain;              /* key change: avoids cropping */
  background:rgba(255,255,255,.55);/* soft letterbox */
}

/* ===== SPLIT ===== */
.section-split{
  padding:68px 0;
  background:rgba(255,255,255,.35);
  border-top:1px solid rgba(10,20,40,.06);
  border-bottom:1px solid rgba(10,20,40,.06)
}
.split-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:22px;align-items:center}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stack-img{
  position:relative;width:100%;height:260px;border-radius:28px;overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.7);
  object-fit:cover
}
.split-copy h2{margin:0 0 10px;font-size:clamp(24px,3vw,34px);letter-spacing:-.5px}
.feature-list{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.feature{
  display:flex;gap:12px;align-items:flex-start;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(10,20,40,.08);
  border-radius:20px;
  padding:14px 14px;
  box-shadow:var(--shadow2)
}
.icon{width:44px;height:44px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 44px}
.icon.i1{background:rgba(37,99,235,.16)}
.icon.i2{background:rgba(249,115,22,.16)}
.icon.i3{background:rgba(59,130,246,.07)}
.icon.i4{background:rgba(34,197,94,.16)}
.feature-title{font-weight:900}
.feature-text{color:rgba(11,18,32,.72);font-weight:700;margin-top:2px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

/* ===== IG GRID ===== */
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}

/* Default tiles: keep everything visible (no crop) and keep all tiles even */
.ig-tile{
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow2);
  background:rgba(255,255,255,.55);
  position:relative;
  aspect-ratio: 1 / 1;
}

.ig-tile img{
  width:100%;
  height:100%;
  object-fit:contain; /* no crop for text-heavy IG tiles */
  object-position:center;
  display:block;
  transition:filter .35s ease;
}

/* Keep hover polish without zoom-cropping */
.ig-tile:hover img{filter:saturate(1.08)}

/* Wide tile should not leave an empty half-row on desktop */
.ig-tile.wide{
  grid-column: 1 / -1;
  aspect-ratio: 4 / 1;
}

.social-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

/* ===== CONTACT ===== */
.contact-card{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(10,20,40,.08);
  border-radius:28px;
  box-shadow:var(--shadow);
  display:grid;grid-template-columns:1.05fr .95fr;gap:18px;
  padding:22px
}
.contact-left h2{margin:0 0 6px}
.contact-left p{margin:0 0 14px;color:rgba(11,18,32,.72);font-weight:700;line-height:1.55}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.contact-lines{display:grid;gap:10px}
.contact-lines>div{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(10,20,40,.08);
  border-radius:16px;padding:12px 12px;font-weight:800
}
.contact-lines span:first-child{color:rgba(11,18,32,.62);font-size:13px;text-transform:uppercase;letter-spacing:.9px}
.contact-lines a{color:var(--blue)}
.muted{color:rgba(11,18,32,.55);font-weight:800}

.mini-gallery{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;align-items:stretch;height:100%}
.mini-gallery img{
  width:100%;
  height:100%;
  min-height:150px; /* ensures a good tile height when the card is short */
  display:block;
  border-radius:18px;
  object-fit:cover;
  object-position:center;
  border:1px solid rgba(10,20,40,.06);
  box-shadow:0 12px 28px rgba(10,20,40,.12)
}

/* ===== FOOTER ===== */
.footer{padding:22px 0 26px;border-top:1px solid rgba(10,20,40,.06);background:rgba(255,255,255,.38)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.footer-left{display:flex;align-items:center;gap:10px}
.footer-logo{width:40px;height:40px;border-radius:14px;object-fit:cover;box-shadow:0 10px 20px rgba(10,20,40,.12)}
.footer-brand{font-weight:900}
.footer-sub{color:rgba(11,18,32,.68);font-weight:700;font-size:14px}
.footer-right{display:flex;gap:14px;flex-wrap:wrap}
.footer-right a{font-weight:800;color:rgba(11,18,32,.74)}
.footer-right a:hover{color:rgba(11,18,32,1)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;color:rgba(11,18,32,.70);font-weight:700;flex-wrap:wrap}

/* ===== REVEAL (FIXED BROKEN RULE) ===== */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .65s ease,transform .65s ease}
.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* ===== SUBHEAD ===== */
.subhead{margin-top:22px;margin-bottom:12px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.subhead h3{margin:0;font-size:22px;letter-spacing:-.3px}
.subhead p{margin:0;color:rgba(11,18,32,.70);font-weight:700}

/* ===== PRODUCT GRID ===== */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:10px}
.product-card{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow2);
  border:1px solid rgba(255,255,255,.65);
  background:#fff;
  min-height:220px
}
.product-card img{
  width:100%;
  height:100%;
  object-fit:contain;         /* keep for product packshots */
  background:#fff;            /* fixed typo: fbackground -> background */
  filter:saturate(1.18) contrast(1.05);
  transform:none;
  transition:filter .35s ease
}
.product-card:hover img{filter:saturate(1.22) contrast(1.08);}

/* UPDATED: product caption less blocking */
.product-cap{
  position:absolute;left:12px;right:12px;bottom:12px;
  padding:12px 14px;border-radius:18px;
  background:linear-gradient(
    to top,
    rgba(255,255,255,.78),
    rgba(255,255,255,.35) 60%,
    rgba(255,255,255,0)
  );
  backdrop-filter:blur(10px);
  border:1px solid rgba(10,20,40,.06);
  box-shadow:none
}
.product-title{font-weight:900}
.product-sub{color:rgba(11,18,32,.70);font-weight:800;margin-top:2px;font-size:13px}

/* Optional: for images you do NOT want cropped anywhere */
.product-card img.contain{
  object-fit:contain;
  background:rgba(255,255,255,.6);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 920px){
  .hero-grid{grid-template-columns:1fr;gap:16px}
  .hero-img{height:420px}
  .cards-3{grid-template-columns:repeat(2,1fr);gap:12px}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .banner{grid-template-columns:1fr}
  .banner-img{height:240px}
  .split-grid{grid-template-columns:1fr;gap:16px}
  .stack{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .contact-card{grid-template-columns:1fr}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .ig-tile.wide{grid-column:span 2; aspect-ratio: 16 / 9}
  .mini-gallery{height:auto}
  .mini-gallery img{height:160px; min-height:unset}
  .nav-toggle{display:inline-flex}
  .nav{
    position:fixed;top:70px;right:14px;left:14px;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(14px);
    border:1px solid rgba(10,20,40,.10);
    border-radius:22px;
    padding:12px;
    box-shadow:var(--shadow);
    display:none;
    flex-direction:column;
    align-items:stretch
  }
  .nav.open{display:flex}
  .nav a{
    padding:12px 12px;border-radius:16px;
    background:rgba(255,255,255,.65);
    border:1px solid rgba(10,20,40,.06)
  }
  .nav a.btn{background:linear-gradient(120deg,var(--blue),var(--purple),var(--orange));border:none}
}

/* ===== MISC ===== */
.fineprint{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(11,18,32,.62);
}
.nowrap{ white-space: nowrap; }

/* ===== GALLERY LAYOUT (product-card based gallery) ===== */
/* IMPORTANT: ensures gallery photos fill the whole card, and captions don't block */
.gallery-grid{
  display:grid;
  gap:14px;
  margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  align-items:stretch
}

/* Card controls the aspect ratio */
.gallery-grid .product-card{
  aspect-ratio: 4 / 5;
  min-height: unset;
}

/* Fill the whole card with the image */
.gallery-grid .product-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;         /* key change for “fill the space” */
  object-position:center;
  background:#fff;
}

/* Caption: glass gradient so it doesn't block the photo */
.gallery-grid .product-cap{
  background:linear-gradient(
    to top,
    rgba(255,255,255,.78),
    rgba(255,255,255,.35) 60%,
    rgba(255,255,255,0)
  );
  border-color: rgba(10,20,40,.06);
  box-shadow:none;
  padding:10px 12px;
}

.subnote{margin:10px 0 0;color:rgba(11,18,32,.70);font-weight:700}

@media (max-width: 820px){
  .stack{grid-template-columns:1fr}
  .stack-img{height:240px}
}

/* Background paw pattern (subtle, site-wide) */
@media (max-width: 900px){
}

/* =========================
   Collections section fixes (banner + toy examples only)
   ========================= */

/* Banner: keep it compact and centered without forcing wide empty columns */
#collections .banner{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: 1fr auto; /* image column sizes to the image */
  align-items: stretch;
}

#collections .banner-copy{
  padding: 22px 22px;
  display: block; /* avoid flex stretching side-effects */
}

#collections .banner-copy .btn{ width: auto; }

/* Banner image: show full image (no crop) and remove the white letterbox */
#collections .banner-img{
  height: 280px;       /* controls banner height */
  width: auto;         /* preserve image aspect ratio */
  object-fit: contain; /* no crop */
  object-position: center;
  background: transparent; /* empty areas show banner bg, not white */
}

@media (max-width: 920px){
  #collections .banner{
    max-width: none;
    grid-template-columns: 1fr;
  }
  #collections .banner-img{
    width: 100%;
    height: 240px;
  }
}

/* Toy styles included (examples): even cards, images fill, captions don't block */
#collections .product-grid{ align-items: stretch; }

#collections .product-grid .product-card{
  display: flex;
  flex-direction: column;
  min-height: unset;
}

#collections .product-grid .product-card img{
  position: static;
  width: 100%;
  height: 220px;
  object-fit: cover;        /* fills without white gaps */
  object-position: center;
  background: transparent;
  filter: saturate(1.12) contrast(1.03);
}

#collections .product-grid .product-cap{
  position: static;
  margin: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(10,20,40,.06);
}

@media (max-width: 920px){
  #collections .product-grid .product-card img{ height: 200px; }
}