/* Static flattened equivalents of the DS x-import components used by the template
 * (Logo, BrandHeart, ShopCard, ProductCard, OrderLineItem, CartLineItem, Button, Card).
 * Faithful-enough reproductions using ds2 tokens; refine against DS component source. */

/* Logo — brand image asset (logo_img.png) */
.logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.logo-img{height:26px;width:auto;display:block}
.logo-img.footer{height:22px}
.fx{display:flex;align-items:center}
.fx.jc{justify-content:center}

/* BrandHeart — s2fan pixel-heart filled with brand conic gradient (DS BrandHeart) */
.brandheart{display:inline-block;background:var(--grad-brand);-webkit-mask:url(../img/brand-heart.svg) no-repeat center/contain;mask:url(../img/brand-heart.svg) no-repeat center/contain}
.logo .brandheart{width:var(--logo-size,22px);height:calc(var(--logo-size,22px) * .849)}

/* ShopCard (Step 2) — media tile with bottom-overlaid title/time + like pill (DS ShopCard) */
.ds-shopcard{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-xl);overflow:hidden;background:var(--c-gray-800)}
.ds-shopcard .sc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ds-shopcard .sc-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.97) 0%,rgba(0,0,0,.82) 22%,rgba(0,0,0,.45) 42%,rgba(0,0,0,0) 70%)}
.ds-shopcard .sc-like{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px;border-radius:var(--radius-pill);background:rgba(0,0,0,.4);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);font:var(--type-tag);color:var(--c-white)}
.ds-shopcard .sc-cap{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-direction:column;gap:4px}
.ds-shopcard .sc-time{font:var(--type-caption);font-weight:var(--fw-bold);color:var(--accent)}
.ds-shopcard .sc-title{font:var(--type-h3);color:var(--c-white);letter-spacing:var(--ls-tight)}

/* ProductCard (Step 2) — square media + floating heart, name, price, likes/location (DS ProductCard) */
.ds-pcard{border-radius:var(--radius-xl);overflow:hidden;background:var(--surface-base);box-shadow:var(--ring-subtle)}
.ds-pcard .pc-media{position:relative}
.ds-pcard .pc-img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--surface-control)}
.ds-pcard .pc-heart{position:absolute;top:9px;right:9px;line-height:0}
.ds-pcard .pc-body{padding:9px 10px 10px}
.ds-pcard .pc-name{font-weight:var(--fw-bold);font-size:var(--fs-13);line-height:1.2;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-pcard .pc-price{font-weight:var(--fw-black);font-size:var(--fs-14);letter-spacing:var(--ls-tight);margin:0 0 5px}
.ds-pcard .pc-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:var(--fs-12);font-weight:var(--fw-bold);color:var(--text-tertiary)}

/* OrderLineItem (Step 4) */
.ds-orderline{display:flex;align-items:center;gap:11px;background:var(--surface-base);border-radius:14px;padding:9px 11px;box-shadow:inset 0 0 0 1px var(--border-subtle)}
.ds-orderline .ol-th{width:52px;height:52px;border-radius:11px;object-fit:cover;flex:none;background:var(--surface-control)}
.ds-orderline .ol-meta{flex:1;min-width:0}
.ds-orderline .ol-nm{font-weight:var(--fw-bold);font-size:var(--fs-14);line-height:1.2;margin:0 0 3px}
.ds-orderline .ol-sub{font-size:var(--fs-12);color:var(--text-tertiary);line-height:1.2}
.ds-orderline .ol-qty{font-size:var(--fs-12);font-weight:var(--fw-bold);color:var(--text-tertiary);flex:none}
.ds-orderline .ol-price{font-weight:var(--fw-black);font-size:var(--fs-14);letter-spacing:var(--ls-tight);flex:none}

/* CartLineItem (Step 5) */
.ds-cartline{display:flex;align-items:center;gap:11px;padding:4px 2px}
.ds-cartline .cl-check{width:20px;height:20px;border-radius:6px;flex:none;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;color:var(--c-white);font-size:12px;font-weight:var(--fw-black)}
.ds-cartline .cl-th{width:56px;height:56px;border-radius:11px;object-fit:cover;flex:none;background:var(--surface-control)}
.ds-cartline .cl-meta{flex:1;min-width:0}
.ds-cartline .cl-nm{font-weight:var(--fw-bold);font-size:var(--fs-14);line-height:1.2;margin:0 0 4px}
.ds-cartline .cl-price{font-weight:var(--fw-black);font-size:var(--fs-14);letter-spacing:var(--ls-tight)}
.ds-cartline .cl-qty{font-size:var(--fs-12);font-weight:var(--fw-bold);color:var(--text-tertiary);flex:none}

/* Card (inset) — Pricing benefits wrapper */
.ds-card{background:var(--surface-raised);border-radius:var(--radius-xl);box-shadow:var(--ring-subtle)}
.ds-card-inset{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* Profile mock (Step 1) — 1:1 port of DS templates/profile-promo/ProfilePromo.dc.html
 * (static visitor render, single-column mobile layout). Verbatim DS pf-* styles. */
.pf-mock{height:560px;overflow-y:auto;border-radius:18px;background:var(--surface-base);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);font-family:var(--font-sans)}
.pf-mock::-webkit-scrollbar{width:0}
/* ── left color point card ── */
.pf-leftcard{padding:20px 16px 22px;color:var(--c-ink)}
.pf-leftcard.p-sky{background:var(--point-sky)}
.pf-avawrap{position:relative}
.pf-ava{width:72px;height:72px;flex:none;border-radius:50%;overflow:hidden;background:rgba(0,0,0,0.14)}
.pf-ava img{width:100%;height:100%;object-fit:cover;display:block}
.pf-name{font-weight:900;font-size:20px;letter-spacing:-0.01em;color:var(--c-ink)}
.pf-handle{font-weight:600;font-size:14px;color:rgba(0,0,0,0.5);margin-top:3px}
.pf-bio{font-weight:500;font-size:14px;line-height:1.55;color:rgba(0,0,0,0.66);margin:12px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pf-bio-toggle{display:none}
.pf-bio-toggle:checked ~ .pf-bio{-webkit-line-clamp:unset}
.pf-more{display:inline-block;margin-top:2px;line-height:1.55;font-weight:500;font-size:13px;color:var(--c-ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pf-more::after{content:"See More"}
.pf-bio-toggle:checked ~ .pf-more::after{content:"See Less"}
.pf-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;font-weight:600;font-size:14px;color:rgba(0,0,0,0.55);margin-top:12px}
.pf-meta span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pf-meta svg{opacity:.7}
.pf-statline{display:flex;align-items:center;font-size:14px;margin-top:14px}
.pf-statline .n{font-weight:900;color:var(--c-ink)}
.pf-statline .l{font-weight:600;color:rgba(0,0,0,0.5);margin-left:4px}
.pf-statline .dot{width:3px;height:3px;border-radius:50%;background:rgba(0,0,0,0.32);margin:0 9px}
.pf-cta{height:44px;border:none;border-radius:var(--radius-pill);background:var(--c-ink);color:var(--text-primary);font-family:inherit;font-weight:800;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.pf-cta.pill{flex:none;height:40px;padding:0 22px}
.pf-iconbtn{width:40px;height:40px;flex:none;border:none;border-radius:var(--radius-pill);background:rgba(0,0,0,0.12);color:var(--c-ink);display:grid;place-items:center;cursor:pointer}
.pf-divider{height:1px;background:rgba(0,0,0,0.12);margin:18px 0 16px}
.pf-clbl{font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(0,0,0,0.5);margin-bottom:10px}
.pf-surfrow{display:flex;flex-wrap:wrap;gap:8px}
.sd-surf{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;font-family:inherit;font-weight:700;font-size:12.5px;white-space:nowrap}
.sd-surf.on-color{color:var(--c-ink);background:rgba(0,0,0,0.10);border:1px solid rgba(0,0,0,0.18)}
.sd-surf .sd-surf-ico{opacity:.45}
/* ── right content (dark) ── */
.pf-right{padding:22px 16px 4px}
.pf-lbl{display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:800;font-size:16px;letter-spacing:-0.01em;color:var(--text-primary)}
.pf-secrow{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px}
.pf-secrow.gap{margin:34px 0 13px}
.pf-seeall{font:var(--type-caption);font-weight:700;color:var(--accent);text-decoration:none}
.pf-gal{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pf-gt{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--ring-subtle);background:linear-gradient(135deg,var(--surface-field),var(--surface-raised));aspect-ratio:1}
.pf-gt img{width:100%;height:100%;object-fit:cover;display:block}
.pf-stk{position:absolute;display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:var(--radius-pill);font:var(--type-tag);white-space:nowrap;box-shadow:var(--shadow-sm)}
.pf-stk.accent{background:var(--accent);color:var(--text-onAccent);box-shadow:var(--glow-accent)}
.pf-stk.white{background:var(--c-white);color:var(--c-gray-950)}
.pf-stk.glass{background:var(--surface-scrim);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);color:var(--text-primary);box-shadow:var(--ring-strong)}
.pf-links{display:flex;flex-direction:column;gap:10px}
.pf-link{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:var(--ring-subtle);text-decoration:none;color:var(--accent)}
.pf-link-ico{width:38px;height:38px;flex:none;border-radius:var(--radius-md);background:color-mix(in srgb,var(--accent) 13%,transparent);display:grid;place-items:center;font-size:16px}
.pf-link-nm{display:block;font:var(--type-body-strong);color:var(--accent)}
.pf-link-sub{display:block;font:var(--type-caption);color:var(--text-muted);margin-top:1px}
.pf-link-arrow{color:var(--text-tertiary);display:inline-flex}
.pf-foot{text-align:center;padding:30px 0 4px;font:var(--type-caption);color:var(--text-disabled)}
.pf-foot b{font-weight:900;color:var(--text-muted)}