/* ==========================================================================
   Pulsar Theme — Shortcode Styles
   Loaded async on singular pages that contain shortcodes.
   ========================================================================== */

/* --- [app] App Store card --- */

/* tabnav styles inlined by class-shortcode-tabnav.php (works on all templates) */

/* --- [video] inline mp4 (lazy + autoplay) --- */
.pls-video{display:block;margin:1.4em auto;max-width:100%;width:var(--pls-video-w,100%);aspect-ratio:var(--pls-video-ar,16/9);background:#000;border-radius:var(--pls-video-radius,var(--pls-radius));overflow:hidden;line-height:0;position:relative}
/* The corners of a video on a small screen, and inside the in-app browsers.
   --pls-video-radius-mobile if the page sets one, otherwise it falls back to
   the video radius and then to the theme's own. */
@media (max-width:640px){.pls-video{border-radius:var(--pls-video-radius-mobile,var(--pls-video-radius,var(--pls-radius)))}}
.pls-video video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.pls-video__caption{margin:8px 4px 0;font-size:13px;line-height:1.4;color:var(--pls-mute);text-align:center;font-style:italic}
.pls-video--auto video{cursor:default}
.pls-video--controls video{cursor:pointer}
/* Central play overlay: it covers the player, so a click anywhere starts it. */
.pls-video__play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.28));cursor:pointer;transition:opacity .25s ease;-webkit-tap-highlight-color:transparent}
.pls-video__play-bg{position:absolute;width:84px;height:84px;border-radius:50%;background:rgb(99 107 126 / 55%);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .15s ease,background .15s ease}
.pls-video__play-icon{position:relative;width:38px;height:38px;margin-left:4px;fill:#fff}
.pls-video__play:hover .pls-video__play-bg{background:var(--pls-brand,#1e63d4);transform:scale(1.08)}
.pls-video__play:focus-visible{outline:3px solid var(--pls-brand,#1e63d4);outline-offset:-3px}
.pls-video--playing .pls-video__play{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.pls-video__play,.pls-video__play-bg{transition:none}}
.pls-video[data-pls-video-loading="1"]::after{content:"";position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:pls-video-spin .8s linear infinite}
@keyframes pls-video-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pls-video--auto video{display:block}.pls-video[data-pls-video-loading="1"]::after{animation:none}}

/* Kill the per item vertical margin (list items carry margin:1.4em 0
   for standalone use); inside the deals grid the grid `gap` already controls spacing. */

@keyframes pls-skel-shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}

/* The placeholder filter bar is gone: the skeleton is handled by
   .tabnav-skeleton renderizzato in PHP da class-template-renderer.php. */

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ── Shortcode blocks ────────────────────────────────────────────────
   [read] [read-also] · [button] [menu-button] · [horizontal-menu]
   [section-title] · [app] · [product] · [timed-content]
   Every colour, radius and size comes from the panel's own tokens. */

/* ── [read] / [read-also] ─────────────────────────────────────────────
   A band across the column rather than a framed card: two hairlines and a
   picture, the way a printed page would set an aside. The whole band is one
   link, so there is no dead corner and nothing inside competes for the click. */
.pls-readcard{margin:var(--pls-sp-lg) 0}
.pls-readcard__inner{position:relative;display:flex;align-items:stretch;gap:18px;
  padding:16px 14px;border-top:1px solid var(--pls-border-soft);border-bottom:1px solid var(--pls-border-soft);
  color:inherit;text-decoration:none;
  transition:background .25s ease,border-color .25s ease}
a.pls-readcard__inner:hover{background:var(--pls-brand-soft);border-color:transparent}

.pls-readcard__media{flex:0 0 220px;align-self:center;overflow:hidden;border-radius:calc(10px * var(--pls-r));line-height:0;
  border:1px solid var(--pls-border-soft);background:var(--pls-bg)}
.pls-readcard__media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  transition:transform .35s ease}
/* No picture: the frame stays, drawn light, with the mark of an image in it.
   Without this the band collapsed to a line of text and the same shortcode
   looked like two different things on the same page. */
.pls-readcard__media--empty{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;
  background:var(--pls-bg);border-style:dashed;color:var(--pls-mute);opacity:.7}
a.pls-readcard__inner:hover .pls-readcard__media img{transform:scale(1.04)}

.pls-readcard__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:7px}
.pls-readcard__label{align-self:flex-start;display:inline-block;padding:3px 8px;border-radius:calc(4px * var(--pls-r));
  background:var(--pls-brand-soft);color:var(--pls-brand);
  font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;line-height:1.3}
a.pls-readcard__inner:hover .pls-readcard__label{background:var(--pls-surface)}
.pls-readcard__title{display:block;font-size:18px;line-height:1.35;font-weight:700;letter-spacing:-.25px;
  color:var(--pls-ink);transition:color .2s ease;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
a.pls-readcard__inner:hover .pls-readcard__title{color:var(--pls-brand)}
.pls-readcard__text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:var(--pls-card-excerpt-size);line-height:1.5;color:var(--pls-ink2)}
.pls-readcard__meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--pls-mute)}
.pls-readcard__dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;flex:0 0 auto}
/* The comment count is drawn the way the cards draw it: the icon and the
   number, zero included, so "none" is told apart from "not counted". */
.pls-readcard__comments{display:inline-flex;align-items:center;gap:4px;line-height:1}

/* The arrow is the only ornament: it sits quiet and slides on hover. */
.pls-readcard__go{flex:0 0 auto;align-self:center;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;color:var(--pls-mute);background:transparent;
  transition:background .2s ease,color .2s ease,transform .25s ease}
a.pls-readcard__inner:hover .pls-readcard__go{background:var(--pls-brand);color:#fff;transform:translateX(3px)}

/* [read] with several ids draws several bands: they touch, so the bottom rule
   of one is the top rule of the next. The margin above the first and below the
   last is what separates the group from the text. */
.pls-readcard--single+.pls-readcard--single{margin-top:0}
.pls-readcard--single+.pls-readcard--single .pls-readcard__inner{border-top:0}
/* And the margin BELOW the one before, which is the half that was still there:
   adjacent margins collapse to the larger of the two, so zeroing only the top of
   the second leaves the bottom of the first standing. */
.pls-readcard--single:has(+.pls-readcard--single){margin-bottom:0}

/* Several of them in a row become a list: smaller picture, no excerpt, and
   only the first keeps a top rule so the hairlines never double up. */
.pls-readcard--multi{margin:0}
.pls-readcard--multi+.pls-readcard--multi .pls-readcard__inner{border-top:0}
.pls-readcard--multi .pls-readcard__inner{padding-top:12px;padding-bottom:12px;gap:14px}
.pls-readcard--multi .pls-readcard__media{flex-basis:120px}
.pls-readcard--multi .pls-readcard__title{font-size:15.5px;-webkit-line-clamp:2}
.pls-readcard--multi .pls-readcard__text{display:none}

@media(max-width:720px){
  .pls-readcard__inner{gap:14px;padding:14px 12px}
  /* On a phone the picture is square: beside two lines of title a 16:9 leaves a
     band of empty space under it, and a square fills the height of the text. */
  .pls-readcard__media{flex-basis:96px;border-radius:calc(8px * var(--pls-r));align-self:center}
  .pls-readcard__media img,
  .pls-readcard__media picture{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
  .pls-readcard__media--empty{aspect-ratio:1/1}
  .pls-readcard__title{font-size:16px;-webkit-line-clamp:3}
  .pls-readcard__text{display:none}
  /* On a phone the arrow would steal room from the title: the whole band is
     the link anyway, so it goes. */
  .pls-readcard__go{display:none}
}

/* ── [button] / [menu-button] ─────────────────────────────────────────
   A row that behaves like a button: nothing but a tile, some words and a
   chevron, until you touch it and the row lights up. */
.pls-button-card-link{display:block;color:inherit;text-decoration:none}
.pls-button-card{position:relative;display:flex;align-items:center;gap:14px;
  margin:var(--pls-sp-md) 0;padding:14px;border-radius:var(--pls-radius);
  background:transparent;border:1px solid var(--pls-border-soft);
  transition:background .25s ease,border-color .25s ease}
.pls-button-card-link:hover .pls-button-card,
.pls-button-card:hover{background:var(--pls-brand-soft);border-color:transparent}

.pls-button-card__img{flex:0 0 108px;overflow:hidden;border-radius:calc(10px * var(--pls-r));line-height:0;border:1px solid var(--pls-border-soft)}
.pls-button-card__img img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .35s ease}
.pls-button-card-link:hover .pls-button-card__img img,
.pls-button-card:hover .pls-button-card__img img{transform:scale(1.04)}
.pls-button-card__icon{flex:0 0 52px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  border-radius:calc(14px * var(--pls-r));background:var(--pls-bg);border:1px solid var(--pls-border-soft);overflow:hidden}
.pls-button-card__icon img{width:100%;height:100%;object-fit:cover}

.pls-button-card__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
/* When the words are wrapped in their own link, that link is the block the two
   lines live in, and an inline span takes the block's strut rather than its own
   line-height. Making the link the column puts each line back in charge. */
.pls-button-card__body > .pls-button-card-link{display:flex;flex-direction:column;gap:2px;line-height:1.3}
/* The two small lines set their own line-height: without it they inherit the
   one of the article, which some presets take up to 1.8 — on a 10.5px line that
   is nine pixels of leading, and it reads as a margin above the title. */
.pls-button-card__label{font-size:10.5px;line-height:1.3;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--pls-mute)}
.pls-button-card__title{margin:0;font-size:16.5px;line-height:1.3;font-weight:700;letter-spacing:-.2px;color:var(--pls-ink);transition:color .2s ease}
.pls-button-card-link:hover .pls-button-card__title,
.pls-button-card:hover .pls-button-card__title{color:var(--pls-brand)}
.pls-button-card__sub{font-size:13px;line-height:1.35;color:var(--pls-mute)}
.pls-button-card__desc{font-size:var(--pls-card-excerpt-size);line-height:1.5;color:var(--pls-ink2);margin-top:3px}
.pls-button-card__desc--mobile{display:none}
/* The arrow can be wrapped in a link of its own, and a link inside the article
   is painted with the brand colour — which beat the white this circle hands
   down, leaving a red arrow invisible on a red disc. The colour of the disc is
   the one that counts here, so whatever sits in between has to inherit it. */
.pls-button-card__arrow a,
.pls-entry-content .pls-button-card__arrow a{color:inherit;text-decoration:none}
.pls-button-card__arrow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;color:var(--pls-mute);
  transition:background .2s ease,color .2s ease,transform .25s ease}
/* The hover of the arrow, the same one [read] gives its own.
   It cannot hang off the link: depending on how the block is written, the
   whole card is wrapped in one <a> — and then the link is an ancestor of the
   arrow — or the icon and the words carry a link each, and the arrow sits
   outside both. Hanging it off the card covers the two shapes at once. */
.pls-button-card-link:hover .pls-button-card__arrow,
.pls-button-card:hover .pls-button-card__arrow{background:var(--pls-brand);color:#fff;transform:translateX(3px)}

/* --menu: a line in a list of links, so it loses the frame and tightens up. */
.pls-button-card--menu{padding:10px 12px;gap:12px;border-color:transparent;border-bottom:1px solid var(--pls-border-soft);border-radius:0;margin:0}
.pls-button-card--menu .pls-button-card__icon{flex-basis:42px;width:42px;height:42px;border-radius:calc(11px * var(--pls-r))}
.pls-button-card--menu .pls-button-card__title{font-size:15px}
.pls-button-card-link:hover .pls-button-card--menu,
.pls-button-card--menu:hover{border-radius:var(--pls-radius);border-bottom-color:transparent}
.pls-button-card--text{padding:16px 18px}

@media(max-width:720px){
  .pls-button-card{gap:12px;padding:12px}
  .pls-button-card__img{flex-basis:88px}
  .pls-button-card__desc{display:none}
  .pls-button-card__desc--mobile{display:block;font-size:13px;color:var(--pls-ink2);margin-top:3px}
  .pls-button-card__arrow{width:28px;height:28px}
}

/* ── [horizontal-menu] ────────────────────────────────────────────────
   A row that scrolls sideways, with the scroll snapping to each item and the
   right edge fading out, so it reads as "there is more" without a scrollbar. */
.pls-products-menu{display:flex;gap:10px;overflow-x:auto;margin:var(--pls-sp-md) 0;padding:2px 2px 8px;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%)}
.pls-products-menu::-webkit-scrollbar{display:none}
.pls-products-menu__item{position:relative;flex:0 0 116px;scroll-snap-align:start;
  border-radius:var(--pls-radius);transition:background .2s ease}
.pls-products-menu__item:hover{background:var(--pls-brand-soft)}
.pls-products-menu__item>a{display:flex;flex-direction:column;align-items:center;gap:9px;padding:10px 8px 12px;
  color:var(--pls-ink);text-decoration:none}
.pls-products-menu__item img{display:block;width:96px;height:60px;object-fit:cover;border-radius:calc(9px * var(--pls-r));
  border:1px solid var(--pls-border-soft);transition:transform .3s ease}
.pls-products-menu__item:hover img{transform:scale(1.04)}
.pls-products-menu__name{font-size:13px;font-weight:600;line-height:1.25;text-align:center;color:var(--pls-ink)}
.pls-products-menu__item:hover .pls-products-menu__name{color:var(--pls-brand)}
.pls-products-menu__badge{position:absolute;top:6px;right:10px;
  font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#fff;
  background:var(--pls-accent);padding:2px 6px;border-radius:calc(999px * var(--pls-r));box-shadow:var(--pls-shadow-sm)}

/* ── [section-title] ──────────────────────────────────────────────────
   A pill that sits on a hairline running the width of the column, the way the
   theme sets the heading of a homepage block. */
.pls-product-title{display:flex;align-items:center;gap:14px;margin:var(--pls-sp-2xl) 0 var(--pls-sp-md)}
.pls-product-title::after{content:"";flex:1 1 auto;height:1px;background:var(--pls-border)}
/* It is a heading now, so the browser's own size and margins are cleared:
   what it looks like is decided here, as it was before. */
.pls-product-title__badge{margin:0;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;background:var(--pls-brand);color:#fff;border-radius:var(--pls-radius-sm);
  font-size:14.5px;font-weight:700;letter-spacing:-.2px;box-shadow:var(--pls-shadow-sm)}
.pls-product-title__icon{width:15px;height:15px;flex:0 0 auto}
.pls-product-title__badge svg{stroke:currentColor}
@media(max-width:720px){
  .pls-product-title{margin-top:var(--pls-sp-xl)}
  .pls-product-title__badge{font-size:13.5px;padding:7px 14px}
}

/* ── [app] ────────────────────────────────────────────────────────────
   The icon does the talking, so it gets the corner radius Apple gives it and
   a shadow of its own; everything else stays quiet around it. */
.pls-appcard{position:relative;display:flex;align-items:center;gap:16px;
  margin:var(--pls-sp-lg) 0;padding:16px;border-radius:var(--pls-radius-lg);
  background:var(--pls-surface);border:1px solid var(--pls-border-soft);
  transition:box-shadow .25s ease}
.pls-appcard:hover{box-shadow:var(--pls-shadow-md)}
.pls-appcard__icon{flex:0 0 68px}
.pls-appcard__icon img{display:block;width:68px;height:68px;border-radius:16px;object-fit:cover;
  border:1px solid var(--pls-border-soft);box-shadow:var(--pls-shadow-sm)}
.pls-appcard__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.pls-appcard__name{margin:0;font-size:17.5px;line-height:1.25;font-weight:700;letter-spacing:-.3px;color:var(--pls-ink)}
.pls-appcard__dev{font-size:13px;color:var(--pls-mute)}
.pls-appcard__rating{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--pls-mute);margin-top:3px}
/* The stars are drawn by clipping a gold row over a grey one, so half a star
   is really half — no glyph pretending to be one. */
.pls-appcard__stars{position:relative;display:inline-block;font-size:13px;line-height:1;letter-spacing:1.5px;color:var(--pls-border)}
.pls-appcard__stars::before{content:"★★★★★"}
.pls-appcard__stars i{position:absolute;inset:0;overflow:hidden;color:#f5a623;font-style:normal;white-space:nowrap}
.pls-appcard__stars i::before{content:"★★★★★"}
.pls-appcard__score{font-weight:700;color:var(--pls-ink2)}
.pls-appcard__reviews{color:var(--pls-mute)}
.pls-appcard__cta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.pls-appcard__price{font-size:12.5px;font-weight:700;color:var(--pls-mute);text-transform:uppercase;letter-spacing:.4px}
.pls-appcard__btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:var(--pls-radius-sm);
  background:var(--pls-brand);color:#fff;font-size:14px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;
  transition:filter .2s ease,transform .2s ease}
.pls-appcard__btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
@media(max-width:720px){
  .pls-appcard{flex-wrap:wrap;gap:14px;padding:14px}
  .pls-appcard__icon{flex-basis:56px}
  .pls-appcard__icon img{width:56px;height:56px;border-radius:13px}
  .pls-appcard__name{font-size:16px}
  /* The button takes a row of its own and fills it: on a phone it is the target
     for a thumb, and the slot holds either the button or the price, never both. */
  .pls-appcard__cta{flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between;
    border-top:1px solid var(--pls-border-soft);padding-top:12px}
  .pls-appcard__btn{flex:1 1 auto;justify-content:center;padding:12px 22px}
}

/* ── [product] ─────────────────────────────────────────────────────────
   A buy box: the picture on its own white tile, the price set large enough to
   read at a glance, and the saving as a chip beside it. */
.pls-buybox{position:relative;display:flex;align-items:center;gap:18px;
  margin:var(--pls-sp-lg) 0;padding:18px;border-radius:var(--pls-radius-lg);
  background:var(--pls-surface);border:1px solid var(--pls-border-soft);
  transition:box-shadow .25s ease}
.pls-buybox:hover{box-shadow:var(--pls-shadow-md)}
.pls-buybox__img{flex:0 0 124px;display:flex;align-items:center;justify-content:center;
  background:var(--pls-surface);border:1px solid var(--pls-border-soft);border-radius:calc(12px * var(--pls-r));padding:10px}
.pls-buybox__img img{display:block;width:100%;height:auto;max-height:104px;object-fit:contain;
  transition:transform .35s ease}
.pls-buybox:hover .pls-buybox__img img{transform:scale(1.04)}
/* The slot with nothing in it. The height is the one the filled slot works out
   for itself (104px of picture plus its padding and border), written here
   because an empty box has nothing to take its height from — and without it
   the column collapsed and the box laid itself out as if the slot were not
   there, which is the whole thing this avoids. */
.pls-buybox__img--empty{min-height:126px}
.pls-buybox__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.pls-buybox__badge{align-self:flex-start;margin-bottom:2px;padding:3px 9px;border-radius:calc(4px * var(--pls-r));
  background:var(--pls-accent-ink,#bf4f28);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;line-height:1.3}
.pls-buybox__title{margin:0;font-size:17px;line-height:1.35;font-weight:600;letter-spacing:-.2px;color:var(--pls-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pls-buybox__desc{font-size:var(--pls-card-excerpt-size);line-height:1.5;color:var(--pls-ink2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pls-buybox__prices{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-top:3px}
.pls-buybox__price{font-size:21px;font-weight:800;letter-spacing:-.6px;color:var(--pls-ink);
  font-variant-numeric:tabular-nums}
.pls-buybox__was{font-size:14px;color:var(--pls-mute);font-variant-numeric:tabular-nums}
/* The green of the tint is too light to be the lettering as well: the same
   hue darkened carries 4.83:1 on that background, against 2.15:1. */
.pls-buybox__off{font-size:11.5px;font-weight:700;letter-spacing:.2px;color:var(--pls-success-ink,#0f7a4d);
  background:color-mix(in srgb, var(--pls-success,#1fbf75) 12%, transparent);
  padding:3px 8px;border-radius:calc(5px * var(--pls-r))}
.pls-buybox__seller{font-size:12px;color:var(--pls-mute)}
.pls-buybox__cta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.pls-buybox__btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;border-radius:var(--pls-radius-sm);
  background:var(--pls-accent-ink,#bf4f28);color:#fff;font-size:15px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;
  transition:filter .2s ease,transform .2s ease}
.pls-buybox__btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.pls-buybox__note{font-size:11px;line-height:1.45;color:var(--pls-mute);max-width:180px}
@media(max-width:720px){
  .pls-buybox{flex-wrap:wrap;gap:14px;padding:14px}
  /* The photo gets a row of its own, in the middle: beside two lines of a long
     shop title it was a thumbnail squeezed against the edge. */
  .pls-buybox__img{flex:1 1 100%;max-width:132px;margin:0 auto;padding:8px}
  /* The badge follows the photo to the middle: left aligned under a centred
     picture it looked like it had slipped. */
  .pls-buybox__badge{align-self:center}
  .pls-buybox__img img{max-height:96px}
  .pls-buybox__img--empty{min-height:114px}
  .pls-buybox__btn{padding:10px 22px}
  .pls-buybox__title{font-size:16px}
  .pls-buybox__desc{display:none}
  .pls-buybox__price{font-size:21px}
  .pls-buybox__cta{flex:1 1 100%;flex-direction:column;align-items:stretch;text-align:center;
    border-top:1px solid var(--pls-border-soft);padding-top:12px}
  .pls-buybox__note{max-width:none}
}

/* ── [timed-content] ──────────────────────────────────────────────────
   Nothing to draw: it is the article's own content, revealed at its hour. */
.pls-timed-content[hidden]{display:none}

/* Inside an article the theme gives images a generous vertical margin, which is
   right for a picture in the flow and wrong inside a block that frames its own.
   The same goes for the paragraph margins these blocks may enclose. */
.pls-entry-content :is(.pls-readcard,.pls-button-card,.pls-products-menu,.pls-appcard,.pls-buybox) img{margin:0}
.pls-entry-content :is(.pls-readcard,.pls-button-card,.pls-appcard,.pls-buybox) :is(p,h2,h3,h4){margin:0}

/* Links inside an article are painted brand blue by entry-content.css, and that
   rule is more specific than a single class: a blue label on a blue button is
   invisible. These say it again, at a specificity that holds. */
.pls-entry-content :is(.pls-appcard__btn,.pls-buybox__btn),
.pls-entry-content :is(.pls-appcard__btn,.pls-buybox__btn):hover{color:#fff}
.pls-entry-content :is(.pls-readcard__inner,.pls-button-card-link,.pls-products-menu__item a),
.pls-entry-content :is(.pls-readcard__inner,.pls-button-card-link,.pls-products-menu__item a):hover{text-decoration:none}
.pls-entry-content .pls-readcard__inner{color:inherit}
.pls-entry-content .pls-products-menu__item a{color:var(--pls-ink)}

/* --- A post from X, drawn as a card --- */
.pls-xcard{border:1px solid var(--pls-border);border-radius:calc(14px * var(--pls-r));padding:16px;margin:1.5em 0;background:var(--pls-surface)}
.pls-xcard__head{display:flex;align-items:center;gap:10px}
.pls-xcard__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.pls-xcard__who{display:flex;flex-direction:column;min-width:0}
.pls-xcard__name{font-weight:700;font-size:15px;color:var(--pls-ink);line-height:1.2}
.pls-xcard__handle{font-size:13px;color:var(--pls-mute)}
.pls-xcard__text{margin-top:12px;font-size:15.5px;line-height:1.55;color:var(--pls-ink);word-break:break-word}
.pls-xcard__text a{color:var(--pls-brand);text-decoration:none}
.pls-xcard__text a:hover{text-decoration:underline}
/* One photo fills the width; two or more share it, in a grid that stays square
   whatever the pictures are. */
.pls-xcard__media{display:grid;gap:4px;margin-top:12px;border-radius:calc(10px * var(--pls-r));overflow:hidden}
/* A video or a GIF quoted by the post is named here, with a link: the file
   itself is not copied onto the site. */
.pls-xcard__othermedia{margin:12px 0 0;font-size:14px}
.pls-xcard__othermedia a{color:var(--pls-brand);text-decoration:none;font-weight:600}
.pls-xcard__othermedia a:hover{text-decoration:underline}
.pls-xcard__media--2,.pls-xcard__media--4{grid-template-columns:1fr 1fr}
.pls-xcard__media--3{grid-template-columns:1fr 1fr}
.pls-xcard__media--3 .pls-xcard__photo:first-child{grid-row:span 2}
.pls-xcard__photo{width:100%;height:100%;object-fit:cover;display:block;max-height:420px}
.pls-xcard__media--1 .pls-xcard__photo{max-height:none}
.pls-xcard__quote{margin:12px 0 0;padding:12px;border:1px solid var(--pls-border-soft);border-radius:calc(10px * var(--pls-r));background:var(--pls-bg)}
.pls-xcard__quote .pls-xcard__text{margin-top:6px;font-size:14.5px}
.pls-xcard__foot{margin-top:12px;font-size:13px}
.pls-xcard__foot a{color:var(--pls-mute);text-decoration:none}
.pls-xcard__foot a:hover{color:var(--pls-brand)}