/* PersianApp Pro — app / game detail page and version history. */

.pa-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--pa-fs-xs); color: var(--pa-muted); margin-bottom: var(--pa-s-4); }
.pa-breadcrumb__separator { opacity: 0.5; }
/* Current page (usually the long SEO title) truncates instead of wrapping onto a second line. */
.pa-breadcrumb [aria-current] { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) { .pa-breadcrumb { font-size: 11px; } .pa-breadcrumb [aria-current] { max-width: 60vw; } }
.pa-breadcrumb a { color: var(--pa-text-2); }

/* Header: icon + facts + download, all above the fold */
.pa-app-head {
	display: grid; grid-template-columns: auto 1fr; gap: var(--pa-s-4);
	padding: var(--pa-s-5); background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-r-xl);
}
.pa-app-head__icon .pa-icon-img { border-radius: 22%; box-shadow: var(--pa-shadow); }
.pa-app-head__title { font-size: var(--pa-fs-lg); line-height: 1.4; }
.pa-app-head__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s-2); margin: var(--pa-s-3) 0 0; font-size: var(--pa-fs-sm); color: var(--pa-muted); }
.pa-app-head__sub a { color: var(--pa-text-2); }
.pa-chip--sm { padding: 0 var(--pa-s-2); font-size: var(--pa-fs-xs); background: var(--pa-surface-2); border: 0; }
.pa-app-head__tagline { margin: var(--pa-s-4) 0 0; color: var(--pa-text-2); font-size: var(--pa-fs-sm); }
/* Stats: uniform tiles, clearly separated from the tagline above. */
/* Stats float in the leftover height: equal air above (from the tagline) and below (to the actions). */
.pa-app-stats { display: flex; flex-wrap: wrap; gap: var(--pa-s-2); margin-block: auto; padding-block: var(--pa-s-6) var(--pa-s-4); }
.pa-app-stats li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 76px; padding: var(--pa-s-2) var(--pa-s-3); background: var(--pa-surface-2); border-radius: var(--pa-r-sm); }
.pa-app-stats strong { font-size: var(--pa-fs-base); line-height: 1.2; white-space: nowrap; }
.pa-app-stats small { font-size: var(--pa-fs-xs); color: var(--pa-muted); white-space: nowrap; }
.pa-app-stats .pa-rating { font-size: var(--pa-fs-base); }
.pa-app-head__cta { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--pa-s-3); }
.pa-btn--lg { min-height: 52px; font-size: var(--pa-fs-base); border-radius: var(--pa-r); }
.pa-btn--lg small { font-weight: 500; opacity: 0.85; }
.pa-btn--violet { background: var(--pa-violet); color: #fff; }
.pa-btn--violet:hover { background: #5b21b6; color: #fff; }
.pa-btn--sm { min-height: 32px; font-size: var(--pa-fs-xs); }
.pa-app-head__nofile { margin: 0; color: var(--pa-muted); }
.pa-app-trust { display: flex; flex-wrap: wrap; gap: var(--pa-s-2) var(--pa-s-4); font-size: var(--pa-fs-xs); color: var(--pa-text-2); }
.pa-app-trust li { display: inline-flex; align-items: center; gap: var(--pa-s-1); }
.pa-app-trust .pa-icon { color: var(--pa-primary-strong); }
/* Body is a flex column so the stats row can float (margin auto) when the download column is taller. */
.pa-app-head__body { display: flex; flex-direction: column; min-width: 0; }
.pa-app-actions { display: flex; flex-wrap: wrap; gap: var(--pa-s-2); margin-top: var(--pa-s-1); }
.pa-app-actions .pa-btn { flex: 1 1 0; min-height: 36px; min-width: 0; padding-inline: var(--pa-s-2); font-size: var(--pa-fs-xs); }
.pa-app-actions .is-active { color: var(--pa-red); border-color: currentColor; }
.pa-app-actions .is-active .pa-icon { fill: currentColor; }
.pa-app-head--compact { grid-template-columns: auto 1fr; }

@media (min-width: 768px) {
	.pa-app-head { grid-template-columns: auto 1fr 300px; }
	.pa-app-head__cta { grid-column: auto; }
	.pa-app-head__title { font-size: var(--pa-fs-xl); }
}

/* Screenshots */
.pa-shots { margin-top: var(--pa-s-4); }
.pa-shots__track { display: flex; gap: var(--pa-s-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--pa-s-2); }
.pa-shots__track::-webkit-scrollbar { display: none; }
.pa-shot { flex: none; scroll-snap-align: start; border-radius: var(--pa-r); overflow: hidden; background: var(--pa-surface-2); }
.pa-shot img { height: 260px; width: auto; display: block; }
.pa-shot--video { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--pa-s-2); width: 150px; height: 260px; background: #0f172a; color: #fff; font-weight: 700; }
.pa-shot--video .pa-icon { width: 40px; height: 40px; }

/* Jump nav */
.pa-jump { position: sticky; top: var(--pa-header-h); z-index: 5; display: flex; gap: var(--pa-s-1); overflow-x: auto; scrollbar-width: none; margin-top: var(--pa-s-4); padding: var(--pa-s-2) 0; background: var(--pa-bg); border-bottom: 1px solid var(--pa-border); }
.pa-jump::-webkit-scrollbar { display: none; }
.pa-jump a { flex: none; padding: var(--pa-s-1) var(--pa-s-3); border-radius: var(--pa-r-full); border: 1px solid var(--pa-border); background: var(--pa-surface); font-size: var(--pa-fs-sm); font-weight: 600; color: var(--pa-text-2); transition: background var(--pa-fast) var(--pa-ease), border-color var(--pa-fast) var(--pa-ease), color var(--pa-fast) var(--pa-ease); }
.pa-jump a:hover { border-color: var(--pa-primary); color: var(--pa-primary-strong); }
.pa-jump a.is-active { background: var(--pa-primary); border-color: var(--pa-primary); color: var(--pa-on-primary); }

/* Layout */
.pa-single__layout { display: grid; gap: var(--pa-s-4); margin-top: var(--pa-s-4); }
.pa-single__main, .pa-single__side { display: flex; flex-direction: column; gap: var(--pa-s-4); min-width: 0; }
.pa-box { padding: var(--pa-s-5); background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-r-lg); scroll-margin-top: calc(var(--pa-header-h) + 56px); }
.pa-box > h2 { display: flex; align-items: center; gap: var(--pa-s-2); font-size: var(--pa-fs-md); margin-bottom: var(--pa-s-3); }
.pa-tag { padding: 0 var(--pa-s-2); border-radius: var(--pa-r-full); background: var(--pa-primary-soft); color: var(--pa-primary-strong); font-size: var(--pa-fs-xs); font-weight: 700; }
.pa-muted { color: var(--pa-muted); font-size: var(--pa-fs-sm); }
@media (min-width: 1024px) {
	.pa-single__layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
	.pa-single__side { position: sticky; top: calc(var(--pa-header-h) + 56px); }
}

/* Content blocks */
.pa-prose { color: var(--pa-text-2); font-size: var(--pa-fs-base); }
.pa-prose h2, .pa-prose h3 { color: var(--pa-text); margin: var(--pa-s-5) 0 var(--pa-s-2); font-size: var(--pa-fs-md); }
.pa-prose ul, .pa-prose ol { padding-inline-start: var(--pa-s-5); margin-bottom: var(--pa-s-4); list-style: disc; }
.pa-prose ol { list-style: decimal; }
.pa-prose img { border-radius: var(--pa-r); }
.pa-features { display: grid; gap: 0; }
.pa-features li { display: flex; gap: var(--pa-s-2); align-items: flex-start; padding: var(--pa-s-2) 0; border-bottom: 1px dashed var(--pa-border); font-size: var(--pa-fs-sm); }
.pa-features li:last-child { border-bottom: 0; }
/* Long lists split into two columns on wide screens so the box stays short. */
@media (min-width: 768px) { .pa-features { grid-template-columns: 1fr 1fr; column-gap: var(--pa-s-6); } .pa-features li:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }
.pa-features .pa-icon { color: var(--pa-primary-strong); margin-top: 3px; }
.pa-changelog { border-inline-start: 3px solid var(--pa-primary); padding-inline-start: var(--pa-s-4); display: grid; gap: var(--pa-s-2); font-size: var(--pa-fs-sm); color: var(--pa-text-2); }
.pa-table { width: 100%; border-collapse: collapse; font-size: var(--pa-fs-sm); }
.pa-table th, .pa-table td { padding: var(--pa-s-2) var(--pa-s-3); text-align: start; border-bottom: 1px solid var(--pa-border); }
.pa-table th { color: var(--pa-muted); font-weight: 600; font-size: var(--pa-fs-xs); }
.pa-table tbody tr:last-child td { border-bottom: 0; }
.pa-steps { display: grid; gap: var(--pa-s-3); counter-reset: step; }
.pa-steps li { display: grid; grid-template-columns: 28px 1fr; gap: var(--pa-s-3); align-items: start; counter-increment: step; }
.pa-steps li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--pa-r-full); background: var(--pa-primary-soft); color: var(--pa-primary-strong); font-weight: 800; font-size: var(--pa-fs-sm); }
.pa-steps strong { display: block; font-size: var(--pa-fs-sm); }
.pa-steps span { font-size: var(--pa-fs-sm); color: var(--pa-text-2); }
.pa-steps li > strong, .pa-steps li > span { grid-column: 2; }
.pa-steps li > span { margin-top: -2px; }
.pa-facts { display: grid; gap: var(--pa-s-2); margin: 0; }
.pa-facts div { display: flex; justify-content: space-between; gap: var(--pa-s-3); font-size: var(--pa-fs-sm); padding-bottom: var(--pa-s-2); border-bottom: 1px dashed var(--pa-border); }
.pa-facts div:last-child { border: 0; padding: 0; }
.pa-facts dt { display: flex; align-items: center; gap: var(--pa-s-2); color: var(--pa-muted); }
.pa-facts dt .pa-icon { width: 16px; height: 16px; color: var(--pa-primary-strong); }
.pa-facts dd { margin: 0; font-weight: 600; text-align: end; }
.pa-facts dd a { color: var(--pa-primary-strong); }
.pa-th { display: inline-flex; align-items: center; gap: 4px; }
.pa-th .pa-icon { width: 14px; height: 14px; color: var(--pa-primary-strong); }

/* Forms */
.pa-form { display: grid; gap: var(--pa-s-3); }
/* Only direct-child labels are rows; nested labels (comment form) stay inline so "*" sits next to the text. */
.pa-form > label, .pa-form__row { display: grid; gap: var(--pa-s-1); margin: 0; font-size: var(--pa-fs-sm); }
.pa-form__row label, .pa-comment-device-fields label, .pa-comment-rating-field legend { display: block; margin-bottom: var(--pa-s-1); font-size: var(--pa-fs-sm); }
.pa-form label > span[aria-hidden="true"], .pa-form legend > span[aria-hidden="true"] { color: var(--pa-red); } /* the required asterisk, not icons */
.pa-form__check { display: flex !important; align-items: center; gap: var(--pa-s-2); font-size: var(--pa-fs-sm); cursor: pointer; }
.pa-form__check input { width: 16px; height: 16px; accent-color: var(--pa-primary); }
.pa-input--sq { border-radius: var(--pa-r-sm); padding: var(--pa-s-2) var(--pa-s-3); min-height: 40px; }
textarea.pa-input--sq { min-height: 96px; resize: vertical; }
.pa-note { padding: var(--pa-s-3); border-radius: var(--pa-r-sm); background: var(--pa-surface-2); font-size: var(--pa-fs-sm); }
.pa-note--ok { background: var(--pa-primary-soft); color: var(--pa-primary-strong); }

/* Reviews */
.pa-reviews__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pa-s-3); margin-bottom: var(--pa-s-4); }
.pa-reviews__head h2 { display: flex; align-items: center; gap: var(--pa-s-2); font-size: var(--pa-fs-md); }
.pa-reviews__score { display: flex; align-items: center; gap: var(--pa-s-2); }
.pa-reviews__score strong { font-size: var(--pa-fs-2xl); }
.pa-reviews__score small { color: var(--pa-muted); font-size: var(--pa-fs-xs); }
/* Comment cards */
.pa-reviews__list { display: grid; gap: var(--pa-s-3); }
.pa-review { padding: var(--pa-s-4); background: var(--pa-surface-2); border-radius: var(--pa-r); }
.pa-review__head { display: flex; align-items: flex-start; gap: var(--pa-s-3); margin-bottom: var(--pa-s-3); }
.pa-review__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pa-review__who strong { display: flex; align-items: center; gap: var(--pa-s-2); font-size: var(--pa-fs-sm); }
.pa-review__who small { display: flex; flex-wrap: wrap; gap: var(--pa-s-3); color: var(--pa-muted); font-size: var(--pa-fs-xs); }
.pa-review__device { display: inline-flex; align-items: center; gap: 4px; }
.pa-review__device .pa-icon { width: 13px; height: 13px; }
.pa-review__avatar { border-radius: 50%; flex: none; }
.pa-review__stars { flex: none; }
.pa-review__body { font-size: var(--pa-fs-sm); line-height: 1.8; color: var(--pa-text); }
.pa-review__body p:last-child { margin: 0; }
.pa-review__to { display: inline-block; margin-bottom: var(--pa-s-1); font-size: var(--pa-fs-xs); color: var(--pa-primary-strong); }
.pa-review__foot { display: flex; justify-content: flex-end; margin-top: var(--pa-s-3); }
.pa-review__foot .comment-reply-link {
	display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 var(--pa-s-3);
	border-radius: var(--pa-r-full); border: 1px solid var(--pa-border); background: var(--pa-surface); font-size: var(--pa-fs-xs); font-weight: 700; color: var(--pa-text-2);
}
.pa-review__foot .comment-reply-link:hover { border-color: var(--pa-primary); color: var(--pa-primary-strong); }
.pa-review__foot .comment-reply-link .pa-icon { width: 14px; height: 14px; transform: scaleX(-1); }

/* Replies: one indented level with a guide line; anything deeper flattens here with an "in reply to" link. */
.pa-reviews__list .children { margin-top: var(--pa-s-3); padding-inline-start: var(--pa-s-5); border-inline-start: 2px solid var(--pa-border); display: grid; gap: var(--pa-s-3); }
.pa-review--reply { background: var(--pa-surface); border: 1px solid var(--pa-border); }
.pa-review--reply .pa-review__avatar { width: 32px; height: 32px; }

/* Reply form: the same form, moved under the comment by core's comment-reply.js */
.pa-review .comment-respond { margin-top: var(--pa-s-3); padding: var(--pa-s-4); background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-r); }
.pa-reviews__form-title { display: flex; align-items: center; gap: var(--pa-s-3); font-size: var(--pa-fs-md); margin: var(--pa-s-6) 0 var(--pa-s-3); }
.pa-review .pa-reviews__form-title { margin-top: 0; font-size: var(--pa-fs-base); }
.pa-reviews__cancel a { font-size: var(--pa-fs-xs); font-weight: 600; color: var(--pa-red); }
.comment-respond.is-reply [data-review-only] { display: none; }
.pa-reviews__form .form-submit { margin: 0; }
.pa-reviews__form select { height: 44px; padding: 0 var(--pa-s-3); border-radius: var(--pa-r-sm); background: var(--pa-surface-2); border: 1px solid transparent; width: 100%; font-size: var(--pa-fs-sm); }
.pa-reviews__form select:focus { outline: none; border-color: var(--pa-primary); }
.pa-comment-rating-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.pa-comment-rating-field > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pa-s-3); }
.pa-comment-rating-field small { display: block; margin-top: var(--pa-s-1); color: var(--pa-muted); font-size: var(--pa-fs-xs); }
.pa-star-picker { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.pa-star-picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.pa-star-picker label { cursor: pointer; color: var(--pa-border-strong); font-size: 28px; line-height: 1; }
.pa-star-picker input:checked ~ label, .pa-star-picker label:hover, .pa-star-picker label:hover ~ label { color: var(--pa-amber); }
.pa-comment-device-fields { display: grid; gap: var(--pa-s-3); }
.pa-comment-device-fields > p, .comment-form-phone-model { display: grid; gap: var(--pa-s-1); margin: 0; font-size: var(--pa-fs-sm); }
.pa-comment-device-fields input[type="text"] { border-radius: var(--pa-r-sm); padding: var(--pa-s-2) var(--pa-s-3); min-height: 40px; background: var(--pa-surface-2); border: 1px solid transparent; width: 100%; }
.pa-comment-device-fields input[type="text"]:focus { outline: none; border-color: var(--pa-primary); }
@media (min-width: 640px) { .pa-comment-device-fields { grid-template-columns: 1fr 1fr; } .comment-form-phone-other { grid-column: 1 / -1; } }

/* Phone-model combobox */
.pa-phone-combobox { position: relative; display: flex; align-items: center; height: 44px; background: var(--pa-surface-2); border: 1px solid transparent; border-radius: var(--pa-r-sm); }
.pa-phone-combobox:focus-within { border-color: var(--pa-primary); background: var(--pa-surface); }
.pa-phone-combobox > .pa-icon, .pa-phone-combobox > svg { width: 18px; height: 18px; margin-inline-start: var(--pa-s-3); color: var(--pa-muted); flex: none; }
.pa-phone-combobox input[type="search"] { flex: 1; min-width: 0; min-height: 38px; padding: 0 var(--pa-s-2); background: none; border: 0; }
.pa-phone-combobox input[type="search"]:focus { outline: none; }
.pa-phone-combobox > button { display: grid; place-items: center; width: 36px; height: 38px; color: var(--pa-muted); }
.pa-phone-combobox > button svg { width: 18px; height: 18px; }
.pa-phone-combobox__list {
	position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 20; max-height: 240px; overflow-y: auto;
	background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: var(--pa-r-sm); box-shadow: var(--pa-shadow-lg); padding: var(--pa-s-1);
}
.pa-phone-combobox__list [role="option"] { display: block; width: 100%; text-align: start; padding: var(--pa-s-2) var(--pa-s-3); border-radius: var(--pa-r-sm); font-size: var(--pa-fs-sm); }
.pa-phone-combobox__list [role="option"]:hover, .pa-phone-combobox__list [aria-selected="true"] { background: var(--pa-primary-soft); color: var(--pa-primary-strong); }
.pa-phone-combobox__list p { margin: 0; padding: var(--pa-s-2) var(--pa-s-3); font-size: var(--pa-fs-xs); color: var(--pa-muted); }
/* Status text is for screen readers; the placeholder already says what to do, and a visible hint made the two columns uneven. */
.pa-phone-model-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pa-comment-device-fields { align-items: end; }

/* Sticky mobile download bar */
.pa-sticky-dl {
	position: fixed; inset-inline: 0; bottom: 0; z-index: var(--pa-z-header);
	background: var(--pa-surface); border-top: 1px solid var(--pa-border); box-shadow: 0 -4px 16px rgb(0 0 0 / 0.08);
	padding-bottom: env(safe-area-inset-bottom);
	animation: pa-rise var(--pa-fast) var(--pa-ease);
}
@keyframes pa-rise { from { transform: translateY(100%); } to { transform: none; } }
.pa-sticky-dl__inner { display: flex; align-items: center; gap: var(--pa-s-3); min-height: 60px; }
.pa-sticky-dl__name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 700; font-size: var(--pa-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-sticky-dl__name small { color: var(--pa-muted); font-weight: 400; font-size: var(--pa-fs-xs); }
body.has-sticky-dl { padding-bottom: 72px; }
@media (min-width: 1024px) { .pa-sticky-dl { display: none; } body.has-sticky-dl { padding-bottom: 0; } }

/* Lightbox */
.pa-lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; }
.pa-lightbox::backdrop { background: rgb(0 0 0 / 0.85); }
.pa-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--pa-r); display: block; }
.pa-lightbox__close { position: fixed; top: var(--pa-s-4); inset-inline-end: var(--pa-s-4); z-index: 1; }
.pa-lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); display: grid; width: 44px; height: 44px; background: rgb(255 255 255 / 0.15); border: 0; color: #fff; backdrop-filter: blur(6px); }
.pa-lightbox__nav:hover { background: rgb(255 255 255 / 0.3); color: #fff; }
.pa-lightbox__nav.pa-carousel__btn--prev { inset-inline-start: var(--pa-s-4); }
.pa-lightbox__nav.pa-carousel__btn--next { inset-inline-end: var(--pa-s-4); }
.pa-lightbox__nav[disabled] { opacity: 0.3; pointer-events: none; }
.pa-lightbox__count { position: fixed; top: var(--pa-s-5); inset-inline: 0; text-align: center; color: #fff; font-size: var(--pa-fs-sm); font-weight: 700; pointer-events: none; }
@media (max-width: 767px) { .pa-lightbox__nav { width: 40px; height: 40px; } }

/* Sticky download bar sits above the mobile bottom nav; neither exists on desktop. */
@media (max-width: 1023px) {
	.pa-sticky-dl { bottom: calc(var(--pa-bottom-nav-h, 0px) + env(safe-area-inset-bottom)); padding-bottom: 0; }
	body.has-sticky-dl { padding-bottom: calc(var(--pa-bottom-nav-h, 0px) + 72px + env(safe-area-inset-bottom)); }
}

/* Mobile detail header: stat tiles as an even 3-column grid, actions stretched across the row, shorter screenshots. */
@media (max-width: 767px) {
	.pa-app-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
	.pa-app-stats li { min-width: 0; }
	.pa-app-actions .pa-btn { flex: 1 1 0; }
	.pa-shot img { height: 200px; }
	.pa-shot--video { height: 200px; width: 120px; }
}

/* Mobile: the body column was squeezed beside the 96px icon (~190px wide), so stats and actions had no room.
   Let the icon float and the text wrap around it; everything from the stats down uses the full card width. */
@media (max-width: 767px) {
	.pa-app-head { display: block; }
	.pa-app-head__icon { float: inline-start; margin: 0 0 var(--pa-s-2) var(--pa-s-4); }
	.pa-app-head__icon .pa-icon-img { width: 80px; height: 80px; }
	.pa-app-head__body { display: block; }
	.pa-app-stats { clear: both; margin-top: var(--pa-s-4); padding-block: var(--pa-s-3) var(--pa-s-4); }
	.pa-app-head__cta { margin-top: var(--pa-s-2); }
}

/* Gallery: centred when it fits ("safe" keeps scrolling sane when it overflows), arrows + count when it does not. */
.pa-shots { position: relative; }
.pa-shots__track { justify-content: safe center; cursor: grab; }
.pa-shots__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.pa-shots__track.is-dragging a { pointer-events: none; }
.pa-shots__count { position: absolute; top: var(--pa-s-2); inset-inline-end: var(--pa-s-2); z-index: 1; padding: 2px var(--pa-s-2); border-radius: var(--pa-r-full); background: rgb(0 0 0 / 0.55); color: #fff; font-size: var(--pa-fs-xs); pointer-events: none; }
.pa-shots .pa-carousel__btn { top: calc(50% - 8px); }
.pa-shots .pa-carousel__btn--prev { inset-inline-start: var(--pa-s-2); }
.pa-shots .pa-carousel__btn--next { inset-inline-end: var(--pa-s-2); }