/* =====================================================================
   LIYOG WORLD BRAND PROFILES — profile.css (v3, premium rebuild)
   ===================================================================== */

:root {
  --liyog-green: #28A428;
  --liyog-green-light: #34BF49;
  --liyog-green-dark: #228B22;
  --liyog-deep-green: #006400;
  --liyog-gold: #FFD700;
  --liyog-orange: #FF7A00;
  --liyog-blue: #1877F2;
  --liyog-black: #111111;
  --liyog-black-light: #1A1A1A;
  --liyog-red: #FF3B30;
  --liyog-red-dark: #C1271A;
  --liyog-yellow: #FFEA00;
  --liyog-indigo: #3F3D9E;
  --verified-green: #228B22;

  /* Warmer, dimmer surface — not stark white */
  --bg: #F3F1EA;
  --surface: #FFFFFF;
  --surface-soft: #FAF8F2;
  --ink: #111111;
  --ink-soft: #625F53;
  --ink-faint: #9B9686;
  --line: #E4DFD1;
  --shadow-sm: 0 2px 10px rgba(17, 17, 17, 0.07);
  --shadow-md: 0 10px 28px rgba(17, 17, 17, 0.12);
  --shadow-lg: 0 24px 56px rgba(17, 17, 17, 0.22);

  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 10px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Real brand colors for social platform icons — kept separate from
     the site palette since these must match each platform's actual
     brand identity, not Liyog World's own colors. */
  --c-facebook: #1877F2;
  --c-x: #111111;
  --c-tiktok: #010101;
  --c-youtube: #FF0000;
  --c-website: var(--liyog-orange);
}

/* =====================================================================
   DARK MODE — universal sync layer
   =====================================================================
   This block is the ONLY place dark-mode colors are defined. Everything
   else in this file just references var(--ink), var(--bg), etc., so it
   automatically re-themes whenever these variables change — no matter
   which trigger below fires.

   Three triggers, in priority order:
   1. Blogger toggle → adds class="dark" to <body id="mainContent">.
   2. Manual override → [data-theme="dark"]/"light" on .lp-root or an
      ancestor (for embedding this profile outside the Blogger theme).
   3. OS-level fallback → prefers-color-scheme, only applies when
      nothing explicit has been set. Defined FIRST so explicit rules
      below always win by source order. Do not reorder these sections.
   ===================================================================== */

/* --- 3. OS-level fallback (lowest priority) --- */
@media (prefers-color-scheme: dark) {
  .lp-root {
    --bg: #0F0E0C;
    --surface: #1A1A1A;
    --surface-soft: #201E1A;
    --ink: #F3F0E8;
    --ink-soft: #B0AA98;
    --ink-faint: #6D6858;
    --line: #2E2B24;
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
    --shadow-md: 0 10px 28px rgba(0,0,0,0.45);
    --shadow-lg: 0 24px 56px rgba(0,0,0,0.65);
  }
}

/* --- 1. Blogger theme toggle (body.dark) + 2. manual [data-theme="dark"] --- */
body.dark .lp-root,
.dark .lp-root,
[data-theme="dark"],
[data-theme="dark"] .lp-root {
  --bg: #0F0E0C;
  --surface: #1A1A1A;
  --surface-soft: #201E1A;
  --ink: #F3F0E8;
  --ink-soft: #B0AA98;
  --ink-faint: #6D6858;
  --line: #2E2B24;
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
  --shadow-md: 0 10px 28px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 56px rgba(0,0,0,0.65);
}

/* Explicit light override — wins even if OS is set to dark. */
[data-theme="light"],
[data-theme="light"] .lp-root {
  --bg: #F3F1EA;
  --surface: #FFFFFF;
  --surface-soft: #FAF8F2;
  --ink: #111111;
  --ink-soft: #625F53;
  --ink-faint: #9B9686;
  --line: #E4DFD1;
  --shadow-sm: 0 2px 10px rgba(17, 17, 17, 0.07);
  --shadow-md: 0 10px 28px rgba(17, 17, 17, 0.12);
  --shadow-lg: 0 24px 56px rgba(17, 17, 17, 0.22);
}

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

.lp-root {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  max-width: 620px;
  margin: 0 auto;
  padding-bottom: 40px;
  animation: lp-fade-in 0.4s var(--ease);
}
@keyframes lp-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------------
   Cover
   --------------------------------------------------------------------- */
.lp-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7.5;
  background: linear-gradient(135deg, var(--liyog-indigo), var(--liyog-blue));
  overflow: hidden;
}
.lp-cover {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02);
  transition: transform 8s var(--ease);
}
.lp-cover-wrap:hover .lp-cover { transform: scale(1.1); }
.lp-cover-fade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.15) 100%);
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Identity
   --------------------------------------------------------------------- */
.lp-identity { position: relative; text-align: center; padding: 0 20px; margin-top: -46px; z-index: 2; }
.lp-logo-wrap {
  width: 92px; height: 92px;
  margin: 0 auto 14px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  border: 4px solid var(--surface);
  box-shadow: var(--shadow-md);
  animation: lp-pop-in 0.5s var(--ease) 0.1s backwards;
  flex-shrink: 0;
}
.lp-logo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@keyframes lp-pop-in { from { opacity: 0; transform: scale(0.85) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.lp-edit-pen {
  position: absolute; top: 10px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s ease;
}
.lp-edit-pen:hover { background: var(--liyog-gold); color: #fff; transform: rotate(-8deg) scale(1.08); }
.lp-edit-pen:focus-visible { outline: 2px solid var(--liyog-blue); outline-offset: 2px; }
.lp-edit-pen[hidden] { display: none; }

.lp-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 6vw, 32px);
  line-height: 1.15;
  margin: 0 0 7px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
}
.lp-name::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--liyog-gold), var(--liyog-orange));
}
.lp-verified {
  display: inline-flex; flex-shrink: 0;
  filter: drop-shadow(0 2px 3px rgba(27,122,61,0.35));
  animation: lp-badge-pop 0.4s var(--ease) 0.3s backwards;
}
@keyframes lp-badge-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.lp-verified[hidden] { display: none; }
.lp-tagline { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin: 0 auto; max-width: 420px; }

.lp-category-badge {
  display: inline-block; margin-top: 10px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 5px 14px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--liyog-indigo), var(--liyog-blue));
  color: #fff;
}
.lp-category-badge:empty { display: none; }

/* ---------------------------------------------------------------------
   Trust pills
   --------------------------------------------------------------------- */
.lp-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 20px 0; }
.lp-pill {
  font-size: 12.5px; font-weight: 600; padding: 7px 14px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease);
}
.lp-pill:hover { transform: translateY(-2px); border-color: var(--liyog-green); }
.lp-pill svg { color: var(--liyog-green); flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Contact banner — premium animated strip showing WhatsApp/Call/response
   --------------------------------------------------------------------- */
.lp-contact-banner {
  display: flex; flex-direction: column; gap: 10px;
  margin: 18px 20px 0; padding: 16px 18px;
  background: linear-gradient(135deg, rgba(63,61,158,0.06), rgba(24,119,242,0.04));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  position: relative; overflow: hidden;
}
.lp-contact-banner::before {
  content: ""; position: absolute; top: -50%; right: -20%;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.08), transparent 70%);
  pointer-events: none;
}
.lp-contact-banner[hidden] { display: none; }
.lp-contact-banner-item {
  display: flex; align-items: center; gap: 12px;
  animation: lp-slide-in 0.4s var(--ease) backwards;
}
.lp-contact-banner-item:nth-child(2) { animation-delay: 0.08s; }
.lp-contact-banner-item:nth-child(3) { animation-delay: 0.16s; }
@keyframes lp-slide-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
.lp-contact-banner-item[hidden] { display: none; }
.lp-contact-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.lp-contact-icon-whatsapp { background: var(--liyog-green); }
.lp-contact-icon-phone { background: var(--liyog-blue); }
.lp-contact-icon-response { background: var(--liyog-indigo); }
.lp-contact-text { display: flex; flex-direction: column; gap: 1px; }
.lp-contact-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 700; }
.lp-contact-value { font-size: 14.5px; font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------------
   Actions
   --------------------------------------------------------------------- */
.lp-actions { display: grid; grid-template-columns: 1fr 1fr 1fr 50px; gap: 9px; margin: 24px 20px 0; }
.lp-btn {
  height: 48px; border: none; border-radius: var(--r-md);
  font-family: var(--font-body); font-weight: 700; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  transition: transform 0.15s var(--ease), box-shadow 0.2s ease, filter 0.15s ease;
  position: relative; overflow: hidden;
}
.lp-btn::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(255,255,255,0.25); transform: translateX(-100%);
  transition: transform 0.4s var(--ease);
}
.lp-btn:hover::before { transform: translateX(100%); }
.lp-btn:active { transform: scale(0.95); }
.lp-btn:focus-visible { outline: 2px solid var(--liyog-blue); outline-offset: 2px; }
.lp-btn[hidden] { display: none; }
.lp-btn-primary { background: linear-gradient(135deg, var(--liyog-green), var(--liyog-green-dark)); color: #fff; box-shadow: var(--shadow-sm); }
.lp-btn-secondary { background: linear-gradient(135deg, var(--liyog-blue), #0D5BC4); color: #fff; box-shadow: var(--shadow-sm); }
.lp-btn-tertiary { background: linear-gradient(135deg, var(--liyog-indigo), #2C2A6E); color: #fff; box-shadow: var(--shadow-sm); }
.lp-btn-ghost { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); width: 50px; padding: 0; }
.lp-btn:hover { box-shadow: var(--shadow-md); filter: brightness(1.05); }

@media (min-width: 400px) { .lp-btn { font-size: 14px; gap: 7px; } }

/* ---------------------------------------------------------------------
   Inquiry CTA
   --------------------------------------------------------------------- */
.lp-inquiry-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 40px); margin: 12px 20px 0; height: 48px;
  background: var(--surface-soft); border: 1.5px dashed var(--ink-faint);
  border-radius: var(--r-md); color: var(--ink-soft);
  font-family: var(--font-body); font-weight: 600; font-size: 13.5px; cursor: pointer;
  transition: all 0.2s ease;
}
.lp-inquiry-cta:hover { border-color: var(--liyog-blue); border-style: solid; color: var(--liyog-blue); background: var(--surface); }
.lp-inquiry-cta[hidden] { display: none; }

/* ---------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------- */
.lp-section { margin: 36px 20px 0; }
.lp-section[hidden] { display: none; }
.lp-section-title {
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink);
  margin: 0 0 4px; display: flex; align-items: center; gap: 8px;
}
.lp-section-title::before {
  content: ""; width: 4px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, var(--liyog-gold), var(--liyog-green));
}
.lp-section-sub { font-size: 13px; color: var(--ink-faint); margin: 0 0 14px; }

/* ---------------------------------------------------------------------
   Bio / brand story
   --------------------------------------------------------------------- */
.lp-bio-wrap { position: relative; }
.lp-bio-preview {
  font-size: 15.5px; line-height: 1.75; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  max-height: 4.6em;
}
.lp-bio-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 28px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.lp-read-more {
  margin-top: 10px; background: none; border: none; padding: 0;
  color: var(--liyog-blue); font-weight: 700; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: gap 0.2s ease;
}
.lp-read-more:hover { gap: 8px; }
.lp-read-more[hidden] { display: none; }

/* ---------------------------------------------------------------------
   Gallery — v3: real 16:9 tiles, horizontal scroll-snap on mobile,
   proper grid on wider screens. No more asymmetric collage of
   mismatched aspect ratios.
   --------------------------------------------------------------------- */
.lp-gallery {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lp-gallery::-webkit-scrollbar { display: none; }
.lp-gallery-tile {
  position: relative;
  flex: 0 0 78%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--line);
  box-shadow: var(--shadow-sm);
  scroll-snap-align: start;
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}
.lp-gallery-tile:hover { box-shadow: var(--shadow-md); }
.lp-gallery-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s var(--ease);
}
.lp-gallery-tile:hover img { transform: scale(1.06); }
.lp-gallery-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.25), transparent 45%);
  opacity: 0; transition: opacity 0.25s ease;
}
.lp-gallery-tile:hover::after { opacity: 1; }
.lp-gallery-index {
  position: absolute; bottom: 10px; right: 12px;
  background: rgba(0,0,0,0.5); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
}

@media (min-width: 640px) {
  .lp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .lp-gallery-tile { flex: none; }
}

.lp-lightbox {
  position: fixed; inset: 0; background: rgba(8,7,5,0.95);
  display: none; align-items: center; justify-content: center; z-index: 1000; padding: 24px;
}
.lp-lightbox.lp-open { display: flex; animation: lp-fade-in 0.2s ease; }
.lp-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.lp-lightbox-close {
  position: absolute; top: 20px; right: 20px; color: #fff; font-size: 32px;
  background: rgba(255,255,255,0.1); width: 44px; height: 44px; border-radius: 50%;
  border: none; cursor: pointer; transition: background 0.2s ease;
}
.lp-lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* ---------------------------------------------------------------------
   Reviews & ratings
   --------------------------------------------------------------------- */
.lp-rating-summary {
  display: flex; align-items: center; gap: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.lp-rating-score { text-align: center; flex-shrink: 0; }
.lp-rating-score-num { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1; color: var(--ink); }
.lp-rating-score-stars { display: flex; gap: 2px; justify-content: center; margin-top: 5px; }
.lp-rating-score-count { font-size: 11.5px; color: var(--ink-faint); margin-top: 5px; }
.lp-rating-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.lp-rating-bar-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-faint); }
.lp-rating-bar-track { flex: 1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.lp-rating-bar-fill { height: 100%; background: linear-gradient(90deg, var(--liyog-gold), var(--liyog-orange)); border-radius: 3px; }

.lp-review-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 15px; margin-bottom: 10px; transition: box-shadow 0.2s ease;
}
.lp-review-card:hover { box-shadow: var(--shadow-sm); }
.lp-review-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.lp-review-author { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.lp-review-stars { display: flex; gap: 2px; }
.lp-review-text { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
.lp-review-date { font-size: 11px; color: var(--ink-faint); margin-top: 6px; }
.lp-view-all-reviews {
  width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px; font-weight: 700; font-size: 13.5px; color: var(--ink-soft); cursor: pointer;
  transition: all 0.2s ease;
}
.lp-view-all-reviews:hover { border-color: var(--liyog-gold); color: var(--ink); }
.lp-view-all-reviews[hidden] { display: none; }

/* ---------------------------------------------------------------------
   Embeds
   --------------------------------------------------------------------- */
.lp-embed-wrap {
  position: relative; width: 100%; padding-top: 56.25%;
  border-radius: var(--r-lg); overflow: hidden; background: var(--line); box-shadow: var(--shadow-sm);
}
.lp-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.lp-map-wrap {
  border-radius: var(--r-lg); overflow: hidden; height: 280px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line);
}
.lp-map-wrap iframe { width: 100%; height: 100%; border: none; }
.lp-location-details {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink-soft); font-size: 14px; font-weight: 600;
}
.lp-location-details[hidden] { display: none; }
.lp-location-details svg { color: var(--liyog-gold); flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Social — premium brand-colored circles with lift-on-hover
   --------------------------------------------------------------------- */
.lp-social-row { display: flex; flex-direction: column; gap: 10px; }
.lp-social-link {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); font-weight: 700; font-size: 14.5px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s ease, border-color 0.2s ease;
}
.lp-social-link:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.lp-social-icon-circle {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.lp-social-icon-circle svg { width: 19px; height: 19px; }
.lp-social-link-arrow { margin-left: auto; color: var(--ink-faint); flex-shrink: 0; }
.lp-social-facebook .lp-social-icon-circle { background: var(--c-facebook); }
.lp-social-instagram .lp-social-icon-circle { background: radial-gradient(circle at 30% 110%, #FDF497, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.lp-social-x .lp-social-icon-circle { background: var(--c-x); }
.lp-social-tiktok .lp-social-icon-circle { background: var(--c-tiktok); }
.lp-social-youtube .lp-social-icon-circle { background: var(--c-youtube); }
.lp-social-website .lp-social-icon-circle { background: var(--c-website); }

@media (min-width: 480px) {
  .lp-social-row { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------
   Meta footer — visible, premium
   --------------------------------------------------------------------- */
.lp-meta {
  margin: 36px 20px 0; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: var(--shadow-sm);
}
.lp-meta-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-soft); font-weight: 600;
}
.lp-meta-item svg { color: var(--liyog-gold); flex-shrink: 0; }

/* ---------------------------------------------------------------------
   Bottom sheets
   --------------------------------------------------------------------- */
.lp-sheet-overlay {
  position: fixed; inset: 0; background: rgba(8,7,5,0.55);
  display: none; align-items: flex-end; justify-content: center; z-index: 1400;
  backdrop-filter: blur(2px);
}
.lp-sheet-overlay.lp-open { display: flex; animation: lp-fade-in 0.2s ease; }
.lp-sheet-overlay > .lp-sheet { width: min(100%, 620px); }
.lp-sheet {
  background: var(--surface); width: 100%; max-width: 620px;
  border-radius: 26px 26px 0 0; padding: 14px 22px 30px;
  max-height: 82vh; overflow-y: auto; overflow-x: hidden;
  box-shadow: var(--shadow-lg);
  animation: lp-sheet-up 0.3s var(--ease);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
@keyframes lp-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.lp-sheet-handle { width: 42px; height: 4px; background: var(--line); border-radius: 2px; margin: 0 auto; }
.lp-sheet-top-bar { display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 16px; }
.lp-sheet-close {
  position: absolute; right: 0; top: -6px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--line); border: none; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.2s ease;
}
.lp-sheet-close:hover { background: var(--ink-faint); color: #fff; }
.lp-sheet-title-only { font-family: var(--font-display); font-size: 19px; margin: 0 0 18px; }
.lp-sheet-header { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.lp-sheet-logo-wrap {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 11px; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.lp-sheet-logo { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-sheet-header h3 {
  font-family: var(--font-display); font-size: 18px; margin: 0;
  flex: 1 1 auto; min-width: 0; word-wrap: break-word; overflow-wrap: break-word;
}
.lp-sheet-body { font-size: 15.5px; line-height: 1.75; color: var(--ink); }
.lp-sheet-cta-row { display: flex; gap: 10px; margin-top: 20px; }
.lp-sheet-cta-row .lp-btn { flex: 1; height: 48px; font-size: 14px; }

/* ---------------------------------------------------------------------
   State screens
   --------------------------------------------------------------------- */
.lp-state-screen { text-align: center; padding: 64px 24px; }
.lp-state-screen h2 { font-family: var(--font-display); font-size: 22px; margin: 0 0 8px; }
.lp-state-screen p { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 20px; }
.lp-state-cta {
  display: inline-block; background: linear-gradient(135deg, var(--liyog-blue), #0D5BC4); color: #fff;
  padding: 13px 26px; border-radius: var(--r-md); text-decoration: none; font-weight: 700; font-size: 14.5px;
  box-shadow: var(--shadow-sm); transition: transform 0.2s ease;
}
.lp-state-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* .lp-state-cta was originally only ever used on <a> tags (which
   inherit body font/cursor by default) — the 2026-08-14 network-retry
   button reuses the same class on a real <button>, which does NOT
   inherit these by default, so they're set explicitly here rather
   than duplicating the whole visual style in a second class. */
button.lp-state-cta {
  font-family: var(--font-body);
  border: none;
  cursor: pointer;
}
button.lp-state-cta:disabled { opacity: 0.6; cursor: default; transform: none; }

/* ---- Network-failure / poor-connection state screen (2026-08-14).
   Shown by showErrorScreen() on the brand-profile page when a fetch
   times out or fails outright — see the fetchWithTimeout wrapper in
   profile.js. Deliberately visually distinct from the plain
   .lp-state-screen (a dedicated icon + slightly warmer framing) so it
   reads as "your connection, not our page" rather than a generic
   error, and always includes a working retry path. ---- */
.lp-state-screen-network { padding-top: 48px; }
.lp-network-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface-soft, var(--bg));
  color: var(--liyog-orange);
  margin-bottom: 18px;
}

/* ---- Lightweight asset-load-failure banner for the standalone
   /products/{slug} and /product/{slug}/{brand} pages (2026-08-14).
   Unlike the brand-profile page, these are server-rendered — the
   CONTENT is always present even with zero JS/CSS. The real risk
   here is product-pages.css or product-pages-client.js failing to
   load (poor network mid-load), which leaves correct HTML but
   unstyled/non-interactive — this banner detects exactly that
   condition (see the inline bootstrap script in pageShell()) and
   offers a one-tap refresh, without ever hiding the actual page
   content underneath it. ---- */
.lp-asset-fail-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  background: #FFF6E5;
  border-bottom: 2px solid var(--liyog-orange);
  color: #6B4500;
  font-family: sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}
.lp-asset-fail-banner button {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 999px;
  border: none;
  background: var(--liyog-orange, #FF7A00);
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   Skeleton
   --------------------------------------------------------------------- */
.lp-skeleton { padding: 20px; }
.lp-skeleton-block {
  background: linear-gradient(90deg, var(--line) 25%, var(--surface) 50%, var(--line) 75%);
  background-size: 200% 100%; animation: lp-shimmer 1.4s ease-in-out infinite; border-radius: var(--r-md);
}
@keyframes lp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------------------------------------------------------------------
   Responsive — desktop gets real breathing room, not a stretched mobile view
   --------------------------------------------------------------------- */
@media (min-width: 640px) {
  .lp-root { padding-top: 24px; max-width: 680px; }
  .lp-cover-wrap { border-radius: var(--r-xl); aspect-ratio: 16/6; }
  .lp-logo { width: 108px; height: 108px; }
  .lp-map-wrap { height: 340px; }
  .lp-sheet { border-radius: 26px; max-width: 500px; margin-bottom: 24px; }
  .lp-sheet-overlay { align-items: center; }
}

@media (min-width: 1000px) {
  .lp-root { max-width: 760px; }
  .lp-name { font-size: 34px; }
  .lp-actions { grid-template-columns: 1fr 1fr 1fr 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-skeleton-block, .lp-btn, .lp-edit-pen, .lp-sheet, .lp-gallery-tile img, .lp-cover, .lp-root { animation: none; transition: none; }
}

/* ---------------------------------------------------------------------
   Completion nudge — owner-only banner when key fields are missing
   --------------------------------------------------------------------- */
.lp-completion-nudge {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(212,175,55,0.05));
  border: 1px solid var(--liyog-gold);
  border-radius: var(--r-md); padding: 12px 16px; margin: 16px 20px 0;
  font-size: 13px; color: var(--ink-soft);
}
.lp-completion-nudge button {
  background: var(--liyog-gold); color: #fff; border: none; border-radius: var(--r-pill);
  padding: 7px 16px; font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Edit form (inside the edit bottom sheet)
   --------------------------------------------------------------------- */
.lp-edit-sheet { max-width: 480px; }
.lp-edit-group { margin-bottom: 24px; }
.lp-edit-group-title {
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint);
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.lp-edit-field { margin-bottom: 16px; }
.lp-edit-field:last-child { margin-bottom: 0; }
.lp-field-textarea { height: 100px; padding: 12px 14px; resize: vertical; }
.lp-edit-note { font-size: 12px; color: var(--ink-faint); margin: 4px 0 14px; line-height: 1.5; }
.lp-edit-form-status { font-size: 13px; margin: 0 0 12px; min-height: 18px; }
.lp-edit-success { color: var(--liyog-green); font-weight: 600; }
.lp-edit-error { color: var(--liyog-red); font-weight: 600; }

.lp-image-upload-box {
  position: relative;
  width: 100%; height: 120px;
  border: 1.5px dashed var(--ink-faint);
  border-radius: var(--r-md); background: var(--surface-soft, var(--bg));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
  transition: border-color 0.2s ease;
}
.lp-image-upload-box:hover { border-color: var(--liyog-blue); }
.lp-image-upload-preview { width: 100%; height: 100%; object-fit: cover; }
.lp-image-upload-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--ink-faint); font-size: 12.5px; font-weight: 600;
}
.lp-image-upload-status {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(0,0,0,0.55);
}
.lp-image-upload-status:empty { display: none; }
.lp-upload-active { background: rgba(24,119,242,0.75); }
.lp-upload-error { background: rgba(255,59,48,0.85); }

/* "Remove Current" trigger for logo/cover uploads. Previously this was a
   plain unstyled <button> with no CSS at all, so it rendered as raw
   browser-default text sitting inside the upload box, overlapping the
   image. Restyled as a small circular badge pinned to the top-right tip
   of the box (like a dismiss/close chip), out of the way of the tap-to-
   upload area and the image preview underneath. Nothing in profile.js
   was changed to make this work — same element, same id pattern, same
   click behavior, only new CSS. */
.lp-image-remove-trigger {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border: 1.5px solid var(--surface);
  border-radius: var(--r-pill);
  background: var(--liyog-red);
  color: #fff;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease), background 0.15s ease;
}
.lp-image-remove-trigger:hover {
  background: var(--liyog-red-dark, #C1271A);
  transform: scale(1.06);
}
.lp-image-remove-trigger:focus-visible {
  outline: 2px solid var(--liyog-blue);
  outline-offset: 2px;
}
.lp-image-remove-trigger:active { transform: scale(0.95); }

.lp-edit-group-sub { font-size: 12.5px; color: var(--ink-faint); margin: -8px 0 14px; }
.lp-field-hint { font-size: 11.5px; color: var(--ink-faint); margin: 5px 0 0; line-height: 1.4; }

.lp-gallery-upload-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.lp-gallery-upload-slot {
  position: relative; aspect-ratio: 1; border-radius: var(--r-sm);
  border: 1.5px dashed var(--ink-faint); background: var(--surface-soft, var(--bg));
  cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s ease;
}
.lp-gallery-upload-slot:hover { border-color: var(--liyog-blue); }
.lp-gallery-upload-slot img { width: 100%; height: 100%; object-fit: cover; }
.lp-gallery-slot-placeholder { color: var(--ink-faint); }
.lp-gallery-remove-btn {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lp-gallery-slot-status {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; text-align: center; color: #fff; padding: 4px;
}
.lp-gallery-slot-status:empty { display: none; }
/* ---------------------------------------------------------------------
   Edit form fields — real visual distinction between label and input,
   using the brand palette so it reads as premium, not generic browser
   default styling.
   --------------------------------------------------------------------- */
.lp-field-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--liyog-green-dark);
  margin: 0 0 6px;
}

.lp-field-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lp-field-input::placeholder { color: var(--ink-faint); font-weight: 400; }
.lp-field-input:focus {
  outline: none;
  border-color: var(--liyog-blue);
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.12);
}
.lp-field-input:hover { border-color: var(--ink-faint); }

select.lp-field-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23625F53' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.lp-field-textarea { height: 100px; resize: vertical; line-height: 1.5; }

.lp-field-hint {
  font-size: 12px;
  color: var(--ink-faint);
  margin: 5px 0 0;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------
   Tag chip input — for Key Highlights (key_points)
   --------------------------------------------------------------------- */
.lp-tag-input-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  cursor: text;
  transition: border-color 0.2s ease;
}
.lp-tag-input-box:focus-within {
  border-color: var(--liyog-blue);
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.12);
}
.lp-tag-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  background: var(--liyog-green);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-pill);
}
.lp-tag-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  color: #fff;
  cursor: pointer;
}
.lp-tag-chip-remove:hover { background: rgba(255,255,255,0.4); }
.lp-tag-text-input {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  padding: 4px 0;
}
.lp-tag-text-input::placeholder { color: var(--ink-faint); }
.lp-tag-text-input:disabled { color: var(--ink-faint); }

/* ---------------------------------------------------------------------
   Rich-text toolbar (Brand Story formatting)
   --------------------------------------------------------------------- */
.lp-richtext-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: var(--surface-soft, var(--bg));
  border: 1.5px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
  border-bottom: none;
}
.lp-rt-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease;
}
.lp-rt-btn:hover { background: var(--line); }
.lp-rt-divider { width: 1px; height: 20px; background: var(--line); margin: 0 2px; }
.lp-rt-color-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
}
.lp-richtext-toolbar + textarea { border-radius: 0 0 var(--r-md) var(--r-md); }

/* ---------------------------------------------------------------------
   Formatting help button + popup content
   --------------------------------------------------------------------- */
.lp-field-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.lp-field-label-row .lp-field-label { margin: 0; }
.lp-help-btn {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none;
  color: var(--liyog-blue);
  font-size: 12px; font-weight: 700;
  cursor: pointer; padding: 0;
}
.lp-help-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.lp-help-row code {
  background: var(--surface-soft, var(--bg));
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 13px;
  font-family: monospace;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 140px;
}
.lp-help-note { font-size: 12.5px; color: var(--ink-faint); margin-top: 14px; line-height: 1.5; }

/* ---------------------------------------------------------------------
   Slug editing (locked vs editable state)
   --------------------------------------------------------------------- */
.lp-slug-locked-box {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
  background: var(--surface-soft, var(--bg));
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  font-size: 14px; color: var(--ink-soft);
}
.lp-slug-locked-badge {
  font-size: 11.5px; font-weight: 700;
  background: var(--line); color: var(--ink-soft);
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Toast notifications
   --------------------------------------------------------------------- */
#lp-toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 0 20px;
  pointer-events: none;
}
.lp-toast {
  max-width: 400px;
  padding: 13px 18px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}
.lp-toast-visible { opacity: 1; transform: translateY(0); }
.lp-toast-error { background: var(--liyog-red-dark, #C1271A); }
.lp-toast-success { background: var(--liyog-green-dark, #228B22); }
.lp-toast-action {
  flex-shrink: 0;
  background: rgba(255,255,255,0.22);
  color: #fff;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.lp-toast-action:hover { background: rgba(255,255,255,0.34); }

.lp-signin-sub {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 18px;
}
.lp-signin-mount { min-height: 80px; }
.lp-signin-error { font-size: 13px; color: var(--liyog-red); text-align: center; padding: 16px 0; }

/* ---------------------------------------------------------------------
   Inquiries list — premium card styling
   --------------------------------------------------------------------- */
#lp-inquiries-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0 20px;
}

.lp-inquiry-list-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--liyog-green);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.lp-inquiry-list-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.lp-inquiry-list-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.lp-inquiry-list-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

.lp-inquiry-list-date {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--surface-soft, var(--bg));
  padding: 3px 9px;
  border-radius: 999px;
}

.lp-inquiry-list-contact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--liyog-blue);
  margin-bottom: 10px;
}
.lp-inquiry-list-contact::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--liyog-green);
  flex-shrink: 0;
}

.lp-inquiry-list-message {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.lp-inquiry-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------
   Details / Inquiries tabs — premium tab bar with active state
   --------------------------------------------------------------------- */
.lp-edit-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--surface-soft, var(--bg));
  border-radius: var(--r-pill);
  margin: 4px 0 20px;
  border: 1px solid var(--line);
}

.lp-edit-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.lp-edit-tab:hover {
  color: var(--ink);
}

.lp-edit-tab-active {
  background: var(--liyog-green);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.lp-edit-tab-active:hover {
  color: #fff;
}

.lp-edit-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--liyog-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}
.lp-edit-tab-active .lp-edit-tab-badge {
  background: #fff;
  color: var(--liyog-red);
}

/* =====================================================================
   PRODUCTS / MANAGE — full rebuild (2026-07-22, v4)
   Single, self-contained block. Card *sizing* (flex-basis / grid span)
   lives on the WRAPPER the card sits inside (.lp-products-row,
   .lp-seeall-grid-item, etc.), never on the card class itself, so the
   same .lp-prodcard / .lp-prodfeed markup can be reused inline, inside
   the "See all" grid, and anywhere else without fighting conflicting
   flex-basis rules. All legacy .lp-product-card / .lp-product-card-feed
   / .lp-product-manage-item selectors below this block are deleted —
   nothing in the JS emits those class names anymore.
   ===================================================================== */

/* ---- Compact card — used inline AND in the "See all" grid.
   Mature, restrained design: no per-card rainbow accent bars — those
   read as busy/childish at scale. A confident hover lift + shadow is
   the only motion signal; color is reserved for the one thing that
   actually deserves emphasis (the price badge) and real action
   buttons (WhatsApp/Call), everything else stays neutral ink/surface
   tones, matching the same restrained palette as the Manage Products
   modal. ---- */
.lp-prodcard-slot { position: relative; height: 100%; min-width: 0; }
.lp-prodcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.lp-prodcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--ink-faint);
}

.lp-prodcard-imgwrap {
  width: 100%;
  aspect-ratio: 1;
  background: var(--surface-soft, var(--bg));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-prodcard-imgwrap img {
  width: 100%;
  height: 100%;
  /* 2026-08-14 fix: was object-fit:contain, which letterboxes any
     image that isn't already square — confirmed by rendering real
     test images through this exact rule: portrait/landscape photos
     left visible empty bars inside the box instead of filling it.
     cover crops-to-fill instead, matching the premium, fully-filled
     card look every other image context in this file already uses
     (avatars, gallery previews, hero images are all `cover`) — these
     two product-card rules were the only outliers. */
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.lp-prodcard:hover .lp-prodcard-imgwrap img { transform: scale(1.05); }
.lp-prodcard-imgwrap-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
}

.lp-prodcard-body { padding: 13px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.lp-prodcard-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.lp-prodcard-price {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--liyog-green-light), var(--liyog-green-dark));
  padding: 3px 11px;
  border-radius: var(--r-pill);
  margin: 0 0 7px;
}
.lp-prodcard-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.lp-prodcard-contacts { display: flex; gap: 7px; margin-top: auto; }
.lp-prodcard-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.lp-prodcard-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lp-prodcard-btn-whatsapp { background: linear-gradient(135deg, #2FE87A, #1DA851); }
.lp-prodcard-btn-call { background: var(--liyog-blue); }
.lp-prodcard-btn span { display: none; }

.lp-prodcard-featured {
  position: absolute;
  top: 12px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--liyog-gold);
  color: #111;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  z-index: 2;
}

/* ---- Floating 3-dot "more" button — repositioned onto the card's
   image corner (standard Jumia/Amazon placement) instead of living
   inside the crowded engagement bar row, where it previously competed
   with like/rate for space and became unreliable to tap. Its own
   solid circular background guarantees visibility against any photo,
   and stopPropagation on click keeps it from also triggering the
   card's own navigate-to-product-page handler. ---- */
.lp-card-report-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(17,17,17,0.45);
  backdrop-filter: blur(3px);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.lp-card-report-btn:hover { background: var(--liyog-red-dark, #C1271A); transform: scale(1.08); }
.lp-prodcard-imgwrap, .lp-prodfeed-imgwrap { position: relative; }

.lp-quick-report-sub {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 18px;
}
.lp-quick-report-confirm-btn { width: 100%; }

/* ---- Full-width feature card — the first product, styled with the
   confident, punchy proportions of a Facebook/Instagram ad card ---- */
.lp-prodfeed {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s ease;
}
.lp-prodfeed:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lp-prodfeed-imgwrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface-soft, var(--bg));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 480px) { .lp-prodfeed-imgwrap { aspect-ratio: 16 / 9; } }
/* 2026-08-14 fix: same object-fit:contain -> cover fix as
   .lp-prodcard-imgwrap img above — this is the full-width "Facebook
   ad" style feature card, so a letterboxed image here was even more
   visible/costly than on the compact cards. */
.lp-prodfeed-imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.lp-prodfeed:hover .lp-prodfeed-imgwrap img { transform: scale(1.03); }
.lp-prodfeed-imgwrap-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
}
.lp-prodfeed-body { padding: 16px 18px 18px; }
.lp-prodfeed-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink); margin: 0 0 5px; letter-spacing: -0.01em; }
.lp-prodfeed-price {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--liyog-green-light), var(--liyog-green-dark));
  padding: 4px 14px;
  border-radius: var(--r-pill);
  margin: 0 0 10px;
}
.lp-prodfeed-desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 14px; }
.lp-prodfeed-contacts { display: flex; gap: 8px; }
.lp-prodfeed-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.lp-prodfeed-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lp-prodfeed-btn-whatsapp { background: linear-gradient(135deg, #2FE87A, #1DA851); }
.lp-prodfeed-btn-call { background: var(--liyog-blue); }
.lp-prodfeed-featured {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--liyog-gold);
  color: #111;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  z-index: 1;
}

/* ---- Inline responsive grid — replaces the old horizontal-scroll
   row strips. One CSS Grid, 2 columns on phones, 3 on tablets/desktop,
   auto-centered with generous gaps so cards read as bigger and more
   premium, not cramped. ---- */
.lp-products-feature-wrap { margin-bottom: 16px; }
.lp-products-grid-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  justify-items: stretch;
}
@media (min-width: 640px) {
  .lp-products-grid-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
  .lp-products-grid-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.lp-products-seeall-tile {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 140px;
  background: var(--surface-soft, var(--bg));
  border: 1.5px dashed var(--line);
  border-radius: var(--r-lg);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.lp-products-seeall-tile:hover { color: var(--liyog-gold); border-color: var(--liyog-gold); transform: translateY(-2px); }

.lp-sheet-tall { max-height: 88vh; }

/* ---- "See all" sheet — smart hybrid: 2-col grid + full-width breaks.
   Also gets the dynamic accent-border treatment via the same
   .lp-prodcard-slot wrapper for visual consistency with the inline grid. ---- */
.lp-seeall-feed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  overflow-y: auto;
  padding: 4px 2px 16px;
  max-height: 74vh;
  align-items: stretch;
}
@media (min-width: 480px) { .lp-seeall-feed { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .lp-seeall-feed { grid-template-columns: repeat(4, 1fr); max-height: 78vh; } }

.lp-seeall-grid-item { display: flex; min-width: 0; }
.lp-seeall-feed-item {
  grid-column: 1 / -1; /* span full width, regardless of column count */
}

/* =====================================================================
   Owner edit panel — Products tab (2026-07-22 rebuild, v5)
   Search bar + simple list rows + pagination, all fresh class names
   (.lp-mg*) so nothing here can collide with any older rule. Subtle
   entrance animation staggered per row via the --lp-mgrow-i custom
   property set inline by the JS, plus a soft lift-on-hover for a
   premium feel without being showy.
   ===================================================================== */

.lp-mgsearch {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-soft, var(--bg));
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 9px 14px;
  margin-bottom: 14px;
  color: var(--ink-faint);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lp-mgsearch:focus-within {
  border-color: var(--liyog-green);
  box-shadow: 0 0 0 3px rgba(40,164,40,0.12);
}
.lp-mgsearch svg { flex-shrink: 0; }
.lp-mgsearch-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13.5px;
  color: var(--ink);
  font-family: var(--font-sans);
  min-width: 0;
}
.lp-mgsearch-input::placeholder { color: var(--ink-faint); }
.lp-mgsearch-clear {
  border: none;
  background: var(--line);
  color: var(--ink-soft);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.lp-mgsearch-clear:hover { background: var(--liyog-red); color: #fff; }

.lp-mglist { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.lp-mglist-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--ink-faint);
  font-size: 13px;
}

.lp-mgrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  animation: lp-mgrow-in 0.28s ease both;
  animation-delay: calc(var(--lp-mgrow-i, 0) * 0.035s);
}
.lp-mgrow:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--liyog-green-light);
}
@keyframes lp-mgrow-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.lp-mgrow-thumb-wrap {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 10px;
}
.lp-mgrow-thumb {
  width: 46px;
  height: 46px;
  max-width: 46px;
  max-height: 46px;
  min-width: 46px;
  min-height: 46px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  background: var(--surface-soft, var(--bg));
}
.lp-mgrow-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
}

.lp-mgrow-info { flex: 1; min-width: 0; }
.lp-mgrow-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-mgrow-price { font-size: 12px; color: var(--liyog-green); font-weight: 600; margin-top: 1px; }
.lp-mgrow-draft {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-faint);
  background: var(--line);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  margin-left: 4px;
  vertical-align: middle;
}

.lp-mgrow-actions { display: flex; gap: 6px; flex-shrink: 0; }
.lp-mgrow-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.lp-mgrow-btn:hover { background: var(--liyog-blue); color: #fff; transform: scale(1.08); }
.lp-mgrow-btn-remove:hover { background: var(--liyog-red); }
.lp-mgrow-btn-boost-active { color: var(--liyog-gold); }

.lp-mgadd-btn {
  width: 100%;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.lp-mgadd-btn-top {
  margin-top: 0;
  margin-bottom: 14px;
}

/* ---- Pagination controls ---- */
.lp-mgpage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.lp-mgpage-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lp-mgpage-btn:hover:not(:disabled) { background: var(--liyog-green); color: #fff; border-color: var(--liyog-green); }
.lp-mgpage-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.lp-mgpage-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }

/* ---- Owner edit panel — Referrals sheet rows (fresh class names,
   .lp-refitem*, decoupled from anything used previously) ---- */
.lp-refitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 7px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: lp-mgrow-in 0.28s ease both;
  animation-delay: calc(var(--lp-refitem-i, 0) * 0.04s);
}
.lp-refitem:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.lp-refitem-thumb-wrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
}
.lp-refitem-thumb {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--surface-soft, var(--bg));
}
.lp-refitem-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
}

.lp-refitem-info { flex: 1; min-width: 0; }
.lp-refitem-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-refitem-date { font-size: 11px; color: var(--ink-faint); margin-top: 1px; }
.lp-refitem-status {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.lp-refitem-status-done { color: var(--liyog-green); }
.lp-refitem-status-pending { color: var(--ink-faint); }

/* ---- Lightbox contact row override — the lightbox reuses the compact
   .lp-prodcard-contacts/.lp-prodcard-btn markup via contactButtonsHtml(),
   but wants full-width buttons with visible labels, same as this rule
   did for the old class names before the rebuild. ---- */
.lp-lightbox-contact .lp-prodcard-contacts { display: flex; gap: 8px; }
.lp-lightbox-contact .lp-prodcard-btn { flex: 1; height: 38px; gap: 6px; font-size: 13px; font-weight: 600; }
.lp-lightbox-contact .lp-prodcard-btn span { display: inline; }

/* =====================================================================
   END rebuild block
   ===================================================================== */

/* =====================================================================
   LIYOG WORLD — reviews-ui.css additions
   APPEND this entire block to the END of your existing profile-css.txt.
   Nothing here redefines existing selectors (.lp-rating-summary,
   .lp-review-card, etc. already exist in your file and are reused as-is).
   ===================================================================== */

/* Fix: .lp-rating-summary needs flex-wrap so the badges row and the
   reaction bar (which use flex-basis: 100%) actually drop to their own
   line instead of squeezing/stacking oddly next to the rating bars. */
.lp-rating-summary { flex-wrap: wrap; }

/* ---- Premium SVG star (single source used everywhere) ---- */
.lp-star-row { display: inline-flex; gap: 2px; vertical-align: middle; }
.lp-star-svg { display: inline-block; flex-shrink: 0; }
.lp-star-svg .lp-star-bg { fill: var(--line); }
.lp-star-svg .lp-star-fill { fill: var(--liyog-gold); }

/* ---- Badges (Top Rated, Trusted Brand, etc.) ---- */
.lp-review-badges-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; flex-basis: 100%;
}
.lp-review-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--liyog-gold), var(--liyog-orange));
  color: var(--liyog-black);
}

/* ---- Like / Dislike reaction bar ---- */
.lp-reaction-bar {
  display: flex; gap: 10px; margin-top: 14px; flex-basis: 100%;
}
.lp-reaction-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-soft);
  color: var(--ink-soft); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.2s var(--ease);
}
.lp-reaction-btn:hover { border-color: var(--liyog-green); color: var(--ink); }
.lp-reaction-active-like { background: rgba(40,164,40,0.12); border-color: var(--liyog-green); color: var(--liyog-green-dark); }
.lp-reaction-active-dislike { background: rgba(255,59,48,0.1); border-color: var(--liyog-red); color: var(--liyog-red-dark); }
.lp-reaction-count { font-variant-numeric: tabular-nums; }

/* ---- Write-a-review CTA ---- */
.lp-write-review-cta { width: 100%; margin-bottom: 14px; }

.lp-no-reviews-yet, .lp-loading-reviews {
  text-align: center; color: var(--ink-faint); font-size: 13.5px; padding: 20px 10px;
}

/* ---- Review card extras (title, tags, owner reply, helpful) ---- */
.lp-review-title { font-weight: 700; font-size: 13.5px; color: var(--ink); margin: 4px 0 2px; }
.lp-review-verified-tag, .lp-review-featured-tag, .lp-review-recommend-tag {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill);
  margin-left: 6px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.2px;
}
.lp-review-verified-tag { background: rgba(34,139,34,0.12); color: var(--verified-green); }
.lp-review-featured-tag { background: rgba(255,215,0,0.18); color: #8a6d00; }
.lp-review-recommend-tag { background: rgba(24,119,242,0.1); color: var(--liyog-blue); margin-left: 0; }

.lp-review-helpful-btn {
  margin-top: 8px; background: none; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 12px; font-size: 11.5px; font-weight: 600; color: var(--ink-faint);
  cursor: pointer; transition: all 0.2s ease;
}
.lp-review-helpful-btn:hover { border-color: var(--liyog-green); color: var(--liyog-green-dark); }

.lp-review-owner-reply {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-soft); border-left: 3px solid var(--liyog-green);
}
.lp-review-owner-reply-label { font-size: 11px; font-weight: 700; color: var(--liyog-green-dark); margin-bottom: 3px; }
.lp-review-owner-reply p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* ---- Owner-only controls: reply / feature buttons + inline reply box ---- */
.lp-review-owner-controls { display: flex; gap: 8px; margin-top: 8px; }
.lp-review-owner-btn {
  background: none; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 12px; font-size: 11.5px; font-weight: 600; color: var(--ink-faint);
  cursor: pointer; transition: all 0.2s ease;
}
.lp-review-owner-btn:hover { border-color: var(--liyog-green); color: var(--liyog-green-dark); }
.lp-review-owner-btn-active { background: rgba(255,215,0,0.18); border-color: var(--liyog-gold); color: #8a6d00; }

.lp-review-reply-box { margin-top: 10px; }
.lp-review-reply-box textarea { width: 100%; box-sizing: border-box; }
.lp-review-reply-box-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.lp-btn-text-cancel {
  background: none; border: none; color: var(--ink-faint); font-size: 12.5px;
  font-weight: 600; cursor: pointer; padding: 6px 10px;
}
.lp-btn-small { padding: 6px 14px; font-size: 12.5px; }

/* ---- Sort row inside the "All Reviews" sheet ---- */
.lp-review-sort-row { margin-bottom: 12px; }
.lp-review-sort-select {
  width: 100%; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 600;
}

/* ---- Star picker (submission form) ---- */
.lp-star-picker { display: flex; gap: 6px; margin: 6px 0 16px; }
.lp-star-picker-btn {
  background: none; border: none; padding: 2px; cursor: pointer; transition: transform 0.15s var(--ease);
}
.lp-star-picker-btn:hover { transform: scale(1.15); }
.lp-star-picker-active .lp-star-fill { fill: var(--liyog-gold); }

/* ---- Review submission form ---- */
.lp-review-form { display: flex; flex-direction: column; }
.lp-review-form .lp-field-label { margin-top: 12px; margin-bottom: 6px; }
.lp-review-recommend-toggle {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 6px;
  font-size: 13.5px; color: var(--ink-soft); cursor: pointer;
}
.lp-review-recommend-toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2px solid var(--line); border-radius: 5px;
  background: var(--surface); cursor: pointer;
  position: relative; transition: all 0.15s var(--ease);
}
.lp-review-recommend-toggle input[type="checkbox"]:checked {
  background: var(--liyog-green); border-color: var(--liyog-green);
}
.lp-review-recommend-toggle input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid white; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lp-review-recommend-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--liyog-green); outline-offset: 2px;
}
.lp-review-form #lp-review-submit-btn { margin-top: 16px; }

/* .lp-review-badge already uses var(--liyog-black) as its text color
   (set earlier in the file), and --liyog-black is a fixed brand color,
   not a theme variable — so it never needs a dark-mode override here.
   (Previously this file had a stray `@media (prefers-color-scheme: dark)`
   block re-declaring this same rule. It was harmless on its own, but it
   was a leftover from before the unified dark-mode layer above existed,
   and having a second, disconnected dark-mode trigger in the file is
   exactly the kind of thing that causes future edits to drift out of
   sync with the Blogger toggle. Removed for a single source of truth.) */

/* =====================================================================
   LiyX AI — insight card
   Sits inside .lp-rating-summary (which already has flex-wrap from the
   fix above), full-width on its own row, same pattern as
   .lp-review-badges-row / .lp-reaction-bar. Reuses existing tokens only
   — no new colors introduced. Dark mode needs no separate block: every
   value here is a var() already covered by the global dark-mode layer.
   ===================================================================== */
.lp-liyx-insight {
  flex-basis: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(63,61,158,0.06));
  border: 1px solid var(--line);
  position: relative;
}
.lp-liyx-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--liyog-gold), var(--liyog-orange));
  color: var(--liyog-black);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  margin-bottom: 8px;
}
.lp-liyx-badge svg { flex-shrink: 0; }
.lp-liyx-text {
  margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink);
  font-family: var(--font-body);
}
.lp-liyx-keywords {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.lp-liyx-keyword {
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 3px 10px;
}

/* =====================================================================
   Author controls (edit/delete) + report — same visual language as
   .lp-review-owner-controls / .lp-review-owner-btn above, so a visitor
   can't tell "author controls" and "owner controls" apart stylistically
   except by which buttons appear. Delete uses --liyog-red to signal
   it's destructive, matching how red is already used elsewhere in this
   file (.lp-edit-error, the reject/remove buttons).
   ===================================================================== */
.lp-review-edited-tag {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill);
  margin-left: 6px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.2px;
  background: var(--surface-soft); color: var(--ink-faint);
}

.lp-review-actions-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.lp-review-author-controls { display: flex; gap: 8px; margin-top: 8px; }
.lp-review-author-btn {
  background: none; border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 12px; font-size: 11.5px; font-weight: 600; color: var(--ink-faint);
  cursor: pointer; transition: all 0.2s ease;
}
.lp-review-author-btn:hover { border-color: var(--liyog-green); color: var(--liyog-green-dark); }
.lp-review-author-btn-danger { color: var(--liyog-red); }
.lp-review-author-btn-danger:hover { border-color: var(--liyog-red); color: var(--liyog-red-dark, #C1271A); }

.lp-review-report-btn {
  margin-top: 8px; background: none; border: none; padding: 5px 4px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-faint);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.lp-review-report-btn:hover { color: var(--liyog-red); }

.lp-review-report-picker {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-soft); border: 1px solid var(--line);
}
.lp-review-report-picker-title { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.lp-review-report-reason-btn {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 7px 6px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer;
  border-radius: var(--r-sm);
}
.lp-review-report-reason-btn:hover { background: var(--surface); color: var(--ink); }

/* ---- Inline edit form (author editing their own review) ---- */
.lp-review-edit-form { margin-top: 8px; }
.lp-edit-star-picker { margin-bottom: 8px; }
.lp-edit-title-input { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.lp-edit-textarea { width: 100%; box-sizing: border-box; }
.lp-edit-success { color: var(--liyog-green-dark); font-weight: 600; }


/* =====================================================================
   PRODUCTS — remaining live rules (locked states, empty state, tab
   cap note, row/see-all-tile layout, boost badge, product lightbox,
   boost banner/buttons, edit/draft/tab-header, referrals sheet).
   Legacy .lp-product-card / .lp-product-image-wrap / .lp-product-name
   / .lp-product-price / .lp-product-desc / .lp-product-contact-* /
   .lp-product-manage-* / .lp-products-seeall-grid / .lp-product-card-feed
   / .lp-product-image-wrap-feed / .lp-product-name-feed /
   .lp-product-desc-feed / .lp-referral-item (+ its children) are all
   deleted here — nothing in profile-js.txt emits any of those class
   names; the current markup uses .lp-prodcard / .lp-prodfeed /
   .lp-mgrow / .lp-refitem instead (defined earlier in this file).
   ===================================================================== */

.lp-products-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--ink-faint);
  font-size: 13.5px;
}

/* ---- Locked-state card — owner-only, friendly not pushy ---- */
.lp-products-locked-card {
  text-align: center;
  padding: 28px 20px;
  background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(24,119,242,0.05));
  border: 1px dashed var(--liyog-gold);
  border-radius: var(--r-lg);
}
.lp-products-locked-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--liyog-gold);
  box-shadow: var(--shadow-sm);
}
.lp-products-locked-card h3 {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 8px;
}
.lp-products-locked-card p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Products & Services section title — a bolder, more confident
   treatment than the shared .lp-section-title default, closer to how
   a Facebook/Instagram sponsored-post header reads: larger, heavier,
   and using --ink directly (not a faint/muted tone) so it stays fully
   readable in dark mode too. Scoped to #lp-products-section only, so
   every other section's title is completely unaffected. ---- */
#lp-products-section .lp-section-title {
  font-size: 19px;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 2px;
}
#lp-products-section .lp-section-title::before {
  width: 5px;
  height: 20px;
}
#lp-products-section .lp-section-sub {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

/* =====================================================================
   Products Manage — trigger button + standalone modal (2026-07-23)
   Deliberately isolated under the .lp-pm-* prefix, sharing NOTHING
   with .lp-edit-tab / .lp-sheet / .lp-mg* etc. Own overlay appended
   to getOverlayHost() (.lp-root) so it correctly inherits the same
   dark-mode CSS custom properties as every other sheet in this file —
   all of which are scoped to .lp-root, not :root globally. Its own
   centered-dialog shell that works the same on desktop and mobile,
   with independent vertical AND horizontal scrolling so wide content
   (e.g. a very long product name/description) never gets clipped on
   any screen size.
   ===================================================================== */

.lp-pm-trigger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--liyog-green);
  color: var(--liyog-green-dark);
  font-weight: 700;
  font-size: 13.5px;
  padding: 11px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  margin-bottom: 14px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.lp-pm-trigger-btn[hidden] {
  display: none !important;
}
.lp-pm-trigger-btn:hover {
  background: var(--liyog-green);
  color: #fff;
  transform: translateY(-1px);
}
.lp-pm-trigger-btn-locked {
  margin-top: 14px;
  margin-bottom: 0;
  border-style: dashed;
}

.lp-pm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(8,7,5,0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  /* Forces its own GPU compositing layer — fixes a known Android
     Chrome/WebView bug where fixed-position content behind a
     backdrop-filter overlay can still paint through during scroll-
     locked states, especially right after the page was scrolled. */
  transform: translateZ(0);
  isolation: isolate;
}
.lp-pm-overlay.lp-open { display: flex; animation: lp-fade-in 0.2s ease; }

.lp-pm-dialog {
  background: var(--surface);
  width: 100%;
  max-width: 640px;
  max-height: 86vh;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: lp-pm-in 0.22s ease;
}
@keyframes lp-pm-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.lp-pm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.lp-pm-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.lp-pm-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-soft, var(--bg));
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.lp-pm-close:hover { background: var(--liyog-red); color: #fff; }

.lp-pm-body {
  padding: 18px 20px 22px;
  overflow-y: auto;
  overflow-x: auto;
  flex: 1;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.lp-pm-loading {
  text-align: center;
  padding: 32px 16px;
  color: var(--ink-faint);
  font-size: 13.5px;
}

/* Desktop/tablet: roomier dialog, no longer edge-to-edge */
@media (min-width: 640px) {
  .lp-pm-dialog { max-height: 80vh; }
}
@media (min-width: 900px) {
  .lp-pm-dialog { max-width: 720px; }
  .lp-pm-body { padding: 22px 28px 26px; }
}

/* ---- Products manage modal body content (still used inside the new
   modal shell above, unchanged from the previous tab-based version) ---- */
.lp-products-tab-locked {
  text-align: center;
  padding: 40px 20px;
}
.lp-products-tab-locked p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 320px;
  margin: 12px auto 18px;
}

.lp-product-form-card {
  background: var(--surface-soft, var(--bg));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 16px;
}

.lp-products-cap-note {
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
  margin: 10px 0 0;
}

/* ---- Outer products container — centers nicely on wide screens too ---- */
.lp-products-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.lp-products-seeall-tile {
  flex: 0 0 78px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface-soft, var(--bg));
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
}
.lp-products-seeall-tile:hover { color: var(--liyog-gold); border-color: var(--liyog-gold); }

.lp-sheet-tall { max-height: 88vh; }

/* ---- Boost badge — small gold pill on any boosted card ---- */
.lp-boost-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--liyog-gold);
  color: #1a1400;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 3px 7px 3px 6px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}

/* ---- Product lightbox — dedicated overlay, own class deliberately
   NOT .lp-lightbox (that belongs to the separate gallery lightbox) ---- */
.lp-product-lightbox { display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.92); z-index: 1500; position: fixed; inset: 0; padding: 24px; animation: lp-fade-in 0.18s ease; }
.lp-product-lightbox.lp-open { display: flex; }
.lp-product-lightbox .lp-lightbox-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.12); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lp-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.12); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lp-lightbox-prev { left: 12px; }
.lp-lightbox-next { right: 12px; }
@media (min-width: 720px) {
  .lp-lightbox-prev { left: 32px; }
  .lp-lightbox-next { right: 32px; }
}
.lp-lightbox-stage { max-width: 94vw; max-height: 88vh; display: flex; flex-direction: column; gap: 12px; }
.lp-lightbox-imgwrap { display: flex; align-items: center; justify-content: center; max-height: 55vh; }
.lp-lightbox-imgwrap img { max-width: 92vw; max-height: 55vh; object-fit: contain; border-radius: var(--r-md); }
.lp-lightbox-details {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 14px 16px;
  max-width: 92vw;
  width: 420px;
  max-height: 26vh;
  overflow-y: auto;
}
@media (min-width: 720px) {
  .lp-lightbox-stage { flex-direction: row; align-items: center; max-height: 82vh; }
  .lp-lightbox-imgwrap { max-height: 78vh; }
  .lp-lightbox-imgwrap img { max-height: 78vh; max-width: 55vw; }
  .lp-lightbox-details { max-height: 78vh; }
}
.lp-lightbox-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}
.lp-lightbox-price { font-size: 15px; font-weight: 800; color: var(--liyog-green); margin-bottom: 10px; }
.lp-lightbox-desc { font-size: 14.5px; color: var(--ink); line-height: 1.6; margin-bottom: 14px; }

/* ---- Boost banner + buttons (Products edit tab, top section) ---- */
.lp-boost-banner { margin-bottom: 16px; }
.lp-boost-banner-active {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(212,175,55,0.04));
  border: 1px solid var(--liyog-gold);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 600;
}
.lp-btn-gold {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--liyog-gold);
  color: #1a1400;
  border: none;
  border-radius: var(--r-pill);
  padding: 11px 16px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}
.lp-btn-gold:hover { filter: brightness(1.05); }

.lp-btn-outline-subtle {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.lp-btn-outline-subtle:hover { border-color: var(--liyog-gold); color: var(--liyog-gold); }

.lp-boost-sheet-content { padding: 4px 4px 8px; }

/* Per-product boost button, sits in the manage-list row */
.lp-product-boost-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.lp-product-boost-btn:hover { background: var(--liyog-gold); color: #1a1400; }
.lp-product-boost-btn-active { background: var(--liyog-gold); color: #1a1400; }

/* ---- Edit button (manage-list row) ---- */
.lp-product-edit-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.lp-product-edit-btn:hover { background: var(--liyog-blue); color: #fff; }

.lp-draft-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-faint);
  background: var(--line);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  margin-left: 4px;
  vertical-align: middle;
}

/* ---- Products tab header row — Share + Referrals buttons ---- */
.lp-products-tab-header {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.lp-products-tab-header .lp-btn-outline-subtle { flex: 1; }

/* ---- Referrals bottom sheet — outer container (rows use .lp-refitem-*,
   defined earlier in this file alongside the Products rebuild) ---- */
.lp-referrals-sheet-list {
  overflow-y: auto;
  max-height: 70vh;
  padding: 4px 2px 12px;
}
.lp-referrals-empty {
  font-size: 12.5px;
  color: var(--ink-faint);
  text-align: center;
  padding: 24px 12px;
}

/* =====================================================================
   PRODUCT ENGAGEMENT — views, likes, star ratings, shares, 3-dot menu,
   full detail page, LiyX AI insight (2026-07-24).
   All new class prefixes (.lp-engbar-*, .lp-pstar-*, .lp-rating-*,
   .lp-more-menu-*, .lp-detail-*) — zero overlap with any existing
   selector in this file, so nothing here can collide with or be
   overridden by anything defined earlier.
   ===================================================================== */

/* ---- Star SVG (shared visual language with the Brand Reputation
   Engine's own reviews star) ---- */
.lp-pstar-svg { display: inline-block; vertical-align: middle; }
.lp-pstar-bg { fill: var(--line); }
.lp-pstar-fill { fill: var(--liyog-gold); }

/* ---- Engagement bar — views / rating share one row; like gets its
   OWN full-width row directly beneath (2026-08-13 fix). Previously all
   three sat on one flex row with the like button allowed to shrink
   (flex-shrink:1) right next to the non-shrinking rating block
   (flex-shrink:0) — on narrow 2-column cards the like button's number
   would get compressed and visually collide with/hide under the
   rating's "(count)" text. Splitting into two explicit rows
   (.lp-engbar-row-top / .lp-engbar-row-like) removes the competition
   for space entirely — nothing needs to shrink into anything else. */
.lp-engbar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  width: 100%;
}
.lp-engbar-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.lp-engbar-row-like {
  display: flex;
  width: 100%;
}
.lp-engbar-row-like .lp-engbar-like {
  width: 100%;
  justify-content: center;
}
.lp-engbar-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.lp-engbar-rate { flex-shrink: 0; margin-left: auto; }
.lp-engbar-item span {
  overflow: visible;
  text-overflow: clip;
}
.lp-engbar-feed .lp-engbar-item { font-size: 12.5px; padding: 6px 8px; gap: 4px; }
.lp-engbar-views { cursor: default; flex-shrink: 0; padding-left: 0; }
.lp-engbar-like:hover, .lp-engbar-rate:hover, .lp-engbar-more:hover {
  background: var(--surface-soft, var(--bg));
  color: var(--ink);
}
.lp-engbar-like:active, .lp-engbar-rate:active { transform: scale(0.94); }
.lp-engbar-like-active {
  color: var(--liyog-green-dark);
  background: rgba(40,164,40,0.10);
}
.lp-like-hand-svg { flex-shrink: 0; }
.lp-engbar-rate .lp-pstar-svg .lp-pstar-fill { fill: var(--liyog-gold); }

/* Gentle, tasteful pulse inviting a first tap — stops once the
   visitor has actually rated/liked (alreadyRated / liked flips the
   class off in engagementBarHtml, so this never nags someone who's
   already engaged). */
.lp-engbar-invite-tap .lp-like-hand-svg,
.lp-engbar-invite-tap .lp-pstar-svg {
  animation: lp-invite-pulse 2.6s ease-in-out infinite;
}
@keyframes lp-invite-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.lp-engbar-feed .lp-engbar-like,
.lp-engbar-feed .lp-engbar-rate {
  padding: 7px 10px;
}

/* ---- 3-dot "more" menu popover ---- */
.lp-more-menu-popover {
  position: fixed;
  z-index: 1250;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  overflow: hidden;
  animation: lp-fade-in 0.15s ease;
}
.lp-more-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.lp-more-menu-item:last-child { border-bottom: none; }
.lp-more-menu-item:hover { background: var(--surface-soft, var(--bg)); }
.lp-more-menu-item-danger { color: var(--liyog-red); }

/* ---- Rating sheet — star picker + preset primary text + tags ---- */
.lp-rating-sheet { max-height: 88vh; }
.lp-rating-star-picker {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0 18px;
}
.lp-rating-star-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.lp-rating-star-btn:hover { transform: scale(1.12); }
.lp-rating-presets { padding-bottom: 8px; }
.lp-rating-presets-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 4px 0 8px;
}
.lp-rating-presets-label-tags { margin-top: 16px; }
.lp-rating-preset-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface-soft, var(--bg));
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 14px;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lp-rating-preset-btn:hover { border-color: var(--liyog-gold); }
.lp-rating-preset-active {
  border-color: var(--liyog-green);
  background: rgba(40,164,40,0.08);
  color: var(--liyog-green-dark);
}
.lp-rating-tags-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-rating-tag-btn {
  background: var(--surface-soft, var(--bg));
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lp-rating-tag-btn:hover { border-color: var(--liyog-blue); }
.lp-rating-tag-active {
  border-color: var(--liyog-blue);
  background: rgba(24,119,242,0.08);
  color: var(--liyog-blue);
}
.lp-rating-hint {
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  padding: 16px 0;
}
.lp-rating-submit-btn {
  width: 100%;
  margin-top: 12px;
}
.lp-rating-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Lightbox additions — engagement bar + View Full Details ---- */
.lp-lightbox-engagement { margin: 10px 0; }
.lp-lightbox-viewmore-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  background: transparent;
  border: 1.5px solid var(--liyog-gold);
  color: var(--liyog-gold);
  border-radius: var(--r-pill);
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lp-lightbox-viewmore-btn:hover { background: var(--liyog-gold); color: #1a1400; }

/* =====================================================================
   PRODUCT FULL DETAIL PAGE — edge-to-edge hero image, Facebook-style
   readable description, full stats + chart. Own fixed-position
   full-screen layer, own scroll context.
   ===================================================================== */
.lp-product-detail-page {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: var(--bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.lp-product-detail-page.lp-open { display: block; animation: lp-fade-in 0.2s ease; }

.lp-detail-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent);
  padding: 14px 16px;
}
.lp-detail-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  border: none;
  color: #fff;
  border-radius: var(--r-pill);
  padding: 9px 16px 9px 12px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.lp-detail-back-btn:hover { background: rgba(255,255,255,0.26); }

.lp-detail-hero {
  position: relative;
  width: 100%;
  margin-top: -52px;
  aspect-ratio: 1;
  background: var(--surface-soft, var(--bg));
  overflow: hidden;
}
@media (min-width: 640px) { .lp-detail-hero { aspect-ratio: 16/9; } }
@media (min-width: 1024px) { .lp-detail-hero { aspect-ratio: 21/9; } }
.lp-detail-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-detail-hero-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
}
.lp-detail-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lp-detail-nav:hover { background: rgba(0,0,0,0.6); }
.lp-detail-nav-prev { left: 12px; }
.lp-detail-nav-next { right: 12px; }

.lp-detail-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 18px 60px;
}
.lp-detail-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.lp-detail-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--liyog-green);
  margin-bottom: 10px;
}
.lp-detail-engbar { margin: 12px 0; }
.lp-detail-engbar .lp-engbar { border-top: none; padding-top: 0; margin: 0; }

/* Facebook-style readable description — natural prose, generous line
   height, comfortable size, feels like part of the page rather than
   an injected caption. */
.lp-detail-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 16px 0 20px;
  white-space: pre-wrap;
}

.lp-detail-contact { margin-bottom: 24px; }
.lp-detail-contact .lp-prodfeed-contacts { gap: 10px; }
.lp-detail-contact .lp-prodfeed-btn { height: 46px; font-size: 14px; }

.lp-detail-loading {
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  padding: 20px 0;
}

.lp-detail-stats {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 18px;
}
.lp-detail-stats-header { display: flex; justify-content: center; margin-bottom: 14px; }
.lp-detail-stats-score { text-align: center; }
.lp-detail-stats-num { font-size: 34px; font-weight: 800; color: var(--ink); line-height: 1; }
.lp-detail-stats-count { font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }
.lp-detail-rating-row {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.lp-detail-rating-track { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.lp-detail-rating-fill { height: 100%; background: var(--liyog-gold); border-radius: 3px; }
.lp-detail-rating-bars { margin-top: 4px; }

.lp-detail-liyx-insight { margin-bottom: 18px; }

.lp-detail-chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
}
.lp-detail-chart-title { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.lp-detail-chart-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.lp-detail-chart-legend span { display: flex; align-items: center; gap: 5px; }
.lp-detail-chart-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.lp-detail-chart-dot-views { background: var(--liyog-blue); }
.lp-detail-chart-dot-shares { background: var(--liyog-gold); }
.lp-detail-chart-dot-ratings { background: var(--liyog-green); }
.lp-detail-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 90px;
}
.lp-detail-chart-col {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 100%;
}
.lp-detail-chart-bar { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; }
.lp-detail-chart-bar-views { background: var(--liyog-blue); }
.lp-detail-chart-bar-shares { background: var(--liyog-gold); }
.lp-detail-chart-bar-ratings { background: var(--liyog-green); }

/* ---- LiyX AI insight card (shared class names with reviews-ui.js,
   restyled here so it renders correctly even if reviews-ui's own CSS
   isn't loaded on a given page).
   2026-08-13: badge rebuilt as a real pill (gradient background +
   padding + rounded), matching the treatment already used for
   .lp-review-badge elsewhere in this file — previously it was flat
   colored text with no container, which read as unfinished. ---- */
.lp-liyx-insight {
  background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(24,119,242,0.05));
  border: 1px solid var(--liyog-gold);
  border-radius: var(--r-lg);
  padding: 16px;
}
/* 2026-08-14: on the standalone /products/{slug} page this card now
   spans the full grid width (a genuine page SECTION, not a squeezed
   column — see .lp-shop-grid > .lp-catalogue-insight in
   product-pages.css). A touch more presence at wider viewports so it
   doesn't just look like a stretched card. */
@media (min-width: 640px) {
  .lp-shop-grid .lp-liyx-insight { padding: 22px 26px; }
  .lp-shop-grid .lp-liyx-summary { font-size: 15px; max-width: 900px; }
}
.lp-liyx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 9px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--liyog-gold), var(--liyog-orange));
  box-shadow: 0 2px 8px rgba(255, 122, 0, 0.25);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--liyog-black);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.lp-liyx-summary { font-size: 14px; line-height: 1.55; color: var(--ink); margin: 0 0 10px; }
.lp-liyx-keywords { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-liyx-keyword {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

/* ---- Catalogue-wide insight card (See All sheet + standalone
   /products/{slug} page). 2026-08-14: now that .lp-shop-grid > 
   .lp-catalogue-insight spans the full grid width (see
   product-pages.css), the stats row gets more breathing room on
   wider screens — this only changes column count at wider
   breakpoints, the base 4-column mobile layout is untouched. ---- */
.lp-catalogue-insight { margin-bottom: 4px; }
.lp-catalogue-insight-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0;
  padding: 12px 0;
  border-top: 1px solid rgba(212,175,55,0.25);
  border-bottom: 1px solid rgba(212,175,55,0.25);
}
@media (min-width: 640px) {
  .lp-catalogue-insight-stats { grid-template-columns: repeat(8, 1fr); max-width: 560px; }
}
.lp-catalogue-stat { text-align: center; }
.lp-catalogue-stat strong { display: block; font-size: 17px; font-weight: 800; color: var(--ink); }
.lp-catalogue-stat span { font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.lp-catalogue-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.lp-catalogue-flag {
  font-size: 11px;
  font-weight: 700;
  color: var(--liyog-blue);
  background: rgba(24,119,242,0.08);
  border: 1px solid rgba(24,119,242,0.25);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.lp-report-reason-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 12px; }

/* =====================================================================
   STANDALONE-PAGE DARK-MODE TOGGLE (2026-08-13)
   /products/{slug} and /product/{slug}/{brand} are real, separate
   documents outside Blogger — they never receive Blogger's own
   body.dark class, so trigger #1 in the dark-mode block at the top of
   this file can never fire there, and trigger #2 ([data-theme]) had
   nothing on these pages ever setting it. This is a small, self-
   contained toggle button (product-pages-client.js wires it, reading/
   writing localStorage + a data-theme attribute on <html>) — it needs
   ZERO new color variables here, since it only ever sets the SAME
   data-theme attribute the dark-mode block above already knows how to
   read. Purely additive: does not touch the brand-profile page, which
   keeps working exactly as it does today through Blogger's own toggle.
   ===================================================================== */
.lp-shop-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-soft, var(--bg));
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.lp-shop-theme-toggle:hover { border-color: var(--liyog-green); color: var(--liyog-green-dark); }
.lp-shop-theme-toggle:active { transform: scale(0.92); }
.lp-shop-theme-toggle svg { display: block; }
.lp-shop-theme-toggle .lp-theme-icon-moon { display: none; }
[data-theme="dark"] .lp-shop-theme-toggle .lp-theme-icon-sun { display: none; }
[data-theme="dark"] .lp-shop-theme-toggle .lp-theme-icon-moon { display: block; }

/* =====================================================================
   FLOATING INQUIRY BUTTON — /products/{slug} and /product/{slug}/{brand}
   Reuses the EXACT SAME #lp-inquiry-sheet-overlay markup/logic already
   built by openInquirySheet() in profile.js (exposed via
   window.LiyogProductUI.openInquirySheet) — this is only the small
   floating trigger, not a new form. Bottom-right, thumb-reachable,
   sits above the page content but below any open sheet (z-index lower
   than .lp-sheet-overlay's own, so a sheet always renders on top of it
   correctly once opened).
   ===================================================================== */
.lp-shop-float-inquiry {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px 13px 15px;
  border-radius: var(--r-pill);
  border: none;
  background: linear-gradient(135deg, var(--liyog-green-light), var(--liyog-green-dark));
  color: #fff;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(34, 139, 34, 0.4);
  cursor: pointer;
  animation: lp-float-inquiry-in 0.4s var(--ease, ease) both, lp-float-inquiry-pulse 3s ease-in-out 1.2s infinite;
}
.lp-shop-float-inquiry:hover { filter: brightness(1.06); transform: translateY(-2px); }
.lp-shop-float-inquiry:active { transform: translateY(0) scale(0.97); }
.lp-shop-float-inquiry svg { flex-shrink: 0; }
.lp-shop-float-inquiry span { white-space: nowrap; }
@keyframes lp-float-inquiry-in {
  from { opacity: 0; transform: translateY(16px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lp-float-inquiry-pulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(34, 139, 34, 0.4); }
  50% { box-shadow: 0 10px 30px rgba(34, 139, 34, 0.62); }
}
/* On very small screens, collapse to icon-only so it never crowds
   thumb-reach content underneath it. */
@media (max-width: 380px) {
  .lp-shop-float-inquiry span { display: none; }
  .lp-shop-float-inquiry { padding: 14px; }
}

/* =====================================================================
   PREMIUM CONTACT BUTTONS — individual product page
   (2026-08-13) The existing .lp-detail-contact / .lp-prodfeed-contacts
   buttons (from contactButtonsHtml() in profile.js) are reused as-is
   for structure/markup — this block only adds a premium visual pass
   scoped to the product DETAIL page specifically, so the compact
   in-grid card buttons elsewhere are completely unaffected.
   ===================================================================== */
.lp-product-page-body .lp-detail-contact .lp-prodfeed-contacts {
  gap: 12px;
  margin: 4px 0 22px;
}
.lp-product-page-body .lp-detail-contact .lp-prodfeed-btn {
  height: 50px;
  font-size: 14.5px;
  font-weight: 800;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s var(--ease, ease), box-shadow 0.18s ease, filter 0.18s ease;
}
.lp-product-page-body .lp-detail-contact .lp-prodfeed-btn span { display: inline; }
.lp-product-page-body .lp-detail-contact .lp-prodfeed-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  filter: brightness(1.07);
}
.lp-product-page-body .lp-detail-contact .lp-prodfeed-btn:active { transform: translateY(0) scale(0.98); }
.lp-product-page-body .lp-detail-contact .lp-prodfeed-btn-whatsapp {
  background: linear-gradient(135deg, #2FE87A, #1DA851);
  animation: lp-contact-btn-glow-green 2.6s ease-in-out infinite;
}
.lp-product-page-body .lp-detail-contact .lp-prodfeed-btn-call {
  background: linear-gradient(135deg, #4A9FFF, var(--liyog-blue));
  animation: lp-contact-btn-glow-blue 2.6s ease-in-out infinite 0.3s;
}
@keyframes lp-contact-btn-glow-green {
  0%, 100% { box-shadow: var(--shadow-md); }
  50% { box-shadow: 0 8px 22px rgba(29, 168, 81, 0.45); }
}
@keyframes lp-contact-btn-glow-blue {
  0%, 100% { box-shadow: var(--shadow-md); }
  50% { box-shadow: 0 8px 22px rgba(24, 119, 242, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-shop-float-inquiry, .lp-product-page-body .lp-detail-contact .lp-prodfeed-btn { animation: none; }
}

/* =====================================================================
   PRODUCT TIER UPGRADE — tier selection cards (used by tiers-ui.js)
   New, additive section. Reuses existing design tokens only — no new
   colors/fonts introduced, so this matches the rest of the sheet UI.
   Each tier card carries a --tier-accent custom property set inline
   by tiers-ui.js per tier, so the palette is data-driven rather than
   hardcoded per-tier CSS rules (works cleanly if a 5th tier is added
   later without touching this file).
   ===================================================================== */
.lp-tiers-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lp-tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-top: 4px solid var(--tier-accent, var(--liyog-green));
  border-radius: var(--r-md);
  padding: 20px 10px 16px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  overflow: visible;
}
.lp-tier-card:hover {
  border-color: var(--tier-accent, var(--liyog-green));
  box-shadow: 0 6px 20px rgba(17, 17, 17, 0.12);
  transform: translateY(-2px);
}
.lp-tier-card:active {
  transform: translateY(0) scale(0.98);
}
.lp-tier-card-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.lp-tier-card-badge-top {
  background: linear-gradient(135deg, #7B3FE4, #B24BF3);
  color: #fff;
}
.lp-tier-card-badge-current {
  background: var(--liyog-green-dark);
  color: #fff;
}
.lp-tier-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
  margin-top: 4px;
}
.lp-tier-card-count {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.lp-tier-card-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--tier-accent, var(--liyog-green-dark));
  margin-top: 6px;
}
.lp-tier-card-note {
  font-size: 11px;
  color: var(--ink-faint);
}
.lp-tier-card-current {
  cursor: default;
  background: var(--surface-soft);
  border-style: dashed;
  opacity: 0.85;
}
.lp-tier-card-current:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}
.lp-tier-cap-prompt {
  text-align: center;
  padding: 14px 10px;
  background: var(--surface-soft);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  margin-top: 8px;
}

/* Upgrade-entry buttons wherever they appear (locked tab, manage-modal
   for referral users, manage-modal for paid users below their top
   tier) — one consistent, premium treatment across all three spots. */
.lp-upgrade-entry-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 18px;
  margin-top: 10px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, #7B3FE4, #B24BF3);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(123, 63, 228, 0.28);
  transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.lp-upgrade-entry-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(123, 63, 228, 0.36);
}
.lp-upgrade-entry-btn:active {
  transform: translateY(0);
}
.lp-upgrade-entry-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Tier already included below the owner's current plan — locked but
   visually distinct from "current" (no badge, quieter, checkmark-style
   note) so the two locked states read differently at a glance. */
.lp-tier-card-included {
  cursor: default;
  background: var(--surface-soft);
  opacity: 0.55;
  filter: grayscale(0.3);
}
.lp-tier-card-included:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* Smaller variant of the upgrade button for the public-facing
   Products & Services section (sits directly under Manage/Share
   buttons there), vs. the full-width one inside the manage modal. */
.lp-upgrade-entry-btn-section {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  font-size: 13px;
  padding: 11px 16px;
}

/* Urgency / early-bird banner shown above the tier list in the
   upgrade sheet. Warm, premium tone — gold-leaning gradient border,
   not alarmist red, since this is an opportunity message, not a
   warning. */
.lp-tiers-urgency-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(135deg, rgba(184, 134, 11, 0.08), rgba(123, 63, 228, 0.06));
  border: 1px solid rgba(184, 134, 11, 0.25);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.lp-tiers-urgency-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #B8860B;
  margin-top: 1px;
  animation: lp-tier-icon-pulse 2.4s ease-in-out infinite;
}
@keyframes lp-tier-icon-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}
.lp-tiers-urgency-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
  margin-bottom: 2px;
}
.lp-tiers-urgency-sub {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Subtle entrance animation for tier cards — staggered by nth-child so
   the grid feels alive without being distracting. Respects the
   reduced-motion rule already defined earlier in this file. */
.lp-tiers-list .lp-tier-card,
.lp-tiers-list button.lp-tier-card,
.lp-tiers-list div.lp-tier-card {
  animation: lp-tier-card-in 0.35s ease backwards;
}
.lp-tiers-list > *:nth-child(1) { animation-delay: 0.02s; }
.lp-tiers-list > *:nth-child(2) { animation-delay: 0.08s; }
.lp-tiers-list > *:nth-child(3) { animation-delay: 0.14s; }
.lp-tiers-list > *:nth-child(4) { animation-delay: 0.2s; }
@keyframes lp-tier-card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-tiers-urgency-icon, .lp-tiers-list .lp-tier-card { animation: none; }
}

/* =====================================================================
   BOOST SYSTEM — custom duration input (used by boost-ui.js). Duration
   cards themselves reuse .lp-tier-card styling already defined above.
   ===================================================================== */
.lp-boost-custom-duration {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.lp-boost-custom-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.lp-boost-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-boost-custom-input {
  flex: 1;
  margin: 0;
}
.lp-boost-custom-unit {
  font-size: 13px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.lp-boost-custom-preview {
  font-size: 13px;
  font-weight: 600;
  color: var(--liyog-green-dark);
  margin: 8px 0 0;
  min-height: 18px;
}
.lp-boost-custom-preview-error {
  color: #C0392B;
}
.lp-boost-custom-hint {
  font-size: 11.5px;
  color: var(--ink-faint);
  margin: 6px 0 0;
  font-style: italic;
}

/* "Your Active Boosts" summary panel */
.lp-active-boosts-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.lp-active-boosts-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}
.lp-active-boosts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-active-boost-row {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.lp-active-boost-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lp-active-boost-days {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--liyog-green-dark);
}
.lp-active-boost-row-dates {
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 4px;
}
.lp-boost-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--liyog-gold);
  color: #111;
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  margin-left: 4px;
}
/* In-flow badge for the Active Boosts summary panel and stack popup —
   deliberately NOT using .lp-boost-badge's absolute positioning (that
   one is meant to sit on top of a product card image; reusing it here
   caused the label to detach from its row entirely and disappear). */
.lp-active-boost-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--liyog-gold);
  color: #1a1400;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--r-pill);
}

/* =====================================================================
   SPONSORED UI — styling for window.LiyogSponsoredUI (sponsored-ui.js).
   One shared set of styles for every sponsored surface (profile,
   catalogue, product) across every page that mounts this module.

   Structure:
   1. Strip shell — horizontal scroll + arrows, mirrors the existing
      "You might also like" related-products pattern exactly, so
      sponsored content feels like a natural extension of the site's
      own UX rather than a bolted-on ad unit.
   2. Native-ad cards (profiles/catalogues) — cover-hero, avatar
      overlap, gradient fallback for brands without images.
   3. Sponsored PRODUCT cards — these reuse the real .lp-prodcard
      component (via compactCardHtml) almost entirely unmodified; only
      a thin badge + info-button overlay is added here, sized to match
      a normal product card exactly (never shrunken).
   4. Centered modals — the ad-info popup and the "See More" grid both
      use one shared modal shell, fixing the earlier bug where an
      inline dropdown popup could clip off-screen inside a narrow,
      horizontally-scrolling strip.
   ===================================================================== */

/* ---- 1. Strip shell ---- */
.lp-sponsored-strip-section {
  margin: 24px 0 0;
  padding: 20px 20px 0;
  border-top: 1px solid var(--line);
  grid-column: 1 / -1; /* full-width even when injected as a sibling inside a CSS grid (e.g. the catalogue's #lp-shop-grid) */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.lp-sponsored-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.lp-sponsored-strip-header h3 {
  font-family: var(--font-display);
  font-size: 17px;
  margin: 0;
  color: var(--ink);
  min-width: 0; /* a common flexbox overflow cause — without this, long text can refuse to shrink and push the See More button off-screen */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-sponsored-see-more {
  background: none;
  border: none;
  color: var(--liyog-green-dark);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  flex-shrink: 0; /* must never shrink or get squeezed off-screen by the title */
  white-space: nowrap;
}

/* Rebuilt to match the exact pattern already proven to work well on
   real devices — .lp-related-products-row's arrows float ABSOLUTELY
   on top of the scroll content, rather than sitting inline in a flex
   row consuming horizontal space from the viewport. The previous
   inline-flex arrow layout was eating ~76px of width on a typical
   mobile screen (two 32px arrows + gaps) before the scroll area even
   started, which — combined with a 220px card — left barely one card
   (sometimes less) visible at once. Floating arrows reclaim that
   width entirely; the scroll row itself is now the full section
   width, with cards peeking out from under the arrows exactly like
   the related-products row already does. */
.lp-sponsored-scroll-row {
  position: relative;
}
.lp-sponsored-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 2px 2px 8px;
  scrollbar-width: none;
}
.lp-sponsored-scroll::-webkit-scrollbar { display: none; }
.lp-sponsored-scroll > * {
  scroll-snap-align: start;
}

.lp-sponsored-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 5;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: opacity 0.15s ease, transform 0.12s ease;
}
.lp-sponsored-arrow-prev { left: -6px; }
.lp-sponsored-arrow-next { right: -6px; }
.lp-sponsored-arrow:hover { transform: translateY(-50%) scale(1.06); }
.lp-sponsored-arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/* Arrows are shown on EVERY device, touch included — natural swipe
   scrolling still works alongside them; the arrows are an additional
   affordance, not a desktop-only one. (Previously hidden via a
   (hover: none) media query on the assumption they were mouse-only —
   that assumption was wrong per direct instruction, and also explains
   why they inconsistently appeared to work on some Android browsers
   and not others: different browsers report hover/pointer capability
   differently on hybrid touch+mouse-capable devices, so relying on
   that media query was never reliable in the first place.) */

/* ---- 2. Native-ad cards (profiles / catalogues) ---- */
.lp-ad-card {
  position: relative;
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: visible;
  box-shadow: var(--shadow-sm);
  transition: transform 0.14s ease, box-shadow 0.18s ease;
}
/* Guarantees exactly 2 full cards visible in the viewport on real
   phones, matching the confirmed sizing your normal product grid
   already uses at this breakpoint (.lp-shop-grid's own 2-column rule
   at max-width: 380px). calc() ties the card width directly to actual
   viewport width instead of a fixed px guess, so it self-adjusts
   correctly across different phone sizes:
     100vw - (20px section padding x2) - (12px gap between the 2 cards)
     ... divided by 2, with a small allowance so the very start of a
     3rd card peeks in to invite scrolling, matching the related-
     products row's own behavior. */
/* Guarantees exactly 2 full cards visible per viewport on mobile.
   Switched from a 100vw-based calc() to CSS Grid with explicit
   columns sized off the SCROLL CONTAINER'S OWN rendered width, not
   the viewport — 100vw is known to behave inconsistently across
   Android browser versions (some include the scrollbar/gesture-nav
   inset in 100vw, some don't), which is the most likely explanation
   for "works on Samsung, not on this phone" with identical CSS.
   Sizing off the container itself removes that ambiguity entirely:
   whatever width the browser actually gives the scroll area, exactly
   2.15 columns worth is what each card gets — self-adjusting True to
   the real rendered space on any device, not a formula guessing at
   viewport quirks. */
/* Guarantees roughly 2 cards visible edge-to-edge on mobile, Facebook-
   ad-style, WITHOUT the two failed approaches tried earlier:
     1. A 100vw-based calc() — inconsistent across Android browser
        versions (some include scrollbar/gesture-nav inset in 100vw,
        some don't), explaining "works on one phone, not another."
     2. CSS Grid with percentage grid-auto-columns — this actually
        broke card layout entirely (collapsed into a single vertical
        strip instead of side-by-side cards), a real regression.
   This version stays with FLEX (which correctly laid cards side by
   side all along) and sizes cards with a fixed, generous mobile width
   that comfortably shows 2 cards plus a peek of a 3rd on most phones
   (~360-430px wide), without any viewport-unit arithmetic that could
   behave differently across devices. Simpler, more predictable, and
   matches the edge-to-edge feel of a native ad feed. */
@media (max-width: 480px) {
  .lp-ad-card {
    flex: 0 0 47vw;
    width: 47vw;
    max-width: 168px;
  }
  .lp-sponsored-scroll > .lp-prodcard,
  .lp-sponsored-scroll > .lp-sponsored-product-card {
    flex: 0 0 47vw !important;
    width: 47vw !important;
    max-width: 172px !important;
  }
  .lp-sponsored-scroll {
    gap: 10px;
    padding-left: 0;
    padding-right: 0;
  }
  .lp-sponsored-strip-section {
    padding-left: 12px;
    padding-right: 12px;
  }
}
.lp-ad-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.12);
}
.lp-sponsored-more-grid .lp-ad-card {
  flex: none;
  width: 100%;
}

.lp-ad-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background-color: var(--surface-soft);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  text-decoration: none;
}
.lp-ad-card-media-fallback-mark {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: -2px;
}

.lp-ad-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: var(--liyog-gold);
  color: #1a1400;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.lp-ad-card-body {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 12px 12px;
  text-decoration: none;
  color: inherit;
}
.lp-ad-card-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-soft);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  margin-top: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-ad-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-ad-card-avatar span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.lp-ad-card-category {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--liyog-green-dark);
  background: rgba(40, 164, 40, 0.1);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  margin-top: 2px;
}
.lp-ad-card-text {
  flex: 1;
  min-width: 0;
}
.lp-ad-card-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp-ad-card-tagline {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 3px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "i" info trigger — bottom-right of a native-ad card. On sponsored
   PRODUCT cards (below) this same button is repositioned to sit on
   the product image corner instead, matching that card's own layout. */
.lp-ad-info-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(17,17,17,0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 3;
  transition: background 0.15s ease;
}
.lp-ad-info-btn:hover {
  background: rgba(17,17,17,0.7);
  color: #fff;
}

/* ---- 3. Sponsored PRODUCT cards ----
   These are the REAL .lp-prodcard element (rendered by compactCardHtml,
   unmodified) with only a badge + info button spliced in — sized
   identically to a normal catalogue card, never shrunken. The strip
   scroll row already handles horizontal layout; no extra width rule
   is needed here beyond what .lp-prodcard already defines elsewhere,
   EXCEPT ensuring it doesn't stretch/shrink oddly inside a flex row. */
.lp-sponsored-scroll > .lp-prodcard,
.lp-sponsored-scroll > .lp-sponsored-product-card {
  flex: 0 0 auto;
  width: 175px;
}
.lp-sponsored-more-grid > .lp-prodcard,
.lp-sponsored-more-grid > .lp-sponsored-product-card {
  width: 100%;
}
.lp-sponsored-product-card {
  position: relative;
}
.lp-sponsored-product-card .lp-ad-badge {
  top: 8px;
  left: 8px;
}
/* Sponsored product cards use the SAME .lp-ad-info-btn positioning as
   the base rule (top-right of the media) — no separate override
   needed here anymore; this comment exists so a future reader doesn't
   wonder why product cards were once treated differently. */

/* ---- 4. Centered modals — ad-info popup + "See More" grid ---- */
.lp-sponsored-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1550;
  background: rgba(8,7,5,0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lp-sponsored-modal.lp-open {
  display: flex;
  animation: lp-fade-in 0.2s ease;
}
/* The ad-info modal must always sit ABOVE the See More modal, since
   info can be triggered from a card that is itself already inside the
   See More grid — relying on DOM order alone (both were previously
   the same z-index) is fragile; an explicit higher z-index on this
   specific overlay's id guarantees it regardless of mount order. */
#lp-sponsored-info-overlay {
  z-index: 1650;
}
/* The rating and quick-report sheets (both use .lp-sheet-overlay,
   normally z-index 1400) must ALSO sit above the See More modal —
   both can be triggered by tapping like/rate/report on a sponsored
   PRODUCT card that lives inside the See More grid (unlike the ad-
   info modal, which is sponsored-specific, these two are the site's
   general-purpose sheets, reused here in a new context). Targeting
   these two ids specifically (rather than raising .lp-sheet-overlay's
   base z-index for every sheet everywhere) keeps the fix scoped to
   exactly the situation that needed it. */
#lp-rating-overlay,
#lp-quick-report-overlay {
  z-index: 1650;
}

.lp-sponsored-modal-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 340px;
  padding: 26px 22px 22px;
  text-align: center;
}
.lp-sponsored-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--surface-soft);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lp-ad-info-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(40, 164, 40, 0.1);
  color: var(--liyog-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.lp-ad-info-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}
.lp-ad-info-desc {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 16px;
}
.lp-ad-info-action {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 4px;
  cursor: pointer;
  text-align: left;
}
.lp-ad-info-action:hover { color: var(--liyog-green-dark); }
.lp-ad-info-action-confirmed {
  color: var(--liyog-green-dark) !important;
  font-weight: 700;
  cursor: default;
  opacity: 1 !important;
}

.lp-sponsored-more-card {
  max-width: 640px;
  max-height: 86vh;
  overflow-y: auto;
  text-align: left;
}
/* Mobile: true bottom sheet — full width, slides up from the bottom
   edge, rounded top corners only, with a swipe handle. Matches every
   other bottom sheet already used across the site (.lp-sheet), so
   this feels native rather than like a different component. Swipe-
   to-dismiss itself is handled in JS (see sponsored-ui.js); this CSS
   only sets up the visual shape and entry position/animation. */
@media (max-width: 640px) {
  #lp-sponsored-more-overlay {
    align-items: flex-end;
    padding: 0;
  }
  #lp-sponsored-more-overlay .lp-sponsored-more-card {
    max-width: 100%;
    width: 100%;
    max-height: 85vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-top: 20px;
    animation: lp-sheet-slide-up 0.25s ease;
  }
  #lp-sponsored-more-overlay .lp-sponsored-more-handle {
    display: block;
  }
}
.lp-sponsored-more-handle {
  display: none;
  width: 40px;
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  margin: 0 auto 14px;
}
@keyframes lp-sheet-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.lp-sponsored-more-title {
  font-family: var(--font-display);
  font-size: 17px;
  text-align: center;
  margin: 0 0 16px;
}
.lp-sponsored-more-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 480px) {
  .lp-sponsored-more-grid { grid-template-columns: repeat(3, 1fr); }
}
.lp-sponsored-more-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
  padding: 20px 0;
}

/* ---------------------------------------------------------------------
   Growth CTA — the "Create Your Free Brand Profile" / "Go to My
   Dashboard" strip above the cover photo. Hidden by default in the
   template; bindGrowthCta() in profile.js reveals it. Kept visually
   light (not a loud banner) so it reads as a natural part of the page
   chrome rather than an ad sitting on top of someone else's brand.
   --------------------------------------------------------------------- */
.lp-growth-cta {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0 0 14px; padding: 12px 18px;
  background: linear-gradient(135deg, var(--liyog-green), var(--liyog-green-dark));
  color: #fff; text-decoration: none;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform 0.15s var(--ease), box-shadow 0.2s ease, filter 0.15s ease;
}
.lp-growth-cta:hover { box-shadow: var(--shadow-md); filter: brightness(1.05); }
.lp-growth-cta:active { transform: scale(0.98); }
.lp-growth-cta[hidden] { display: none; }
.lp-growth-cta svg { flex-shrink: 0; }

[data-theme="dark"] .lp-growth-cta,
body.dark .lp-growth-cta {
  box-shadow: 0 4px 18px rgba(52, 191, 73, 0.25);
}

/* =====================================================================
   FEATURED BADGES — catalogue filter toggle + individual product page.
   Reuses .lp-prodcard-featured/.lp-prodfeed-featured's existing color
   scheme (gold, same as the boost badge everywhere else) for visual
   consistency, without touching those existing rules. Added here
   (profile-css.txt / brands.css) rather than product-pages.css since
   both the catalogue and product-detail pages already load this file
   alongside their own stylesheet.
   ===================================================================== */
.lp-product-page-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.lp-product-page-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--liyog-gold);
  color: #1a1400;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  vertical-align: middle;
}

.lp-shop-filter-btn-featured.lp-shop-filter-btn-active {
  background: var(--liyog-gold);
  color: #1a1400;
  border-color: var(--liyog-gold);
}

/* =====================================================================
   BOOST TARGETING CONTROLS — country/category/CTA choices shown above
   the pricing list in the boost sheet. Kept visually calm (no bright
   colors competing with the pricing cards below) since this is a
   settings step, not the main decision the sheet exists for.
   ===================================================================== */
.lp-boost-targeting {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 16px;
}
.lp-boost-targeting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.lp-boost-targeting-row + .lp-boost-targeting-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.lp-boost-targeting-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.lp-boost-targeting-label svg {
  color: var(--liyog-green-dark);
  flex-shrink: 0;
}
.lp-boost-targeting-toggle {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.lp-boost-targeting-opt {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.lp-boost-targeting-opt:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lp-boost-targeting-opt-active {
  background: var(--liyog-green-dark);
  border-color: var(--liyog-green-dark);
  color: #fff;
}
.lp-boost-targeting-cta-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
}
.lp-boost-targeting-cta-row input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--liyog-green-dark);
}


/* =====================================================================
   3b-2 / 3b-3 / layouts — PREMIUM SPONSORED DESIGN + CONTACT BUTTONS + EMBEDS + GRID + BANNER
   PASTE THIS WHOLE BLOCK AT THE VERY END of profile-css.txt.
   Purely additive: it only touches classes that belong to the sponsored
   strips (.lp-sponsored-*, .lp-ad-*) and the sponsored PRODUCT card
   (.lp-sponsored-product-card). Nothing else on the site uses them, so
   normal product cards, the profile page and every sheet are unaffected.
   Everything reads the existing theme variables, so dark mode follows
   automatically. If you ever remove this block, the strips simply go
   back to their previous look.
   ===================================================================== */

/* ---- Section header: accent bar + pill "See More" ---- */
.lp-sponsored-strip-header h3 {
  position: relative;
  padding-left: 12px;
  letter-spacing: -0.01em;
}
.lp-sponsored-strip-header h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 17px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--liyog-gold), var(--liyog-green));
}
.lp-sponsored-see-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.lp-sponsored-see-more::after {
  content: "\203A";
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 0.15s ease;
}
.lp-sponsored-see-more:hover {
  background: var(--liyog-green);
  border-color: var(--liyog-green);
  color: #fff;
}
.lp-sponsored-see-more:hover::after { transform: translate(2px, -1px); }
.lp-sponsored-see-more:active { transform: scale(0.96); }

/* ---- Scroll arrows: softer shadow, green on hover ---- */
.lp-sponsored-arrow {
  box-shadow: 0 6px 16px rgba(17, 17, 17, 0.16);
}
.lp-sponsored-arrow:hover:not(:disabled) {
  background: var(--liyog-green);
  border-color: var(--liyog-green);
  color: #fff;
}

/* ---- Cards glide in (backwards fill-mode only, so the hover lift that
   other rules apply is never overridden once the animation ends) ---- */
@keyframes lp-ad-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lp-sponsored-scroll > *,
.lp-sponsored-more-grid > * {
  animation: lp-ad-in 0.42s var(--ease, ease) backwards;
}
.lp-sponsored-scroll > *:nth-child(1), .lp-sponsored-more-grid > *:nth-child(1) { animation-delay: 0.02s; }
.lp-sponsored-scroll > *:nth-child(2), .lp-sponsored-more-grid > *:nth-child(2) { animation-delay: 0.08s; }
.lp-sponsored-scroll > *:nth-child(3), .lp-sponsored-more-grid > *:nth-child(3) { animation-delay: 0.14s; }
.lp-sponsored-scroll > *:nth-child(4), .lp-sponsored-more-grid > *:nth-child(4) { animation-delay: 0.20s; }
.lp-sponsored-scroll > *:nth-child(5), .lp-sponsored-more-grid > *:nth-child(5) { animation-delay: 0.26s; }
.lp-sponsored-scroll > *:nth-child(n+6), .lp-sponsored-more-grid > *:nth-child(n+6) { animation-delay: 0.30s; }

/* ---- "Sponsored" label: glass pill with a glowing gold dot ---- */
.lp-ad-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  font-size: 9px;
  letter-spacing: 0.07em;
  color: #FFE27A;
  background: rgba(17, 17, 17, 0.62);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 215, 0, 0.38);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.lp-ad-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--liyog-gold);
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.95);
  flex-shrink: 0;
}

/* ---- Info button: glassy with a fine light edge ---- */
.lp-ad-info-btn {
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ---- Profile / catalogue ad cards ---- */
.lp-ad-card {
  border-radius: var(--r-lg);
}
.lp-ad-card:hover {
  box-shadow: 0 14px 30px rgba(17, 17, 17, 0.16);
}
.lp-ad-card-sponsored {
  border-color: rgba(212, 175, 55, 0.42);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255, 215, 0, 0.10);
}
/* soft shade at the bottom of the cover so the avatar/name sit cleanly */
.lp-ad-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.34), transparent 58%);
  pointer-events: none;
}
.lp-ad-card-avatar {
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.18);
}
.lp-ad-card-name { letter-spacing: -0.005em; }
.lp-ad-card-category {
  background: linear-gradient(135deg, rgba(40, 164, 40, 0.14), rgba(40, 164, 40, 0.06));
  border: 1px solid rgba(40, 164, 40, 0.22);
}

/* ---- Contact buttons on profile / catalogue ad cards (WApp / Call) ---- */
.lp-ad-cta {
  display: flex;
  gap: 7px;
  padding: 0 12px 12px;
}
.lp-ad-cta-btn {
  position: relative;
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  border-radius: var(--r-pill);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.lp-ad-cta-btn svg { flex-shrink: 0; }
.lp-ad-cta-wa   { background: linear-gradient(135deg, #2FE87A, #1DA851); }
.lp-ad-cta-call { background: linear-gradient(135deg, #4A9FFF, var(--liyog-blue)); }
.lp-ad-cta-btn:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 7px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.lp-ad-cta-btn:active { transform: scale(0.97); }
.lp-ad-cta-btn:focus-visible { outline: 2px solid var(--liyog-blue); outline-offset: 2px; }

/* ---- Sponsored PRODUCT card: gold hairline + refined contact buttons.
   The buttons themselves are the real product card's own (only present
   when the advertiser opted in); this just dresses them to match. ---- */
.lp-sponsored-product-card {
  border-color: rgba(212, 175, 55, 0.42);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255, 215, 0, 0.10);
}
.lp-sponsored-product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, var(--liyog-gold), var(--liyog-orange));
  pointer-events: none;
}
.lp-sponsored-product-card .lp-prodcard-contacts { gap: 7px; }
.lp-sponsored-product-card .lp-prodcard-btn {
  min-width: 0;
  height: 34px;
  gap: 4px;
  border-radius: var(--r-pill);
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.lp-sponsored-product-card .lp-prodcard-btn-whatsapp { background: linear-gradient(135deg, #2FE87A, #1DA851); }
.lp-sponsored-product-card .lp-prodcard-btn-call     { background: linear-gradient(135deg, #4A9FFF, var(--liyog-blue)); }
.lp-sponsored-product-card .lp-prodcard-btn span {
  display: inline;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
/* short, always-fitting labels: "WApp" instead of "WhatsApp" */
.lp-sponsored-product-card .lp-prodcard-btn-whatsapp span { font-size: 0; }
.lp-sponsored-product-card .lp-prodcard-btn-whatsapp span::after { content: "WApp"; font-size: 11.5px; }

/* ---- "See More" sheet: a little more polish ---- */
.lp-sponsored-modal-card { border-radius: var(--r-xl); }
.lp-sponsored-more-title {
  position: relative;
  padding-bottom: 12px;
}
.lp-sponsored-more-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--liyog-gold), var(--liyog-orange));
}

/* ---- Dark mode: brighter green for small text so it stays readable.
   Covers all three ways the site goes dark (Blogger toggle, manual
   data-theme, OS setting). Hover keeps its white-on-green. ---- */
body.dark .lp-sponsored-see-more,
[data-theme="dark"] .lp-sponsored-see-more,
body.dark .lp-ad-card-category,
[data-theme="dark"] .lp-ad-card-category { color: var(--liyog-green-light); }
body.dark .lp-sponsored-see-more:hover,
[data-theme="dark"] .lp-sponsored-see-more:hover { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-sponsored-see-more,
  :root:not([data-theme="light"]) .lp-ad-card-category { color: var(--liyog-green-light); }
  :root:not([data-theme="light"]) .lp-sponsored-see-more:hover { color: #fff; }
}

/* ---- 3b-3: embedded strips (blog posts, homepage, feed slots, other
   sites). The embed gets its own theme root so colours and dark mode
   work outside the brand pages, but without the profile page's width,
   padding or beige background, so it blends into whatever page it is on. ---- */
.lp-root.lp-embed {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  animation: none;
}
.lp-root.lp-embed .lp-sponsored-strip-section {
  margin-top: 8px;
}

/* =====================================================================
   LAYOUTS — GRID and NATIVE BANNER (format="grid" | "banner")
   Only used by slots that ask for these formats; the default scrolling
   strip is unaffected.
   ===================================================================== */

/* ---- Loading skeleton (shared by grid + banner) ---- */
.lp-sk {
  background: linear-gradient(90deg, var(--line) 25%, var(--surface-soft) 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: lp-sk-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
}
@keyframes lp-sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.lp-sk-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding-bottom: 14px;
}
.lp-sk-img { aspect-ratio: 1 / 1; border-radius: 0; }
.lp-sk-line { height: 12px; margin: 12px 14px 0; }
.lp-sk-short { width: 55%; }
.lp-sk-btn { height: 30px; border-radius: var(--r-pill); }

/* ---- GRID: 2 columns on phones, 3 from tablets up (6 cards = even rows) ---- */
.lp-sponsored-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 600px) { .lp-sponsored-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .lp-sponsored-grid { gap: 18px; } }
.lp-sponsored-grid > .lp-ad-card { flex: none; width: 100%; max-width: none; }
.lp-sponsored-grid > .lp-prodcard { width: 100%; }
.lp-sponsored-grid > * { animation: lp-ad-in 0.42s var(--ease, ease) backwards; }
.lp-sponsored-grid > *:nth-child(2) { animation-delay: 0.06s; }
.lp-sponsored-grid > *:nth-child(3) { animation-delay: 0.12s; }
.lp-sponsored-grid > *:nth-child(4) { animation-delay: 0.18s; }
.lp-sponsored-grid > *:nth-child(5) { animation-delay: 0.24s; }
.lp-sponsored-grid > *:nth-child(6) { animation-delay: 0.30s; }
.lp-sponsored-grid .lp-sk-card { animation: none; }

.lp-sponsored-viewmore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--liyog-green);
  background: var(--surface);
  color: var(--liyog-green-dark);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.lp-sponsored-viewmore span { font-size: 18px; line-height: 1; transition: transform 0.15s ease; }
.lp-sponsored-viewmore:hover { background: var(--liyog-green); color: #fff; }
.lp-sponsored-viewmore:hover span { transform: translateX(3px); }
.lp-sponsored-viewmore:active { transform: scale(0.98); }

/* ---- NATIVE BANNER: one square ad at a time ---- */
.lp-sponsored-strip-section.lp-sponsored-banner-section {
  max-width: 480px;
  margin: 20px auto 0;
  padding: 0 16px;
  border-top: 0;
}
.lp-banner { position: relative; }
/* every ad shares one grid cell -> the banner is as tall as the tallest ad,
   so the page never jumps when the ad changes */
.lp-banner-stage { display: grid; }
.lp-banner-stage > * {
  grid-area: 1 / 1;
  align-self: stretch;
  width: 100%;
  max-width: none;
  height: auto;
  min-width: 0;
  flex: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.38s ease, transform 0.38s var(--ease, ease), visibility 0s linear 0.38s;
}
.lp-banner-stage > .is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.38s ease, transform 0.38s var(--ease, ease), visibility 0s;
}
.lp-banner-stage > .lp-sk-card { opacity: 1; visibility: visible; transform: none; pointer-events: none; }

/* bigger, more "feed-like" type inside the banner */
.lp-banner-stage .lp-prodcard-body { padding: 15px 16px 16px; }
.lp-banner-stage .lp-prodcard-name { font-size: 17px; }
.lp-banner-stage .lp-prodcard-price { font-size: 13.5px; padding: 4px 13px; }
.lp-banner-stage .lp-prodcard-desc { font-size: 13.5px; -webkit-line-clamp: 3; }
.lp-banner-stage .lp-engbar-item { font-size: 12.5px; }
.lp-banner-stage .lp-prodcard-btn,
.lp-banner-stage .lp-ad-cta-btn { height: 40px; }
.lp-banner-stage .lp-sponsored-product-card .lp-prodcard-btn-call span,
.lp-banner-stage .lp-ad-cta-btn { font-size: 12.5px; }
/* keep the long "WhatsApp" text hidden and show the short "WApp" label instead */
.lp-banner-stage .lp-sponsored-product-card .lp-prodcard-btn-whatsapp span { font-size: 0; }
.lp-banner-stage .lp-sponsored-product-card .lp-prodcard-btn-whatsapp span::after { font-size: 12.5px; }
.lp-banner-stage .lp-ad-card-media { aspect-ratio: 1 / 1; }
.lp-banner-stage .lp-ad-card-body { padding: 16px 16px 12px; }
.lp-banner-stage .lp-ad-card-name { font-size: 16px; }
.lp-banner-stage .lp-ad-card-tagline { font-size: 12.5px; }
.lp-banner-stage .lp-ad-cta { padding: 0 16px 16px; }

/* progress bar = the timer (its CSS animation ending advances the ad) */
.lp-banner-bar {
  height: 3px;
  margin-top: 12px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.lp-banner-progress {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--liyog-gold), var(--liyog-orange));
  animation: lp-banner-fill var(--lp-banner-ms, 6000ms) linear forwards;
}
@keyframes lp-banner-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lp-banner.is-paused .lp-banner-progress { animation-play-state: paused; }
.lp-banner.is-static .lp-banner-bar { display: none; }

.lp-banner-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  min-height: 26px;
}
.lp-banner-dots { display: flex; align-items: center; gap: 6px; }
.lp-banner.is-single .lp-banner-dots { display: none; }
.lp-banner-dot {
  position: relative;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: width 0.2s ease, background 0.2s ease;
}
.lp-banner-dot::after { content: ""; position: absolute; inset: -10px -4px; }  /* larger tap target */
.lp-banner-dot.is-active {
  width: 20px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--liyog-gold), var(--liyog-orange));
}
.lp-banner-more {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--liyog-green-dark);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lp-banner-more span { font-size: 15px; line-height: 1; }
.lp-banner-more:hover { background: var(--liyog-green); border-color: var(--liyog-green); color: #fff; }

/* dark mode: brighter green for the new small text/buttons */
body.dark .lp-sponsored-viewmore, [data-theme="dark"] .lp-sponsored-viewmore,
body.dark .lp-banner-more, [data-theme="dark"] .lp-banner-more { color: var(--liyog-green-light); }
body.dark .lp-sponsored-viewmore:hover, [data-theme="dark"] .lp-sponsored-viewmore:hover,
body.dark .lp-banner-more:hover, [data-theme="dark"] .lp-banner-more:hover { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-sponsored-viewmore,
  :root:not([data-theme="light"]) .lp-banner-more { color: var(--liyog-green-light); }
  :root:not([data-theme="light"]) .lp-sponsored-viewmore:hover,
  :root:not([data-theme="light"]) .lp-banner-more:hover { color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-banner-stage > *, .lp-banner-stage > .is-active { transition: none; }
  .lp-sk, .lp-sponsored-grid > * { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-sponsored-scroll > *,
  .lp-sponsored-more-grid > * { animation: none; }
}