/* Внутрішні сторінки в стилі головної (template-parts/page-hero.php + спільні дрібниці).
   Кольори — токени теми; у світлій темі акцент синій (--gold перевизначено). */

/* Кнопки: тут лише геометрія внутрішніх сторінок. Колір, тінь, ховер,
   натиск і фокус — спільні в assets/css/buttons.css (обидві теми). */
.btn-p{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:100px;
  font-size:14px;font-weight:600;font-family:var(--font,'DM Sans'),sans-serif;
  cursor:pointer;text-decoration:none;
}
.btn-s{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:100px;
  font-size:14px;font-weight:600;font-family:var(--font,'DM Sans'),sans-serif;
  cursor:pointer;text-decoration:none;
}

/* ═══ Шапка сторінки ═══════════════════════════════════════════════════ */
.eg-ph{
  --ph-grid: var(--grid-line, rgba(255,255,255,.025));
  position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);
  background:var(--bg);color:var(--text);border-bottom:1px solid var(--border);
}
.eg-ph--photo{grid-template-columns:minmax(0,1fr) minmax(0,46%);min-height:clamp(420px,42vw,540px)}
.eg-ph__deco{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 60% at 8% 0%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 70%),
             radial-gradient(45% 60% at 60% 100%,rgba(27,79,196,.12),transparent 70%),
             linear-gradient(var(--ph-grid) 1px,transparent 1px) 0 0/64px 64px,
             linear-gradient(90deg,var(--ph-grid) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
.eg-ph__main{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:64px clamp(24px,4vw,64px) 64px max(clamp(20px,3vw,40px),calc((100vw - 1240px)/2))}
.eg-ph:not(.eg-ph--photo) .eg-ph__main{align-items:center;text-align:center;padding:72px 20px 64px}
.eg-ph__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px;font-size:13px;color:var(--muted)}
.eg-ph__crumbs a{color:var(--muted);text-decoration:none}.eg-ph__crumbs a:hover{color:var(--text)}
.eg-ph__crumbs span[aria-hidden]{opacity:.5}
.eg-ph__kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink,var(--gold))}
.eg-ph__kicker::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.eg-ph .eg-ph__h{margin:16px 0 0;font-size:clamp(32px,4.2vw,56px);line-height:1.06;letter-spacing:-.03em;font-weight:700;color:var(--text);max-width:18ch}
.eg-ph:not(.eg-ph--photo) .eg-ph__h{max-width:22ch}
.eg-ph .eg-ph__sub{margin:18px 0 0;font-size:17px;line-height:1.65;color:var(--muted);max-width:52ch}
.eg-ph__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.eg-ph__media{position:relative;min-height:100%;
  background:linear-gradient(160deg,var(--gold) 0%,var(--gold-deep,#f0b800) 55%,color-mix(in srgb,var(--gold) 50%,transparent) 100%);
  clip-path:polygon(12% 0,100% 0,100% 100%,12% 100%,0 50%)}
.eg-ph__media-in,.eg-ph__scrim{position:absolute;inset:0;clip-path:polygon(12.7% 0,100% 0,100% 100%,12.7% 100%,.8% 50%)}
.eg-ph__media-in{background:var(--bg)}
.eg-ph__media-in img{width:100%;height:100%;object-fit:cover;display:block;animation:egPhZoom 14s ease-out both}
@keyframes egPhZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.eg-ph__scrim{pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 70%,transparent) 0%,transparent 35%)}

/* лічильники у шапці «Кейси» */
.eg-ph .egp-stats{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0;justify-content:flex-start}
.eg-ph .egp-stat{padding:14px 20px;border-radius:16px;border:1px solid var(--border);background:var(--surface);min-width:0;text-align:left}

/* надзаголовки розділів — з рисками, як на головній */
.eg-eyebrow, .eg-section-label{display:inline-flex;align-items:center;gap:10px}
.eg-eyebrow::before, .eg-section-label::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}

@media (max-width:900px){
  .eg-ph--photo{grid-template-columns:1fr;min-height:0}
  .eg-ph__main{padding:40px clamp(20px,5vw,40px) 28px}
  .eg-ph__media{order:2;min-height:clamp(220px,52vw,340px);clip-path:polygon(0 12%,50% 0,100% 12%,100% 100%,0 100%)}
  .eg-ph__media-in,.eg-ph__scrim{clip-path:polygon(0 12.8%,50% .8%,100% 12.8%,100% 100%,0 100%)}
  .eg-ph__scrim{background:linear-gradient(0deg,rgba(9,9,13,.35),transparent 45%)}
}
@media (max-width:600px){
  .eg-ph__ctas .btn-p,.eg-ph__ctas .btn-s{flex:1 1 100%}
  .eg-ph__sub{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.eg-ph__media-in img{animation:none}}

/* ═══ Картки товарів: «студійна» підкладка, як на головній ═══════════════ */
.woocommerce ul.products li.product.eg-card, .woocommerce-page ul.products li.product.eg-card{ border-radius: 22px !important; }
.eg-card--has-img .eg-card-thumb{ background: radial-gradient(90% 80% at 50% 38%, #ffffff 0%, #f1f2f5 58%, #dfe2e8 100%); }
.eg-card--has-img .eg-card-thumb::after{ content: ""; position: absolute; left: 24%; right: 24%; bottom: 10px; height: 12px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15,23,42,.22), transparent); filter: blur(2px); pointer-events: none; }
.eg-card--has-img .eg-card-thumb img{ position: relative; z-index: 1; mix-blend-mode: multiply; padding: 18px; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.woocommerce ul.products li.product.eg-card:hover .eg-card-thumb img{ transform: translateY(-4px) scale(1.03); }
.woocommerce ul.products li.product.eg-card:hover, .woocommerce-page ul.products li.product.eg-card:hover{
  border-color: color-mix(in srgb, var(--gold) 50%, transparent) !important; box-shadow: 0 22px 50px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--gold) 20%, transparent) !important; }
html[data-theme="light"] .woocommerce ul.products li.product.eg-card:hover{ box-shadow: 0 22px 50px rgba(15,23,42,.12) !important; }
.eg-card-chip{ border-radius: 100px !important; }

/* сторінка товару — та сама підкладка під фото */
.eg-sp-wrap--has-img .eg-sp-image-card{ border-radius: 24px; background: radial-gradient(90% 80% at 50% 40%, #ffffff 0%, #f1f2f5 58%, #dfe2e8 100%);
  border-color: color-mix(in srgb, var(--gold) 25%, transparent); }
.eg-sp-wrap--has-img .eg-sp-img-wrap img{ mix-blend-mode: multiply; }
.eg-sp-price-card, .eg-sp-desc-card, .eg-sp-attrs-block{ border-radius: 22px !important; }

/* ═══ «Питання та відповіді»: скляні картки, золота смужка у відкритого ══ */
.eg-faq-item{ position: relative; border-radius: 20px; background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); }
html[data-theme="light"] .eg-faq-item{ background: #fff; box-shadow: 0 8px 24px rgba(15,23,42,.06); }
.eg-faq-item::before{ content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--gold-light,#ffd060), var(--gold), var(--gold-deep,#f0b800)); opacity: 0; transition: opacity .3s; }
.eg-faq-item.eg-open::before{ opacity: 1; }
.eg-faq-item.eg-open{ background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 9%, transparent), rgba(255,255,255,.02)); border-color: color-mix(in srgb, var(--gold) 40%, transparent);
  box-shadow: 0 20px 44px rgba(0,0,0,.3); }
html[data-theme="light"] .eg-faq-item.eg-open{ background: linear-gradient(135deg, #fff, #F0F7FF); box-shadow: 0 20px 44px rgba(15,23,42,.12); }
.eg-faq-ico{ border-radius: 50%; }

/* ═══ «Чому ENERGARD» на «Про нас»: скляні картки ═════════════════════════ */
.eg-why-item{ padding: 20px 22px; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  transition: border-color .25s, transform .25s, box-shadow .25s; }
.eg-why-item:hover{ border-color: color-mix(in srgb, var(--gold) 45%, transparent); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.3); }
html[data-theme="light"] .eg-why-item{ background: #fff; box-shadow: 0 8px 24px rgba(15,23,42,.06); }
html[data-theme="light"] .eg-why-item:hover{ box-shadow: 0 18px 40px rgba(15,23,42,.12); }
.eg-why-list{ gap: 14px !important; }

/* Довідники на сторінці «Питання» (page-faq.php) */
.eg-guides__grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.eg-guides__card{ display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:20px; background:var(--surface); border:1px solid var(--border); color:var(--text); text-decoration:none; transition:border-color .2s, transform .2s; }
.eg-guides__card:hover{ border-color:color-mix(in srgb, var(--gold) 50%, transparent); transform:translateY(-3px); color:var(--text); }
.eg-guides__ico{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:22px; background:color-mix(in srgb, var(--gold) 12%, transparent); }
.eg-guides__card b{ font-size:18px; }
.eg-guides__card span:not(.eg-guides__ico){ font-size:14px; line-height:1.55; color:var(--muted); }
.eg-guides__card i{ margin-top:auto; font-style:normal; font-weight:700; color:var(--gold-ink, var(--gold)); }
/* фото/декор шапки не розширюють сторінку на телефоні (виявлено на /about/, 2026-10-26) */
.eg-ph { overflow-x: clip; }