/* Colours come from config.js via brand.js; these are fallbacks. */
:root {
  --background: #eceef1;
  --card: #ffffff;
  --text: #000000;
  --muted: #555b66;
  --radius: 8px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--background);
}
main, .profile, footer { max-width: 680px; margin: 0 auto; padding: 0 16px; }
a { color: inherit; }

/* Profile header, Linktree-style */
.profile { text-align: center; padding-top: 48px; padding-bottom: 24px; }
.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--card); }
.profile h1 { margin: 12px 0 4px; font-size: 1.25rem; font-weight: 700; }
.tagline { margin: 0 0 12px; }
.social { display: inline-block; padding: 4px; }

/* Basket link pinned top-right */
.basket-link {
  position: fixed; z-index: 1;
  top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
  background: var(--card); padding: 8px 14px; border-radius: 999px;
  text-decoration: none; font-weight: 600;
}

/* Products: one column on phones, two on wider screens */
.grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { background: var(--card); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; }
/* Square frame, whole photo visible; leftover space shows as bars */
.card img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--background); border-radius: calc(var(--radius) - 2px); }
.card h3 { margin: 10px 0 2px; font-size: 1.05rem; }
.card .desc { flex: 1; margin: 0 0 6px; color: var(--muted); font-size: 0.95rem; }
.card .price { margin: 0 0 10px; font-weight: 600; }
.tag { font-size: 0.8rem; font-weight: 400; color: var(--muted); border: 1px solid currentColor; padding: 0 6px; border-radius: 999px; margin-left: 6px; }

/* Buttons: solid text colour on card colour, like Linktree's inverse */
button, .button {
  display: block; width: 100%; text-align: center; text-decoration: none;
  font: inherit; font-weight: 600; padding: 12px 16px; border: 0; border-radius: var(--radius);
  background: var(--text); color: var(--card); cursor: pointer;
}
button:disabled { opacity: 0.5; }
:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }

/* Basket */
.panel { background: var(--card); border-radius: var(--radius); padding: 16px; margin-top: 32px; }
.panel h2 { margin: 0 0 8px; font-size: 1.15rem; }
#basket { scroll-margin-top: 64px; }
#basket-items { list-style: none; padding: 0; margin: 0; }
#basket-items li { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--background); }
#basket-items .name { flex: 1 1 100%; font-weight: 600; }
#basket-items input { width: 4rem; font: inherit; padding: 4px; }
#basket-items button { display: inline-block; width: auto; padding: 4px 12px; background: var(--background); color: var(--text); font-weight: 400; }
.note { color: var(--muted); font-size: 0.9rem; }

footer { text-align: center; padding-top: 32px; padding-bottom: 48px; color: var(--muted); font-size: 0.9rem; }