/* Account4all product selection — built by product-selector/build.py from src/ (218da5ca6013). Do not edit. */

/* ---- styles.package.css ---- */
/* Account4all product selection — design proposal. Customer UI only; scoped to .a4p.
   Tokens follow the Account4all design system / live theme (primary #1f1eff, gradient CTA, 20px cards). */
.a4p, .a4p-bar {
  --a4p-brand: var(--a4a-primary, #1f1eff);
  --a4p-brand-2: #5a59fe;
  --a4p-soft: var(--a4a-primary-soft, #f0f0ff);
  --a4p-ink: var(--a4a-text, #23242b);
  --a4p-muted: var(--a4a-text-secondary, #61616e);
  --a4p-line: #e2e2e8;
  --a4p-line-2: #d3d3dc;
  --a4p-surface: #fff;
  --a4p-subtle: #fafafc;
  --a4p-sale: #b42318;
  --a4p-sale-soft: #fff0ed;
  --a4p-save: #126b32;
  --a4p-warn: #7a4a0c;
  --a4p-warn-bg: #fff8ec;
  --a4p-warn-line: #ecd6b0;
  --a4p-focus: #1f1eff;
  --a4p-radius: 12px;
  font-family: var(--a4a-font-body, iranyekan, Vazirmatn, Tahoma, sans-serif);
  color: var(--a4p-ink);
  -webkit-text-size-adjust: 100%;
}
.a4p *, .a4p *::before, .a4p *::after, .a4p-bar *, .a4p-bar *::before { box-sizing: border-box; }
.a4p :where(h1, h2, h3, p, dl, dd, ul, fieldset, legend, figure) { margin: 0; padding: 0; }
.a4p :where(button, input, select) { font: inherit; color: inherit; }
.a4p bdi { unicode-bidi: isolate; }
.a4p [hidden], .a4p-bar[hidden] { display: none !important; }
.a4p-sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.a4p :focus-visible { outline: 3px solid var(--a4p-focus); outline-offset: 3px; border-radius: 6px; }

/* ---------- Product header (mirrors the live page: image column + summary column) ---------- */
.a4p-product { display: grid; gap: 24px; align-items: start; }
.a4p-media { margin: 0; }
.a4p-media img, .a4p-media .a4p-ph {
  display: block; inline-size: 100%; max-inline-size: 360px; block-size: auto; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 20px; background: #ececf2;
}
.a4p-ph { display: grid !important; place-items: center; color: #4b4b58; font-weight: 800; font-size: 2.6rem; letter-spacing: .02em; }
.a4p-info { min-inline-size: 0; display: flex; flex-direction: column; gap: 16px; }
.a4p-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
.a4p-title { font-size: 1.5rem; line-height: 1.6; font-weight: 800; text-wrap: balance; }
.a4p-support {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-block-size: 44px; padding: 6px 14px;
  border: 1px solid var(--a4p-brand); border-radius: 10px; color: var(--a4p-brand); text-decoration: none; font-size: .9rem; background: #fff;
}
.a4p-support svg { inline-size: 18px; block-size: 18px; }
.a4p-desc { color: #4b4b58; font-size: .95rem; line-height: 2; font-weight: 300; border-block-end: 1px solid var(--a4p-line); padding-block-end: 14px; }
.a4p-desc p + p { margin-block-start: 4px; }

/* Layout responds to available component width, not monitor width.
   Selected direction: two columns on desktop, stacked content on mobile. */
.a4p-host { container: a4ppage / inline-size; min-inline-size: 0; }
.a4p-product { grid-template-columns: 88px minmax(0, 1fr); gap: 18px 14px; }
.a4p-info { display: contents; }
.a4p-media { grid-column: 1; grid-row: 1; position: static; }
.a4p-media img, .a4p-media .a4p-ph { inline-size: 88px; block-size: 88px; max-inline-size: none; border-radius: 16px; object-fit: contain; }
.a4p-head { grid-column: 2; grid-row: 1; flex-direction: column; align-self: center; gap: 6px; }
.a4p-title { font-size: 1.2rem; line-height: 1.65; }
.a4p-support { min-block-size: 44px; padding: 4px 12px; font-size: .85rem; }
.a4p-desc, .a4p-sel, .a4p-checkout { grid-column: 1 / -1; }
.a4p-desc { font-size: .94rem; line-height: 1.85; }
.a4p-desc p + p { margin-block-start: 6px; }
.a4p-checkout { position: static; }
@container a4ppage (max-width: 340px) {
  .a4p-product { grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; }
  .a4p-media img, .a4p-media .a4p-ph { inline-size: 76px; block-size: 76px; }
  .a4p-title { font-size: 1.1rem; }
}
@container a4ppage (min-width: 720px) {
  .a4p-product { grid-template-columns: minmax(180px, 22%) minmax(0, 1fr); gap: 20px 28px; }
  .a4p-media { grid-column: 1; grid-row: 1 / span 4; position: sticky; inset-block-start: var(--a4p-sticky-top, 24px); }
  .a4p-media img, .a4p-media .a4p-ph { inline-size: 100%; block-size: auto; aspect-ratio: 1; }
  .a4p-head { grid-column: 2; grid-row: 1; flex-direction: row; align-items: start; }
  .a4p-title { font-size: 1.5rem; }
  .a4p-desc { grid-column: 2; grid-row: 2; }
  .a4p-sel { grid-column: 2; grid-row: 3; }
  .a4p-checkout { grid-column: 2; grid-row: 4; }
}
/* ---------- Selector card ---------- */
.a4p-sel { container: a4psel / inline-size; background: var(--a4p-surface); border: 1px solid var(--a4p-line); border-radius: 20px; padding: 20px; min-inline-size: 0; scroll-margin-block-start: 16px; }
.a4p-sel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 16px; }
.a4p-sel__title { font-size: 1.05rem; font-weight: 800; line-height: 1.6; min-inline-size: 0; }
.a4p-reset { white-space: nowrap; flex-shrink: 0; border: 0; background: none; color: var(--a4p-brand); font-size: .85rem; min-block-size: 44px; padding: 0 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.a4p-reset:disabled { color: var(--a4p-muted); text-decoration: none; cursor: default; }
.a4p-choices { display: flex; flex-direction: column; gap: 22px; min-inline-size: 0; container: a4pchoices / inline-size; }
@media (max-width: 768px) { .a4p-sel { padding: 16px 12px; border-radius: 16px; } .a4p-sel__title { font-size: .95rem; } .a4p-reset { font-size: .8rem; } }

/* Notices */
.a4p-notice { display: flex; gap: 8px; align-items: flex-start; padding: 11px 13px; border-radius: var(--a4p-radius); background: var(--a4p-warn-bg); border: 1px solid var(--a4p-warn-line); color: var(--a4p-warn); font-size: .875rem; line-height: 1.8; }
.a4p-notice svg { inline-size: 18px; block-size: 18px; flex-shrink: 0; margin-block-start: 3px; }
.a4p-explainer { font-size: .82rem; color: var(--a4p-muted); line-height: 1.85; padding: 9px 12px; background: var(--a4p-subtle); border-inline-start: 3px solid #c6c6f5; border-radius: 0 10px 10px 0; }

/* Fixed facts: plain information, not controls */
.a4p-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.a4p-fact { display: flex; flex-wrap: wrap; gap: 4px; padding: 7px 11px; background: #f5f5f9; border-radius: 9px; font-size: .84rem; line-height: 1.7; max-inline-size: 100%; }
.a4p-fact dt { color: var(--a4p-muted); }
.a4p-fact dt::after { content: ':'; }
.a4p-fact dd { font-weight: 700; overflow-wrap: anywhere; }

/* Groups */
.a4p-group { border: 0; min-inline-size: 0; display: flex; flex-direction: column; gap: 10px; }
.a4p-legend { font-size: .95rem; font-weight: 800; line-height: 1.6; padding: 0; float: inline-start; inline-size: 100%; }
.a4p-legend + * { clear: both; }
.a4p-gnote { font-size: .82rem; color: var(--a4p-muted); line-height: 1.8; margin-block-start: -4px; }
.a4p-opts { display: grid; gap: 8px; }
.a4p-opts--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container a4pchoices (max-width: 15.5rem) { .a4p-opts--compact { grid-template-columns: minmax(0, 1fr); } }
/* Proposed P6c: compact titles longer than 16 JS chars break into 3–4 one-word lines in a half-width card on phones
   (measured: 27 chars → 4 lines / 193px card at 320). Below 26rem of choices width those groups use one column. */
@container a4pchoices (max-width: 25.99rem) { .a4p-opts--compact.a4p-opts--long { grid-template-columns: minmax(0, 1fr); } }

/* Option card: one selected language for compact cards and rows */
.a4p-opt {
  position: relative; display: grid; column-gap: 10px; row-gap: 2px; align-items: start;
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-areas: "radio title" ". desc" ". crit" "state state";
  min-block-size: 56px; padding: 12px 13px; border: 1px solid var(--a4p-line-2); border-radius: var(--a4p-radius);
  background: var(--a4p-surface); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.a4p-opt input { grid-area: radio; inline-size: 18px; block-size: 18px; margin: 4px 0 0; accent-color: var(--a4p-brand); cursor: pointer; }
.a4p-opt__title { grid-area: title; font-size: .95rem; font-weight: 700; line-height: 1.75; overflow-wrap: anywhere; }
.a4p-opt__desc { grid-area: desc; font-size: .84rem; color: var(--a4p-muted); line-height: 1.8; overflow-wrap: anywhere; }
.a4p-opt__crit { grid-area: crit; justify-self: start; margin-block-start: 6px; padding: 4px 9px; border-radius: 7px; background: var(--a4p-warn-bg); color: var(--a4p-warn); font-size: .8rem; line-height: 1.8; }
.a4p-opt__state { grid-area: state; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-block-start: 4px; font-size: .875rem; line-height: 1.7; min-inline-size: 0; }
.a4p-opt__state:empty { display: none; }
.a4p-price-opt { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: .3em; font-weight: 800; font-variant-numeric: tabular-nums; min-inline-size: 0; }
.a4p-num, .a4p-cur, .a4p-from { white-space: nowrap; }
.a4p-cur { font-weight: 500; font-size: .92em; }
.a4p-from { font-weight: 400; color: var(--a4p-muted); }
.a4p-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 6px; background: var(--a4p-sale-soft); color: var(--a4p-sale); font-size: .78rem; font-weight: 800; white-space: nowrap; line-height: 1.7; }
.a4p-status-text { display: inline-flex; gap: 5px; align-items: flex-start; color: var(--a4p-warn); font-size: .84rem; line-height: 1.7; }
.a4p-status-text svg { inline-size: 15px; block-size: 15px; flex-shrink: 0; margin-block-start: 3px; }

/* Rows: price/status on the inline end when there is room */
.a4p-opts--rows .a4p-opt { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "radio title state" ". desc state" ". crit state"; }
.a4p-opts--rows .a4p-opt__state { flex-direction: column; align-items: flex-end; justify-content: center; text-align: end; max-inline-size: 11.5rem; align-self: center; margin: 0; }
.a4p-opts--rows .a4p-price-opt { justify-content: flex-end; }
.a4p-opts--rows .a4p-opt.a4p-opt--quiet { grid-template-columns: 20px minmax(0, 1fr); grid-template-areas: "radio title" ". desc" ". crit"; }
@container a4pchoices (max-width: 22rem) {
  .a4p-opts--rows .a4p-opt { grid-template-columns: 20px minmax(0, 1fr); grid-template-areas: "radio title" ". desc" ". crit" ". state"; }
  .a4p-opts--rows .a4p-price-opt { justify-content: flex-start; }
  .a4p-opts--rows .a4p-opt__state { flex-direction: row; align-items: center; justify-content: flex-start; text-align: start; max-inline-size: none; margin-block-start: 4px; }
}

@media (hover: hover) { .a4p-opt:hover { border-color: #a9a9f0; background: #fbfbff; } }
.a4p-opt:has(input:checked) { border-color: var(--a4p-brand); box-shadow: inset 0 0 0 1px var(--a4p-brand); background: var(--a4p-soft); }
.a4p-opt:has(input:focus-visible) { outline: 3px solid var(--a4p-focus); outline-offset: 2px; }
.a4p-opt input:focus-visible { outline: none; }
.a4p-opt--blocked { border-style: dashed; background: var(--a4p-subtle); }
.a4p-opt--blocked .a4p-opt__title { color: #4b4b58; }
.a4p-opt--blocked:has(input:checked) { background: #f3f3fd; }

/* Conditions of the resolved plan (compact, never truncated) */
.a4p-terms { padding: 12px 14px; border-radius: var(--a4p-radius); background: #f7f7fc; border-inline-start: 3px solid #aaaaff; }
.a4p-terms h3 { font-size: .86rem; font-weight: 800; margin-block-end: 4px; }
.a4p-terms p { font-size: .86rem; line-height: 1.95; color: #3a3b44; overflow-wrap: anywhere; }
.a4p-terms p + p { margin-block-start: 4px; }

/* Checkout summary */
.a4p-checkout { display: flex; flex-direction: column; gap: 12px; min-inline-size: 0; padding: 20px; border: 1px solid var(--a4p-line); border-radius: 20px; background: var(--a4p-surface); box-shadow: 0 6px 24px rgba(25, 24, 70, .05); }
@media (max-width: 768px) { .a4p-checkout { padding: 16px 14px; border-radius: 16px; } }
.a4p-co-title { font-size: 1rem; font-weight: 800; line-height: 1.6; }
.a4p-sum { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; line-height: 1.75; }
.a4p-sum div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.a4p-sum dt { color: var(--a4p-muted); flex-shrink: 0; }
.a4p-sum dd { font-weight: 700; text-align: end; overflow-wrap: anywhere; min-inline-size: 0; }
.a4p-sum-empty { font-size: .84rem; color: var(--a4p-muted); }
.a4p-total { display: flex; flex-direction: column; gap: 2px; padding-block-start: 10px; border-block-start: 1px dashed var(--a4p-line-2); }
.a4p-total.is-sale { padding: 12px; border: 1px solid #dcdcff; border-radius: 12px; background: #f7f7ff; }
.a4p-was { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.a4p-was del { color: var(--a4p-muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.a4p-was .a4p-badge { background: var(--a4p-sale); color: #fff; }
.a4p-total-label { font-size: .8rem; color: var(--a4p-muted); }
.a4p-total-price { font-size: 1.5rem; font-weight: 800; line-height: 1.5; font-variant-numeric: tabular-nums; }
.a4p-total.is-sale .a4p-total-price { color: var(--a4p-brand); font-size: 1.65rem; }
.a4p-saving { color: var(--a4p-save); font-size: .84rem; font-weight: 700; }
.a4p-msg:empty { display: none; }
.a4p-buy {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; inline-size: 100%; min-block-size: 52px; padding: 12px 20px;
  border: 0; border-radius: 12px; background: linear-gradient(45deg, #0d0eff, var(--a4p-brand-2)); color: #fff; font-weight: 800; font-size: 1rem;
  cursor: pointer; box-shadow: 0 6px 18px rgba(31, 30, 255, .18); touch-action: manipulation;
}
.a4p-buy svg { inline-size: 20px; block-size: 20px; }
.a4p-buy[aria-disabled="true"] { background: #ececf2; color: #5d5d6a; box-shadow: none; }
.a4p-buy[aria-busy="true"] { cursor: progress; opacity: .85; }
.a4p-retry { align-self: flex-start; min-block-size: 44px; padding: 6px 16px; border-radius: 10px; border: 1px solid var(--a4p-brand); background: #fff; color: var(--a4p-brand); cursor: pointer; font-weight: 700; }
.a4p-done { color: var(--a4p-save); font-size: .84rem; }

/* Responsive bottom bar: same state as the checkout; shown only while the checkout is off-screen */
.a4p-bar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-block-start: 1px solid var(--a4p-line);
  box-shadow: 0 -8px 24px rgba(25, 24, 70, .08); font-family: var(--a4a-font-body, iranyekan, Vazirmatn, Tahoma, sans-serif); color: #23242b;
}
.a4p-bar__info { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; line-height: 1.6; }
.a4p-bar__price { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.a4p-bar__line { font-size: .78rem; color: #61616e; overflow-wrap: anywhere; }
.a4p-bar .a4p-buy { inline-size: auto; flex-shrink: 0; min-block-size: 48px; padding: 10px 18px; font-size: .95rem; }

/* Native fallback (R01): the theme's own form stays authoritative */
.a4p-native { display: grid; gap: 12px; }
.a4p-native label { display: grid; gap: 4px; font-size: .86rem; font-weight: 700; }
.a4p-native select { min-block-size: 44px; border: 1px solid var(--a4p-line-2); border-radius: 10px; padding: 0 10px; background: #fff; }

@media (prefers-reduced-motion: reduce) { .a4p *, .a4p-bar * { transition: none !important; scroll-behavior: auto !important; } }

/* Review revision: consistent brand CTA, less decoration, accessible small screens. */
.a4p-buy { background: var(--a4p-brand); box-shadow: none; }
.a4p-checkout { box-shadow: none; }
.a4p-choices { gap: 20px; }
.a4p-bar :focus-visible { outline: 3px solid var(--a4p-focus); outline-offset: 3px; }
.a4p-bar [hidden] { display: none !important; }
.a4p-bar__line { display: none; }
.a4p-bar { gap: 10px; }
.a4p-bar__price { font-size: .95rem; overflow-wrap: anywhere; }
.a4p-bar .a4p-buy { padding: 10px 12px; max-inline-size: 48%; white-space: normal; font: inherit; font-weight: 700; }
.a4p-group:disabled { opacity: .75; }
@container a4ppage (max-width: 719px) {
  .a4p-sel, .a4p-checkout { padding: 16px 12px; border-radius: 16px; }
  .a4p-sel__title { font-size: 1rem; }
}
@container a4psel (max-width: 340px) {
  .a4p-sel__head { flex-wrap: wrap; gap: 4px 12px; }
  .a4p-sel__title { flex: 1 1 140px; }
  .a4p-reset { font-size: .8rem; }
}

@media (min-width:1024px) { .a4p-bar { padding-inline: max(24px, calc((100vw - 1280px) / 2)); } }

/* ---- theme.css ---- */
/* ==========================================================================
   Theme integration of the approved two-column product design (body.a4p-on).
   The handoff component CSS above is unchanged; this part maps the theme's server-rendered product markup
   (image, title + support, short description, badges, variations form) onto the same layout contract:
   < 720px component width: 88px image beside the title (76px under 341px), then one column;
   >= 720px: image track minmax(180px, 22%) + one content column; the image is sticky.
   ========================================================================== */

/* Native fields stay in the DOM (they are what is submitted) but are not shown while the selector owns the choice.
   html.a4p-js is set inline before the form and removed again whenever the native form is kept (fallback). */
html.a4p-js body.a4p-on .variations_form .variations,
html.a4p-js body.a4p-on .variations_form .single_variation_wrap,
html.a4p-js body.a4p-on .variations_form .reset_variations,
html.a4p-js body.a4p-on #variations_form_scroll_wrapper { display: none !important; }
.a4p-mount-point[hidden] { display: none !important; }

/* Embedded selector: selector card + checkout in the content column */
.a4p-embed { display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; }
.a4p-embed .a4p-info { display: contents; }
.a4p-embed .a4p-sel, .a4p-embed .a4p-checkout { scroll-margin-block: 16px; }

/* ---------- Page layout ---------- */
body.a4p-on #single-product { container: a4ppage / inline-size; }
body.a4p-on #single-product-wrapper {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start;
  margin: 0 0 1.5rem; padding-block: 0 1.5rem; padding-inline: 0;
}
body.a4p-on #single-product-wrapper > .column { inline-size: auto; flex: none; margin: 0 !important; padding: 0; min-inline-size: 0; }

/* Phones: the image column and the summary dissolve into the grid so the thumbnail can sit beside the title.
   (!important: the theme's Bulma helpers on these elements, e.g. .is-flex, are !important themselves.) */
body.a4p-on #single-product-images,
body.a4p-on #single-product-images > .product-gallery,
body.a4p-on #single-product-wrapper > .summary { display: contents !important; }
body.a4p-on #single-product-wrapper .summary > *,
body.a4p-on #single-product-images > .product-gallery > * { grid-column: 1 / -1; min-inline-size: 0; margin-block: 0; }
body.a4p-on #product-gallery-main-thumbnail {
  grid-column: 1; grid-row: 1; display: block; inline-size: 88px; block-size: 88px; max-inline-size: none;
  aspect-ratio: 1; object-fit: contain; border-radius: 18px; margin: 0 !important; background: #ececf2;
}
body.a4p-on #single-product-wrapper .summary > .title-wrapper { grid-column: 2; grid-row: 1; align-self: center; }

body.a4p-on .title-wrapper {
  display: flex !important; flex-direction: column; align-items: flex-start !important; justify-content: flex-start !important;
  gap: 6px; margin: 0 !important; padding: 0 !important;
}
body.a4p-on .title-wrapper > .column { padding: 0; inline-size: auto; flex: 0 1 auto; max-inline-size: 100%; }
body.a4p-on .title-wrapper .product-title { font-size: 1.25rem !important; line-height: 1.6; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
body.a4p-on .title-wrapper .support_button_wrapper { display: block; inline-size: auto; }
/* Product intro (2026-10-10): a plain link under the title on phones, a bordered button beside it on desktop; 44px. */
body.a4p-on .title-wrapper .support_button {
  float: none !important; display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding: 0 !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 12px;
  color: #1f1eff !important; font-size: .75rem !important; white-space: nowrap;
}
body.a4p-on .title-wrapper .support_button .icon { margin: 0; }
/* Support on phones (owner's mobile-controls package 2026-10-10): an outlined, content-sized button 8px under the title,
   start-aligned with it: 44px, 13px text, 18px icon, 7px gap, 12px side padding, 10px radius, white. Same link, name
   and icon; desktop keeps the bordered button beside the title. */
@container a4ppage (max-width: 719px) {
  body.a4p-on .title-wrapper { gap: 8px; }
  body.a4p-on .title-wrapper .support_button {
    justify-content: center; gap: 7px; padding: 0 12px !important; border: 1px solid #d7d5f1 !important; background: #fff !important;
    border-radius: 10px; font-size: .8125rem !important; text-decoration: none;
  }
  body.a4p-on .title-wrapper .support_button .icon { inline-size: 18px; block-size: 18px; font-size: 18px; flex: 0 0 18px; }
}
body.a4p-on .title-wrapper .support_button:focus-visible { outline: 3px solid #1f1eff; outline-offset: 3px; }
body.a4p-on .a4p-admin-row { display: flex; justify-content: flex-end; margin: 0; }
body.a4p-on .a4p-admin-row .button { float: none !important; margin: 0 !important; }

/* Short description (2026-10-09): one calm card for whatever the shop wrote (paragraphs, lists, links, notes). */
body.a4p-on .summary .short-description.a4p-desc {
  display: block; box-sizing: border-box; padding: 14px 18px; margin: 0 !important;
  background: #fff; border: 1px solid #e5e5e9; border-radius: 16px;
  font-size: .94rem; line-height: 1.95; font-weight: 400; color: #37383c; overflow-wrap: anywhere;
}
body.a4p-on .summary .short-description.a4p-desc > :first-child { margin-block-start: 0; }
body.a4p-on .summary .short-description.a4p-desc > :last-child { margin-block-end: 0; }
body.a4p-on .summary .short-description.a4p-desc p { margin-block: 0 6px; }
body.a4p-on .summary .short-description.a4p-desc :is(ul, ol) { margin-block: 0 6px; padding-inline-start: 1.3em; }
body.a4p-on .summary .short-description.a4p-desc li { margin-block: 0 2px; }
body.a4p-on .summary .short-description.a4p-desc :is(strong, b) { font-weight: 800; color: #23242b; }
body.a4p-on .summary .short-description.a4p-desc a { color: #1f1eff; text-decoration: underline; text-underline-offset: 3px; }
body.a4p-on .summary .short-description.a4p-desc :is(h2, h3, h4) { font-size: 1rem; margin-block: 8px 4px; color: #23242b; }
body.a4p-on .summary .short-description.a4p-desc hr { display: none; }
@container a4ppage (max-width: 719px) { body.a4p-on .summary .short-description.a4p-desc { padding: 12px 14px; font-size: .9rem; } }
body.a4p-on .summary > .product-meta { margin: 0 !important; }
body.a4p-on .summary > .product-meta:not(:has(*)) { display: none !important; }

/* Badges (admin data) as one wrapping row above the selector; empty price paragraph of variable products hidden */
/* single-product/price.php starts with a UTF-8 BOM, printed into this wrapper as a text node (an anonymous flex item).
   Its text is sized to zero, the real children get the normal size back, and spacing uses sibling margins (which skip
   text nodes) instead of gap, so the stray character takes no room. */
body.a4p-on .summary > .columns.is-flex-wrap-reverse { display: flex; flex-direction: column; gap: 0; margin: 0; font-size: 0; line-height: 0; }
body.a4p-on .summary > .columns.is-flex-wrap-reverse > * { font-size: 1rem; line-height: 1.5; }
body.a4p-on .summary > .columns.is-flex-wrap-reverse > p.price { display: none; }
/* Service panel (product intro 2026-10-10): the admin badge records as ONE list, printed after the image.
   Phones: after the description and before the selector (grid order), up to three per row. Desktop: rows under
   the image. No visible heading (the region is named «اطلاعات خرید»); no panel when there are no records. */
body.a4p-on #single-product-images > .a4p-services { grid-column: 1 / -1; order: 2; }
body.a4p-on #single-product-wrapper .summary > .columns.is-flex-wrap-reverse,
body.a4p-on #single-product-wrapper .summary > .columns.is-flex-wrap-reverse ~ * { order: 3; }
body.a4p-on .a4p-services { min-inline-size: 0; margin: 0; padding: 12px; background: #fff; border: 1px solid #e0e2ec; border-radius: 14px; }
body.a4p-on .a4p-services__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.a4p-on .a4p-services__list[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
body.a4p-on .a4p-services__list[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.a4p-on .a4p-service {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-block-size: 44px;
  margin: 0 !important; padding: 0; font-size: .75rem; line-height: 1.8; text-align: center; color: #172139; overflow-wrap: anywhere;
}
body.a4p-on .a4p-services:has([data-count="1"]) { padding: 8px 12px; }
body.a4p-on .a4p-services__list[data-count="1"] .a4p-service { flex-direction: row; text-align: start; gap: 10px; }
body.a4p-on .a4p-service__icon {
  display: grid; place-items: center; flex: none; inline-size: 32px; block-size: 32px; border-radius: 10px; background: #f1f0ff; color: #1f1eff;
}
body.a4p-on .a4p-service__icon svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.a4p-on .a4p-service__icon img { inline-size: 20px; block-size: 20px; object-fit: contain; margin: 0; }
body.a4p-on .a4p-service__text { min-inline-size: 0; }
body.a4p-on .summary .sticky-price-wrapper { inline-size: 100%; flex: none; padding: 0; margin: 0; }
body.a4p-on .summary .sticky-price-wrapper.a4p-enhanced .variations_form:empty { display: none; }

@container a4ppage (max-width: 340px) {
  body.a4p-on #single-product-wrapper { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  body.a4p-on #product-gallery-main-thumbnail { inline-size: 72px; block-size: 72px; }
  body.a4p-on .title-wrapper .product-title { font-size: 1.125rem !important; }
}

/* Desktop / wide host: image track + one continuous content column */
@container a4ppage (min-width: 720px) {
  /* Product intro (2026-10-10): image column 250px, NOT sticky; the service panel 12px under the image. */
  body.a4p-on #single-product-wrapper { grid-template-columns: 250px minmax(0, 1fr); gap: 20px 32px; padding-inline: 0; }
  body.a4p-on #single-product-images { display: flex !important; flex-direction: column; gap: 12px; grid-column: 1; grid-row: 1; position: static; }
  body.a4p-on #single-product-images > .product-gallery { display: block !important; position: static; }
  body.a4p-on #single-product-images > .product-gallery > * { margin-block: 0 8px; }
  body.a4p-on #single-product-images > .product-gallery > :last-child { margin-block-end: 0; }
  body.a4p-on #single-product-images > .a4p-services { order: 0; padding: 6px 16px; border-radius: 18px; }
  body.a4p-on #single-product-images .a4p-services__list[data-count] { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.a4p-on #single-product-images .a4p-services__list[data-count] .a4p-service {
    flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; min-block-size: 54px; padding: 10px 0; font-size: .8125rem; text-align: start;
  }
  body.a4p-on #single-product-images .a4p-service + .a4p-service { border-block-start: 1px solid #eff0f5; }
  body.a4p-on #product-gallery-main-thumbnail { inline-size: 100%; block-size: auto; object-fit: cover; border-radius: 24px; }
  body.a4p-on #single-product-wrapper > .summary { display: flex !important; flex-direction: column; gap: 16px; grid-column: 2; grid-row: 1; }
  body.a4p-on #single-product-wrapper .summary > .title-wrapper { align-self: stretch; }
  body.a4p-on .title-wrapper { flex-direction: row; align-items: flex-start !important; justify-content: space-between !important; gap: 12px 16px; }
  body.a4p-on .title-wrapper .product-title { font-size: clamp(1.375rem, 2.2cqi, 1.75rem) !important; line-height: 1.6; }
  body.a4p-on .title-wrapper .support_button {
    padding: 0 12px !important; border: 1px solid #ceccff !important; background: #fff !important; font-size: .8125rem !important;
  }
}

/* Support widget (Goftino iframe#goftino_w, bottom-right): while the purchase bar is shown the closed bubble moves up
   by the bar's height, so it never sits on the bar; an open chat panel (goftino_openWidget) is left where Goftino puts it. */
html.a4p-bar-on:not(.a4p-chat-open) #goftino_w { translate: 0 calc(-1 * var(--a4p-bar-h, 0px)); }
#goftino_w { transition: translate .2s ease; }
/* Phones/tablets: the closed launcher is hidden while it would cover the selection or purchase area (wc-bridge.js
   startChatGuard decides from real rectangles). The iframe stays loaded, so a chat and its state are untouched. */
html.a4p-chat-hidden:not(.a4p-chat-open) #goftino_w { visibility: hidden !important; pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) { #goftino_w { transition: none; } }

/* Owner's Persian copy, revision 2 (2026-10-09): presentation from the package's refresh.css, without its preview page
   chrome. Scoped one class above the component rules, as the package's .after scope was: readable second line on the
   cards, blocked-card status under the title with a 6px icon gap, neutral (info) guidance for an incomplete choice,
   the seller's availability note, wrapping buttons and bar text (never truncated), summary as label/value columns. */
.a4p .a4p-opt__desc { font-size: .9rem; font-weight: 500; line-height: 1.8; color: #454553; overflow-wrap: anywhere; }
.a4p .a4p-opt__title, .a4p .a4p-gnote, .a4p .a4p-explainer, .a4p .a4p-notice span, .a4p .a4p-sum dd { overflow-wrap: anywhere; }
.a4p .a4p-notice { justify-content: flex-start; gap: 8px; text-align: start; }
.a4p .a4p-notice > svg { flex: 0 0 16px; }
.a4p .a4p-notice--info { background: #f5f5fa; border-color: #e2e2e8; color: #454553; }
.a4p .a4p-notice--info > svg { display: none; }
.a4p .a4p-status-text { display: inline-flex; gap: 6px; justify-content: flex-start; align-items: flex-start; text-align: start; max-inline-size: 100%; inline-size: fit-content; }
.a4p .a4p-status-text > svg { flex: 0 0 15px; inline-size: 15px; block-size: 15px; margin-block-start: 4px; }
.a4p .a4p-status-text > span { min-inline-size: 0; text-align: start; overflow-wrap: anywhere; }
.a4p .a4p-opts--rows .a4p-opt--blocked { grid-template-columns: 20px minmax(0, 1fr); grid-template-areas: "radio title" ". desc" ". crit" ". state"; }
.a4p .a4p-opt--blocked .a4p-opt__state { flex-direction: row; align-items: flex-start; justify-content: flex-start; text-align: start; max-inline-size: none; margin-block-start: 6px; }
.a4p .a4p-availability { border-inline-start: 3px solid #d5a035; background: #fff9ed; padding: 10px 12px; border-radius: 10px; margin-block: 12px; font-size: .875rem; line-height: 1.9; }
.a4p .a4p-availability strong { font-size: .8125rem; }
.a4p .a4p-availability p { margin: 4px 0 0; }
.a4p .a4p-sum > div { display: grid; grid-template-columns: minmax(85px, 120px) minmax(0, 1fr); gap: 8px 16px; }
.a4p .a4p-sum dd { text-align: start; margin: 0; }
.a4p .a4p-buy { white-space: normal; min-block-size: 48px; block-size: auto; line-height: 1.7; padding-block: 12px; }
.a4p .a4p-buy:disabled { cursor: not-allowed; }
.a4p .a4p-msg .a4p-retry { display: inline-flex; align-items: center; min-block-size: 44px; }
@media (max-width: 400px) {
  .a4p .a4p-sum > div { grid-template-columns: 85px minmax(0, 1fr); gap: 8px; }
}

/* Return-to-purchase bar (owner's mobile-controls package 2026-10-10, review-bar.css mapped to the theme): navigation
   back to the summary, not a second buy button. Full width, one thin top border, very light shadow, safe-area padding;
   caption + amount (currency smaller), status text when buying is not possible; outlined pale-brand action with an
   upward arrow (the filled CTA stays the real add-to-cart). Sizes in rem so they follow text enlargement. Hidden from
   1024px up (the script never shows it there either). z-index stays under Bulma's modal (40). */
.a4p-bar {
  flex-wrap: wrap; justify-content: space-between; gap: 12px; color: #172139; background: #fff;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  border-block-start: 1px solid #e0e2ec; box-shadow: 0 -5px 20px rgba(24, 33, 61, .03);
}
.a4p-bar .a4p-bar__info { display: grid; gap: 2px; flex: 1 1 9em; min-inline-size: 0; line-height: normal; }
.a4p-bar .a4p-bar__caption { font-size: .6875rem; line-height: 1.65; color: #596579; }
.a4p-bar .a4p-bar__caption:empty { display: none; }
.a4p-bar .a4p-bar__price { font-size: 1.125rem; line-height: 1.6; font-weight: 800; white-space: normal; overflow-wrap: anywhere; color: #172139; }
.a4p-bar .a4p-bar__price small { font-size: .6875rem; font-weight: 400; }
/* The amount never breaks inside the number (it may wrap before «تومان»); with large text the action takes its own row. */
.a4p-bar .a4p-bar__num { white-space: nowrap; }
.a4p-bar[data-state="incomplete"] .a4p-bar__price, .a4p-bar[data-state="status"] .a4p-bar__price { font-size: .875rem; }
.a4p-bar[data-state="unavailable"] .a4p-bar__price, .a4p-bar[data-state="blocked"] .a4p-bar__price { font-size: .9375rem; color: #92590d; }
.a4p-bar .a4p-bar__action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-block-size: 44px; max-inline-size: 58%;
  padding: 9px 12px; border: 1px solid #bdbaff; border-radius: 11px; background: #f7f6ff; color: #1f1eff; cursor: pointer;
  font-family: inherit; font-size: .8125rem; font-weight: 800; line-height: 1.5; text-align: center; white-space: normal;
}
.a4p-bar .a4p-bar__action svg { inline-size: 18px; block-size: 18px; flex: 0 0 18px; }
.a4p-bar .a4p-bar__action:hover { background: #eeedff; }
.a4p-bar .a4p-bar__action:focus-visible { outline: 3px solid #1f1eff; outline-offset: 2px; }
@media (max-width: 340px) {
  .a4p-bar { gap: 8px; padding-inline: max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  .a4p-bar .a4p-bar__action { font-size: .75rem; padding-inline: 10px; gap: 5px; }
  .a4p-bar .a4p-bar__price { font-size: 1rem; }
}
@media (min-width: 1024px) { .a4p-bar { display: none !important; } }
/* Jump targets of the bar keep a little room under the top edge (sticky notices are cleared by the script). */
body.a4p-on .a4p-checkout, body.a4p-on .a4p-group, body.a4p-on .a4p-msg { scroll-margin-block-start: 16px; }

/* ==========================================================================
   Owner's selector package (2026-10-10, account4all-selector-three-updates-2026-10-10), adapted from its
   compact-selector.css / summary-and-skeleton.css to the theme's DOM:
   1. One shared card (.a4p-compact .a4p-info) for the choices, the optional confirmation, the real variation details,
      messages, total and action. Option grids follow data-density and the card's inner width (container
      compactSelector), never the viewport; titles 15px / 1.75, second lines 14px / 1.7; no clamping, no fixed heights.
   2. No visible «انتخاب شما» heading; 'compact' products get one wrapping confirmation line (.a4p-confirmation).
   3. Server-rendered loading skeleton (.a4p-skel) while html.a4p-loading; without JavaScript the mount never shows.
   Sizes in rem so they follow text enlargement.
   ========================================================================== */
html:not(.a4p-js) .a4p-mount-point { display: none !important; }

.a4p-compact .a4p-info {
  display: flex; flex-direction: column; gap: 0; min-inline-size: 0; padding: 22px;
  border: 1px solid #dedee9; border-radius: 20px; background: #fff; container: compactSelector / inline-size;
}
.a4p-compact .a4p-sel, .a4p-compact .a4p-checkout { border: 0; border-radius: 0; padding: 0; box-shadow: none; background: transparent; position: static; }
.a4p-compact .a4p-sel { display: flex; flex-direction: column; gap: 16px; }
.a4p-compact .a4p-sel__head { margin: 0; }
.a4p-compact .a4p-choices { gap: 20px; }
.a4p-compact .a4p-group { gap: 8px; }
.a4p-compact .a4p-explainer:empty, .a4p-compact .a4p-gnote:empty { display: none; }

/* Option grids (rules in density(), src/ui.js) */
.a4p-compact .a4p-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.a4p-compact .a4p-opts[data-density="roomy"] { grid-template-columns: minmax(0, 1fr); }
@container compactSelector (min-width: 520px) { .a4p-compact .a4p-opts[data-density="roomy"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container compactSelector (min-width: 660px) {
  .a4p-compact .a4p-opts[data-density="short"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .a4p-compact .a4p-opts[data-density="triple"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container compactSelector (max-width: 300px) { .a4p-compact .a4p-opts[data-density="medium"] { grid-template-columns: minmax(0, 1fr); } }

/* Option cards: one card language for every group (the former inline-end "rows" price column becomes a line beneath) */
.a4p-compact .a4p-opt,
.a4p-compact .a4p-opts--rows .a4p-opt,
.a4p-compact .a4p-opts--rows .a4p-opt.a4p-opt--quiet,
.a4p-compact .a4p-opts--rows .a4p-opt--blocked {
  grid-template-columns: 18px minmax(0, 1fr); grid-template-areas: "radio title" ". desc" ". crit" "state state";
  column-gap: 8px; align-content: start; min-block-size: 54px; padding: 10px 12px;
}
.a4p-compact .a4p-opt__title { font-size: .9375rem; line-height: 1.75; }
.a4p-compact .a4p-opt__desc { font-size: .875rem; font-weight: 500; line-height: 1.7; color: #454553; }
.a4p-compact .a4p-opt__state, .a4p-compact .a4p-opts--rows .a4p-opt__state {
  flex-direction: row; align-items: center; justify-content: flex-start; text-align: start; max-inline-size: none;
  align-self: auto; margin-block-start: 3px; gap: 4px 8px;
}
.a4p-compact .a4p-opt__state:empty, .a4p-compact .a4p-opt__crit:empty { display: none; }
.a4p-compact .a4p-price-opt, .a4p-compact .a4p-opts--rows .a4p-price-opt { font-size: .875rem; justify-content: flex-start; }
.a4p-compact .a4p-facts { gap: 6px; }
.a4p-compact .a4p-fact { padding: 6px 9px; }

/* Purchase area inside the same card */
.a4p-compact .a4p-checkout {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  margin-block-start: 18px; padding-block-start: 16px; border-block-start: 1px solid #e2e2eb;
}
.a4p-compact .a4p-checkout > * { grid-column: 1 / -1; }
.a4p-compact .a4p-terms { margin: 0; padding: 10px 12px; font-size: .875rem; line-height: 1.8; }
.a4p-compact .a4p-terms p + p { margin-block-start: 4px; }
.a4p-compact .a4p-availability { margin: 0; }
.a4p-compact .a4p-total, .a4p-compact .a4p-total.is-sale { gap: 3px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.a4p-compact .a4p-total-price, .a4p-compact .a4p-total.is-sale .a4p-total-price { font-size: 1.5rem; color: #1f1eff; }
.a4p-compact .a4p-buy { align-self: end; min-block-size: 48px; padding: 10px 16px; font-size: .9375rem; }
.a4p-compact .a4p-confirmation { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; margin: 0; padding: 0; font-size: .875rem; line-height: 1.85; color: #454553; }
.a4p-compact .a4p-confirmation > span { min-inline-size: 0; overflow-wrap: anywhere; }
.a4p-compact .a4p-confirmation-separator { color: #88889a; }
/* Price and action share a row from 520px of card width; the action spans the row when a message stands before it. */
@container compactSelector (min-width: 520px) {
  .a4p-compact .a4p-checkout { grid-template-columns: minmax(0, 1fr) minmax(220px, .85fr); }
  .a4p-compact .a4p-checkout > [data-a4p="total"] { grid-column: 1; }
  .a4p-compact .a4p-checkout > [data-a4p="buy"] { grid-column: 2; }
  .a4p-compact .a4p-checkout:has(> [data-a4p="msg"]:not(:empty)) > [data-a4p="buy"],
  .a4p-compact .a4p-checkout:has(> [data-a4p="total"][hidden]) > [data-a4p="buy"] { grid-column: 1 / -1; }
}
@container a4ppage (max-width: 719px) {
  .a4p-compact .a4p-info { padding: 16px 12px; border-radius: 16px; }
  .a4p-compact .a4p-opt, .a4p-compact .a4p-opts--rows .a4p-opt, .a4p-compact .a4p-opts--rows .a4p-opt.a4p-opt--quiet,
  .a4p-compact .a4p-opts--rows .a4p-opt--blocked { padding: 10px; }
}

/* Column caps only ever remove columns: a reviewed per-group maximum (data-max-cols, summary-policy.json) and the fit
   check (data-fit-cols, set when a card would overflow). */
.a4p-compact .a4p-opts:is([data-max-cols="1"], [data-fit-cols="1"]) { grid-template-columns: minmax(0, 1fr); }
@container compactSelector (min-width: 660px) {
  .a4p-compact .a4p-opts:is([data-density="short"], [data-density="triple"]):is([data-max-cols="2"], [data-fit-cols="2"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a4p-compact .a4p-opts[data-density="short"]:is([data-max-cols="3"], [data-fit-cols="3"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Loading skeleton (includes/product-selector.php): shown only while html.a4p-loading; same classes and grids as the
   selector, so cards, headings, price lines, plan details, the total and the action take the space the real controls
   will take for the starting choice. Inert: the text inside is present only for its size and drawn transparent under a
   neutral placeholder (no visible price, no selection). Known headings stay readable. Subtle opacity pulse; static
   with reduced motion. */
.a4p-skel { display: none !important; }
html.a4p-loading .a4p-skel { display: flex !important; }
.a4p-skel, .a4p-skel * { transition: none !important; }
.a4p-skel .a4p-opt { cursor: default; border-color: #e2e2ea; border-style: solid; background: #fff; box-shadow: none; }
.a4p-skel .a4p-skel__radio { grid-area: radio; display: block; inline-size: 18px; block-size: 18px; margin-block-start: 4px; border: 1px solid #d8d8e2; border-radius: 50%; }
.a4p-skel :is(.a4p-opt__title, .a4p-opt__desc) { justify-self: start; max-inline-size: 100%; }
.a4p-skel :is(.a4p-opt__title, .a4p-opt__desc, .a4p-fact dd, .a4p-skel__text, .a4p-num, .a4p-cur, .a4p-badge) {
  color: transparent !important; border-radius: 6px; user-select: none; pointer-events: none; background: #eeeef4;
}
/* A gentle opacity pulse on a few blocks (composited, no repaint per frame: cheap while the page is still loading). */
.a4p-skel :is(.a4p-opts, .a4p-gnote, .a4p-facts dd, .a4p-checkout > :not(.a4p-skel__buy)) { animation: a4p-skel 1.6s ease-in-out infinite alternate; }
.a4p-skel .a4p-skel__text { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.a4p-skel .a4p-confirmation-separator { color: transparent; }
.a4p-skel .a4p-notice { background: #fafafc; border-color: #ececf2; }
.a4p-skel .a4p-skel__heading { font-size: .86rem; font-weight: 800; margin-block-end: 4px; }
.a4p-skel .a4p-skel__buy { display: grid; place-items: center; background: #ededf4; color: #626272; box-shadow: none; cursor: wait; }
@container compactSelector (min-width: 520px) {
  .a4p-skel .a4p-checkout > .a4p-total { grid-column: 1; }
  .a4p-skel .a4p-checkout > .a4p-skel__buy { grid-column: 2; }
  .a4p-skel .a4p-checkout:has(> .a4p-msg) > .a4p-skel__buy { grid-column: 1 / -1; }
}
@keyframes a4p-skel { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .a4p-skel * { animation: none !important; } }