/* Boutique — a warm cream page, a rounded photo, and product cards with an image panel and a black pill button. For shops, makers, bakers, creators who sell. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
	--bg: #f6f2ea;
	--fg: #1b1a17;
	--muted: #6a6558;
	--bio-fg: #4d493f;
	--accent: #1b1a17;
	--accent-fg: #fff;
	--accent-glyph: none;
	--font-head: 'Fraunces', Georgia, serif;
	--font-body: 'DM Sans', system-ui, sans-serif;

	--max: 480px;

	--btn-bg: #fff;
	--btn-fg: #1b1a17;
	--btn-border: 1px solid rgba(27, 26, 23, .12);
	--btn-radius: 999px;
	--btn-shadow: 0 8px 22px -16px rgba(60, 40, 10, .5);
	--btn-pad: 16px 22px;

	--chip-bg: #1b1a17;
	--chip-border: 0 solid transparent;
	--chip-size: 46px;

	--glyph-page: invert(1);
	--pop-bg: #fffdf8;
	--pop-fg: #1b1a17;
	--pop-border: rgba(27, 26, 23, .14);
	--pop-shade: rgba(30, 24, 12, .45);
	--field-bg: #f3eee3;
	--star-filter: invert(1);
	--share-bg: rgba(255, 255, 255, .8);
	--share-fg: #1b1a17;
	--share-border: 1px solid rgba(27, 26, 23, .14);
	--row-ico-bg: #f1ece0;
	--g-link: var(--gd-link); --g-pin: var(--gd-pin); --g-phone: var(--gd-phone); --g-chat: var(--gd-chat);
	--g-mail: var(--gd-mail); --g-user: var(--gd-user); --g-arrow: var(--gd-arrow); --g-chev: var(--gd-chev);

	--card-bg: #fff;
	--card-fg: #1b1a17;
	--card-muted: #6a6558;
	--card-border: 1px solid rgba(27, 26, 23, .1);
	--card-radius: 24px;
	--card-shadow: 0 14px 30px -20px rgba(60, 40, 10, .55);
	--card-pad: 10px;
	--card-chip-bg: #f1ece0;
	--card-thumb-size: 96px;
	--card-thumb-radius: 16px;
	--card-cta-bg: var(--accent);
	--card-cta-fg: var(--accent-fg);
	--card-badge-bg: var(--accent);
	--card-badge-fg: var(--accent-fg);
	--card-input-bg: #faf7f0;
}

.bg {
	width: calc(100% - 32px);
	max-width: 460px;
	aspect-ratio: 4 / 3.3;
	max-height: none;
	margin-top: 16px;
	border-radius: 28px;
	box-shadow: 0 22px 44px -26px rgba(60, 40, 10, .6);
}
.bg::after { display: none; }

.header { margin-top: 22px; gap: 6px; }
.header .title h1 { font-weight: 600; font-size: clamp(1.8rem, 8.4vw, 2.3rem); letter-spacing: -.01em; }
.header h2 { font-size: 1rem; }
.header .title > img { opacity: 1; }

.social-media { padding-top: 22px; gap: 12px; }
.social-media > a:hover { background: var(--accent); filter: brightness(1.25); }

.links { padding-top: 26px; gap: 14px; }
.link { font-weight: 600; }
.link:hover { background: #fffdf8; box-shadow: 0 12px 26px -16px rgba(60, 40, 10, .6); }
.links .link:first-child { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.links .link:first-child:hover { background: var(--accent); filter: brightness(1.2); }

/* product cards: an image panel on the left, text and the button on the right */
body .links .link.card {
	display: grid !important;
	grid-template-columns: var(--card-thumb-size) minmax(0, 1fr);
	grid-template-areas: "thumb text" "thumb cta";
	grid-template-rows: auto 1fr;
	align-items: start;
	gap: 0 14px;
}
body .links .link.card::after { display: none !important; }
.link.card .lk-thumb { grid-area: thumb; width: auto; height: auto; min-height: var(--card-thumb-size); align-self: stretch; font-size: 2.3rem; }
.link.card .lk-thumb:empty::before { width: 40%; height: 40%; }
.link.card .lk-text { grid-area: text; padding: 6px 6px 0 0; }
.link.card .lk-title { font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; }
.link.card .lk-cta { grid-area: cta; justify-self: start; align-self: end; min-height: 40px; margin: 12px 6px 4px 0; padding: 9px 22px; }
.subscribe h3 { font-family: var(--font-head); font-weight: 600; }