/* ATR Product Layout — сторінка огляду товару. Підключається лише разом із mu-plugin atr-product-layout.php. */

body.atr-pl-on {
	--atr-ink: #15171b;
	--atr-text: #3b3f46;
	--atr-muted: #6a6f78;
	--atr-line: #e5e6e9;
	--atr-soft: #f5f6f7;
	--atr-blue: #0a4d8c;
	--atr-yellow: #ebdc14;
	--atr-black: #0b0d10;
	--atr-good: #1d7348;
	--atr-good-bg: #ecf7f0;
	--atr-bad: #a8281f;
	--atr-bad-bg: #fcefee;
	--atr-tip-bg: #fffbe0;
	--atr-tip-line: #e3d41a;
	--atr-top: 72px;
}

/* ---- Шаблон Betheme: одна колонка на всю ширину, без старого сайдбару і порожнього image-блоку ---- */
body.atr-pl-on .mfn-single-product-tmpl-builder .mcb-wrap-338b0b65d,
body.atr-pl-on .mfn-single-product-tmpl-builder .mcb-wrap.one-third:has(.column_table_of_contents) { display: none !important; }
body.atr-pl-on .mfn-single-product-tmpl-builder .mcb-wrap-9ae0b859e,
body.atr-pl-on .mfn-single-product-tmpl-builder .mcb-wrap:has(> .mcb-wrap-inner .column_product_content) { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
body.atr-pl-on .mfn-single-product-tmpl-builder .column_image,
body.atr-pl-on .mfn-single-product-tmpl-builder .column_tag_cloud { display: none !important; }
body.atr-pl-on .mfn-single-product-tmpl-builder .the_content_wrapper { overflow: visible; }
/* Сітка Betheme має колонку auto — без цього довгий рядок розпирає контент ширше за екран. */
body.atr-pl-on .mfn-single-product-tmpl-builder .mcb-wrap-grid > .mcb-wrap-inner { grid-template-columns: minmax(0, 1fr) !important; }
body.atr-pl-on .mfn-single-product-tmpl-builder .mcb-wrap-grid .mcb-wrap,
body.atr-pl-on .mfn-single-product-tmpl-builder .mcb-wrap-grid .mcb-wrap-inner,
body.atr-pl-on .mfn-single-product-tmpl-builder .mcb-wrap-grid .column { min-width: 0; max-width: 100%; }
/* Betheme на мобільному ставить overflow-x: hidden на html/body — це ламає sticky; clip ріже так само, але не створює скрол-контейнер. */
@media (max-width: 900px) {
	html:has(body.atr-pl-on), body.atr-pl-on { overflow-x: clip !important; overflow-y: visible !important; }
}

/* ---- База ---- */
.atr-pl { color: var(--atr-text); font-size: 17px; line-height: 1.65; }
.atr-pl *, .atr-pl *::before, .atr-pl *::after { box-sizing: border-box; }
.atr-pl h1, .atr-pl h2, .atr-pl h3 { color: var(--atr-ink); }
.atr-pl a { color: var(--atr-blue); }
.atr-pl p { margin: 0 0 14px; }
.atr-pl img { max-width: 100%; height: auto; }
.atr-chip { display: inline-block; border: 1px solid var(--atr-line); background: var(--atr-soft); border-radius: 999px; padding: 2px 11px; font-size: 13px; line-height: 1.6; color: var(--atr-text); white-space: nowrap; }
.atr-chip a { color: inherit; text-decoration: none; }

/* ---- Кнопки ---- */
.atr-pl .atr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 16px; line-height: 1.2; border-radius: 10px; padding: 13px 22px; text-decoration: none; transition: filter .15s ease, background-color .15s ease; }
.atr-pl .atr-btn--cta { background: var(--atr-yellow); color: var(--atr-black); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.atr-pl .atr-btn--cta:hover { filter: brightness(.95); color: var(--atr-black); }
.atr-pl .atr-btn--ghost { border: 1px solid var(--atr-line); color: var(--atr-ink); background: #fff; }
.atr-pl .atr-btn--ghost:hover { background: var(--atr-soft); }
.atr-pl .atr-btn--block { width: 100%; }
.atr-pl .atr-btn:focus-visible, .atr-thumb:focus-visible, .atr-toc a:focus-visible, .atr-chipnav a:focus-visible { outline: 2px solid var(--atr-blue); outline-offset: 2px; }

/* ---- Hero ---- */
.atr-hero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; padding: 4px 0 28px; }
.atr-hero--solo { grid-template-columns: minmax(0, 1fr); }
.atr-hero__main { display: grid; gap: 16px; min-width: 0; }
.atr-id { display: flex; gap: 18px; align-items: center; }
.atr-pl .atr-logo { width: 76px; height: 76px; border-radius: 16px; border: 1px solid var(--atr-line); object-fit: cover; flex: none; }
.atr-pl .atr-title { font-size: 46px; line-height: 1.05; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.atr-sub { margin: 6px 0 0 !important; font-size: 14px; color: var(--atr-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.atr-pl .atr-sub a { color: var(--atr-muted); text-decoration: none; }
.atr-pl .atr-sub a:hover { color: var(--atr-blue); }
.atr-pl .atr-lede { font-size: 19px; line-height: 1.5; color: var(--atr-ink); margin: 0; max-width: 62ch; }
.atr-io { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--atr-muted); }
.atr-io__label { margin-right: 2px; }
.atr-io__arrow { margin: 0 4px; }
.atr-cta-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.atr-wish { display: flex; align-items: center; }
.atr-wish .yith-wcwl-add-to-wishlist { margin: 0; }
.atr-wish a { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 12px; border: 1px solid var(--atr-line); border-radius: 10px; color: var(--atr-ink); text-decoration: none; font-size: 0; }
.atr-wish a i, .atr-wish a svg, .atr-wish a img { font-size: 18px; margin: 0 !important; }
.atr-pl .atr-disc { font-size: 12.5px; color: var(--atr-muted); margin: 0; }

.atr-glance { border: 1px solid var(--atr-line); border-radius: 14px; padding: 18px 20px 8px; background: var(--atr-soft); }
.atr-pl .atr-glance__title { margin: 0 0 6px; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--atr-muted); font-weight: 600; }
.atr-glance dl { margin: 0; }
.atr-glance dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--atr-line); font-size: 14.5px; line-height: 1.45; }
.atr-glance dl > div:first-child { border-top: 0; }
.atr-glance dt { color: var(--atr-muted); font-weight: 400; margin: 0; }
.atr-glance dd { margin: 0; color: var(--atr-ink); font-weight: 600; }

/* ---- Галерея ---- */
.atr-gallery { display: grid; gap: 10px; margin-bottom: 10px; }
.atr-shot { border: 1px solid var(--atr-line); border-radius: 14px; overflow: hidden; background: #0d0d10; }
.atr-pl .atr-shot__img { display: block; width: 100%; height: auto; }
.atr-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); gap: 10px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.atr-thumb { border: 1px solid var(--atr-line); border-radius: 8px; padding: 0; overflow: hidden; cursor: pointer; background: #0d0d10; opacity: .65; transition: opacity .15s ease; }
.atr-thumb:hover { opacity: .9; }
.atr-thumb[aria-current="true"] { opacity: 1; outline: 2px solid var(--atr-yellow); outline-offset: 1px; }
.atr-thumb img { display: block; width: 100%; aspect-ratio: 300 / 148; object-fit: cover; }

/* ---- Тіло: текст + липка бокова панель ---- */
.atr-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; padding: 20px 0 40px; align-items: start; }
.atr-main { min-width: 0; max-width: 760px; }
.atr-side { align-self: stretch; }
.atr-side__in { position: sticky; top: var(--atr-top); display: grid; gap: 14px; }
.atr-mini { border: 1px solid var(--atr-line); border-radius: 14px; padding: 16px; display: grid; gap: 12px; background: #fff; }
.atr-mini__h { display: flex; gap: 10px; align-items: center; line-height: 1.25; }
.atr-mini__h b { display: block; color: var(--atr-ink); }
.atr-pl .atr-logo-sm { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--atr-line); object-fit: cover; flex: none; }
.atr-price { display: block; font-size: 13px; color: var(--atr-muted); font-variant-numeric: tabular-nums; }
.atr-toc { border: 1px solid var(--atr-line); border-radius: 14px; padding: 14px 8px 10px; background: #fff; max-height: calc(100vh - var(--atr-top) - 190px); overflow-y: auto; }
.atr-pl .atr-toc__title { margin: 0 10px 6px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--atr-muted); font-weight: 600; }
.atr-pl .atr-toc a { display: block; padding: 5px 10px; border-radius: 6px; font-size: 14px; line-height: 1.35; color: var(--atr-text); text-decoration: none; }
.atr-pl .atr-toc a:hover { background: var(--atr-soft); }
.atr-pl .atr-toc a.is-on { background: var(--atr-soft); color: var(--atr-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--atr-yellow); }

/* ---- Розділи ---- */
.atr-sec { padding-top: 6px; }
.atr-pl .atr-sec h2 { font-size: 30px; line-height: 1.2; margin: 34px 0 14px; font-weight: 600; scroll-margin-top: calc(var(--atr-top) + 16px); text-wrap: balance; }
.atr-pl .atr-sec:first-child h2 { margin-top: 8px; }
.atr-pl .atr-sec h3 { font-size: 18px; line-height: 1.35; margin: 0 0 6px; font-weight: 600; }
.atr-pl .atr-tip { background: var(--atr-tip-bg); border-left: 3px solid var(--atr-tip-line); border-radius: 0 8px 8px 0; padding: 11px 15px; margin: 14px 0; font-size: 15.5px; line-height: 1.55; color: var(--atr-ink); }
.atr-pl .atr-tip strong { font-weight: 600; }

.atr-pl ol.atr-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 16px; counter-reset: atr-step; }
.atr-pl ol.atr-steps > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; margin: 0; padding: 0; counter-increment: atr-step; }
.atr-pl ol.atr-steps > li::before { content: counter(atr-step); grid-row: 1 / span 3; width: 30px; height: 30px; border-radius: 50%; background: var(--atr-black); color: var(--atr-yellow); font-weight: 600; font-size: 14px; display: grid; place-items: center; margin-top: 1px; }
.atr-pl ol.atr-steps > li > * { grid-column: 2; }
.atr-pl ol.atr-steps > li p { margin: 0; }
.atr-pl ol.atr-steps .atr-tip { margin: 10px 0 0; }

.atr-cards, .atr-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.atr-card, .atr-feat { border: 1px solid var(--atr-line); border-radius: 12px; padding: 15px 17px; font-size: 15.5px; line-height: 1.6; min-width: 0; }
.atr-card:last-child:nth-child(odd), .atr-feat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.atr-pl .atr-card p, .atr-pl .atr-feat p { margin: 0; }
.atr-pl .atr-card .atr-tip, .atr-pl .atr-feat .atr-tip { margin: 10px 0 0; font-size: 14px; padding: 8px 11px; border-left-width: 2px; }

.atr-plans { border: 1px solid var(--atr-line); border-radius: 12px; margin: 14px 0; overflow: hidden; }
.atr-plan { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 13px 16px; border-top: 1px solid var(--atr-line); font-size: 15.5px; line-height: 1.55; }
.atr-plan:first-child { border-top: 0; }
.atr-plan:nth-child(even) { background: var(--atr-soft); }
.atr-plan__name { font-weight: 600; color: var(--atr-ink); }
.atr-plan__price { font-weight: 600; color: var(--atr-ink); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.atr-pl .atr-plan p { margin: 0; }
.atr-pl .atr-plan .atr-tip { margin: 8px 0 0; font-size: 14px; }

.atr-pc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.atr-pros, .atr-cons { border-radius: 12px; padding: 16px 18px; font-size: 15.5px; line-height: 1.6; min-width: 0; }
.atr-pros { background: var(--atr-good-bg); }
.atr-cons { background: var(--atr-bad-bg); }
.atr-pl .atr-pros h3 { color: var(--atr-good); }
.atr-pl .atr-cons h3 { color: var(--atr-bad); }
.atr-pl .atr-pros h3::before { content: "+ "; }
.atr-pl .atr-cons h3::before { content: "– "; }
.atr-pl .atr-pros p:last-of-type, .atr-pl .atr-cons p:last-of-type { margin-bottom: 0; }
.atr-pl .atr-pros .atr-tip, .atr-pl .atr-cons .atr-tip { background: rgba(255, 255, 255, .7); margin: 12px 0 0; font-size: 14.5px; }

.atr-pl ul.atr-check { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
.atr-pl ul.atr-check li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; font-size: 15.5px; line-height: 1.5; list-style: none; }
.atr-pl ul.atr-check li::before { content: "✓"; color: var(--atr-good); font-weight: 700; }

.atr-alts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.atr-pl .atr-alt { display: flex; gap: 12px; align-items: center; border: 1px solid var(--atr-line); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--atr-ink); line-height: 1.3; }
.atr-pl .atr-alt:hover { border-color: #cfd2d6; background: var(--atr-soft); }
.atr-pl .atr-alt__logo { width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--atr-line); object-fit: cover; flex: none; }
.atr-alt b { display: block; font-weight: 600; }
.atr-alt__more { font-size: 13px; color: var(--atr-blue); }
.atr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.atr-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.atr-pl blockquote.atr-quote { margin: 0; border: 1px solid var(--atr-line); border-radius: 12px; padding: 14px 16px 14px 44px; position: relative; font-size: 15.5px; line-height: 1.6; font-style: normal; background: #fff; color: var(--atr-text); quotes: none; }
.atr-pl blockquote.atr-quote::before { content: "“"; position: absolute; left: 14px; top: 4px; font-family: Georgia, serif; font-size: 40px; line-height: 1; color: var(--atr-tip-line); background: none; width: auto; height: auto; }
.atr-pl blockquote.atr-quote::after { display: none; }
.atr-pl blockquote.atr-quote p { margin: 0; font-size: inherit; line-height: inherit; font-style: normal; }

.atr-faq { border-top: 1px solid var(--atr-line); }
.atr-faq__item { border-bottom: 1px solid var(--atr-line); padding: 16px 0 4px; }
.atr-pl .atr-faq__item h3 { font-size: 18px; margin: 0 0 6px; }

/* ---- Фінальна CTA, схожі ---- */
.atr-final { margin-top: 36px; background: var(--atr-black); color: #d9dade; border-radius: 16px; padding: 22px 24px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.atr-final .atr-logo-sm { width: 52px; height: 52px; border-radius: 12px; border-color: #2a2d33; }
.atr-final__txt { flex: 1; min-width: 200px; line-height: 1.35; }
.atr-final__txt b { display: block; color: #fff; font-size: 20px; font-weight: 600; }
.atr-final .atr-price { color: #b4b7bd; font-size: 14px; margin-top: 3px; }

.atr-similar { border-top: 1px solid var(--atr-line); padding: 28px 0 8px; }
.atr-pl .atr-similar h2 { font-size: 24px; margin: 0 0 14px; font-weight: 600; }
.atr-similar__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.atr-pl .atr-rel { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; border: 1px solid var(--atr-line); border-radius: 12px; padding: 14px; text-decoration: none; color: var(--atr-text); font-size: 14px; line-height: 1.45; }
.atr-pl .atr-rel:hover { background: var(--atr-soft); }
.atr-pl .atr-rel__logo { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--atr-line); object-fit: cover; }
.atr-rel b { display: block; color: var(--atr-ink); font-size: 15.5px; margin-bottom: 2px; }

/* ---- Мобільна навігація й нижня плашка ---- */
.atr-chipnav { display: none; }
.atr-bar { display: none; }

@media (max-width: 1100px) {
	.atr-hero { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
	.atr-body { grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; }
}

@media (max-width: 900px) {
	.atr-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.atr-body { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
	.atr-main { max-width: none; }
	.atr-side { display: none; }
	.atr-chipnav { position: sticky; top: var(--atr-top); z-index: 20; display: flex; gap: 6px; overflow-x: auto; margin: 8px -16px 0; padding: 8px 16px; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--atr-line); scrollbar-width: none; }
	.atr-chipnav::-webkit-scrollbar { display: none; }
	.atr-pl .atr-chipnav a { flex: none; font-size: 13px; line-height: 1.5; border: 1px solid var(--atr-line); border-radius: 999px; padding: 4px 11px; color: var(--atr-text); text-decoration: none; white-space: nowrap; max-width: 75vw; overflow: hidden; text-overflow: ellipsis; }
	.atr-pl .atr-chipnav a.is-on { background: var(--atr-black); color: #fff; border-color: var(--atr-black); }
	.atr-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; align-items: center; gap: 10px; 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)); background: #fff; border-top: 1px solid var(--atr-line); box-shadow: 0 -6px 16px rgba(0, 0, 0, .06); transform: translateY(110%); transition: transform .2s ease; }
	.atr-bar.is-shown { transform: none; }
	.atr-bar .atr-logo-sm { width: 34px; height: 34px; border-radius: 8px; }
	.atr-bar__txt { flex: 1; min-width: 0; line-height: 1.25; }
	.atr-bar__txt b { display: block; color: var(--atr-ink); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.atr-pl .atr-bar .atr-btn { padding: 10px 16px; font-size: 15px; }
	body.atr-pl-on { padding-bottom: 72px; }
	.atr-similar__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.atr-pl { font-size: 16.5px; }
	.atr-pl .atr-title { font-size: 32px; }
	.atr-pl .atr-logo { width: 60px; height: 60px; border-radius: 13px; }
	.atr-id { gap: 14px; }
	.atr-pl .atr-lede { font-size: 17px; }
	.atr-pl .atr-sec h2 { font-size: 25px; margin-top: 28px; }
	.atr-cards, .atr-feats, .atr-pc, .atr-alts, .atr-quotes, .atr-pl ul.atr-check { grid-template-columns: minmax(0, 1fr); }
	.atr-plan { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.atr-cta-row .atr-btn--ghost { display: none; }
	.atr-glance dl > div { grid-template-columns: 100px minmax(0, 1fr); }
	.atr-final { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.atr-bar, .atr-thumb, .atr-pl .atr-btn { transition: none; }
}

/* Бейджі заявок із /add-your-tool/ (atr-add-tool.php). */
.atr-badge { display: inline-block; margin: 6px 6px 0 0; padding: 2px 10px; border-radius: 38px; font-size: 13px; font-weight: 600; }
.atr-badge--featured { background: #EBDC14; color: #050A0F; }
.atr-badge--owner { background: #EAF1F8; color: #0A4D8C; }