/* Listing page layouts (v1.27.0): the "Page layout" button + picture picker, the VIP preview banner and shared bits.
   The three full-page designs are styled in listing-full.css. */
.ll-lay, .ll-preview, .ll { --ll-forest: #173c35; --ll-lime: #d7f56e; --ll-leaf: #8fb339; --ll-cream: #f6f2e7; --ll-ink: #1c3026; --ll-mute: #5d6b62; --ll-line: #d6decf; font-family: "DM Sans", system-ui, sans-serif; color: var(--ll-ink); }
.ll *, .ll-lay * { box-sizing: border-box; }
.ll [hidden] { display: none !important; }
.ll-host { max-width: 1300px; margin: 0 auto 28px; padding: 0 clamp(12px, 2.4vw, 24px); }

/* one small button, top right of the page */
.ll-lay { position: relative; display: flex; justify-content: flex-end; max-width: 1300px; margin: 6px auto 10px; padding: 0 clamp(12px, 2.4vw, 24px); }
.ll-lay-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 7px 6px 10px; border: 1px solid var(--ll-line); border-radius: 999px; background: #fff; font: 500 0.8rem "DM Sans", system-ui, sans-serif; color: var(--ll-mute); cursor: pointer; }
.ll-lay-btn b { color: var(--ll-ink); }
.ll-lay-btn em { font-style: normal; font-weight: 700; color: #fff; background: #244b38; border-radius: 999px; padding: 4px 10px; }
.ll-lay-ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e8efdd; color: #244b38; }
.ll-lay-btn:focus-visible, .ll-lay-pop button:focus-visible { outline: 3px solid var(--ll-leaf); outline-offset: 2px; }
.ll-lay-pop { position: absolute; z-index: 40; top: calc(100% + 8px); right: clamp(12px, 2.4vw, 24px); width: min(640px, calc(100vw - 24px)); padding: 14px; border: 1px solid var(--ll-line); border-radius: 18px; background: #fff; box-shadow: 0 18px 50px rgba(20, 40, 30, 0.22); }
.ll-lay-pop > p { margin: 0 0 10px; font-size: 0.82rem; color: var(--ll-mute); }
.ll-lay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ll-lay-grid button { display: grid; gap: 3px; text-align: left; padding: 8px; border: 1.5px solid var(--ll-line); border-radius: 14px; background: #fff; cursor: pointer; font: inherit; color: var(--ll-ink); }
.ll-lay-grid button[aria-pressed="true"] { border-color: #244b38; box-shadow: 0 0 0 2px #c9e265; }
.ll-lay-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; background: #eef2e6; }
.ll-lay-grid b { font-size: 0.92rem; margin-top: 4px; }
.ll-lay-grid small { font-size: 0.76rem; color: var(--ll-mute); line-height: 1.3; }
.ll-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: 1300px; margin: 8px auto 12px; padding: 10px 16px; border: 1.5px dashed #b9c7a6; border-radius: 14px; background: #fbfcf4; font-size: 0.86rem; }
.ll-preview span { flex: 1 1 320px; }
.ll-preview a { font-weight: 700; color: #244b38; }

/* shared bits */
.ll-noimg { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, #e7efd6, #cfe0b5); color: var(--ll-forest); }
.ll-hint { color: var(--ll-mute); font-size: 0.82rem; }
.ll-empty, .ll-none { color: var(--ll-mute); padding: 14px 2px; margin: 0; font-size: 0.9rem; }
.ll-noresult { color: var(--ll-mute); padding: 18px 2px; }
.ll-mbar { display: none; }

/* Classic: the bundled followers / reels / wall section */
.so-classic { margin: 34px 0 10px; }

@media (max-width: 760px) {
  .ll-lay { justify-content: flex-start; }
  .ll-lay-grid { grid-template-columns: 1fr 1fr; }
  .ll-lay-grid small { display: none; }
}
@media (max-width: 420px) {
  .ll-lay-btn { font-size: 0.76rem; }
}
@media (max-width: 700px) {
  .rp-page .page-tabs, .page-tabs { overflow-x: auto; scrollbar-width: none; }
  .rp-page .page-tabs::-webkit-scrollbar { display: none; }
  .rp-page .page-tabs > * { flex: none; }
}