:root { --ink: #17332d; --moss: #2f654d; --mist: #eef3eb; --paper: #fffdf7; --line: #d5dfd2; --sl-color-primary-500: #4d8654; --sl-color-primary-600: #386e43; --sl-font-sans: Georgia, 'Times New Roman', serif; --sl-border-radius-medium: 6px; }
* { box-sizing: border-box; } body { background: var(--mist); color: var(--ink); margin: 0; }.app-header { align-items: center; background: var(--paper); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 1rem clamp(1.25rem, 5vw, 5rem); }.brand { color: var(--moss); font-size: 1.35rem; font-weight: 700; text-decoration: none; }.header-basket { align-items: baseline; display: flex; gap: .6rem; }.header-basket span, .empty-copy, .item-card p, .basket-card small { color: #65766a; }.header-basket strong { color: var(--moss); font-size: 1.25rem; }
.app-shell { margin: 0 auto; max-width: 82rem; padding: clamp(2rem, 5vw, 5rem); }.intro { align-items: stretch; display: grid; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: 1fr minmax(19rem, .8fr); margin-bottom: clamp(3rem, 7vw, 6rem); }.eyebrow { color: var(--moss); font-size: .75rem; font-weight: 700; letter-spacing: .08em; margin: 0 0 .75rem; text-transform: uppercase; }.intro h1 { font-size: clamp(3rem, 7vw, 6rem); line-height: .92; margin: 0; max-width: 9ch; }.intro > div > p:last-child { color: #52665a; font-size: 1.1rem; line-height: 1.6; max-width: 32rem; }
.basket-card::part(base) { background: var(--paper); border-color: var(--line); height: 100%; }.basket-card__heading, .basket-total, .item-meta { align-items: center; display: flex; justify-content: space-between; }.basket-card h2 { font-size: 1.4rem; line-height: 1.15; margin: 0; max-width: 15rem; }.selection-summary { color: #65766a; line-height: 1.6; min-height: 4.5rem; }.basket-total { font-size: 1.1rem; margin-bottom: .75rem; }.basket-card sl-progress-bar { --height: .45rem; --track-color: #e4ece1; }.basket-card small { display: block; margin-top: .7rem; }
.market-panel { background: var(--paper); border: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 3rem); }.market-toolbar { align-items: end; display: flex; gap: 2rem; justify-content: space-between; margin-bottom: 2rem; }.market-toolbar h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; margin: 0; }.filter-row { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: end; }.item-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }.item-card::part(base) { height: 100%; }.item-card::part(image) { aspect-ratio: 1.2; }.item-card img[slot="image"] { height: 100%; object-fit: cover; width: 100%; }.item-meta { font-size: .85rem; }.item-card h3 { font-size: 1.35rem; margin: .8rem 0 .2rem; }.item-card p { margin: 0 0 1rem; }
@media (max-width: 760px) { .app-shell { padding: 1.25rem; }.intro, .item-grid { grid-template-columns: 1fr; }.market-toolbar { align-items: start; flex-direction: column; }.filter-row { justify-content: start; } }