/* The `[product-card]` shortcode in an article body
   (src/views/site/shortcodes/ProductCard.tsx): one plan = a featured card,
   two or three = a picker. Sits inside .ar-body, whose link and paragraph
   rules it overrides where it must. */
.pcard { margin: 28px 0; border: 1px solid var(--line-tinted); border-radius: var(--r-xl); background: #fff; overflow: hidden; box-shadow: 0 10px 30px -18px rgba(83, 57, 249, .45); }
.pcard__top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px; background: linear-gradient(120deg, var(--tint-1), #eef4ff); }
.pcard__logo { width: 64px; height: 64px; object-fit: contain; border-radius: var(--r-lg); background: #fff; padding: 10px; flex: none; }
.pcard__image { width: 96px; height: 96px; object-fit: contain; flex: none; }
.pcard__titles { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; min-width: 0; }
.pcard__badge { display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; padding: 3px 10px; border-radius: var(--r-pill); background: var(--color-primary); color: #fff; font-size: .75rem; font-weight: 600; }
.pcard__name { font-size: 1.15rem; font-weight: 600; color: var(--ink-900); line-height: 1.3; }
.pcard__operator { font-size: .875rem; color: var(--ink-600); }
.pcard__specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; margin: 0; background: var(--line-tinted); border-top: 1px solid var(--line-tinted); }
.pcard__specs div { background: #fff; padding: 12px 14px; min-width: 0; }
.pcard__specs dt { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-500); }
.pcard__specs dd { margin: 0; font-weight: 600; color: var(--ink-900); }
.pcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line-tinted); }

.pcard__prices .price--struck { font-size: .875rem; font-weight: 500; color: var(--color-text-soft); }
.pcard__prices .price--sale, .pcard__prices .price:only-child { font-size: 1.35rem; font-weight: 600; color: var(--ink-900); }

/* .ar-body underlines every link; a button is not one. */
.pcard .pcard__buy { border-bottom: 2px solid transparent; padding: .65em 1.6em; font-weight: 600; }
.pcard .pcard__buy.btn-action { color: #fff; }
.pcard .pcard__buy.btn-outline { border-color: var(--color-primary); }
.pcard .pcard__buy.btn-outline:hover { color: #fff; }

/* Picker */
.pcard--picker { border: 0; background: none; box-shadow: none; overflow: visible; display: flex; flex-direction: column; gap: 12px; }
.pcard__heading { font-size: 1.1rem; font-weight: 600; color: var(--ink-900); }
.pcard__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; padding-top: 8px; }
.pcard__plan { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 14px 14px; border: 1px solid var(--line-tinted); border-radius: var(--r-lg); background: #fff; }
.pcard__plan.is-pick { border: 2px solid var(--color-primary); }
.pcard__flag { position: absolute; top: -11px; left: 14px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--color-primary); color: #fff; font-size: .75rem; font-weight: 600; }
.pcard__data { font-size: 1.5rem; font-weight: 700; color: var(--ink-900); line-height: 1.2; }
.pcard__meta { font-size: .875rem; color: var(--ink-600); }
.pcard__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.pcard__plan .pcard__buy { padding: .55em 1.1em; font-size: .9rem; }
/* Out of stock: the plan stays, its price fades and "Buy now" becomes a
   non-interactive label (ProductCard.tsx). */
.pcard .pcard__soldout { display: none; background: var(--color-border, #e3e8ee); color: var(--color-muted, #8a97a6); cursor: not-allowed; pointer-events: none; }
.pcard .is-soldout .pcard__buy:not(.pcard__soldout), .pcard.is-soldout .pcard__buy:not(.pcard__soldout) { display: none; }
.pcard .is-soldout .pcard__soldout, .pcard.is-soldout .pcard__soldout { display: inline-block; }
.pcard .is-soldout .pcard__prices, .pcard.is-soldout .pcard__prices { opacity: .45; }

/* Coverage: a flag strip that opens the full country list (<details>), and the
   picker's "Compare countries" table (ProductCard.tsx). */
.pcard__cov { padding: 14px 18px; border-top: 1px solid var(--line-tinted); }
.pcard__cov summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; cursor: pointer; list-style: none; }
.pcard__cov summary::-webkit-details-marker { display: none; }
.pcard__cov-label { font-size: .875rem; font-weight: 600; color: var(--ink-800); }
.pcard__cov-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pcard__cov .fi { width: 24px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); background-size: cover; flex: none; }
.pcard__cov-more { padding: 3px 10px; border-radius: var(--r-pill); background: var(--tint-1); color: var(--color-primary); font-size: .8rem; font-weight: 600; }
.pcard__cov-open, .pcard__cov[open] .pcard__cov-closed { display: none; }
.pcard__cov[open] .pcard__cov-open { display: inline; }
.pcard__cov:not([open]) .pcard__cov-more:not(:has(.pcard__cov-closed)) { display: none; }
.pcard__cov-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; max-height: 220px; overflow: auto; margin: 12px 0 0; padding: 0; list-style: none; font-size: .875rem; color: var(--ink-700); }
.pcard__cov-list li { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.pcard__cov-list .fi { width: 20px; height: 15px; border-radius: 2px; }
/* Inside a picker plan: no rule, smaller flags, a narrower list. */
.pcard__cov--mini { padding: 0; border: 0; }
.pcard__cov--mini .pcard__cov-label { font-size: .8rem; font-weight: 500; color: var(--ink-600); }
.pcard__cov--mini .pcard__cov-flags { gap: 4px; }
.pcard__cov--mini .fi { width: 18px; height: 13px; border-radius: 2px; }
.pcard__cov--mini .pcard__cov-more { padding: 1px 8px; font-size: .75rem; }
.pcard__cov--mini .pcard__cov-list { grid-template-columns: 1fr; max-height: 180px; }
.pcard__cmp { font-size: .875rem; }
.pcard__cmp summary { cursor: pointer; font-weight: 600; color: var(--color-primary); }
.pcard__cmp table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.pcard__cmp th, .pcard__cmp td { padding: 6px 8px; border-bottom: 1px solid var(--line-tinted); text-align: center; }
.pcard__cmp th:first-child { text-align: left; font-weight: 500; }
.pcard__cmp .fi { width: 20px; height: 15px; margin-right: 8px; border-radius: 2px; vertical-align: -2px; }
.pcard__cmp .is-yes { color: var(--color-sale); font-weight: 700; }
.pcard__cmp .is-no { color: var(--ink-400); }