/* ==========================================================
   ONELINK — public profile page

   Every colour here comes from a custom property set inline by
   the chosen theme, so this file never needs editing to add one.
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* The page itself is a neutral, fixed backdrop — never the theme
   colour — so the profile always reads as a card sitting on it,
   the same way regardless of how bold or dark that theme is. */
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  background: #eef1f4;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.3rem 1rem 2.6rem;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; border-radius: 4px; }

body.has-contactbar { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }

/* The card: this is where the theme's colour and background layer
   actually live now. Rounded and clipped so the cover photo's square
   top corners are cut to match, and shadowed to lift it off the page.
   Scales with the corner style chosen in Appearance — Square really
   is square, Pill is capped so a tall card doesn't look absurd. */
.p-shell {
  width: 100%; max-width: 580px;
  background-color: var(--bg);
  background-image: var(--layer);
  border-radius: min(calc(var(--radius) * 1.5), 28px);
  overflow: hidden;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .28), 0 2px 10px rgba(0, 0, 0, .06);
}

/* Padded inner content — kept separate from .p-shell so the cover
   photo (when there is one) can sit flush against the card's edges. */
.p-body { padding: 1.75rem 1.35rem 2.25rem; }

/* ---------- cover photo ------------------------------------ */
/* A masthead band: the photo sits behind, and the logo, name and bio
   sit directly on it near the bottom — a business-card look, rather
   than a centred avatar below the photo. Flush with the card, so its
   own corners stay square — the card's rounding clips it for us. */
.p-cover {
  position: relative;
  width: 100%;
  height: clamp(160px, 26vw, 230px);
  overflow: hidden;
  background: var(--cover-color, var(--bg));
  border-top: 3px solid var(--btn);
}
.p-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Darken just the strip the name/logo sit on, so a busy photo never
   swallows them — not a tint over the whole photo. */
.p-cover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 62%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .62));
  pointer-events: none;
}

/* ---------- identity -------------------------------------- */
/* Generous whitespace separates identity from the links below —
   no decorative rule needed. */
.p-head { text-align: center; margin-bottom: 2.4rem; }

.p-avatar {
  width: 94px; height: 94px; border-radius: var(--radius);
  object-fit: cover; margin: 0 auto .9rem;
  border: 2px solid var(--border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
  display: grid; place-items: center;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 2rem;
  background: var(--btn); color: var(--btn-text);
  flex: none;
}

/* the masthead: logo + name/bio, pinned to the bottom of the photo */
.p-masthead {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; gap: .85rem;
  padding: 0 1.05rem 1rem;
  text-align: left;
}
.p-masthead .p-avatar {
  margin: 0; width: 72px; height: 72px; flex: none;
  border: 3px solid rgba(255, 255, 255, .85);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.p-masthead__text { min-width: 0; }
.p-masthead__text .p-name {
  text-align: left; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.p-masthead__text .p-bio {
  text-align: left; margin: 0; max-width: none;
  color: rgba(255, 255, 255, .88); text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.p-head--masthead { text-align: left; }
.p-head--masthead .p-socials { justify-content: flex-start; }

.p-name {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 .35rem; word-break: break-word;
}

.p-bio {
  margin: 0 auto; max-width: 40ch; font-size: .95rem;
  line-height: 1.6; color: var(--muted); word-break: break-word;
}

/* ---------- social icon row ------------------------------- */
.p-socials {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: .5rem; margin-top: 1.1rem;
}
.p-socials a {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1.5px solid transparent;
  transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}
.p-socials a:hover {
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-color: color-mix(in srgb, var(--text) 24%, transparent);
  transform: translateY(-2px);
}

/* ---------- share button ----------------------------------- */
.p-share {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.15rem; padding: .48rem 1rem;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1.5px solid transparent; border-radius: 999px;
  cursor: pointer; opacity: .92;
  transition: background-color .12s ease, opacity .12s ease, transform .12s ease;
}
.p-share:hover {
  opacity: 1; transform: translateY(-1px);
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.p-share svg { flex: none; }

/* ---------- the link stack -------------------------------- */
/* Short entries pair up into a quick-action grid; section labels
   and product cards always take the full width. */
.p-links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .75rem;
}

.p-section,
.p-product,
.p-video,
.p-empty {
  grid-column: 1 / -1;
}

.p-section {
  font-family: 'Public Sans', system-ui, sans-serif;
  font-weight: 700; font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center; color: var(--muted);
  margin: 1.3rem 0 .1rem; padding-bottom: .55rem; word-break: break-word;
  position: relative;
}
.p-section::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 26px; height: 3px; border-radius: 2px;
  background: var(--btn);
}
.p-section:first-child { margin-top: 0; }

.p-link {
  display: block; width: 100%; text-align: center;
  padding: 1rem 1.15rem; border-radius: var(--radius);
  font-weight: 600; font-size: .98rem; line-height: 1.35;
  word-break: break-word;
  background: var(--btn); color: var(--btn-text);
  border: 2px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .05);
  transition: transform .12s ease, box-shadow .12s ease;
}
.p-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 10px 22px rgba(0, 0, 0, .08);
}
.p-link:active { transform: translateY(0); }

/* button styles, chosen in Appearance */
.style-outline .p-link {
  background: transparent; color: var(--text); border-color: var(--border);
  box-shadow: none;
}
.style-soft .p-link {
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}
.style-hard .p-link {
  border-color: var(--border);
  box-shadow: 4px 4px 0 var(--border);
}
.style-hard .p-link:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--border); }

.p-link.is-highlight { position: relative; }
.p-link.is-highlight::after {
  content: '';
  position: absolute; inset: -5px;
  border: 2px dashed var(--border); border-radius: calc(var(--radius) + 5px);
  opacity: .55; pointer-events: none;
}

/* ---------- product cards (link to WhatsApp) -------------- */
.p-product {
  display: block; width: 100%; overflow: hidden;
  border-radius: var(--radius);
  background: var(--btn); color: var(--btn-text);
  border: 2px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .05);
  transition: transform .12s ease, box-shadow .12s ease;
}
.p-product:hover  { transform: translateY(-2px); }
.p-product:active { transform: translateY(0); }

.style-outline .p-product {
  background: transparent; color: var(--text); border-color: var(--border);
  box-shadow: none;
}
.style-soft .p-product { box-shadow: 0 6px 20px rgba(0, 0, 0, .16); }
.style-soft .p-product:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .2); }
.style-hard .p-product { border-color: var(--border); box-shadow: 5px 5px 0 var(--border); }
.style-hard .p-product:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--border); }

.p-product.is-highlight { outline: 2px dashed var(--border); outline-offset: 3px; }

/* the photo — a wide banner, cropped to a steady shape */
.p-product__media {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  background: rgba(128, 128, 128, .18);
}
.p-product__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.p-product__body {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; padding: .8rem .95rem;
}
.p-product__info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; text-align: left; }
.p-product__title { font-weight: 700; font-size: 1rem; line-height: 1.3; word-break: break-word; }
.p-product__price { font-weight: 700; font-size: .92rem; opacity: .82; }

.p-product__cta {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  font-size: .8rem; font-weight: 700; white-space: nowrap;
  border: 2px solid currentColor; border-radius: 999px;
  padding: .32rem .72rem; opacity: .92;
}
.p-product__cta svg { width: 15px; height: 15px; }

/* with a photo: stack the caption and give the button full width */
.p-product.has-img .p-product__body { flex-direction: column; align-items: stretch; gap: .6rem; padding: .85rem .95rem 1rem; }
.p-product.has-img .p-product__cta  { justify-content: center; padding: .55rem; font-size: .85rem; }

/* ---------- embedded YouTube video --------------------------- */
.p-video__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden;
  background: rgba(128, 128, 128, .18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .05);
}
.p-video__frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.p-video.is-highlight .p-video__frame { outline: 2px dashed var(--border); outline-offset: 3px; }

/* ---------- customer reviews (optional) -------------------- */
/* the "4.8 ★★★★★ 12 reviews" line above the cards */
.p-reviews-summary {
  display: flex; align-items: center; gap: .65rem; justify-content: center;
  margin: -.3rem 0 1.1rem;
}
.p-reviews-summary__score {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 1.9rem; line-height: 1;
}
.p-reviews-summary__meta {
  display: flex; flex-direction: column; gap: .2rem; align-items: flex-start;
}
.p-reviews-summary__meta span { font-size: .78rem; color: var(--muted); }

.p-reviews {
  display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .1rem .1rem .5rem; margin-top: .2rem;
  -webkit-overflow-scrolling: touch;
}
.p-review {
  position: relative; overflow: hidden;
  flex: 0 0 78%; scroll-snap-align: start;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: var(--radius);
  padding: 1.05rem 1.15rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
.p-review__quote {
  position: absolute; top: 2px; right: 14px;
  font-family: Georgia, 'Times New Roman', serif; font-size: 3.2rem; line-height: 1;
  color: var(--btn); opacity: .28; pointer-events: none;
}
.p-stars { display: inline-flex; gap: 1px; color: var(--btn-text); }
.p-review .p-stars { color: color-mix(in srgb, var(--text) 70%, var(--btn)); position: relative; }
.p-review__body {
  margin: .6rem 0 0; font-size: .92rem; line-height: 1.55;
  word-break: break-word; position: relative;
}
.p-review__by {
  display: flex; align-items: center; gap: .55rem;
  margin-top: .85rem;
}
.p-review__avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--btn); color: var(--btn-text);
  display: grid; place-items: center;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: .68rem;
}
.p-review__by strong { display: block; font-size: .85rem; font-weight: 700; }
.p-review__source { font-size: .78rem; color: var(--muted); }

.p-reviews-dots { display: flex; justify-content: center; gap: .4rem; margin-top: .6rem; }
.p-reviews-dots span {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--text) 20%, transparent);
  transition: background-color .15s ease, transform .15s ease;
}
.p-reviews-dots span.is-active { background: var(--btn); transform: scale(1.35); }

/* ---------- map (optional) ---------------------------------- */
.p-map {
  border-radius: var(--radius); overflow: hidden; margin-top: .2rem;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
.p-map iframe { width: 100%; height: 220px; border: 0; display: block; }
.p-map__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap;
  padding: .85rem .95rem; background: var(--btn); color: var(--btn-text);
}
.p-map__address { font-size: .85rem; font-weight: 600; word-break: break-word; }
.p-map__cta {
  font-size: .8rem; font-weight: 700; white-space: nowrap;
  border: 2px solid currentColor; border-radius: 999px; padding: .4rem .9rem;
}

/* ---------- footer ---------------------------------------- */
.p-foot { text-align: center; margin-top: 2.75rem; }
.p-foot a {
  font-size: .74rem; font-weight: 600; letter-spacing: .01em;
  color: var(--muted);
  padding: .3rem .85rem; display: inline-block; opacity: .65;
  transition: opacity .12s ease;
}
.p-foot a:hover { opacity: 1; }

.p-empty { text-align: center; color: var(--muted); font-size: .92rem; padding: 2rem 0; }

/* ---------- contact bar (optional) -------------------------- */
/* Fixed to the viewport, split into up to two equal buttons — Call on
   the left, WhatsApp on the right. Only one shows if the other number
   was never set, and then it takes the full width. */
.p-contactbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex;
  background: var(--bg);
  border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .12);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.p-contactbar__btn {
  flex: 1 1 50%;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem .5rem;
  font-weight: 700; font-size: .95rem;
  background: var(--btn); color: var(--btn-text);
}
.p-contactbar__btn svg { flex: none; }
.p-contactbar__btn--call:not(:only-child) {
  background: transparent; color: var(--text);
  border-right: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}
.p-contactbar__btn:hover { opacity: .88; }
.p-contactbar__btn:active { opacity: 1; }

/* ---------- share sheet ------------------------------------- */
/* A bottom sheet rather than a plain link list, so it reads like a
   native share panel regardless of theme — neutral white chrome,
   not the page's own colours, the same way an OS share sheet never
   borrows the app's palette. */
.p-share-sheet {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: flex-end; justify-content: center;
}
/* `display: flex` above has the same specificity as the browser's own
   `[hidden] { display: none }` rule, and author styles win that tie —
   so without this, the hidden panel would still be laid out full-screen
   and silently eat every click on the page underneath it. */
.p-share-sheet[hidden] { display: none; }
.p-share-sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 12, 16, .5);
  opacity: 0; transition: opacity .18s ease;
}
.p-share-sheet__panel {
  position: relative; width: 100%; max-width: 480px;
  background: #fff; color: #16181c;
  border-radius: 20px 20px 0 0;
  padding: .6rem 1.3rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
  transform: translateY(100%); transition: transform .22s cubic-bezier(.32, .72, 0, 1);
  text-align: center;
}
.p-share-sheet.is-open .p-share-sheet__backdrop { opacity: 1; }
.p-share-sheet.is-open .p-share-sheet__panel { transform: translateY(0); }

.p-share-sheet__handle {
  display: block; width: 36px; height: 4px; border-radius: 99px;
  background: #e3e5e8; margin: .6rem auto 1rem;
}
.p-share-sheet__title { font-weight: 700; font-size: .95rem; margin: 0 0 1.1rem; }

.p-share-sheet__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem;
  margin-bottom: 1.3rem;
}
.p-share-sheet__item {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 600; color: #16181c;
}
.p-share-sheet__icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: transform .1s ease;
}
.p-share-sheet__icon svg { width: 22px; height: 22px; }
.p-share-sheet__item:hover .p-share-sheet__icon { transform: scale(1.06); }
.p-share-sheet__icon--whatsapp { background: #25d366; }
.p-share-sheet__icon--facebook { background: #1877f2; }
.p-share-sheet__icon--x        { background: #16181c; }
.p-share-sheet__icon--telegram { background: #29a9eb; }
.p-share-sheet__icon--email    { background: #7c7f87; }

.p-share-sheet__copy {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .85rem; margin-bottom: .3rem;
  font: inherit; font-weight: 700; font-size: .92rem; color: #16181c;
  background: #f1f2f4; border: 0; border-radius: 12px; cursor: pointer;
}
.p-share-sheet__copy:hover { background: #e7e8eb; }

.p-share-sheet__more {
  display: block; width: 100%; padding: .7rem;
  font: inherit; font-size: .85rem; font-weight: 600; color: #6b6f76;
  background: none; border: 0; cursor: pointer;
}
.p-share-sheet__more[hidden] { display: none; }
.p-share-sheet__more:hover { color: #16181c; }

.p-share-sheet__close {
  position: absolute; top: .7rem; right: .8rem;
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: #f1f2f4; color: #6b6f76;
  font-size: .85rem; line-height: 1; cursor: pointer;
}
.p-share-sheet__close:hover { background: #e7e8eb; color: #16181c; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
  .p-link:hover, .p-product:hover, .p-socials a:hover { transform: none; }
}