/* Meikero — studio hero part 2: the fictional "Clay & Co" site inside the preview. */

.pv {
	--bg: #ffffff; --fg: #1c1b1a; --muted: #77736f; --line: #e8e5e1; --card: #f4f2ef;
	--acc: #1c1b1a; --on-acc: #ffffff; --r: 6px; --gap: 28px;
	position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
	background: var(--bg); color: var(--fg);
	font-family: var(--font-sans); font-size: 13px; line-height: 1.5; letter-spacing: -0.005em;
	transition: background-color .6s ease, color .6s ease;
}
.pv::-webkit-scrollbar { display: none; }
.pv[data-theme="warm"] { --bg: #f5efe6; --fg: #2b2520; --muted: #7b7066; --line: #e3d9cb; --card: #ece3d6; --acc: #2b2520; --on-acc: #f5efe6; }
.pv[data-theme="dark"] { --bg: #111110; --fg: #f1efec; --muted: #8d8a85; --line: #262523; --card: #1b1a19; --acc: #f1efec; --on-acc: #111110; }
.pv[data-theme="cool"] { --bg: #f3f5f7; --fg: #111827; --muted: #64707d; --line: #dfe4ea; --card: #e8ecf1; --acc: #111827; --on-acc: #f3f5f7; }
.pv[data-accent="forest"] { --acc: #14532d; --on-acc: #ffffff; }
.pv[data-accent="sage"] { --acc: #3f5f4a; --on-acc: #ffffff; }
.pv[data-accent="blue"] { --acc: #1e3a8a; --on-acc: #ffffff; }
.pv[data-accent="slate"] { --acc: #334155; --on-acc: #ffffff; }
.pv[data-theme="dark"][data-accent="blue"] { --acc: #7c9cff; --on-acc: #0b1020; }
.pv[data-theme="dark"][data-accent="forest"] { --acc: #4ade80; --on-acc: #052e16; }
.pv[data-theme="dark"][data-accent="slate"] { --acc: #cbd5e1; --on-acc: #0f172a; }
.pv[data-theme="dark"][data-accent="sage"] { --acc: #8fae8a; --on-acc: #0e140d; }
.pv[data-radius="soft"] { --r: 14px; }
.pv[data-radius="sharp"] { --r: 0px; }
.pv[data-density="airy"] { --gap: 46px; }
.pv[data-density="compact"] { --gap: 16px; }
.pv * { transition: background-color .6s ease, color .6s ease, border-color .6s ease, border-radius .5s ease; }

/* Announcement bar */
.pv-announce { background: var(--acc); color: var(--on-acc); text-align: center; font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.pv-announce[data-on="true"] { padding: 8px 12px; }

/* Header */
.pv-nav { display: flex; align-items: center; gap: 24px; padding: 16px 28px; border-bottom: 1px solid var(--line); }
.pv-logo { font-weight: 600; font-size: 14px; letter-spacing: -.02em; white-space: nowrap; }
.pv-menu { display: flex; gap: 18px; margin-left: auto; color: var(--muted); font-size: 12px; }
.pv-menu i { font-style: normal; }
.pv-cart { display: inline-flex; align-items: center; gap: 5px; }
.pv-cart svg { width: 16px; height: 16px; fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pv-cart b { font-size: 10px; line-height: 16px; min-width: 16px; text-align: center; border-radius: 99px; background: var(--acc); color: var(--on-acc); }
.pv-cart[data-on="false"] { width: 0; }
.pv[data-logo="center"] .pv-nav { display: grid; grid-template-columns: 1fr auto 1fr; }
.pv[data-logo="center"] .pv-menu { order: 1; margin: 0; }
.pv[data-logo="center"] .pv-logo { order: 2; }
.pv[data-logo="center"] .pv-cart { order: 3; justify-self: end; }

/* Hero */
.pv-hero { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; padding: calc(var(--gap) + 10px) 28px var(--gap); border-radius: var(--r); }
.pv[data-heroimg="on"] .pv-hero { grid-template-columns: 1.1fr 1fr; }
.pv-kicker { display: none; margin: 0 0 10px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); font-weight: 500; }
.pv[data-headline="on"] .pv-kicker { display: block; }
.pv-h { margin: 0 0 10px; font-size: 20px; font-weight: 400; line-height: 1.15; letter-spacing: -.01em; transition: font-size .55s cubic-bezier(.16,.84,.24,1), letter-spacing .55s, color .6s; }
.pv[data-headline="on"] .pv-h { font-size: 40px; font-weight: 600; letter-spacing: -.045em; line-height: 1.02; max-width: 12ch; }
.pv[data-font="serif"] .pv-h { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 500; letter-spacing: -.02em; }
.pv-p { margin: 0 0 18px; color: var(--muted); font-size: 13px; max-width: 42ch; }
.pv-btn { display: inline-block; padding: 10px 16px; border-radius: var(--r); background: var(--acc); color: var(--on-acc); font-size: 12px; font-weight: 500; }
.pv-hero__img { position: relative; height: 210px; border-radius: var(--r); overflow: hidden; background: linear-gradient(165deg, #dfe3e7 0%, #b8c0c8 100%); }
.pv[data-theme="warm"] .pv-hero__img { background: linear-gradient(165deg, #dccfbd 0%, #bca88f 100%); }
.pv[data-theme="dark"] .pv-hero__img { background: linear-gradient(165deg, #3b342d 0%, #1f1b18 100%); }
.pv-vessel { position: absolute; left: 24%; bottom: 16%; width: 34%; height: 58%; background: #efe7db; border-radius: 42% 42% 46% 46% / 30% 30% 60% 60%; box-shadow: inset -12px -6px 0 rgba(0,0,0,.07); }
.pv-vessel--2 { left: 60%; width: 20%; height: 34%; background: #8c6c52; border-radius: 50% 50% 44% 44% / 40% 40% 60% 60%; }

/* Sections */
.pv-sec { margin: 0 28px; padding: var(--gap) 0; border-top: 1px solid var(--line); }
.pv-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pv-features div::before { content: ""; display: block; width: 18px; height: 2px; background: var(--acc); margin-bottom: 12px; }
.pv-features b { display: block; font-size: 13px; margin-bottom: 4px; }
.pv-features span { color: var(--muted); font-size: 12px; }

.pv-shop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pv-shop__head > b { font-size: 16px; letter-spacing: -.02em; }
.pv-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-cats i { font-style: normal; font-size: 11px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); }
.pv-cats i.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pv-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pv-prod { opacity: 0; transform: translateY(10px); animation: pv-in .5s cubic-bezier(.16,.84,.24,1) forwards; }
.pv-prod.is-static { opacity: 1; transform: none; animation: none; }
.pv-prod__img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); background: var(--card); overflow: hidden; margin-bottom: 10px; }
.pv-prod.is-sold .pv-prod__img .shape { opacity: .45; }
.pv-prod__cat { margin: 0; font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pv-prod__name { margin: 0; font-weight: 500; font-size: 13px; }
.pv-prod__desc { margin: 2px 0 0; color: var(--muted); font-size: 11.5px; }
.pv-prod__price { margin: 4px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.pv-prod__price s { color: var(--muted); margin-right: 6px; }
.pv-prod__price .is-sale { color: var(--acc); font-weight: 600; }
.pv-badge { position: absolute; top: 8px; left: 8px; padding: 3px 7px; font-size: 10px; font-weight: 600; border-radius: calc(var(--r) / 2); background: var(--acc); color: var(--on-acc); }
.pv-badge--best { left: auto; right: 8px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); }
.pv-badge--sold { background: var(--fg); color: var(--bg); }
.pv-alt { position: absolute; bottom: 6px; right: 6px; font-family: var(--font-mono); font-size: 9px; padding: 2px 5px; border-radius: 3px; background: rgba(0,0,0,.6); color: #fff; }

/* Product silhouettes */
.shape { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); background: var(--glaze, #d9cfc1); transition: opacity .4s; }
.shape--mug { width: 28%; height: 44%; border-radius: 4px 4px 14px 14px; }
.shape--mug::after { content: ""; position: absolute; right: -30%; top: 22%; width: 34%; height: 44%; border: 5px solid var(--glaze, #d9cfc1); border-left: 0; border-radius: 0 50% 50% 0; }
.shape--bowl { width: 52%; height: 30%; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.shape--plate { width: 60%; height: 13%; bottom: 32%; border-radius: 50%; box-shadow: inset 0 -4px 0 rgba(0,0,0,.06); }
.shape--set { width: 26%; height: 42%; border-radius: 46% 46% 8px 8px / 34% 34% 8px 8px; }
.shape--set::after { content: ""; position: absolute; left: 110%; bottom: 0; width: 70%; height: 46%; border-radius: 3px 3px 10px 10px; background: inherit; }
.shape--vase { width: 18%; height: 60%; border-radius: 40% 40% 30% 30% / 18% 18% 52% 52%; }
.shape--platter { width: 66%; height: 17%; bottom: 30%; border-radius: 50%; box-shadow: inset 0 -5px 0 rgba(0,0,0,.06); }

.pv-about b, .pv-news b { display: block; font-size: 16px; letter-spacing: -.02em; margin-bottom: 6px; }
.pv-about span { display: block; color: var(--muted); max-width: 54ch; }
.pv-pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pv-pricing > div { padding: 16px; border: 1px solid var(--line); border-radius: var(--r); }
.pv-pricing em { display: block; font-style: normal; color: var(--muted); font-size: 11px; }
.pv-pricing strong { display: block; font-size: 22px; letter-spacing: -.03em; margin: 4px 0; }
.pv-pricing span { font-size: 11px; color: var(--muted); }
.pv-pricing .is-hl { border-color: var(--acc); }
.pv-news { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pv-news__form { display: flex; gap: 6px; }
.pv-news__form i { font-style: normal; padding: 8px 12px; min-width: 150px; border: 1px solid var(--line); border-radius: var(--r); color: var(--muted); font-size: 11px; }
.pv-news__form em { font-style: normal; padding: 8px 12px; border-radius: var(--r); background: var(--acc); color: var(--on-acc); font-size: 11px; }
.pv-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: var(--gap); padding: 18px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }

/* Show / hide */
.pv [data-on] { transition: opacity .5s ease, transform .55s cubic-bezier(.16,.84,.24,1), max-height .7s ease, padding .6s ease, margin .6s ease, border-color .6s ease, width .5s ease, background-color .6s ease, color .6s ease; }
.pv [data-on="false"] { opacity: 0; max-height: 0 !important; overflow: hidden; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; border-top-color: transparent !important; transform: translateY(8px); }
.pv [data-on="true"] { opacity: 1; max-height: 1200px; }
.pv .is-edited { animation: hb-edit 1.4s ease-out; }

@media (max-width: 640px) {
	.pv-products { grid-template-columns: repeat(2, 1fr); }
	.pv[data-heroimg="on"] .pv-hero { grid-template-columns: 1fr; }
	.pv-hero__img { height: 150px; }
	.pv-features, .pv-pricing { grid-template-columns: 1fr; }
	.pv[data-headline="on"] .pv-h { font-size: 30px; }
	.pv-menu { display: none; }
	.pv-news { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.pv, .pv *, .pv [data-on] { transition: none !important; }
	.pv-prod { animation: none; opacity: 1; transform: none; }
	.pv .is-edited { animation: none; }
}