/* Brynnie B’s – Styles (v1.1.2 layout fix) */
:root{
  --cocoa:#7A533A; --cream:#F7EFE8; --blush:#E9A8A1; --ink:#222; --tan:#CBA786; --teal:#2E7F86;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff;}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px,92%);margin-inline:auto}
.small{font-size:.9rem}.mute{color:#666}.center{text-align:center}.narrow{max-width:780px;margin-inline:auto}
.lead{font-size:1.1rem;color:#3b3b3b}

/* Header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:6px solid var(--cream);z-index:20}
.nav-wrap{display:flex;align-items:center;gap:18px;padding:10px 0}
.brand{display:flex;align-items:center}
.main-nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
.main-nav a{padding:8px 10px;border-radius:999px;background:transparent}
.main-nav a.active{background:var(--cream);color:var(--cocoa);font-weight:700}
.main-nav .cart-link{background:var(--blush);color:#fff}
.nav-toggle{display:none;margin-left:auto;background:var(--cocoa);color:#fff;border:0;border-radius:10px;padding:8px 10px}
@media (max-width:820px){
  .main-nav{display:none}
  .nav-toggle{display:block}
  .main-nav.open{display:flex;flex-direction:column;align-items:flex-start;background:#fff;border:1px solid #eee;padding:10px;position:absolute;top:58px;right:4%;}
}

/* Hero */
.hero{position:relative;background:linear-gradient(180deg,var(--cream),#fff);padding:40px 0 20px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:28px}
.hero h1{font-family:"Baloo 2",cursive;font-size:2.2rem;color:var(--cocoa);margin:0 0 10px}
.hero .cta-row{display:flex;gap:12px;margin:16px 0}
.hero .features-inline{display:flex;gap:16px;color:#555;padding:0;margin:14px 0;list-style:none}
.hero-sticker img{filter:drop-shadow(0 16px 26px rgba(0,0,0,.15));}
.paw-bg{position:absolute;inset:auto 0 0 0;height:80px;background:radial-gradient(ellipse at 10% -30%, rgba(201,167,134,.35), transparent 60%),radial-gradient(ellipse at 80% -30%, rgba(233,168,161,.25), transparent 60%)}

/* Value cards */
.value-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px auto}
.card{background:#fff;border:2px solid var(--tan);border-radius:18px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,.05)}
.card h3{margin:0 0 6px;color:var(--cocoa);font-family:"Baloo 2",cursive}

/* Split section */
.split{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;margin:40px auto}
.promo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.promo{display:grid;place-items:center;min-height:120px;border:2px dashed var(--blush);border-radius:20px;background:#fff;font-weight:700;color:var(--cocoa)}

/* Events */
.events-preview{background:#fff7f6;border-top:6px solid var(--cream);border-bottom:6px solid var(--cream);padding:28px 0}
.events-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.event-card{background:#fff;border:2px solid var(--tan);border-radius:16px;padding:14px}
.event-card .date{font-weight:800;color:var(--cocoa)}

/* Gallery */
.gallery-preview .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.masonry{column-count:3;column-gap:14px}
.masonry img{margin-bottom:14px;border-radius:16px;border:3px solid var(--cream)}

/* ---------- PRODUCTS (fixed card width + sane single-item behavior) ---------- */
.product-grid{
  display:grid !important;
  /* fixed-width columns that wrap; leftover space stays empty (no giant cards) */
  grid-template-columns: repeat(auto-fill, minmax(240px, 280px));
  gap:18px;
  justify-content:start;   /* left-align the grid */
  align-items:start;
  margin:20px 0 40px;
}

.product{
  border:2px solid var(--tan);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:280px;         /* prevents cards from growing too wide */
}

.product img{
  width:100%;
  aspect-ratio: 4 / 5;     /* consistent thumbnail shape */
  object-fit: cover;       /* crop rather than stretch */
}

.product .meta{padding:12px}
.product h3{font-family:"Baloo 2",cursive;margin:0 0 6px;color:var(--cocoa)}
.price{font-weight:800;color:var(--cocoa)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.chip{border:2px solid var(--tan);padding:6px 10px;border-radius:999px;background:#fff;color:#444}

/* Small screens: allow full width for readability */
@media (max-width:640px){
  .product-grid{grid-template-columns:1fr}
  .product{max-width:none}
}

/* Forms */
.form-card{background:#fff;border:2px solid var(--tan);border-radius:16px;padding:16px}
.form-card input,.form-card select,.form-card textarea{width:100%;padding:10px;border:2px solid #ddd;border-radius:10px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* Buttons */
.btn{display:inline-block;border:0;border-radius:999px;padding:10px 16px;font-weight:700}
.btn-primary{background:var(--teal);color:#fff}
.btn-outline{background:#fff;border:2px solid var(--teal);color:var(--teal)}
.btn:disabled{opacity:.6;pointer-events:none}

/* Footer */
.site-footer{margin-top:40px;background:#fff;border-top:6px solid var(--cream)}
.footer-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:18px 0}

/* Cart */
.cart-item{display:grid;grid-template-columns:80px 1fr auto auto;gap:10px;align-items:center;border-bottom:1px dashed var(--cream);padding:10px 0}
.cart-item h4{margin:0}
.cart-summary{margin:14px 0;font-weight:800}
.cart-actions{display:flex;gap:12px;align-items:center}

/* Responsive */
@media (max-width:980px){
  .value-cards{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .events-row,.events-grid{grid-template-columns:1fr 1fr}
  .masonry{column-count:2}
}
@media (max-width:640px){
  .hero-grid{grid-template-columns:1fr}
  .events-row,.events-grid{grid-template-columns:1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .masonry{column-count:1}
}