/* base.css — reset, typography, buttons, cards/grids, shared bag component
   (split from storefront.css, move-only). */

@font-face { font-family:"Quicksand"; src:url("../fonts/quicksand-300-700.9d503278216c.woff2") format("woff2");
  font-weight:300 700; font-display:swap; }
@font-face { font-family:"Lato"; src:url("../fonts/lato-400.e1b3b5908c9c.woff2") format("woff2");
  font-weight:400; font-display:swap; }
@font-face { font-family:"Lato"; src:url("../fonts/lato-700.de69cf9e514d.woff2") format("woff2");
  font-weight:700; font-display:swap; }

*,*::before,*::after { box-sizing:border-box; }
body { margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper);
  line-height:1.6; }
h1,h2,h3 { font-family:var(--font-head); font-weight:700; line-height:1.15; margin:0 0 .5em; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--gap); }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-head);
  font-weight:700; border:0; border-radius:999px; padding:.85rem 1.5rem; cursor:pointer;
  background:var(--green); color:#fff; transition:transform .15s, filter .15s; }
.btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
.btn--action { background:var(--action); }         /* the one reserved red */
.btn--ghost { background:var(--green-tint); color:var(--ink); }

/* cards + grids */
.grid { display:grid; gap:var(--gap); }
.grid--cards { grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.card__img { aspect-ratio:1/1; background:var(--kraft); object-fit:cover; width:100%; }

.card__body { padding:1rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.chip { display:inline-flex; align-items:center; gap:.35rem; align-self:flex-start;
  background:var(--green-tint); color:#3f7a12; font-weight:700; font-size:.8rem;
  padding:.2rem .6rem; border-radius:999px; }
.chip svg { width:16px; height:16px; }
.price-tag { color:var(--muted); font-weight:700; font-size:.9rem; }

.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; filter:none; }

/* bag visual: real bag photo (colour-selectable), with the customer's logo
   composited over the shared logo zone on the front face. Shared by the
   product card and the customizer/detail views. */
.bag { position:relative; width:100%; }
.bag__photo { width:100%; display:block; border-radius:var(--radius); }
.bag__logo { position:absolute; left:30%; top:46%; width:30%; height:23.5%;
  object-fit:contain; object-position:center; pointer-events:none; }