/* wp-content-detail.css — styling for content_detail.html.
   Extracted from inline <style> blocks (51.7 KB re-downloaded on every detail
   page view) into one cacheable file. Every block was Jinja-free, so this is a
   verbatim copy in the original document order — which matters, several
   `.cd-*` rules later in the file intentionally override earlier ones.

   Linked from content_detail.html's `extra_head` block, i.e. exactly where the
   first (and largest) inline block used to sit, so the cascade position
   relative to wp-main.css / wpc_ads.css / base.html is unchanged.
   Bump the ?v= on every edit. */

/* ── page layout, hero, sidebar, grids, mobile bar (the bulk) ─────────────────────────────── */
  /* Sticky tag-row spacing parity with keyword.html */
  main.single .filter-row {
    position: sticky !important;
    padding: 0 !important;
    margin-top: 0 !important;
    top: var(--sticky-header-h, 100px) !important;
    background: #fff; z-index: 1010;
  }
  main.single .filter-row .tag-container {
    padding-left: .35rem !important;
    padding-right: .35rem !important;
  }
  main.single .filter-row .tag-slider { padding-left: 0 !important; }
  main.single .filter-row ul.related-tag {
    gap: .25rem !important;
    column-gap: .25rem !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    align-items: center !important;
  }
  main.single .filter-row ul.related-tag .image-tag {
    padding: 0 !important;
    margin: 0 !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  main.single .filter-row ul.related-tag .image-tag::before {
    display: none !important;
    content: none !important;
  }
  main.single .filter-row ul.related-tag .image-tag a::after {
    display: none !important;
    content: none !important;
  }
  main.single .filter-row ul.related-tag .image-tag a {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 .65rem !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }
  main.single .filter-row ul.related-tag .image-tag a span {
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  main.single .content-row .container { padding-top: 0 !important; }
  main.single .nav-breadcrumbs { margin: 0 !important; }
  main.single .nav-breadcrumbs ol.breadcrumb { padding: .15rem 0 !important; }
  .wpc-confirm-account-card--mobile {
    display: none;
  }
  @media (max-width: 767px) {
    body.wpc-top-ad-hidden main.single .filter-row {
      position: fixed !important;
      top: 50px !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 1010 !important;
      box-shadow: 0 1px 0 #e5e7eb;
      padding: 4px 0 8px !important;
      min-height: 48px !important;
      box-sizing: border-box;
    }
    body.wpc-top-ad-hidden main.single .filter-row .tag-container,
    body.wpc-top-ad-hidden main.single .filter-row .tag-slider,
    body.wpc-top-ad-hidden main.single .filter-row ul.related-tag {
      min-height: 32px !important;
      height: 32px !important;
      box-sizing: border-box;
    }
    body.wpc-top-ad-hidden main.single {
      padding-top: 52px !important;
    }
    body.menu-open main.single .filter-row {
      display: none !important;
    }
    main.single .nav-breadcrumbs {
      display: block !important;
      margin: .35rem 0 .5rem !important;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }
    main.single .nav-breadcrumbs ol.breadcrumb {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: .25rem;
      padding: .2rem 0 !important;
      margin: 0 !important;
      font-size: .8rem;
    }
    main.single .nav-breadcrumbs .breadcrumb-item {
      display: inline-flex !important;
      align-items: center;
      flex: 0 0 auto;
    }
    .wpc-confirm-account-card--mobile {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .65rem;
      box-sizing: border-box;
      width: auto;
      margin: .45rem .85rem .25rem;
      padding: .62rem .75rem;
      border: 1.5px solid #86efac;
      border-radius: 8px;
      background: #f0fdf4;
      color: #14532d;
      font-family: Arial, Helvetica, sans-serif;
      font-size: .8rem;
      line-height: 1.25;
      font-weight: 700;
    }
    .wpc-confirm-account-card--mobile a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      min-height: 26px;
      padding: .28rem .6rem;
      border-radius: 5px;
      background: #16a34a;
      color: #fff !important;
      font-weight: 800;
      text-decoration: none !important;
      white-space: nowrap;
      box-shadow: inset 0 -1px 0 rgba(0,0,0,.18);
    }
    .wpc-confirm-account-card--mobile a svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      margin-left: .22rem;
      flex: 0 0 auto;
    }
    .wpc-confirm-account-card--mobile a:hover {
      background: #15803d;
    }
  }

  /* ── New detail layout ───────────────────────────────────────── */
  /* Hard-cap both top + bottom .cd-wrap blocks at the same column width
     so the image+sidebar grid above and the related-cascade below align
     on the same left/right edge. Higher specificity (`main.single .cd-wrap`)
     beats Bootstrap's `.container` breakpoint widths which would otherwise
     run wider on ≥1400px viewports and make the cascade appear wider than
     the upper sections. */
  main.single .cd-wrap,
  .cd-wrap {
    padding-top: 1rem; padding-bottom: 3rem;
    /* Bounded max-width applied IDENTICALLY to top (image+sidebar) and
       bottom (cascade) so both blocks have the same right-edge alignment.
       1400px is wide enough to look modern but narrow enough that the
       sidebar doesn't get marooned on the left of a huge viewport. */
    max-width: 1400px !important;
    margin-left: auto; margin-right: auto;
    padding-left: 1rem; padding-right: 1rem;
    box-sizing: border-box; min-width: 0;
    width: 100%;
  }
  /* Hard guard against any rogue element forcing horizontal scroll on phones */
  @media (max-width: 880px) {
    html, body { overflow-x: hidden; max-width: 100vw; }
    body.single { overflow-x: hidden; }
    main.single,
    main.single .content-row,
    main.single .content-row .container,
    main.single .cd-wrap,
    main.single .cd-grid,
    main.single .cd-grid > * { max-width: 100%; min-width: 0; box-sizing: border-box; }
    /* Filter pills row sometimes pushes wider than viewport via inner ul */
    main.single .filter-row, main.single .tag-container, main.single .tag-slider,
    main.single .related-tag { max-width: 100vw; box-sizing: border-box; }
  }
  .cd-h1 { font-size: 2rem; font-weight: 800; color: #111827; margin: .5rem 0 .25rem; line-height: 1.2; }
  .cd-desc { font-size: 1rem; color: #4b5563; margin-bottom: 1.25rem; max-width: 900px; }
  .cd-ai-tags { font-size: .9rem; color: #6b7280; margin: -.5rem 0 1.25rem; max-width: 900px; line-height: 1.8; }
  .cd-ai-tags a { color: #2464c4; text-decoration: none; }
  .cd-ai-tags a:hover { text-decoration: underline; }
  .cd-ai-tags-sep { color: #d1d5db; }
  .cd-grid {
    display: grid; gap: .75rem;
    grid-template-columns: minmax(0, 1fr) 340px;
    /* Force the grid to fill the cd-wrap so the sidebar's right edge
       sits flush with the bottom-cascade's right edge (both anchored
       to cd-wrap right boundary minus the same 1rem padding). */
    width: 100%; margin: 0; padding: 0;
  }
  @media (max-width: 880px) { .cd-grid { grid-template-columns: 1fr; } }
  /* Sidebar must not introduce its own right padding/margin that would
     shift it inward from cd-wrap's right edge. justify-self:end pins it to
     the grid track's right edge, and width:100% makes it fill the 360px
     track (so children don't shrink it). */
  .cd-sidebar { margin-right: 0; padding-right: 0; min-width: 0;
    justify-self: end; align-self: start; width: 100%; }
  /* Bootstrap's .container has its own narrower max-width on some breakpoints
     (1140 / 1320 etc) which can shrink the cd-grid track. Force the
     container-cd-wrap combo to honour cd-wrap's 1400px ceiling. */
  .container.cd-wrap { max-width: 1400px !important; }

  /* Image column */
  .cd-image-wrap {
    background: #f3f4f6; border-radius: 10px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    /* Use the natural aspect ratio of the image so wide wallpapers fill
       the column edge-to-edge; tall portraits get bounded by max-height
       so they don't push the sidebar way down. */
    max-height: 720px; position: relative;
  }
  .cd-image-wrap img { width: 100%; height: auto; max-height: 720px;
    object-fit: contain; display: block; }

  /* ── PORTRAIT (is-tall) SIZING ─────────────────────────────────────
     Desktop keeps its original behaviour: the figure fills the column and
     `max-height: 720px` bounds it, with the portrait letterboxed inside. That
     resolves entirely from CSS + the inline aspect-ratio, so there is no shift
     to fix here and no reason to change how it looks.

     The CLS lived in the <=600px rules below, where the figure used
     `width: fit-content` and the <img> `width: auto` — BOTH sized from the
     decoded bitmap, on a box that also carried an inline `aspect-ratio`. Those
     fight, so the box resolved once from CSS and again once the image painted:
     the "portrait images expand on load" jump. See the fix there. */

  /* Prev / next arrows on the image — same-keyword neighbours within
     the same type. JS wires them once neighbours are loaded. */
  .cd-pn-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; cursor: pointer; z-index: 3; line-height: 1;
    text-decoration: none !important;
    transition: background .12s, opacity .12s;
  }
  .cd-pn-arrow:hover { background: rgba(0,0,0,.8); color: #fff; }
  .cd-pn-arrow.prev { left: .65rem; }
  .cd-pn-arrow.next { right: .65rem; }
  .cd-pn-arrow[hidden] { display: none; }

  /* ── Mobile: full-bleed image (whole screen width) + edge chevrons + swipe ──
     The wallpaper spans the full width (no side gutters); the prev/next
     chevrons sit at the screen edges with no shadow, and swipe-to-browse
     stays on. */
  @media (max-width: 880px) {
    .cd-pn-arrow {
      width: 34px; height: 34px; font-size: 1.35rem;
      background: rgba(17,24,39,.78);
    }
    .cd-pn-arrow.prev { left: 2px; }
    .cd-pn-arrow.next { right: 2px; }
  }

  /* One-time swipe hint — overlaid on the wallpaper on first mobile visit
     (JS gates it on localStorage), then fades. Shows a finger sliding L↔R
     between two chevrons so users discover the swipe-to-browse gesture. */
  .cd-swipe-hint {
    position: absolute; inset: 0; z-index: 6;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; background: rgba(0,0,0,.34);
    border-radius: inherit; transition: opacity .25s ease;
  }
  .cd-swipe-hint[hidden] { display: none; }
  .cd-swipe-hint-card {
    display: grid; grid-template-columns: auto auto auto; align-items: center;
    gap: 12px; padding: 13px 18px; color: #fff;
    background: rgba(17,24,39,.72); border-radius: 14px;
  }
  .cd-swipe-chev {
    font-size: 1.7rem; line-height: 1;
    animation: cdHintChev 1.4s ease-in-out infinite;
  }
  .cd-swipe-chev.right { animation-delay: .7s; }
  .cd-swipe-dot {
    width: 24px; height: 24px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.22);
    animation: cdHintSwipe 1.4s ease-in-out infinite;
  }
  .cd-swipe-label {
    grid-column: 1 / -1; text-align: center;
    font-size: .82rem; font-weight: 600; opacity: .92;
  }
  @keyframes cdHintSwipe {
    0%,100% { transform: translateX(-16px); } 50% { transform: translateX(16px); }
  }
  @keyframes cdHintChev { 0%,100% { opacity: .35; } 50% { opacity: .95; } }
  @media (min-width: 881px) { .cd-swipe-hint { display: none !important; } }
  @media (prefers-reduced-motion: reduce) {
    .cd-swipe-dot, .cd-swipe-chev { animation: none; }
  }

  /* Desktop-only one-time KEYBOARD hint (parallel to the mobile swipe hint).
     Two key-caps with ‹ / › arrows + Prev / Next labels, overlaid on the
     image on the first desktop visit (localStorage-gated), then fades. */
  .cd-kbd-hint {
    position: absolute; inset: 0; z-index: 6;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; background: rgba(0,0,0,.34);
    border-radius: inherit; transition: opacity .25s ease;
  }
  .cd-kbd-hint[hidden] { display: none; }
  .cd-kbd-hint-card {
    display: flex; align-items: center; gap: 18px;
    flex-wrap: wrap; justify-content: center;
    padding: 15px 22px; color: #fff;
    background: rgba(17,24,39,.72); border-radius: 14px;
  }
  .cd-kbd-pair { display: flex; align-items: center; gap: 9px; }
  .cd-kbd-key {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 9px;
    font-size: 1.5rem; line-height: 1; font-weight: 700; color: #1f2937;
    background: linear-gradient(#ffffff, #eceff3); border-radius: 10px;
    border: 1px solid #cbd1d9; border-bottom: 4px solid #b3bac4;
    box-shadow: 0 3px 0 rgba(0,0,0,.16),
                inset 0 1px 0 rgba(255,255,255,.9);
    animation: cdKbdPress 1.6s ease-in-out infinite;
  }
  .cd-kbd-pair.next .cd-kbd-key { animation-delay: .8s; }
  .cd-kbd-cap { font-size: .9rem; font-weight: 700; }
  .cd-kbd-label {
    flex-basis: 100%; text-align: center;
    font-size: .82rem; font-weight: 600; opacity: .92;
  }
  @keyframes cdKbdPress {
    0%,100% { transform: translateY(0);
              box-shadow: 0 3px 0 rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.9); }
    50%     { transform: translateY(3px);
              box-shadow: 0 0 0 rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.9); }
  }
  /* Mobile gets the swipe hint instead — never show the keyboard hint there. */
  @media (max-width: 880px) { .cd-kbd-hint { display: none !important; } }
  @media (prefers-reduced-motion: reduce) { .cd-kbd-key { animation: none; } }

  /* Author / actions row */
  .cd-author-row {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-top: 1rem;
  }
  .cd-author { display: flex; align-items: center; gap: .55rem; }
  .cd-author-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: #e5e7eb;
    display: inline-flex; align-items: center; justify-content: center; color: #6b7280; font-weight: 700;
  }
  .cd-author-name { font-weight: 600; color: #1f2937; font-size: .95rem; }
  .cd-action-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    background: #fff; border: 1px solid #d1d5db; border-radius: 8px;
    color: #374151; padding: .4rem .75rem; font-size: .9rem;
    text-decoration: none; cursor: pointer;
  }
  .cd-action-btn:hover { border-color: #9ca3af; color: #1f2937; }
  .cd-share-row { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
  .cd-share-row > span { color: #6b7280; font-size: .9rem; }
  .cd-share-circle {
    width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none;
  }
  .cd-share-circle:hover { opacity: .85; color: #fff; }
  .cd-share-fb { background: #1877f2; }
  .cd-share-tw { background: #1da1f2; }
  .cd-share-pn { background: #e60023; }
  .cd-share-wa { background: #25d366; }
  .cd-share-em { background: #ec4899; }
  .cd-share-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
  .cd-share-link { background: #6b7280; color: #fff; }
  /* The copy-link circle is a <button> (its siblings are <a>). WebKit/Safari
     paint a <button> with NATIVE control chrome, which covered the custom grey
     fill and hid the white chain icon (and swallowed the click). Strip the UA
     appearance + padding so it renders exactly like the anchor circles. */
  button.cd-share-circle {
    appearance: none; -webkit-appearance: none;
    padding: 0; margin: 0; font: inherit; background-clip: padding-box;
  }
  /* Force the icon to a visible size on every viewport (was only sized in the
     mobile query, so the desktop grey button looked iconless). */
  .cd-share-circle svg { width: 14px; height: 14px; display: block; flex: none; }
  .cd-share-link svg { stroke: #fff; }
  /* Like / Save button active states */
  .cd-action-btn.liked { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
  .cd-action-btn.liked svg { fill: #dc2626; stroke: none; }
  .cd-action-btn.saved { background: #eff6ff; border-color: #93c5fd; color: #2464c4; }
  .cd-action-btn.saved svg { fill: #2464c4; stroke: none; }

  /* URL share box */
  .cd-url-box { margin-top: 1.5rem; max-width: 100%; }
  .cd-url-box label { font-weight: 700; color: #1f2937; font-size: .95rem; display: block; margin-bottom: .5rem; }
  .cd-url-input-row { display: flex; gap: .5rem; min-width: 0; max-width: 100%; }
  .cd-url-input-row input {
    flex: 1 1 0; min-width: 0; padding: .55rem .7rem;
    border: 1px solid #d1d5db; border-radius: 6px;
    font-size: .9rem; color: #374151; background: #fff;
    box-sizing: border-box;
  }
  .cd-url-copy-btn {
    background: #10b981; color: #fff; border: none; border-radius: 6px;
    padding: .55rem 1.1rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: .4rem;
  }
  .cd-url-copy-btn:hover { background: #059669; }
  .cd-url-hint { color: #6b7280; font-size: .85rem; margin-top: .4rem; }
  .cd-url-hint a { color: #10b981; }

  /* Sizes-available footer row */
  .cd-sizes-row { margin-top: 1.5rem; }
  .cd-sizes-row > strong { display: block; color: #1f2937; font-size: .95rem; margin-bottom: .5rem; }
  .cd-size-pill {
    display: inline-flex; align-items: center; gap: .25rem;
    background: #1f2937; color: #fff !important;
    padding: .2rem .55rem; margin: 0 .35rem .35rem 0;
    border-radius: 4px; font-size: .8rem; font-weight: 600;
    text-decoration: none !important;
    transition: background .12s, transform .08s;
  }
  .cd-size-pill:hover { background: #111827; transform: translateY(-1px); }
  /* Premium-tier sizes carry a thin gold accent so users learn the
     visual code — but they're FULLY enabled, not dimmed. The download
     endpoint handles the auth gate downstream. */
  .cd-size-pill--premium { background: #1f2937; border: 1px solid #fbbf24; }
  .cd-size-pill--premium:hover { background: #111827; border-color: #f59e0b; }
  /* Button-flavour of the same pill (sidebar premium box) — strip the
     default UA padding/border/font so it visually matches the anchor
     pill. cursor:pointer because it triggers the same download gate. */
  .cd-size-pill--btn { border: 0; font-family: inherit; cursor: pointer; }

  /* ── Sidebar ─────────────────────────────────────────────────── */
  /* Uniform vertical spacing between every sidebar section + the few
     non-section blocks. Centralised so all the gaps match instead of
     each block carrying its own ad-hoc `margin-top`. */
  .cd-sidebar > section,
  .cd-sidebar > .cd-creator-recruit,
  .cd-sidebar > .cd-customize-cta,
  .cd-sidebar > .cd-action-row,
  .cd-sidebar > .cd-url-box { margin-bottom: 1rem; }
  .cd-sidebar > section:last-child,
  .cd-sidebar > *:last-child { margin-bottom: 0; }
  /* Strip ad-hoc top margins on the children of a section so each
     section starts cleanly at the gap defined above. */
  .cd-sidebar > section > :first-child { margin-top: 0; }
  /* Mobile: stack sidebar contents below the image and push the
     Creator-recruit box to the end so the download CTA + size table
     are the first thing the visitor sees after the wallpaper. */
  @media (max-width: 880px) {
    .cd-sidebar { display: flex !important; flex-direction: column; }
    .cd-sidebar .cd-creator-recruit { order: 99; }
    /* In-content mobile ad sits right above the Creator-recruit box. */
    .cd-sidebar .cd-mobile-creator-ad { order: 98; margin-bottom: 1rem; }
  }
  /* Desktop: force the Become-a-Creator box to the bottom of the sidebar
     so the conversion path (download + customize) stays above the fold. */
  @media (min-width: 881px) {
    .cd-sidebar { display: flex; flex-direction: column; }
    .cd-sidebar .cd-creator-recruit { order: 99; margin-top: 1rem; }
    /* Desktop keeps the in-content ad in the left rail, not the sidebar. */
    .cd-sidebar .cd-mobile-creator-ad { display: none; }
  }
  .cd-side-label { font-weight: 700; color: #1f2937; font-size: .95rem; margin-bottom: .5rem; }
  .cd-free-dl-btn {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    background: #10b981; color: #fff; border: none; border-radius: 8px;
    padding: .85rem 1rem; font-weight: 700; font-size: 1rem;
    width: 100%; text-decoration: none; cursor: pointer;
  }
  .cd-free-dl-btn:hover { background: #059669; color: #fff; }

  /* Customize-with-AI — same shape/size as Free Download. Vibrant
     purple→pink gradient so it reads as a distinct AI feature, NOT
     another monetisation pill. White text, sparkle icon, subtle shimmer
     to draw the eye without competing with the green primary CTA. */
  /* Flat purple→pink gradient. No shadow, no hover transform, no
     shimmer — the original sparkle effect was distracting on the
     sidebar. The colour still reads as a distinct AI feature so it
     doesn't visually merge with the green primary or the yellow
     Premium box. */
  .cd-customize-btn {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    color: #fff; border: 0; border-radius: 8px;
    padding: .85rem 1rem; font-weight: 700; font-size: 1rem;
    width: 100%; text-decoration: none; cursor: pointer;
    margin-top: .65rem;
    box-shadow: none;
  }
  .cd-customize-btn:hover,
  .cd-customize-btn:focus,
  .cd-customize-btn:active {
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    box-shadow: none;
    transform: none;
  }
  /* "AI" pill badge inside the button — small, lavender background. */
  .cd-customize-btn .cd-customize-badge {
    background: rgba(255,255,255,.22); color: #fff;
    padding: .12rem .45rem; border-radius: 999px;
    font-size: .68rem; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase;
    margin-left: .15rem;
  }

  /* Social-proof line — sits under the two main CTAs. Stays subtle so it
     doesn't compete with the buttons; centered. */
  .cd-social-proof {
    margin-top: .75rem;
    color: #4b5563; font-size: .82rem; line-height: 1.5;
    display: flex; align-items: center; justify-content: center; gap: .55rem;
  }
  .cd-social-proof strong { color: #111827; }
  .cd-social-proof .cd-sp-stars { color: #f59e0b; letter-spacing: .04em; }
  .cd-social-proof .cd-sp-text { text-align: left; }
  .cd-social-proof .cd-sp-row { display: block; }

  /* Avatar stack — 3 overlapping circles with initials. Deterministic
     palette per slug so the same wallpaper always shows the same
     "people". Read it as social proof, not as live data. */
  .cd-sp-stack { display: inline-flex; flex-shrink: 0; }
  .cd-sp-stack > span {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 800; color: #fff;
    border: 2px solid #fff;
    box-sizing: border-box;
    margin-left: -8px;
    line-height: 1;
  }
  .cd-sp-stack > span:first-child { margin-left: 0; }

  .cd-premium-cta {
    background: #fff; border: 1px solid #fbbf24; border-radius: 8px;
    padding: 1rem; margin-top: 1rem;
  }
  .cd-premium-cta-small { color: #6b7280; font-size: .8rem; margin-bottom: .25rem; }
  .cd-premium-cta-strong { font-weight: 700; color: #1f2937; margin-bottom: .65rem; }
  .cd-premium-btn {
    display: block; text-align: center; background: #fbbf24; color: #1f2937;
    border-radius: 6px; padding: .6rem .75rem; font-weight: 700;
    text-decoration: none; border: 2px dashed #f59e0b;
  }
  .cd-premium-btn:hover { background: #f59e0b; color: #1f2937; }

  .cd-premium-box {
    background: #fffbeb; border: 1px solid #fbbf24; border-radius: 10px;
    padding: 1rem; margin-top: 1rem;
  }
  .cd-premium-box h4 {
    display: flex; align-items: center; gap: .35rem;
    color: #1f2937; font-size: 1rem; font-weight: 700; margin-bottom: .65rem;
  }
  .cd-premium-box .crown { color: #f59e0b; }
  .cd-premium-tags { margin-bottom: .75rem; }
  .cd-premium-tags .cd-size-pill { background: #1f2937; }
  .cd-premium-blurb { color: #4b5563; font-size: .85rem; margin-bottom: .85rem; }
  .cd-premium-blurb strong { color: #1f2937; }
  .cd-big-dl-btn {
    display: block; width: 100%; box-sizing: border-box;
    background: #fbbf24; color: #1f2937;
    border: 2px dashed #f59e0b; border-radius: 8px;
    padding: .9rem 1rem; text-align: center; font-weight: 800; font-size: 1rem;
    text-decoration: none; margin-bottom: 1rem; line-height: 1.2;
    cursor: pointer;
  }
  .cd-big-dl-btn small { display: block; font-weight: 500; font-size: .78rem; margin-top: .2rem; opacity: .85; }
  .cd-big-dl-btn:hover { background: #f59e0b; color: #1f2937; }

  /* Size table */
  .cd-size-table { width: 100%; }
  .cd-size-table tr { border-top: 1px solid #f3e8c7; }
  .cd-size-table tr:first-child { border-top: 0; }
  .cd-size-table td { padding: .5rem .25rem; vertical-align: middle; }
  .cd-size-table .size-name { font-weight: 700; color: #1f2937; width: 28%; white-space: nowrap; }
  .cd-size-table .size-dim { color: #6b7280; font-size: .85rem; }
  .cd-size-table .size-dl { text-align: right; width: 50px; }
  /* Whole row is clickable (name + dimensions trigger the same gate as the
     download icon). Hover highlights the row so the affordance is obvious. */
  .cd-size-table tr.cd-size-row { cursor: pointer; }
  .cd-size-table tr.cd-size-row:hover { background: #fef3c7; }
  .cd-size-table tr.cd-size-row:hover .size-dl .cd-size-dl-btn { background: #f59e0b; }
  .cd-size-dl-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 32px; border-radius: 6px; border: 2px dashed #f59e0b;
    background: #fbbf24; color: #1f2937; text-decoration: none;
  }
  .cd-size-dl-btn:hover { background: #f59e0b; }
  .cd-size-dl-btn svg { width: 16px; height: 16px; }

  /* Meta rows: License / File type / Attribution */
  .cd-meta-row {
    display: flex; align-items: center; gap: .5rem;
    color: #4b5563; font-size: .9rem; padding: .35rem 0;
  }
  .cd-meta-row svg { width: 16px; height: 16px; flex: 0 0 16px; color: #9ca3af; }
  .cd-meta-row a { color: #10b981; text-decoration: none; margin-left: .35rem; }
  .cd-meta-row a:hover { text-decoration: underline; }

  /* ── Get a Print — single-row horizontal scroll strip ─────────── */
  .cd-print-block { margin-top: 2.5rem; padding: 1.5rem 0; border-top: 1px solid #e5e7eb; }
  /* Title on its own line, description stacked below — was a 2-column
     baseline-aligned row before; now reads as a proper section header. */
  .cd-print-head { display: block; margin-bottom: .85rem; }
  .cd-print-head h2 {
    font-size: 1.35rem; font-weight: 800; color: #111827;
    margin: 0 0 .35rem; display: block;
  }
  .cd-print-sub {
    color: #6b7280; font-size: .9rem; margin: 0;
    line-height: 1.45; display: block;
  }
  /* Scroll wrapper: clips the strip + positions the nav arrows */
  .cd-print-scroll-wrap { position: relative; }
  .cd-print-strip {
    display: flex; gap: .85rem; overflow-x: auto; scroll-behavior: smooth;
    padding: .25rem .1rem .75rem; scrollbar-width: none;
    /* Reserve the height that loaded cards will take so the page below
       doesn't shift when the strip swaps from skeletons → real cards.
       180px (image) + ~70px (meta+button) + paddings ≈ 268px. */
    min-height: 268px;
  }
  .cd-print-strip::-webkit-scrollbar { display: none; }
  /* Skeleton card — same footprint as a real .cd-print-card, just gray. */
  .cd-print-skel {
    flex: 0 0 180px; height: 254px; border-radius: 12px;
    background:
      linear-gradient(180deg, #f3f4f6 0 180px, transparent 180px),
      linear-gradient(180deg, transparent 0 196px, #f3f4f6 196px 218px, transparent 218px),
      linear-gradient(180deg, transparent 0 230px, #f3f4f6 230px 254px);
    background-color: #fafafa;
    border: 1px solid #e5e7eb;
    overflow: hidden; position: relative;
  }
  .cd-print-skel::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.55) 50%,
      rgba(255,255,255,0) 100%);
    transform: translateX(-100%);
    animation: cd-skel-shimmer 1.4s linear infinite;
  }
  @keyframes cd-skel-shimmer { to { transform: translateX(100%); } }
  /* Arrow buttons */
  .cd-pa {
    position: absolute; top: 50%; transform: translateY(calc(-50% - .25rem));
    width: 36px; height: 36px; border-radius: 50%;
    background: #fff; border: 1px solid #e5e7eb;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2; color: #374151; font-size: 1rem;
    transition: background .12s;
  }
  .cd-pa:hover { background: #f3f4f6; }
  .cd-pa.left  { left: -18px; }
  .cd-pa.right { right: -18px; }
  .cd-pa[hidden] { display: none; }

  .cd-print-loading { color: #9ca3af; padding: 1.5rem; font-size: .9rem; }
  /* Card: fixed-width, single row */
  .cd-print-card {
    flex: 0 0 180px; display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    overflow: hidden; cursor: pointer;
    transition: border-color .12s;
  }
  .cd-print-card:hover { border-color: #2464c4; }
  /* Zoom button — corner overlay on each mockup card */
  .cd-pm-zoom {
    position: absolute; top: .4rem; right: .4rem;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2; opacity: 0; transition: opacity .15s;
  }
  .cd-print-card:hover .cd-pm-zoom { opacity: 1; }
  .cd-pm-zoom:hover { background: #1f2937; }
  .cd-pm-zoom svg { width: 16px; height: 16px; }
  /* On touch devices, always show — no hover */
  @media (hover: none) { .cd-pm-zoom { opacity: 1; } }

  /* ── Mockup zoom modal ── */
  .cd-mz-modal {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.85); align-items: center; justify-content: center;
    padding: 2rem;
  }
  .cd-mz-modal.open { display: flex; }
  /* Wrap card + arrows in a positioning shell so arrows can sit OUTSIDE
     the card border (the card itself has overflow:hidden for the rounded
     image — arrows would get clipped if they lived inside it). */
  .cd-mz-shell {
    position: relative; width: 100%; max-width: 720px; max-height: 90vh;
    display: flex; flex-direction: column;
  }
  .cd-mz-card {
    background: #fff; width: 100%; border-radius: 14px;
    overflow: hidden; position: relative; display: flex; flex-direction: column;
    max-height: 90vh;
  }
  .cd-mz-img-wrap {
    background: #f3f4f6; aspect-ratio: 1; position: relative; overflow: hidden;
    flex: 1 1 auto; min-height: 0;
  }
  .cd-mz-img {
    width: 100%; height: 100%; object-fit: contain; display: block;
  }
  .cd-mz-close {
    position: absolute; top: -2.5rem; right: 0; background: none; border: none;
    color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; padding: .25rem;
    z-index: 10;
  }
  /* Arrows live on the SHELL (outside the card's overflow:hidden) so they
     can extend beyond the card's left/right edges without being clipped.
     Flat circles (no shadow) per design ask — hover-yellow stays as the
     only affordance. */
  .cd-mz-prev, .cd-mz-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: #fff; border: none; cursor: pointer;
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.65rem; color: #1f2937;
    z-index: 11;
    transition: transform .12s, background .12s;
  }
  .cd-mz-prev { left: -24px; } .cd-mz-next { right: -24px; }
  .cd-mz-prev:hover, .cd-mz-next:hover {
    background: #fbbf24; color: #1f2937; transform: translateY(-50%) scale(1.08);
  }
  .cd-mz-meta {
    padding: 1rem 1.25rem; display: flex; align-items: center;
    justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  }
  .cd-mz-meta .name { font-size: 1.1rem; font-weight: 800; color: #1f2937; margin: 0; }
  .cd-mz-meta .price { color: #15803d; font-size: 1.2rem; font-weight: 800; }
  /* Add-to-cart — vibrant orange (Amazon "Buy Box" convention; highest CTR
     in e-commerce tests vs neutral black or site primary blue). */
  .cd-mz-add {
    background: #f97316; color: #fff; border: none;
    padding: .85rem 1.75rem; border-radius: 10px; font-weight: 800;
    font-size: 1rem; cursor: pointer;
    box-shadow: 0 2px 8px rgba(249,115,22,.35);
    transition: background .15s, transform .12s;
  }
  .cd-mz-add:hover { background: #ea580c; transform: translateY(-1px); }
  .cd-mz-add:active { transform: translateY(0); }
  .cd-mz-add:disabled { opacity: .5; }
  .cd-mz-counter {
    color: #6b7280; font-size: .85rem; font-weight: 600;
  }
  @media (max-width: 640px) {
    .cd-mz-modal { padding: 1.5rem .5rem; }
    /* On tight viewports the arrows can't extend negative without overflow,
       so float them just inside the card edge. */
    .cd-mz-prev { left: 6px; } .cd-mz-next { right: 6px; }
    .cd-mz-close { top: -2.25rem; }
  }
  /* Mockup: shows the wallpaper image immediately as a CSS preview,
     overlaid by the Prodigi mockup once loaded */
  .cd-print-mockup {
    aspect-ratio: 4/3; position: relative; overflow: hidden;
    background: #f3f4f6;
  }
  .cd-print-mockup .cd-pm-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
  }
  .cd-print-mockup .cd-pm-api {
    position: absolute; inset: 0; opacity: 0;
    transition: opacity .3s;
  }
  .cd-print-mockup .cd-pm-api img { width: 100%; height: 100%; object-fit: cover; }
  .cd-print-mockup .cd-pm-api.loaded { opacity: 1; }
  /* Product type badge */
  .cd-print-badge {
    position: absolute; bottom: .4rem; left: .4rem;
    background: rgba(0,0,0,.55); color: #fff; border-radius: 4px;
    font-size: .65rem; font-weight: 700; padding: .15rem .4rem;
    text-transform: uppercase; letter-spacing: .3px;
  }
  .cd-print-meta { padding: .7rem .9rem; flex: 1; }
  .cd-print-meta .name { font-weight: 700; color: #1f2937; font-size: .88rem;
                          line-height: 1.25; margin-bottom: .2rem; }
  .cd-print-meta .price { color: #10b981; font-weight: 800; font-size: .95rem; }
  .cd-print-add {
    background: #111827; color: #fff; border: none;
    padding: .55rem .75rem; font-weight: 700; font-size: .82rem;
    cursor: pointer; transition: background .12s; text-align: center;
  }
  .cd-print-add:hover { background: #374151; }
  .cd-print-added {
    background: #1f2937; color: #fff; padding: .85rem 1.25rem;
    border-radius: 8px; position: fixed; bottom: 1rem; right: 1rem;
    z-index: 9999; display: flex; align-items: center; gap: .75rem;
    font-weight: 600; transform: translateY(120%); transition: transform .25s ease-out;
  }
  .cd-print-added.show { transform: translateY(0); }
  .cd-print-added a { color: #fbbf24; font-weight: 700; text-decoration: underline; }

  /* ── Mobile sticky download bar — shows on ≤880px (where the
        sidebar collapses) so the primary CTA is always reachable ── */
  .cd-mobile-dl-bar { display: none; }
  @media (max-width: 880px) {
    .cd-mobile-dl-bar {
      display: flex; gap: .5rem;
      position: fixed; left: 0; right: 0; bottom: -3px;
      width: 100%; box-sizing: border-box;
      padding: .55rem .85rem calc(.65rem + env(safe-area-inset-bottom) + 3px);
      background: #fff; border-top: 1px solid #e5e7eb;
      box-shadow: 0 -4px 14px rgba(0,0,0,.08);
      z-index: 999;
    }
    .cd-mobile-dl-bar .cd-mdl-free,
    .cd-mobile-dl-bar .cd-mdl-customize,
    .cd-mobile-dl-bar .cd-mdl-prem {
      flex: 1 1 0; min-width: 0; width: auto;
      padding: .85rem .35rem;
      border-radius: 8px; border: none;
      font-weight: 700; font-size: 1rem;
      display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
      cursor: pointer; line-height: 1;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      box-sizing: border-box; text-decoration: none;
    }
    .cd-mobile-dl-bar .cd-mdl-free { background: #10b981; color: #fff; }
    .cd-mobile-dl-bar .cd-mdl-free:hover { background: #059669; }
    .cd-mobile-dl-bar .cd-mdl-customize {
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
      color: #fff;
      /* Icon-only — don't claim an equal third; just hug the symbol on the right. */
      flex: 0 0 auto; width: 48px; padding-left: 0; padding-right: 0; gap: 0;
    }
    .cd-mobile-dl-bar .cd-mdl-prem {
      background: #fbbf24; color: #1f2937;
    }
    .cd-mobile-dl-bar .cd-mdl-prem:hover { background: #f59e0b; }
    #wpc-corner-card { bottom: 68px !important; right: .5rem !important; max-width: calc(100vw - 1rem) !important; }
    main.single { padding-bottom: 96px !important; }
  }

  /* ── Comprehensive mobile tightening — prevents horizontal overflow.
        Targets ≤600px (phones) and ≤480px (small phones) separately. ── */
  @media (max-width: 600px) {
    /* Force every child to behave under the viewport box */
    .cd-wrap, .cd-wrap * { box-sizing: border-box; }
    .cd-wrap { padding-left: .75rem; padding-right: .75rem; max-width: 100%; }
    .cd-h1 { font-size: 1.45rem; line-height: 1.25; }
    .cd-desc { font-size: .92rem; }
    .cd-image-wrap:not(.is-tall) {
      margin-left: -.75rem;
      margin-right: -.75rem;
      border-radius: 0;
      max-height: none;
    }
    .cd-image-wrap:not(.is-tall) img {
      width: 100%;
      max-width: none;
      height: auto;
      max-height: none;
    }
    /* Same deterministic scheme as the base rule, just a smaller cap: pin the
       height, let the inline aspect-ratio derive the width. `fit-content` +
       `width:auto` here were the content-dependent pair that shifted on load. */
    .cd-image-wrap.is-tall {
      height: 300px;
      width: auto;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      border-radius: 10px;
    }
    .cd-image-wrap.is-tall img {
      width: 100%;
      height: 100%;
      max-height: none;
      object-fit: contain;
    }

    /* Author/share row: stack share circles below name + actions, allow wrap */
    .cd-author-row { gap: .5rem 1rem; }
    .cd-share-row { margin-left: 0; flex-wrap: wrap; row-gap: .35rem; width: 100%; }

    /* URL copy box: keep input + button on one line but allow input to shrink */
    .cd-url-input-row { flex-wrap: nowrap; }
    .cd-url-input-row input { min-width: 0; font-size: .82rem; padding: .5rem .55rem; }
    .cd-url-copy-btn { padding: .5rem .65rem; font-size: .8rem; flex-shrink: 0; }
    .cd-url-copy-btn svg { display: none; }

    /* Sidebar boxes: tame padding so they don't blow up width */
    .cd-premium-cta, .cd-premium-box { padding: .85rem; }
    .cd-premium-box h4 { font-size: .95rem; }
    .cd-size-table .size-name { width: 32%; font-size: .9rem; white-space: nowrap; }
    .cd-size-table .size-dim { font-size: .78rem; }

    /* Print strip: keep cards on one row, scrollable */
    .cd-print-block { padding-left: 0; padding-right: 0; }
    .cd-print-head h2 { font-size: 1.35rem; line-height: 1.2; }
    .cd-print-card { flex-basis: 150px; }
    .cd-pa.left { left: -8px; } .cd-pa.right { right: -8px; }

    /* Related/Suggested keyword grid: single column */
    .cd-rs-grid { gap: 1rem; }
    .cd-rs-list { column-count: 1; }

    /* Sizes-available pills: prevent run-off */
    .cd-sizes-row .cd-size-pill { font-size: .72rem; padding: .15rem .45rem; }
  }

  @media (max-width: 480px) {
    .cd-h1 { font-size: 1.25rem; }
    /* KEEP the inline aspect-ratio (from DB width/height) on mobile so the
       image slot is reserved BEFORE the bitmap loads — resetting it to auto
       here was the CLS source (the whole page jumped when the image painted).
       Wide images fill their reserved ratio exactly; tall images are capped at
       300px (deterministic height → still no shift). */
    .cd-image-wrap:not(.is-tall) { max-height: none; }
    /* height, not max-height — a cap still lets the box resolve twice. */
    .cd-image-wrap.is-tall { height: 300px; max-height: none; }
    .cd-image-wrap.is-tall img { height: 100%; max-height: none; }
    .cd-share-circle { width: 28px; height: 28px; }
    .cd-share-circle svg { width: 12px; height: 12px; }
    .cd-share-link svg { display: block !important; width: 14px !important; height: 14px !important; }
    .cd-mobile-dl-bar .cd-mdl-free,
    .cd-mobile-dl-bar .cd-mdl-customize,
    .cd-mobile-dl-bar .cd-mdl-prem { font-size: .82rem; padding: .85rem .2rem; }
    .cd-mobile-dl-bar .cd-mdl-free svg,
    .cd-mobile-dl-bar .cd-mdl-customize svg,
    .cd-mobile-dl-bar .cd-mdl-prem svg { width: 14px; height: 14px; }
    .cd-size-dl-btn { width: 44px; height: 40px; }
    .cd-size-dl-btn svg { width: 22px; height: 22px; }
  }

  @media (max-width: 768px) {
    .cd-boards-promo {
      padding: 1rem !important;
      border-radius: 10px !important;
    }
    .cd-boards-promo h2 {
      font-size: 1.35rem !important;
      margin-bottom: .7rem !important;
    }
    .cd-boards-promo-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: .85rem !important;
      align-items: stretch !important;
    }
    .cd-boards-promo h3 {
      font-size: 1.05rem !important;
      line-height: 1.25 !important;
      max-width: none !important;
    }
    .cd-boards-promo p {
      font-size: .9rem !important;
      line-height: 1.45 !important;
      max-width: none !important;
    }
    .cd-boards-actions {
      display: grid !important;
      grid-template-columns: 1fr 1fr;
      gap: .55rem !important;
      width: 100%;
    }
    .cd-boards-actions a,
    .cd-boards-actions button {
      width: 100%;
      min-height: 44px;
      padding: .7rem .55rem !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      white-space: nowrap;
      box-sizing: border-box;
    }
  }

  /* ── Related Categories block (same-type, multi-keyword) ─────── */
  .cd-rc-block { margin-top: 2rem; padding: 1.5rem 0; border-top: 1px solid #e5e7eb; }
  .cd-rc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
  .cd-rc-head h2 { font-size: 1.35rem; line-height: 1.2; font-weight: 800; color: #111827; margin: 0; }
  .cd-rc-row {
    display: flex; align-items: center; gap: 1rem;
    padding: .85rem 0; border-bottom: 1px solid #f3f4f6;
  }
  .cd-rc-row:last-child { border-bottom: none; }
  .cd-rc-label { flex: 0 0 200px; min-width: 0; }
  @media (max-width: 700px) { .cd-rc-label { flex-basis: 130px; } }
  .cd-rc-label a { color: #1f2937; font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1.2; display: block; }
  .cd-rc-label a:hover { color: #2464c4; }
  .cd-rc-label .cd-rc-count { color: #6b7280; font-size: .82rem; margin-top: .15rem; }
  .cd-rc-thumbs { display: flex; gap: .5rem; flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .cd-rc-thumb {
    flex: 0 0 90px; height: 70px; border-radius: 6px; overflow: hidden;
    background: #f3f4f6; display: block;
  }
  .cd-rc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cd-rc-more {
    flex: 0 0 auto; color: #2464c4; font-weight: 600; font-size: .9rem;
    text-decoration: none; white-space: nowrap;
  }
  .cd-rc-more:hover { text-decoration: underline; }
  @media (max-width: 600px) {
    .cd-rc-head { display: block; margin-bottom: .85rem; }
    .cd-rc-head h2 {
      font-size: 1.35rem !important;
      line-height: 1.2 !important;
      font-weight: 800 !important;
      margin: 0 !important;
    }
  }

  /* ── Related / Suggested pills section ───────────────────────── */
  .cd-rs-block { margin-top: 2rem; padding: 1.25rem 0; border-top: 1px solid #e5e7eb; }
  .cd-rs-grid { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; }
  @media (max-width: 700px) { .cd-rs-grid { grid-template-columns: 1fr; } }
  .cd-rs-title { font-size: 1.05rem; font-weight: 700; color: #1f2937; margin-bottom: .5rem; }
  .cd-rs-list { list-style: none; padding: 0; margin: 0; column-count: 2; column-gap: 1.25rem; }
  .cd-rs-list li { break-inside: avoid; margin-bottom: .25rem; }
  .cd-rs-list a {
    display: inline-block; color: #2464c4; text-decoration: none;
    font-size: .92rem; padding: .15rem 0;
  }
  .cd-rs-list a:hover { text-decoration: underline; }

/* ── save-to-board popover ─────────────────────────────── */
              .cd-board-pop {
                position: absolute; top: calc(100% + 6px); right: 0;
                width: 280px; background: #fff;
                border: 1px solid #e5e7eb; border-radius: 10px;
                box-shadow: 0 12px 32px rgba(0,0,0,.14);
                z-index: 50; padding: .55rem;
              }
              .cd-board-pop[hidden] { display: none; }
              .cd-board-pop-head {
                font-weight: 700; font-size: .82rem; color: #6b7280;
                text-transform: uppercase; letter-spacing: .04em;
                padding: .45rem .55rem .35rem;
              }
              .cd-board-pop-list {
                max-height: 220px; overflow-y: auto;
                border-bottom: 1px solid #f3f4f6;
                margin-bottom: .35rem; padding-bottom: .35rem;
              }
              .cd-board-pop-row {
                display: flex; align-items: center; justify-content: space-between;
                padding: .5rem .65rem; cursor: pointer; border-radius: 6px;
                font-size: .92rem; color: #1f2937;
              }
              .cd-board-pop-row:hover { background: #f9fafb; }
              .cd-board-pop-row .ct { color: #9ca3af; font-size: .78rem; }
              .cd-board-pop-row.contains { font-weight: 700; color: #059669; }
              .cd-board-pop-row.contains::after { content: '✓'; color: #059669; margin-left: .35rem; }
              .cd-board-pop-new {
                display: flex; gap: .35rem; padding: .25rem;
              }
              .cd-board-pop-new input {
                flex: 1; padding: .45rem .65rem; border: 1px solid #d1d5db;
                border-radius: 6px; font-size: .88rem;
              }
              .cd-board-pop-new button {
                background: #1f2937; color: #fff; border: 0;
                padding: .45rem .75rem; border-radius: 6px;
                font-weight: 700; font-size: .85rem; cursor: pointer;
              }

/* ── reaction buttons ─────────────────────────────── */
              .cd-reaction.active { background: #eef2ff !important; border-color: #4f46e5 !important; }
              .cd-reaction.active .cnt { color: #4f46e5 !important; }
              .cd-reaction:hover { transform: translateY(-1px); }

/* ── creator-recruit card ─────────────────────────────── */
            .cd-creator-recruit {
              display: block; background: #fff;
              color: #1f2937 !important; text-decoration: none !important;
              padding: 1.25rem 1.1rem; border-radius: 12px; margin-bottom: 1rem;
              border: 1px solid #1f2937;       /* solid black box border */
              text-align: center;
              transition: background .12s;
            }
            .cd-creator-recruit:hover {
              background: #f9fafb; color: #1f2937 !important;
            }
            .cd-creator-recruit .head { margin-bottom: .85rem; }
            .cd-creator-recruit .badge {
              display: inline-block;
              background: #f3f4f6; color: #6b7280;
              padding: .2rem .6rem; border-radius: 999px;
              font-size: .65rem; font-weight: 800;
              text-transform: uppercase; letter-spacing: .05em;
            }
            .cd-creator-recruit .recruit-title {
              color: #1f2937 !important; font-size: 1.05rem; font-weight: 800;
              margin: .55rem 0 0; line-height: 1.3;
            }
            .cd-creator-recruit ul {
              list-style: none; margin: 0 0 1rem; padding: 0;
              font-size: .85rem; line-height: 1.7;
              color: #374151; text-align: left;
            }
            .cd-creator-recruit ul li::before {
              content: '✓'; color: #10b981; font-weight: 800; margin-right: .45rem;
            }
            .cd-creator-recruit .cta {
              display: inline-block;            /* centered via parent text-align */
              background: #1f2937; color: #fff;
              padding: .65rem 1.4rem; border-radius: 8px;
              font-weight: 800; font-size: .9rem;
            }
            .cd-creator-recruit:hover .cta { background: #111827; }

/* ── right-rail ad ─────────────────────────────── */
        /* Position the rail flush to the right edge of `.cd-wrap` (max-width
           1400px, centered) with the same `.75rem` gap that separates the
           cd-grid columns — so the rail visually reads as "the next column
           after the sidebar". cd-wrap right edge = `calc(50% + 700px)`. */
        /* top:140 clears the sticky header (~120px) plus a small breathing
           gutter. The page header used to disappear behind the ad; now the
           rail starts safely below it on every page state. */
        .cd-rail-ad {
          display: none; position: fixed; top: 140px;
          left: calc(50% + 700px + .75rem);
          z-index: 50; width: 300px;
        }
        .cd-rail-ad.is-visible { display: block; }
        /* Need viewport ≥ 1400 (cd-wrap) + 12 gap + 300 rail + 16 buffer = 1728. */
        @media (max-width: 1727px) { .cd-rail-ad { display: none !important; } }

/* ── tools carousel arrows ─────────────────────────────── */
          .cd-tools-wrap .h-pa { position:absolute; top:50%;
            transform:translateY(-50%); width:36px; height:36px;
            border-radius:50%; background:#fff; border:1px solid #e5e7eb;
            display:flex; align-items:center; justify-content:center;
            cursor:pointer; z-index:5; color:#374151; font-size:1.2rem;
            box-shadow:0 2px 8px rgba(0,0,0,.12); line-height:1; opacity:0;
            transition:opacity .12s, background .12s; }
          .cd-tools-wrap .h-pa:hover { background:#f3f4f6; }
          .cd-tools-wrap .h-pa.left  { left:-8px; }
          .cd-tools-wrap .h-pa.right { right:-8px; }
          .cd-tools-wrap #cd-tools-row::-webkit-scrollbar { display:none; }
          .cd-tools-wrap .h-tool:hover { transform: translateY(-4px); }
          .cd-tools-wrap .h-tool:hover img { transform: scale(1.05); }

/* ── mobile prev/next peek thumbs ─────────────────────────────── */
    .cd-peek { display:none; }
    @media (max-width: 880px) {
      .cd-peek {
        position:fixed; right:14px; bottom:150px; z-index:1190;
        width:64px; height:64px; border-radius:9px; overflow:hidden;
        border:2px solid #111827; background:#111827;
        box-shadow:0 4px 14px rgba(0,0,0,.30); text-decoration:none;
        display:block; opacity:0; transform:translateY(10px); pointer-events:none;
        transition:opacity .2s ease, transform .2s ease;
      }
      .cd-peek.is-on { opacity:1; transform:none; pointer-events:auto; }
      .cd-peek img { position:absolute; inset:0; width:100%; height:100%;
        object-fit:cover; display:block; }
      .cd-peek .cd-peek-label {
        position:absolute; left:0; right:0; bottom:0; z-index:2;
        background:rgba(0,0,0,.74); color:#fff; font-size:.62rem; font-weight:800;
        letter-spacing:.02em; text-align:center; padding:2px 0; line-height:1.3; }
    }