/*
 * Explorer marketplace styles.
 *
 * Values come from the Figma frames (see DESIGN_TOKENS.md), read through the API rather
 * than sampled off a screenshot. No font is loaded here — the site already serves
 * IRANYekanX, and shipping a second copy would cost a render-blocking request for a face
 * the page already has.
 */

/* Tokens live at :root, not on .bx-studio. Scoping them to the listing block meant every
   var() on the detail page (whose root is .bx-detail) resolved to nothing — the CTA lost its
   lime fill, borders lost their colour, and the whole page quietly fell back to browser
   defaults. */
:root {
  --bx-green-900: #1c4537;
  --bx-hero: #0c513f;
  --bx-grid-bg: #f5f5f5;
  --bx-lime: #d9ef78;
  --bx-ink: #1a1c19;
  --bx-ink-2: #111827;
  --bx-muted: #5a615d;
  --bx-border: #e1e4e0;
  --bx-border-2: #e5e7eb;
  --bx-surface: #fff;
  --bx-surface-2: #fafbf9;
}

.bx-studio { margin-top: 0; }

/* The theme and Elementor kit stylesheets are enqueued after this file, so plain
   specificity loses the link-underline battle regardless of selector weight. The override
   is deliberately limited to text-decoration inside our own blocks — it does not touch the
   site's link styling anywhere else. */
.bx-studio a,
.bx-studio a:hover,
.bx-detail a,
.bx-detail a:hover {
  text-decoration: none !important;
}

/* ---------------------------------------------------------------- hero band
   Figma Hero: 1440x422, pad 80, gap 32, fill #0C513F. Full-bleed out of the theme's
   content column so it spans the viewport like the frame does. */

.bx-hero-band {
  background: var(--bx-hero);
  margin-inline: calc(50% - 50vw);
  padding: 80px 80px;
}

.bx-hero-band__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

/* LiveBadge: 192x28, pad 6/12, gap 6, r20, fill #1C4537 */
.bx-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--bx-green-900);
  color: var(--bx-lime);
  font-size: 12px;
  line-height: 15px;
  font-weight: 700;
}

.bx-live__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bx-lime);
}

/* H1 is Morabba 48/w900 in the frame — the site already ships Morabba-Heavy.woff, with
   iranyekan as the fallback so nothing breaks if it is not registered. */
.bx-studio .bx-hero-band__title {
  margin: 0;
  color: #fff;
  font-family: "Morabba", "iranyekan", sans-serif !important;
  font-size: 48px !important;
  line-height: 1.2;
  font-weight: 900 !important;
}

.bx-hero-band__lead {
  margin: -20px 0 0;
  color: #e8f6d8;
  font-size: 18px;
  line-height: 23px;
  font-weight: 500;
}

/* SearchBar: 640x58, pad 8/24/8/8, gap 16, r30, white.
   In the frame the submit button sits at the bar's left edge and the magnifier at its
   right, so the bar itself runs LTR while the typed text stays RTL. Laying it out RTL
   mirrors both and puts the button on the wrong side. */
.bx-search {
  direction: ltr;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(640px, 100%);
  padding: 8px 24px 8px 8px;
  border-radius: 30px;
  background: #fff;
}

/* SearchButton sits inside the bar: 93x42, pad 12/24, r24, fill #1C4537, lime label.
   The theme styles bare <button> elements, and its stylesheet is enqueued after this one,
   so these few declarations are forced. Scoped to this one control. */
.bx-studio .bx-search__submit {
  flex: none;
  border: 0 !important;
  border-radius: 24px !important;
  padding: 12px 24px !important;
  background: var(--bx-green-900) !important;
  color: var(--bx-lime) !important;
  font: inherit;
  font-size: 14px !important;
  line-height: 18px;
  font-weight: 700;
  cursor: pointer;
}

.bx-studio .bx-search__submit:hover { filter: brightness(1.08); }

/* In the frame the query is plain text inside the pill — there is no input chrome at all.
   The theme styles every <input> with a 1px grey border, 3px radius and its own padding,
   and its stylesheet loads after this one, so that box has to be removed explicitly or it
   draws a rectangle inside the rounded bar. */
.bx-studio .bx-search__input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none;
  height: auto !important;
  font: inherit;
  font-size: 16px !important;
  line-height: 20px;
  color: var(--bx-ink);
}

.bx-studio .bx-search__input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
}

/* Safari paints its own decorations on type=search. */
.bx-studio .bx-search__input::-webkit-search-decoration,
.bx-studio .bx-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.bx-search__input { direction: rtl; text-align: right; }
.bx-search__input::placeholder { color: var(--bx-muted); }
.bx-search__input:focus { outline: none; }
.bx-search__icon { flex: none; display: inline-flex; }

/* PopularTags: gap 8, chips pad 4/12 r12 on 10% white */
.bx-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: -20px;
}

.bx-popular__tag {
  padding: 4px 12px;
  border-radius: 12px;
  background: rgb(255 255 255 / 10%);
  color: #fff;
  font-size: 12px;
  line-height: 15px;
}

.bx-popular__label {
  color: #e8f6d8;
  font-size: 13px;
  line-height: 16px;
  order: -1;
}

/* ---------------------------------------------------------------- category bar
   CategoriesSection: 1440x98, white, 1px #E1E4E0 border, pad 32/80, pills gap 10. */

.bx-catbar {
  margin-inline: calc(50% - 50vw);
  padding: 32px 80px;
  background: #fff;
  border-block: 1px solid var(--bx-border);
}

/* Heading exists only in the mobile frame. */
.bx-catbar__title { display: none; }

.bx-catbar__scroll {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.bx-catbar__scroll::-webkit-scrollbar { display: none; }

/* CategoryPill: 34 high, pad 8/16, r30, white with border; active is lime, not green. */
.bx-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 8px 16px;
  border: 1px solid var(--bx-border);
  border-radius: 30px;
  background: #fff;
  color: var(--bx-muted);
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
}

.bx-pill:hover { border-color: var(--bx-green-900); color: var(--bx-green-900); }

.bx-pill.is-active {
  background: var(--bx-lime);
  border-color: var(--bx-lime);
  color: var(--bx-green-900);
  font-weight: 700;
}

/* ---------------------------------------------------------------- grid
   GridSection: pad 40, fill #F5F5F5. Cards are a fixed 280 wide in the frame, so the grid
   tracks that width and centres, rather than stretching cards to fill. */

.bx-gridsection {
  margin-inline: calc(50% - 50vw);
  padding: 40px;
  background: var(--bx-grid-bg);
}

.bx-grid {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, 280px);
  justify-content: center;
  gap: 20px;
}

@media (max-width: 720px) {
  .bx-gridsection { padding: 24px 16px; }
  .bx-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

/* InspirationCard: 280x388 — image 280x320, footer 68 with pad 14 and gap 6. */
.bx-card {
  background: var(--bx-surface);
  border: 1px solid var(--bx-border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bx-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
}

.bx-card__link { display: block; color: inherit; }

.bx-card__media {
  position: relative;
  /* 280x320 in the frame. */
  aspect-ratio: 280 / 320;
  background: var(--bx-surface-2);
}

.bx-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* popularity pill: top-left inset 12, pad 4/8, gap 6, r8, 80% white, ink #1C4537 */
.bx-card__views {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgb(255 255 255 / 80%);
  color: var(--bx-green-900);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
}

/* Hover overlay (frame 3606:6167): solid #1C4537 over the image, title 18/23 w700 white,
   and a white pill CTA 111x33 r30 with #1C4537 label. */
.bx-card__hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background: var(--bx-green-900);
  opacity: 0;
  transition: opacity 0.18s ease;
  text-align: center;
}

.bx-card:hover .bx-card__hover,
.bx-card__link:focus-visible .bx-card__hover { opacity: 1; }

.bx-card__hover-title {
  color: #fff;
  font-size: 18px;
  line-height: 23px;
  font-weight: 700;
}

.bx-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 30px;
  background: #fff;
  color: var(--bx-green-900);
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
}

/* Keeps the count pill readable once the overlay is up. */
.bx-card:hover .bx-card__views { z-index: 1; }

.bx-card__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }

.bx-card__title {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: var(--bx-ink);
}

.bx-card__desc {
  margin: 0;
  font-size: 12px;
  line-height: 15px;
  color: var(--bx-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------------------------------------------------------- load more
   LoadMoreSection: pad 20/0/80/0; Button 188x40, r8, transparent with a #1C4537 border. */

.bx-loadmore {
  margin-inline: calc(50% - 50vw);
  padding: 20px 0 80px;
  background: var(--bx-grid-bg);
  text-align: center;
}

.bx-loadmore__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 188px;
  height: 40px;
  padding: 10px 16px;
  border: 1px solid var(--bx-green-900);
  border-radius: 8px;
  background: transparent;
  color: var(--bx-green-900);
  font-size: 14px;
  font-weight: 500;
}

.bx-loadmore__btn:hover { background: var(--bx-green-900); color: #fff; }

/* Empty state (frame 3606:6186): white card, 80px lime-tinted ring around a 48px lime
   circle, heading 20/26 w700 in brand green. */
.bx-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 380px;
  margin: 0 auto;
  padding: 32px;
  border: 1px solid var(--bx-border);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}

.bx-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 100px;
  background: rgb(217 239 120 / 10%);
}

.bx-empty__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 100px;
  background: var(--bx-lime);
}

.bx-empty__title {
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  color: var(--bx-green-900);
}

.bx-empty__lead { margin: 0; font-size: 14px; color: var(--bx-muted); }

/* ---------------------------------------------------------------- detail
   Frame 3606:6267. Hero 1440x780 pad 80 gap 64 on white, image column 520x620 r24, text
   column right-aligned. Section titles are Morabba 32/w900 in brand green. */

.bx-detail__hero {
  margin-inline: calc(50% - 50vw);
  padding: 80px;
  background: #fff;
}

.bx-hero {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  /* The frame puts the image at x=80 (left) and the text at x=752 (right). With the text
     column first in the markup, plain RTL flow lands both correctly — forcing LTR here is
     what mirrored them. Reading order stays right-to-left, as the page is Persian. */
  grid-template-columns: minmax(0, 608px) minmax(0, 608px);
  gap: 64px;
  align-items: center;
}

@media (max-width: 1100px) {
  .bx-detail__hero { padding: 40px 24px; }

  /* Desktop places the cover to the left of the text; the mobile frame stacks it *above*.
     The text column comes first in the markup (which is what gives the correct left/right
     split on desktop), so it is re-ordered rather than duplicated in the markup. */
  .bx-hero {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .bx-hero__media { order: -1; }
}

.bx-hero__media { display: flex; justify-content: center; }

.bx-hero__media img {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 520 / 620;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}

.bx-hero__body { text-align: start; }

.bx-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 32px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: #6b7280;
}

.bx-breadcrumb a { color: #6b7280; }
.bx-breadcrumb a:hover { color: var(--bx-green-900); }
.bx-breadcrumb__current { color: var(--bx-ink-2); font-weight: 700; }

.bx-detail .bx-hero__title {
  margin: 0 0 16px;
  font-family: "Morabba", "iranyekan", sans-serif !important;
  font-size: 56px !important;
  line-height: 1.15;
  font-weight: 900;
  color: var(--bx-ink-2);
}

.bx-hero__lead {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: #374151;
}

/* Popularity badge is a neutral grey chip here, not the lime used in the listing hero. */
.bx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 24px;
  padding: 6px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  background: #f3f4f6;
  color: var(--bx-ink-2);
  font-size: 13px;
  font-weight: 500;
}

.bx-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.bx-taglist a {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f3f4f6;
  font-size: 13px;
  color: #374151;
}

.bx-taglist a:hover { border-color: var(--bx-green-900); color: var(--bx-green-900); }

.bx-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* CTA (frame: Button 202x40, pad 10/16, gap 6, r8, fill #D9EF78, label 16/20 w800 #1C4537).
   The theme styles anchors and buttons and loads after this file, which flattened the fill
   to transparent and the label to #333 — hence the forced declarations. */
.bx-detail .bx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 10px 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  line-height: 20px;
  font-weight: 800 !important;
}

.bx-detail .bx-btn--primary {
  background: var(--bx-lime) !important;
  color: var(--bx-green-900) !important;
}

.bx-detail .bx-btn--primary:hover { filter: brightness(0.96); }

.bx-btn__arrow { flex: none; }

/* Sections below the hero sit on the tinted page ground, 80 side padding, 36 title gap. */
.bx-section {
  margin-inline: calc(50% - 50vw);
  padding: 80px;
  background: var(--bx-surface-2);
}

.bx-section > * { max-width: 1280px; margin-inline: auto; }

@media (max-width: 1100px) {
  .bx-section { padding: 40px 24px; }
}

.bx-detail .bx-section__title {
  margin: 0 0 36px;
  font-family: "Morabba", "iranyekan", sans-serif !important;
  font-size: 32px !important;
  line-height: 1.3;
  font-weight: 900;
  color: var(--bx-green-900);
}

/* Gallery cards: 280 wide, r16, white with a hairline border. */
.bx-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
  justify-content: center;
  gap: 24px;
}

.bx-example {
  margin: 0;
  border: 1px solid var(--bx-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.bx-example img {
  width: 100%;
  aspect-ratio: 280 / 335;
  object-fit: cover;
  display: block;
}

/* About: inner card 1280 wide, pad 48, r24, white on #F5F5F5. */
.bx-about { background: var(--bx-grid-bg); }

.bx-about__body {
  background: #fff;
  border: 1px solid var(--bx-border);
  border-radius: 24px;
  padding: 48px;
  line-height: 2;
  font-size: 15px;
  color: #374151;
}

@media (max-width: 720px) {
  .bx-about__body { padding: 24px; }
}

.bx-stats {
  margin-inline: calc(50% - 50vw);
  padding: 40px 80px 80px;
  background: var(--bx-surface-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.bx-stat {
  background: #f7faf0;
  border: 1px solid var(--bx-border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}

.bx-stat__value {
  display: block;
  font-family: "Morabba", "iranyekan", sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--bx-ink-2);
}

.bx-stat__label { display: block; margin-top: 6px; font-size: 13px; color: var(--bx-muted); }

.bx-grid--related {
  grid-template-columns: repeat(auto-fit, 280px);
  justify-content: center;
  gap: 20px;
}

/* ---------------------------------------------------------------- chip icon */

.bx-pill { gap: 6px; }
.bx-pill__icon { flex: none; }

/* ---------------------------------------------------------------- mobile
   Frame 3606:5944 (390 wide) is not the desktop frame scaled down — it has its own type
   scale, its own paddings, a section heading the desktop lacks, and a two-column masonry
   with variable image heights instead of fixed 280x320 tiles. Values below are that
   frame's, not guesses. */

@media (max-width: 720px) {
  /* Hero_Section: pad 32/16/28/16, gap 20 — and #1C4537, a different green from desktop. */
  .bx-hero-band {
    padding: 32px 16px 28px;
    background: var(--bx-green-900);
  }

  .bx-hero-band__inner { gap: 20px; }

  /* LiveBadge 4/10, gap 4, translucent with a hairline. */
  .bx-live {
    padding: 4px 10px;
    gap: 4px;
    background: rgb(28 69 55 / 90%);
    border: 1px solid rgb(255 255 255 / 10%);
    font-size: 11px;
    line-height: 14px;
  }

  .bx-studio .bx-hero-band__title {
    font-size: 26px !important;
    line-height: 33px;
  }

  .bx-hero-band__lead {
    margin-top: 0;
    font-size: 13px;
    line-height: 19px;
    font-weight: 400;
  }

  /* Search_Bar 358x45: pad 6/11/6/6, gap 10; button 74x33 r20; placeholder 12/15. */
  .bx-search {
    gap: 10px;
    padding: 6px 11px 6px 6px;
  }

  .bx-studio .bx-search__submit {
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    line-height: 16px;
  }

  .bx-studio .bx-search__input { font-size: 12px !important; line-height: 15px; }

  .bx-popular { margin-top: 0; }

  /* Categories_Section: pad 20/16/12/16, gap 12, and a heading the desktop frame omits. */
  .bx-catbar {
    padding: 20px 16px 12px;
    border-block: 0;
    background: transparent;
  }

  .bx-catbar__title {
    display: block;
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
    color: var(--bx-green-900);
  }

  .bx-catbar__scroll { gap: 8px; }

  /* Category_Pill: 28 high, pad 6/12, 12/15 w500. */
  .bx-pill {
    height: 28px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 15px;
  }

  .bx-pill__icon { width: 14px; height: 14px; }

  /* Grid_Section pad 0/16/24/16; Two_Column_Grid gap 12 with 173-wide columns. Column-flow
     keeps the staggered heights of the frame instead of locking every tile to one ratio. */
  .bx-gridsection {
    padding: 0 16px 24px;
    background: var(--bx-surface-2);
  }

  .bx-grid {
    display: block;
    columns: 2;
    column-gap: 12px;
  }

  .bx-card {
    break-inside: avoid;
    margin-bottom: 12px;
  }

  /* Image_Area heights vary per card in the frame; letting the cover keep its own ratio is
     what produces that masonry rather than a uniform crop. */
  .bx-card__media { aspect-ratio: auto; }
  .bx-card__img { height: auto; aspect-ratio: 173 / 200; }

  /* Card_Footer: pad 10, gap 4. */
  .bx-card__body { padding: 10px; gap: 4px; }
  .bx-card__title { font-size: 12px; line-height: 16px; }
  .bx-card__desc { font-size: 10px; line-height: 13px; }

  .bx-card__hover-title { font-size: 14px; line-height: 18px; }
  .bx-card__cta { font-size: 12px; padding: 6px 12px; }
}

/* ---------------------------------------------------------------- detail, mobile
   Frame 3606:6535 (390 wide). The detail page had no mobile block at all — it inherited
   the desktop type scale, so the h1 rendered at 56px on a 375px screen and the cover kept
   its 520x620 portrait ratio inset by the desktop padding.

   Values below come from the frame's SVG export (text left live, so font-size is read
   rather than inferred):

     breadcrumb   IRANYekanX 11        #6B7280, current #111827 bold
     h1           Morabba    28        #111827
     lead         IRANYekanX 14/22     #374151
     tag pill     IRANYekanX 12        in a 27-tall r13.5 chip
     CTA label    IRANYekanX 16        #1C4537 on #D9EF78, 350x40 r8
     section head Morabba    20        #1C4537
     about body   IRANYekanX 14/24     #5A615D

   The content column runs x 20..370, hence 20px side padding; the cover is full-bleed. */

@media (max-width: 720px) {
  /* The cover runs edge to edge here, so the hero band carries no side padding and each
     text block pays for its own. */
  .bx-detail__hero {
    padding: 0 0 28px;
  }

  .bx-hero { gap: 22px; }

  .bx-hero__body { padding: 0 20px; }

  /* Full-bleed and near-square, not the desktop 520x620 portrait: the frame's cover rect is
     `x=0 y=56 390x380`. Dropping max-width is what lets it reach the edges; the radius goes
     with it. */
  .bx-hero__media img {
    max-width: none;
    aspect-ratio: 390 / 380;
    border-radius: 0;
  }

  .bx-breadcrumb {
    margin-bottom: 26px;
    font-size: 11px;
    line-height: 15px;
  }

  .bx-detail .bx-hero__title {
    font-size: 28px !important;
    line-height: 1.15;
    margin-bottom: 17px;
  }

  .bx-hero__lead {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 22px;
  }

  .bx-badge { margin-bottom: 14px; }

  /* Tag pills are 27 tall with a 13.5 radius in the frame, against 34 on desktop. */
  .bx-taglist li a {
    height: 27px;
    padding: 0 12px;
    border-radius: 13.5px;
    font-size: 12px;
    line-height: 27px;
  }

  /* The frame stretches the CTA across the content column; the desktop rule sizes it to
     its label, which leaves it stranded at 240px on a phone. */
  .bx-actions { display: block; }

  .bx-detail .bx-btn--primary {
    display: flex;
    width: 100%;
  }

  .bx-section { padding: 32px 20px; }

  .bx-about__body {
    padding: 20px;
    font-size: 14px;
    line-height: 24px;
  }

  .bx-detail .bx-section__title {
    margin-bottom: 20px;
    font-size: 20px !important;
    line-height: 26px;
  }

  /* The frame lays these out as masonry, not a uniform grid: one full-width card (350x263,
     image 350x210) followed by two 169-wide columns with a 12 gutter whose image heights
     vary per card. Columns reproduce that; a grid would force one crop height on all of
     them. Card radius is 12 here, not the desktop 16. */
  .bx-examples {
    display: block;
    columns: 2;
    column-gap: 12px;
  }

  .bx-example {
    break-inside: avoid;
    margin-bottom: 12px;
    border-radius: 12px;
  }

  .bx-example img { aspect-ratio: 169 / 160; }

  /* The first card spans both columns, as in the frame. `columns` cannot span, so it is
     lifted out of the column flow. */
  .bx-examples > .bx-example:first-child {
    column-span: all;
    margin-bottom: 12px;
  }

  .bx-examples > .bx-example:first-child img { aspect-ratio: 350 / 210; }

  .bx-grid--related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* Load-more is auto-triggered by studio.js; the link stays for crawlers and for anyone
   without JavaScript. Only the loading state needs styling. */
.bx-loadmore.is-loading .bx-loadmore__btn {
  opacity: 0.55;
  pointer-events: none;
}