/*
Theme Name: CleanStrap
Theme URI: https://pw-d.ru
Author: PWD
Author URI: https://pw-d.ru
Description: Clean Theme For Clean Development
Version: 2023
Tested up to: 7.3
Requires PHP: 7.3
License: GNU General Public License v3 or Later
*/

/* ============================================ */
/* FONTS                                        */
/* ============================================ */

@font-face {
    font-family: 'Oswald';
    src: url('fonts/oswald-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('fonts/oswald-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('fonts/oswald-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('fonts/manrope-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('fonts/manrope-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('fonts/manrope-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('fonts/manrope-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ============================================ */
/* CSS VARIABLES                                */
/* ============================================ */

:root {
    /* Colors */
    --pwd-bg-base:        #0f1115; /* stone-950 (переопределённый в оригинале) */
    --pwd-bg-card:        #161920; /* stone-900 (переопределённый в оригинале) */
    --pwd-bg-input:       #1f242e; /* stone-800 (переопределённый в оригинале) */

    --pwd-text-primary:   #e7e5e4; /* stone-200 */
    --pwd-text-secondary: #94a3b8; /* slate-400 (переопределённый stone-400 в оригинале) */
    --pwd-text-muted:     #78716c; /* stone-500 */

    --pwd-border-base:    #292524; /* stone-800 */
    --pwd-border-subtle:  #1c1917; /* stone-900 */

    --pwd-accent-orange:  #f97316; /* orange-500 */
    --pwd-accent-amber:   #f59e0b; /* amber-500 */
    --pwd-accent-red:     #dc2626; /* red-600 */

    /* Gradients */
    --pwd-gradient-fire: linear-gradient(to right, #ea580c, #f59e0b); /* orange-600 → amber-400 */

    /* Typography */
    --pwd-font-sans:    'Manrope', sans-serif;
    --pwd-font-display: 'Oswald', sans-serif;

    /* Layout */
    --pwd-container-px: clamp(1.5rem, 5vw, 3rem);
    --pwd-section-py:   clamp(4rem, 8vw, 8rem);
}


/* ============================================ */
/* RESET & BASE                                 */
/* ============================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--pwd-font-sans);
    background-color: var(--pwd-bg-base);
    color: var(--pwd-text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
video {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}

ul, ol {
    list-style: none;
}


/* ============================================ */
/* TYPOGRAPHY                                   */
/* ============================================ */

.pwd-font-display {
    font-family: var(--pwd-font-display);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pwd-font-display);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}


/* ============================================ */
/* UTILITIES                                    */
/* ============================================ */

.pwd-container {
    width: 100%;
    max-width: 1536px; /* 1440px контент + 48px паддинг с каждой стороны */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pwd-container-px);
    padding-right: var(--pwd-container-px);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Скрыть скроллбар у горизонтальных полос (используется в Gallery) */
.pwd-hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.pwd-hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ============================================ */
/* GLOBAL BUTTONS                               */
/* ============================================ */

/*
 * Two reusable button components.
 * Apply alongside any existing block class:
 *   <a class="pwd-hero__btn-primary pwd-btn-fire" href="…">
 *   <button class="pwd-stovetypes__card-cta pwd-btn-outline">
 *
 * These classes define visual behavior (colors, fills, hovers).
 * Size-related properties (font-size, padding, letter-spacing)
 * are NOT set here — they stay on the block-specific class
 * so each button can have its own proportions.
 */

/* --- Type 1: Fire (solid orange gradient) --- */
.pwd-btn-fire {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--pwd-gradient-fire);
    color: var(--pwd-bg-base);
    font-family: var(--pwd-font-display);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pwd-btn-fire:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

.pwd-btn-fire .pwd-icon {
    transition: transform 0.3s ease;
}

.pwd-btn-fire:hover .pwd-icon {
    transform: translateX(4px);
}

/* --- Type 2: Outline (transparent → fire on hover) --- */
.pwd-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: none;
    color: #fff;
    font-family: var(--pwd-font-display);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.pwd-btn-outline:hover {
    background: var(--pwd-gradient-fire);
    color: var(--pwd-bg-base);
    border-color: transparent;
}

.pwd-btn-outline .pwd-icon {
    transition: transform 0.3s ease;
}

.pwd-btn-outline:hover .pwd-icon {
    transform: translateX(4px);
}

/* ============================================ */
/* TEXT BOX (reusable framed text component)    */
/* ============================================ */

.pwd-textbox {
    position: relative;
    background-color: rgba(22, 25, 32, 0.4);
    border: 1px solid var(--pwd-border-base);
    padding: 1.75rem 2rem;
    color: var(--pwd-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
    font-family: var(--pwd-font-sans);
    font-weight: 400;
    text-transform: none;
    transition: border-color 0.3s, background-color 0.3s;
}

.pwd-textbox:hover {
    background-color: rgba(22, 25, 32, 0.7);
    border-color: rgba(249, 115, 22, 0.3);
}

/* Decorative corner accents */
.pwd-textbox__corner {
    position: absolute;
    pointer-events: none;
    transition: all 0.4s ease;
}

.pwd-textbox__corner--tr {
    top: -1px;
    right: -1px;
    width: 0.875rem;
    height: 0.875rem;
    border-top: 2px solid var(--pwd-accent-orange);
    border-right: 2px solid var(--pwd-accent-orange);
}

.pwd-textbox__corner--bl {
    bottom: -1px;
    left: -1px;
    width: 0.875rem;
    height: 0.875rem;
    border-bottom: 2px solid var(--pwd-border-base);
    border-left: 2px solid var(--pwd-border-base);
}

.pwd-textbox:hover .pwd-textbox__corner--tr {
    width: 1.25rem;
    height: 1.25rem;
}

.pwd-textbox p {
    margin: 0;
}

.pwd-textbox p + p {
    margin-top: 1rem;
}

/* ============================================ */
/* SVG ICONS (Lucide sprite)                    */
/* ============================================ */

/* Hide the inline SVG sprite injected via wp_body_open */
.pwd-svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.pwd-icon {
    display: inline-block;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    /* stroke-width is set inline via the helper function */
}

/* ============================================ */
/* NAVIGATION                                   */
/* ============================================ */

/* --- Layout --- */
.pwd-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    transition: padding 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    border-bottom: 1px solid transparent;
    padding: 1.4rem 0;
}

.pwd-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2; /* поверх мобильного оверлея */
}

/* --- Scrolled state --- */
.pwd-nav--scrolled {
    background-color: rgba(15, 17, 21, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-color: var(--pwd-border-base);
    padding: 0.5rem 0;
}

/* --- Logo --- */
.pwd-nav__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    flex-shrink: 0;
}

.pwd-nav__logo-icon {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    flex-shrink: 0;
}

.pwd-nav__logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.pwd-nav__logo-text {
    display: flex;
    flex-direction: column;
}

.pwd-nav__logo-name {
    font-family: var(--pwd-font-display);
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.1em;
    font-size: 1.125rem;
    transition: color 0.3s;
    white-space: nowrap;
}

.pwd-nav__logo:hover .pwd-nav__logo-name {
    color: var(--pwd-accent-orange);
}

.pwd-nav__logo-sub {
    font-size: 0.625rem;
    text-transform: uppercase;
    color: var(--pwd-text-secondary);
    letter-spacing: 0.2em;
    margin-top: 2px;
    white-space: nowrap;
}

/* --- Desktop menu --- */
.pwd-nav__desktop {
    display: none;
    align-items: center;
    gap: 1.75rem;
}

.pwd-nav__item {
    position: relative;
}

.pwd-nav__link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pwd-text-secondary);
    text-decoration: none;
    position: relative;
    transition: color 0.3s;
    padding-bottom: 0.5rem;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--pwd-font-sans);
}

.pwd-nav__link:hover {
    color: #fff;
}

.pwd-nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--pwd-gradient-fire);
    transition: width 0.3s ease;
}

.pwd-nav__link:hover::after {
    width: 100%;
}

.pwd-nav__chevron {
    flex-shrink: 0;
    margin-bottom: -1px;
    transition: color 0.3s, transform 0.3s;
}

/* --- Dropdown (управляется JS-классом --open) --- */
.pwd-nav__dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 220px;
    background-color: rgba(15, 17, 21, 0.97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--pwd-border-base);
    list-style: none;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
}

.pwd-nav__item--has-dropdown.pwd-nav__item--open .pwd-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.pwd-nav__item--has-dropdown.pwd-nav__item--open .pwd-nav__dropdown-trigger {
    color: #fff;
}

.pwd-nav__item--has-dropdown.pwd-nav__item--open .pwd-nav__chevron {
    transform: rotate(180deg);
    color: var(--pwd-accent-orange);
}

.pwd-nav__dropdown-link {
    display: block;
    padding: 0.6rem 1.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pwd-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, background-color 0.2s, padding-left 0.2s;
}

.pwd-nav__dropdown-link:hover {
    color: #fff;
    background-color: rgba(249, 115, 22, 0.08);
    padding-left: 1.5rem;
}

/* --- CTA button --- */
.pwd-nav__btn-cta {
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    white-space: nowrap;
    flex-shrink: 0;
}

.pwd-nav__btn-cta:hover {
    background: var(--pwd-gradient-fire);
    color: var(--pwd-bg-base);
    border-color: transparent;
}


/* --- Burger button --- */
.pwd-nav__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 0.25rem;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.pwd-nav__burger-icon--close {
    display: none;
}

.pwd-nav--open .pwd-nav__burger-icon--open {
    display: none;
}

.pwd-nav--open .pwd-nav__burger-icon--close {
    display: block;
}

/* --- Mobile menu (fullscreen overlay) --- */
.pwd-nav__mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;       /* dvh handles mobile browser chrome correctly */
    height: 100vh;        /* fallback for older browsers */
    background-color: var(--pwd-bg-base);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem var(--pwd-container-px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    pointer-events: none;
    z-index: 49;          /* just below .pwd-nav (z-index: 50) so burger stays on top */
    overflow-y: auto;
}

/* Open state — now driven by own class, not parent */
.pwd-nav__mobile--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Акцентная линия сверху оверлея */
.pwd-nav__mobile-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--pwd-gradient-fire);
}

.pwd-nav__mobile-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Пункты мобильного меню */
.pwd-nav__mobile-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--pwd-text-secondary);
    text-decoration: none;
    transition: color 0.2s;
    background: none;
    border: none;
    border-bottom: 1px solid var(--pwd-border-subtle);
    width: 100%;
    text-align: left;
    font-family: var(--pwd-font-sans);
    cursor: pointer;
    position: relative;
}

.pwd-nav__mobile-link:first-child {
    border-top: 1px solid var(--pwd-border-subtle);
}

.pwd-nav__mobile-link:hover,
.pwd-nav__mobile-item--open > .pwd-nav__mobile-link {
    color: #fff;
}

/* Левая акцентная черта при hover */
.pwd-nav__mobile-link::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 2px;
    height: 60%;
    background: var(--pwd-gradient-fire);
    transition: transform 0.2s ease;
    transform-origin: center;
}

.pwd-nav__mobile-link:hover::before,
.pwd-nav__mobile-item--open > .pwd-nav__mobile-link::before {
    transform: translateY(-50%) scaleY(1);
}

/* Порядковый номер */
.pwd-nav__mobile-num {
    font-family: var(--pwd-font-display);
    font-size: 0.65rem;
    color: var(--pwd-accent-orange);
    letter-spacing: 0.05em;
    opacity: 0.7;
    flex-shrink: 0;
    min-width: 1.5rem;
}

.pwd-nav__mobile-label {
    flex: 1;
}

.pwd-nav__mobile-chevron {
    flex-shrink: 0;
    transition: transform 0.3s, color 0.2s;
    margin-left: auto;
}

.pwd-nav__mobile-item--open > .pwd-nav__mobile-toggle .pwd-nav__mobile-chevron {
    transform: rotate(180deg);
    color: var(--pwd-accent-orange);
}

/* Подменю аккордеона */
.pwd-nav__mobile-sub {
    display: none;
    flex-direction: column;
    list-style: none;
    padding: 0.5rem 0 0.5rem calc(1rem + 1.5rem); /* выравнивание под label */
    border-bottom: 1px solid var(--pwd-border-subtle);
    margin-bottom: -1px; /* перекрываем нижний бордер родителя */
}

.pwd-nav__mobile-item--open .pwd-nav__mobile-sub {
    display: flex;
}

.pwd-nav__mobile-item--open > .pwd-nav__mobile-link {
    border-bottom: none;
}

.pwd-nav__mobile-sub-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pwd-text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.pwd-nav__mobile-sub-link::before {
    content: '';
    display: block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: var(--pwd-border-base);
    flex-shrink: 0;
    transition: background-color 0.2s;
}

.pwd-nav__mobile-sub-link:hover {
    color: var(--pwd-accent-orange);
}

.pwd-nav__mobile-sub-link:hover::before {
    background-color: var(--pwd-accent-orange);
}

/* CTA кнопка в мобильном меню */
.pwd-nav__mobile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
    align-self: flex-start;
    background: var(--pwd-gradient-fire);
    color: #0f1115;
    padding: 0.875rem 2rem;
    font-family: var(--pwd-font-display);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.3s;
}

.pwd-nav__mobile-cta:hover {
    opacity: 0.85;
}

/* --- Responsive --- */
@media (min-width: 1280px) {
    .pwd-nav__desktop {
        display: flex;
    }

    .pwd-nav__burger {
        display: none;
    }
}


/* ============================================ */
/* SCROLLBAR                                    */
/* ============================================ */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--pwd-bg-base);
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}


/* ============================================ */
/* SELECTION                                    */
/* ============================================ */

::selection {
    background-color: var(--pwd-accent-orange);
    color: #fff;
}


/* ============================================ */
/* GLOBAL ANIMATIONS                            */
/* ============================================ */

@keyframes pwd-text-shimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Применяется на элементах с этим классом */
.pwd-text-shimmer {
    background-size: 200% auto;
    animation: pwd-text-shimmer 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pwd-text-shimmer {
        animation: none;
        background-position: 0% 50%;
    }
}

/* Steel (cold metallic) shimmer variant */
.pwd-text-shimmer--steel {
    background-image: linear-gradient(
        110deg,
        #9ca3af 15%,
        #e5e7eb 35%,
        #ffffff 50%,
        #e5e7eb 65%,
        #9ca3af 85%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: pwd-text-shimmer 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .pwd-text-shimmer--steel {
        animation: none;
        background-position: 0% 50%;
    }
}



/*
 * Animation pre-hide system.
 *
 * Problem: the async FPS test in global.js takes ~500 ms.
 * During that time blocks render fully visible on screen.
 * When IntersectionObserver later adds .animations-enabled,
 * child elements suddenly get opacity:0 (from the block's
 * CSS animation rules) and then animate back to opacity:1 —
 * causing a visible "flash / blink".
 *
 * Solution: hide entire [data-animate] sections via CSS
 * opacity:0 IMMEDIATELY (before any JS).  When global.js
 * adds .animations-enabled, the block's own @keyframes
 * animate children in as designed — but now from an already-
 * invisible state, so there's no flash.
 *
 * The section itself is revealed by .animations-enabled
 * via the rule below.
 *
 * Fallback: html.no-animations (set by an inline <script>)
 * keeps everything visible if JS never runs or the device
 * is too slow for animations.
 */

/* Hide sections that are waiting for animation activation */
[data-animate="true"]:not(.animations-enabled) {
    opacity: 0;
}

/* Once animations are enabled, the section becomes visible
   and children animate in via their own @keyframes rules */
[data-animate="true"].animations-enabled {
    opacity: 1;
}

/* Safety net: no-animations on <html> means the JS animation
   system decided NOT to animate (weak device / reduced-motion /
   JS error).  Override the pre-hide so all content is shown. */
html.no-animations [data-animate="true"] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

html.no-animations [data-animate="true"] * {
    animation: none !important;
}

/* ============================================ */
/* HERO                                         */
/* ============================================ */

/* --- Layout --- */
.pwd-hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: var(--pwd-bg-card);
}

.pwd-hero__content {
    position: relative;
    z-index: 10;
    padding-top: 6rem;
    padding-bottom: 3rem;
}

.pwd-hero__grid-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

/* --- Grid Overlay --- */
.pwd-hero__grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    padding: 0 calc(var(--pwd-container-px) * 0.5);
    pointer-events: none;
}

.pwd-hero__grid-line {
    width: 1px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.04);
}

/* --- Background --- */
.pwd-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

.pwd-hero__bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    mix-blend-mode: overlay;
}

.pwd-hero__bg-overlay {
    position: absolute;
    inset: 0;
}

.pwd-hero__bg-overlay--horizontal {
    background: linear-gradient(
        to right,
        #0f1115 0%,
        rgba(15, 17, 21, 0.9) 35%,
        rgba(15, 17, 21, 0.15) 65%,
        rgba(15, 17, 21, 0) 100%
    );
}

.pwd-hero__bg-overlay--vertical {
    background: linear-gradient(
        to top,
        #0f1115 0%,
        transparent 50%,
        transparent 100%
    );
}

/* --- Left Column --- */
.pwd-hero__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pwd-hero__badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pwd-hero__badge-line {
    display: block;
    height: 2px;
    width: 3rem;
    background: var(--pwd-gradient-fire);
    flex-shrink: 0;
}

.pwd-hero__badge-text {
    color: var(--pwd-accent-orange);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.875rem;
    font-weight: 600;
}

.pwd-hero__title {
    font-family: var(--pwd-font-display);
    font-size: clamp(2.8rem, 8vw, 6rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1em;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}

.pwd-hero__title-accent {
    background-image: linear-gradient(
        110deg,
        #d6d3d1 15%,
        #c2410c 35%,
        #dc2626 45%,
        #f59e0b 50%,
        #dc2626 55%,
        #c2410c 65%,
        #d6d3d1 85%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pwd-hero__description {
    color: var(--pwd-text-secondary);
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    max-width: 36rem;
    line-height: 1.7;
    border-left: 2px solid var(--pwd-border-base);
    padding-left: 1.5rem;
    margin-bottom: 2.5rem;
}

/* --- CTA Buttons --- */
.pwd-hero__actions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 4rem;
}

.pwd-hero__btn-primary {
    padding: 1rem 2rem;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
}

.pwd-hero__btn-play {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    transition: color 0.3s;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.pwd-hero__btn-play:hover {
    color: var(--pwd-accent-orange);
}

.pwd-hero__btn-play-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.3s;
    padding-left: 2px; /* визуальный центр треугольника */
}

.pwd-hero__btn-play:hover .pwd-hero__btn-play-icon {
    border-color: var(--pwd-accent-orange);
}

.pwd-hero__btn-play-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.pwd-hero__btn-play-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pwd-text-secondary);
    line-height: 1;
    margin-bottom: 0.2rem;
}

.pwd-hero__btn-play-title {
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1;
}

/* --- Stats --- */
.pwd-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    border-top: 1px solid var(--pwd-border-base);
    padding-top: 2rem;
}

.pwd-hero__stat-value {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.pwd-hero__stat-number {
    font-family: var(--pwd-font-display);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.pwd-hero__stat-suffix {
    color: var(--pwd-accent-orange);
    font-weight: 700;
    font-size: 1.25rem;
}

.pwd-hero__stat-label {
    color: var(--pwd-text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}

/* --- Right Column --- */
.pwd-hero__right {
    display: none; /* скрыт на мобильных */
    position: relative;
}

.pwd-hero__corner {
    position: absolute;
    width: 6rem;
    height: 6rem;
    z-index: 0;
    transition: all 0.5s ease-out;
    pointer-events: none;
}

.pwd-hero__corner--tl {
    top: 2.5rem;
    right: 2.5rem;
    border-top: 2px solid rgba(249, 115, 22, 0.2);
    border-right: 2px solid rgba(249, 115, 22, 0.2);
}

.pwd-hero__corner--br {
    bottom: 2.5rem;
    left: 2.5rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.pwd-hero__image-wrap {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 700px;
    overflow: hidden;
}

.pwd-hero__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #0f1115 0%, transparent 35%);
    opacity: 0.75;
    z-index: 2;
    pointer-events: none;
}

.pwd-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 2s ease;
    display: block;
}

.pwd-hero__image-wrap:hover .pwd-hero__image {
    transform: scale(1.05);
}

.pwd-hero__tag {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    z-index: 3;
    background-color: rgba(22, 25, 32, 0.8);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-left: 4px solid var(--pwd-accent-orange);
    padding: 1rem;
    max-width: 200px;
}

.pwd-hero__tag-label {
    color: var(--pwd-text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 0.25rem;
}

.pwd-hero__tag-name {
    color: #fff;
    font-family: var(--pwd-font-display);
    font-weight: 700;
    font-size: 1rem;
}

/* --- Animations --- */
.pwd-hero.animations-enabled .pwd-hero__badge,
.pwd-hero.animations-enabled .pwd-hero__title,
.pwd-hero.animations-enabled .pwd-hero__description,
.pwd-hero.animations-enabled .pwd-hero__actions,
.pwd-hero.animations-enabled .pwd-hero__stats {
    opacity: 0;
    transform: translateY(30px);
    animation: pwd-hero-fade-up 0.8s ease-out forwards;
}

.pwd-hero.animations-enabled .pwd-hero__title       { animation-delay: 0.2s; }
.pwd-hero.animations-enabled .pwd-hero__description { animation-delay: 0.4s; }
.pwd-hero.animations-enabled .pwd-hero__actions     { animation-delay: 0.6s; }
.pwd-hero.animations-enabled .pwd-hero__stats       { animation-delay: 0.8s; }

.pwd-hero.animations-enabled .pwd-hero__right {
    opacity: 0;
    transform: translateX(50px);
    filter: blur(10px);
    animation: pwd-hero-fade-right 1s ease-out 0.5s forwards;
}

@keyframes pwd-hero-fade-up {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pwd-hero-fade-right {
    to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

/* --- Responsive --- */
@media (min-width: 640px) {
    .pwd-hero__actions {
        flex-direction: row;
        align-items: center;
    }
}

@media (min-width: 1024px) {
    .pwd-hero__grid-layout {
        grid-template-columns: 7fr 5fr;
        gap: 2rem;
    }

    .pwd-hero__right {
        display: block;
    }

    .pwd-hero__content {
        padding-top: 6rem;
        padding-bottom: 3rem;
    }
}

/* ============================================ */
/* EXPERTISE                                    */
/* ============================================ */

/* --- Layout --- */
.pwd-expertise {
    padding: var(--pwd-section-py) 0;
    background-color: var(--pwd-bg-card);
    position: relative;
    overflow: hidden;
}

.pwd-expertise__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

/* --- Left Column --- */
.pwd-expertise__left {
    position: relative;
}

.pwd-expertise__glow {
    position: absolute;
    top: -2.5rem;
    left: -2.5rem;
    width: 66%;
    height: 66%;
    background-color: rgba(234, 88, 12, 0.1);
    filter: blur(80px);
    pointer-events: none;
    border-radius: 50%;
}

.pwd-expertise__image-group {
    position: relative;
    z-index: 10;
}

/* Corner accents — shared base */
.pwd-expertise__corner {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    transition: all 0.5s ease;
}

/* Amber corners — top-left, bottom-right */
.pwd-expertise__corner--tl {
    top: -1rem;
    left: -1rem;
    width: 6rem;
    height: 6rem;
    border-top: 2px solid var(--pwd-accent-orange);
    border-left: 2px solid var(--pwd-accent-orange);
}

.pwd-expertise__corner--br {
    bottom: -1rem;
    right: -1rem;
    width: 6rem;
    height: 6rem;
    border-bottom: 2px solid var(--pwd-accent-orange);
    border-right: 2px solid var(--pwd-accent-orange);
}

/* Dark corners — top-right, bottom-left */
.pwd-expertise__corner--tr {
    top: -1rem;
    right: -1rem;
    width: 3rem;
    height: 3rem;
    border-top: 2px solid var(--pwd-border-base);
    border-right: 2px solid var(--pwd-border-base);
}

.pwd-expertise__corner--bl {
    bottom: -1rem;
    left: -1rem;
    width: 3rem;
    height: 3rem;
    border-bottom: 2px solid var(--pwd-border-base);
    border-left: 2px solid var(--pwd-border-base);
}

/* Corner hover (via group hover on image-group) */
.pwd-expertise__image-group:hover .pwd-expertise__corner--tl {
    top: -1.5rem;
    left: -1.5rem;
}

.pwd-expertise__image-group:hover .pwd-expertise__corner--br {
    bottom: -1.5rem;
    right: -1.5rem;
}

.pwd-expertise__image-group:hover .pwd-expertise__corner--tr {
    top: -1.5rem;
    right: -1.5rem;
}

.pwd-expertise__image-group:hover .pwd-expertise__corner--bl {
    bottom: -1.5rem;
    left: -1.5rem;
}

/* Image container */
.pwd-expertise__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: var(--pwd-bg-input);
    overflow: hidden;
    box-shadow: 0 0 50px -12px rgba(0, 0, 0, 0.5);
}

.pwd-expertise__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: transform 1.5s ease;
    display: block;
}

.pwd-expertise__image-wrap:hover .pwd-expertise__image {
    transform: scale(1.05);
}

/* Badge */
.pwd-expertise__badge {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    background-color: rgba(15, 17, 21, 0.9);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-left: 4px solid var(--pwd-accent-orange);
    padding: 1rem;
    min-width: 200px;
}

.pwd-expertise__badge-label {
    color: var(--pwd-text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 0.25rem;
}

.pwd-expertise__badge-name {
    color: #fff;
    font-family: var(--pwd-font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
}

/* --- Right Column --- */
.pwd-expertise__right {
    padding-top: 0.5rem;
}

/* Header */
.pwd-expertise__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pwd-expertise__header-line {
    display: block;
    height: 2px;
    width: 3rem;
    background: var(--pwd-gradient-fire);
    flex-shrink: 0;
}

.pwd-expertise__header-label {
    color: var(--pwd-accent-orange);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Title */
.pwd-expertise__title {
    font-size: clamp(1.875rem, 4vw, 3rem);
    line-height: 1.1;
    margin-bottom: 2rem;
}

.pwd-expertise__title-white {
    display: block;
    margin-bottom: 0.5rem;
    background: linear-gradient(110deg, #ffffff 15%, #e7e5e4 25%, #78716c 45%, #e7e5e4 65%, #ffffff 85%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pwd-expertise__title-orange {
    background: linear-gradient(110deg, #f97316 15%, #f59e0b 35%, #facc15 50%, #f59e0b 65%, #f97316 85%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Description */
.pwd-expertise__description {
    color: var(--pwd-text-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    border-left: 1px solid var(--pwd-border-base);
    padding-left: 1.5rem;
}

.pwd-expertise__description p + p {
    margin-top: 1rem;
}

/* --- Feature Cards --- */
.pwd-expertise__cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pwd-expertise__card {
    position: relative;
    background-color: rgba(15, 17, 21, 0.5);
    border: 1px solid var(--pwd-border-base);
    padding: 1.5rem;
    transition: border-color 0.3s;
}

.pwd-expertise__card:hover {
    border-color: rgba(234, 88, 12, 0.3);
}

/* Card corner accent on hover */
.pwd-expertise__card-corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 1px solid var(--pwd-accent-orange);
    border-left: 1px solid var(--pwd-accent-orange);
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
}

.pwd-expertise__card:hover .pwd-expertise__card-corner {
    width: 1rem;
    height: 1rem;
    opacity: 1;
}

.pwd-expertise__card-inner {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

/* Icon */
.pwd-expertise__card-icon {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    background-color: var(--pwd-bg-base);
    border: 1px solid var(--pwd-border-base);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.25rem;
    color: var(--pwd-accent-orange);
    transition: all 0.3s;
}

.pwd-expertise__card:hover .pwd-expertise__card-icon {
    background: var(--pwd-gradient-fire);
    color: var(--pwd-bg-base);
    border-color: transparent;
}

.pwd-expertise__card-title {
    font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
    color: #fff;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
    line-height: 1.3em;
}

.pwd-expertise__card:hover .pwd-expertise__card-title {
    color: var(--pwd-accent-orange);
}

.pwd-expertise__card-desc {
    color: var(--pwd-text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
    font-family: var(--pwd-font-sans);
    font-weight: 400;
    text-transform: none;
}

/* --- Animations (only with .animations-enabled) --- */
.pwd-expertise.animations-enabled .pwd-expertise__left {
    opacity: 0;
    transform: translateX(-40px);
    animation: pwd-expertise-fade-in-left 0.8s ease-out 0.2s forwards;
}

.pwd-expertise.animations-enabled .pwd-expertise__header,
.pwd-expertise.animations-enabled .pwd-expertise__title,
.pwd-expertise.animations-enabled .pwd-expertise__description {
    opacity: 0;
    transform: translateY(25px);
    animation: pwd-expertise-fade-up 0.7s ease-out forwards;
}

.pwd-expertise.animations-enabled .pwd-expertise__title       { animation-delay: 0.15s; }
.pwd-expertise.animations-enabled .pwd-expertise__description { animation-delay: 0.3s; }

.pwd-expertise.animations-enabled .pwd-expertise__card {
    opacity: 0;
    transform: translateY(20px);
    animation: pwd-expertise-fade-up 0.6s ease-out forwards;
}

.pwd-expertise.animations-enabled .pwd-expertise__card:nth-child(1) { animation-delay: 0.4s; }
.pwd-expertise.animations-enabled .pwd-expertise__card:nth-child(2) { animation-delay: 0.55s; }
.pwd-expertise.animations-enabled .pwd-expertise__card:nth-child(3) { animation-delay: 0.7s; }

@keyframes pwd-expertise-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pwd-expertise-fade-in-left {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Responsive --- */
@media (min-width: 1024px) {
    .pwd-expertise__grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }

    .pwd-expertise__left {
        position: sticky;
        top: 6rem;
        padding-right: 2rem;
    }
}

/* ============================================ */
/* GLIGHTBOX THEME OVERRIDES                    */
/* ============================================ */
/* Insert into style.css — before the FOOTER section */

/* --- Overlay --- */
.glightbox-container .goverlay {
    background: rgba(10, 12, 16, 0.92) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* --- Slide image --- */
.glightbox-container .gslide-image img {
    border: 1px solid var(--pwd-border-base);
    border-radius: 2px;
}

/* --- Navigation arrows --- */
.glightbox-clean .gnext,
.glightbox-clean .gprev {
    width: 2.75rem;
    height: 2.75rem;
    background: rgba(22, 25, 32, 0.8) !important;
    border: 1px solid var(--pwd-border-base) !important;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s, background-color 0.3s;
}

.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
    background: rgba(22, 25, 32, 1) !important;
    border-color: var(--pwd-accent-orange) !important;
}

.glightbox-clean .gnext svg,
.glightbox-clean .gprev svg {
    width: 1rem;
    height: 1rem;
    fill: var(--pwd-text-primary);
}

.glightbox-clean .gnext:hover svg,
.glightbox-clean .gprev:hover svg {
    fill: var(--pwd-accent-orange);
}

.glightbox-clean .gprev {
    left: 1rem;
}

.glightbox-clean .gnext {
    right: 1rem;
}

/* --- Close button --- */
.glightbox-clean .gclose {
    width: 2.5rem;
    height: 2.5rem;
    top: 1rem;
    right: 1rem;
    background: rgba(22, 25, 32, 0.8) !important;
    border: 1px solid var(--pwd-border-base) !important;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    transition: border-color 0.3s, background-color 0.3s;
}

.glightbox-clean .gclose:hover {
    background: rgba(22, 25, 32, 1) !important;
    border-color: var(--pwd-accent-orange) !important;
}

.glightbox-clean .gclose svg {
    width: 1rem;
    height: 1rem;
    fill: var(--pwd-text-primary);
    transition: fill 0.3s;
}

.glightbox-clean .gclose:hover svg {
    fill: var(--pwd-accent-orange);
}

/* --- Description container --- */
.glightbox-clean .gslide .gslide-description,
.glightbox-clean .gslide-description.description-bottom {
    background: transparent !important;
}

.glightbox-clean .gslide .gdesc-inner,
.glightbox-clean .gdesc-inner {
    padding: 1rem 0 0.5rem !important;
    text-align: center !important;
    background: transparent !important;
}

/* --- Title --- */
.glightbox-clean .gslide-title,
.glightbox-clean .gslide .gslide-title,
.glightbox-clean .gdesc-inner .gslide-title {
    font-family: var(--pwd-font-display) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #fff !important;
    margin: 0 0 0.25rem !important;
    line-height: 1.3 !important;
}

/* --- Description text --- */
.glightbox-clean .gslide-desc,
.glightbox-clean .gslide .gslide-desc,
.glightbox-clean .gdesc-inner .gslide-desc {
    font-family: var(--pwd-font-sans) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: var(--pwd-text-secondary) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* --- Slide counter (custom element) — positioned top-left --- */
.pwd-glightbox-counter {
    position: fixed;
    top: 1.25rem;
    left: 1.25rem;
    font-family: var(--pwd-font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--pwd-text-muted);
    letter-spacing: 0.1em;
    z-index: 100000;
    pointer-events: none;
    padding: 0.375rem 1rem;
    background: rgba(22, 25, 32, 0.7);
    border: 1px solid var(--pwd-border-base);
    border-radius: 2px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* --- Loading spinner --- */
.glightbox-clean .gloader {
    border-color: var(--pwd-border-base) !important;
    border-left-color: var(--pwd-accent-orange) !important;
}

/* --- Mobile adjustments --- */
@media (max-width: 768px) {
    .glightbox-clean .gnext,
    .glightbox-clean .gprev {
        width: 2.25rem;
        height: 2.25rem;
    }

    .glightbox-clean .gprev {
        left: 0.5rem;
    }

    .glightbox-clean .gnext {
        right: 0.5rem;
    }

    .glightbox-clean .gclose {
        top: 0.75rem;
        right: 0.75rem;
        width: 2.25rem;
        height: 2.25rem;
    }

    .glightbox-clean .gslide .gdesc-inner,
    .glightbox-clean .gdesc-inner {
        padding: 0.75rem 1rem 0.5rem !important;
    }

    .glightbox-clean .gslide-title,
    .glightbox-clean .gslide .gslide-title,
    .glightbox-clean .gdesc-inner .gslide-title {
        font-size: 0.9375rem !important;
    }

    .glightbox-clean .gslide-desc,
    .glightbox-clean .gslide .gslide-desc,
    .glightbox-clean .gdesc-inner .gslide-desc {
        font-size: 0.75rem !important;
    }

    .pwd-glightbox-counter {
        top: 0.75rem;
        left: 0.75rem;
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem;
    }
}

/* ============================================ */
/* VIDEO MODAL (global)                         */
/* ============================================ */

.pwd-vmodal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.pwd-vmodal--active {
    display: flex;
}

/* Backdrop */
.pwd-vmodal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 11, 14, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    cursor: pointer;
}

/* Inner */
.pwd-vmodal__inner {
    position: relative;
    width: 100%;
    max-width: 60rem;
    background: var(--pwd-bg-card);
    border: 1px solid var(--pwd-border-base);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.pwd-vmodal--active .pwd-vmodal__inner {
    transform: scale(1);
    opacity: 1;
}

/* Corner accents */
.pwd-vmodal__corner {
    position: absolute;
    width: 1.75rem;
    height: 1.75rem;
    pointer-events: none;
    z-index: 2;
}

.pwd-vmodal__corner--tl {
    top: -2px;
    left: -2px;
    border-top: 2px solid var(--pwd-accent-orange);
    border-left: 2px solid var(--pwd-accent-orange);
}

.pwd-vmodal__corner--br {
    bottom: -2px;
    right: -2px;
    border-bottom: 2px solid var(--pwd-accent-orange);
    border-right: 2px solid var(--pwd-accent-orange);
}

/* Close button */
.pwd-vmodal__close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--pwd-text-secondary);
    font-family: var(--pwd-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    padding: 0.25rem 0;
}

.pwd-vmodal__close:hover {
    color: #fff;
}

/* Video container */
.pwd-vmodal__video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--pwd-bg-base);
    overflow: hidden;
}

.pwd-vmodal__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Info */
.pwd-vmodal__info {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--pwd-border-base);
}

.pwd-vmodal__title {
    font-family: var(--pwd-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    margin-bottom: 0.375rem;
}

.pwd-vmodal__desc {
    font-size: 0.875rem;
    color: var(--pwd-text-secondary);
    line-height: 1.5;
}


/* ============================================ */
/* FOOTER                                       */
/* ============================================ */

/* --- Layout --- */
.pwd-footer {
    position: relative;
    padding: var(--pwd-section-py) 0;
    background-color: var(--pwd-bg-base);
    overflow: hidden;
    border-top: 1px solid var(--pwd-border-subtle);
}

/* --- Background --- */
.pwd-footer__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.pwd-footer__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
    pointer-events: none;
}

.pwd-footer__bg-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 17, 21, 0.8);
}

.pwd-footer__bg-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 66%;
    background: linear-gradient(to top, rgba(234, 88, 12, 0.1), transparent);
    pointer-events: none;
}

/* --- Content --- */
.pwd-footer__content {
    position: relative;
    z-index: 10;
    text-align: center;
}

/* --- Header --- */
.pwd-footer__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2.5rem;
}

.pwd-footer__header-frame {
    position: relative;
    display: inline-block;
    padding: 1rem 2rem;
}

/* Corner accents */
.pwd-footer__header-corner {
    position: absolute;
    width: 2rem;
    height: 2rem;
    pointer-events: none;
}

.pwd-footer__header-corner--tl {
    top: 0;
    left: 0;
    border-top: 2px solid var(--pwd-accent-orange);
    border-left: 2px solid var(--pwd-accent-orange);
}

.pwd-footer__header-corner--br {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid var(--pwd-accent-orange);
    border-right: 2px solid var(--pwd-accent-orange);
}

/* Decorative dots */
.pwd-footer__header-dot {
    position: absolute;
    width: 0.25rem;
    height: 0.25rem;
    background-color: var(--pwd-border-base);
    border-radius: 50%;
    pointer-events: none;
}

.pwd-footer__header-dot--tr {
    top: 0.25rem;
    right: 0.25rem;
}

.pwd-footer__header-dot--bl {
    bottom: 0.25rem;
    left: 0.25rem;
}

.pwd-footer__title {
    font-size: clamp(2rem, 5vw, 3rem);
    color: #fff;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}

.pwd-footer__subtitle {
    color: var(--pwd-text-secondary);
    font-size: 1.125rem;
    max-width: 36rem;
    margin: 0 auto 3.5rem;
    line-height: 1.6;
}

/* --- Contact Buttons --- */
.pwd-footer__buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 56rem;
    margin: 0 auto;
}

/* Shared button styles */
.pwd-footer__btn {
    --_btn-accent: var(--pwd-accent-orange);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.5s, background-color 0.5s;
}

.pwd-footer__btn:hover {
    border-color: color-mix(in srgb, var(--_btn-accent) 50%, transparent);
    background-color: color-mix(in srgb, var(--_btn-accent) 5%, transparent);
}

/* Per-button accent colors */
.pwd-footer__btn--phone {
    --_btn-accent: var(--pwd-accent-orange);
}

.pwd-footer__btn--telegram {
    --_btn-accent: #2AABEE;
}

.pwd-footer__btn--whatsapp {
    --_btn-accent: #25D366;
}

/* Hover glow */
.pwd-footer__btn-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, color-mix(in srgb, var(--_btn-accent) 10%, transparent), transparent);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

.pwd-footer__btn:hover .pwd-footer__btn-glow {
    opacity: 1;
}

/* Icon circle */
.pwd-footer__btn-icon {
    position: relative;
    z-index: 1;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: var(--pwd-bg-base);
    border: 1px solid var(--pwd-border-base);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--_btn-accent);
    margin-bottom: 1rem;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.pwd-footer__btn:hover .pwd-footer__btn-icon {
    transform: scale(1.1);
    border-color: var(--_btn-accent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--_btn-accent) 20%, transparent);
}

/* Send icon offset (matches React original) */
.pwd-footer__btn--telegram .pwd-icon--send {
    transform: translate(2px, 2px);
}

.pwd-footer__btn-label {
    position: relative;
    z-index: 1;
    color: var(--pwd-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.pwd-footer__btn:hover .pwd-footer__btn-label {
    color: var(--_btn-accent);
}

.pwd-footer__btn-value {
    position: relative;
    z-index: 1;
    color: #fff;
    font-family: var(--pwd-font-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
}

/* --- Bottom bar --- */
.pwd-footer__bottom {
    margin-top: 6rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    color: var(--pwd-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.pwd-footer__bottom-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.pwd-footer__bottom-link {
    color: var(--pwd-text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

/* --- Embers canvas --- */
.pwd-footer__embers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
    opacity: 0.8;
}

.pwd-footer__bottom-link:hover {
    color: var(--pwd-accent-orange);
}

/* --- Animations (only with .animations-enabled) --- */
.pwd-footer.animations-enabled .pwd-footer__header,
.pwd-footer.animations-enabled .pwd-footer__subtitle {
    opacity: 0;
    transform: translateY(25px);
    animation: pwd-footer-fade-up 0.7s ease-out forwards;
}

.pwd-footer.animations-enabled .pwd-footer__subtitle {
    animation-delay: 0.15s;
}

.pwd-footer.animations-enabled .pwd-footer__btn {
    opacity: 0;
    transform: translateY(20px);
    animation: pwd-footer-fade-up 0.5s ease-out forwards;
}

.pwd-footer.animations-enabled .pwd-footer__btn:nth-child(1) { animation-delay: 0.2s; }
.pwd-footer.animations-enabled .pwd-footer__btn:nth-child(2) { animation-delay: 0.35s; }
.pwd-footer.animations-enabled .pwd-footer__btn:nth-child(3) { animation-delay: 0.5s; }

@keyframes pwd-footer-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Responsive --- */
@media (min-width: 768px) {
    .pwd-footer__buttons {
        grid-template-columns: repeat(3, 1fr);
    }

    .pwd-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }

    .pwd-footer__bottom-links {
        flex-direction: row;
        gap: 2rem;
    }
}

/* ============================================ */
/* MODAL                                        */
/* ============================================ */

/* --- Overlay --- */
.pwd-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.pwd-modal-overlay--active {
    opacity: 1;
    visibility: visible;
}

/* Backdrop */
.pwd-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* --- Modal container --- */
.pwd-modal {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 920px;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    background: var(--pwd-bg-card);
    border: 1px solid var(--pwd-border-base);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.92) translateY(30px);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.pwd-modal-overlay--active .pwd-modal {
    transform: scale(1) translateY(0);
}

/* --- Scrollable inner wrapper --- */
.pwd-modal__scroll {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
}

/* Scrollbar styling for modal */
.pwd-modal__scroll::-webkit-scrollbar {
    width: 5px;
}

.pwd-modal__scroll::-webkit-scrollbar-track {
    background: transparent;
}

.pwd-modal__scroll::-webkit-scrollbar-thumb {
    background: var(--pwd-border-base);
    border-radius: 3px;
}

/* Scrollbar styling for modal — cross-browser */
.pwd-modal__scroll {
    scrollbar-width: thin;                        /* Firefox */
    scrollbar-color: var(--pwd-border-base) transparent;  /* Firefox */
}

/* --- Corner accents --- */
.pwd-modal__corner {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    z-index: 10;
    pointer-events: none;
    transition: all 0.5s ease;
}

.pwd-modal__corner--tl {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--pwd-accent-orange);
    border-left: 2px solid var(--pwd-accent-orange);
}

.pwd-modal__corner--br {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--pwd-accent-amber);
    border-right: 2px solid var(--pwd-accent-amber);
}

.pwd-modal:hover .pwd-modal__corner--tl {
    width: 3.75rem;
    height: 3.75rem;
}

.pwd-modal:hover .pwd-modal__corner--br {
    width: 3.75rem;
    height: 3.75rem;
}

/* --- Ambient glow --- */
.pwd-modal__glow {
    position: absolute;
    top: -50%;
    left: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(234, 88, 12, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* --- Embers canvas --- */
.pwd-modal__embers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: screen;
}

/* --- Close button --- */
.pwd-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pwd-bg-base);
    border: 1px solid var(--pwd-border-base);
    color: var(--pwd-text-secondary);
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s, color 0.3s;
}

.pwd-modal__close:hover {
    border-color: var(--pwd-accent-orange);
    background: var(--pwd-gradient-fire);
    color: var(--pwd-bg-base);
}

.pwd-modal__close .pwd-icon {
    transition: transform 0.3s;
}

.pwd-modal__close:hover .pwd-icon {
    transform: rotate(90deg);
}

/* --- Header --- */
.pwd-modal__header {
    position: relative;
    z-index: 1;
    padding: 2rem 2rem 0;
    padding-right: 4rem;
}

.pwd-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
}

.pwd-modal__eyebrow-line {
    display: block;
    width: 2rem;
    height: 2px;
    background: var(--pwd-gradient-fire);
    flex-shrink: 0;
}

.pwd-modal__eyebrow-text {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--pwd-accent-orange);
}

.pwd-modal__title {
    font-size: clamp(1.375rem, 3.5vw, 2rem);
    line-height: 1.15;
    letter-spacing: 0.02em;
    background: linear-gradient(110deg, #d6d3d1 15%, #c2410c 35%, #dc2626 45%, #f59e0b 50%, #dc2626 55%, #c2410c 65%, #d6d3d1 85%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Body --- */
.pwd-modal__body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 1.5rem 2rem 2rem;
}

/* --- Image side --- */
.pwd-modal__image-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--pwd-border-base);
    margin-bottom: 0.25rem;
}

.pwd-modal__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    transition: transform 1.5s ease, opacity 0.5s ease;
}

.pwd-modal__image-wrap:hover .pwd-modal__image {
    transform: scale(1.06);
    opacity: 0.95;
}

.pwd-modal__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--pwd-bg-card) 0%, transparent 40%);
    pointer-events: none;
}

/* Badge on image */
.pwd-modal__image-badge {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: rgba(22, 25, 32, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-left: 3px solid var(--pwd-accent-orange);
}

.pwd-modal__image-badge .pwd-icon {
    color: var(--pwd-accent-amber);
}

.pwd-modal__image-badge span {
    font-family: var(--pwd-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
}

/* --- Text side --- */
.pwd-modal__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pwd-modal__description {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--pwd-text-secondary);
    margin-bottom: 1.75rem;
}

.pwd-modal__description strong {
    color: var(--pwd-text-primary);
    font-weight: 500;
}

/* Gift highlight */
.pwd-modal__gift {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
    margin-bottom: 1.75rem;
    background: rgba(234, 88, 12, 0.05);
    border: 1px solid rgba(234, 88, 12, 0.15);
}

.pwd-modal__gift-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pwd-bg-base);
    border: 1px solid var(--pwd-border-base);
    color: var(--pwd-accent-amber);
}

.pwd-modal__gift-text {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--pwd-text-secondary);
}

.pwd-modal__gift-text strong {
    color: var(--pwd-accent-amber);
    font-weight: 600;
}

/* Separator */
.pwd-modal__separator {
    height: 1px;
    background: linear-gradient(to right, var(--pwd-border-base), transparent);
    margin-bottom: 1.5rem;
}

/* Contact label */
.pwd-modal__contact-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--pwd-text-muted);
    margin-bottom: 0.875rem;
}

/* --- Contact buttons --- */
.pwd-modal__contacts {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.pwd-modal__contact {
    --_contact-accent: var(--pwd-accent-orange);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    background: var(--pwd-bg-base);
    border: 1px solid var(--pwd-border-base);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.pwd-modal__contact::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.pwd-modal__contact:hover::before {
    opacity: 1;
}

/* Per-channel accents */
.pwd-modal__contact--phone {
    --_contact-accent: var(--pwd-accent-orange);
}

.pwd-modal__contact--phone::before {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.08), transparent);
}

.pwd-modal__contact--phone:hover {
    border-color: rgba(234, 88, 12, 0.4);
}

.pwd-modal__contact--wa {
    --_contact-accent: #25D366; /* было #ae55ef */
}
.pwd-modal__contact--wa::before {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.08), transparent); /* было rgba(174,85,239,...) */
}
.pwd-modal__contact--wa:hover {
    border-color: rgba(37, 211, 102, 0.4);
}

.pwd-modal__contact--tg {
    --_contact-accent: #2AABEE;
}

.pwd-modal__contact--tg::before {
    background: linear-gradient(135deg, rgba(42, 171, 238, 0.08), transparent);
}

.pwd-modal__contact--tg:hover {
    border-color: rgba(42, 171, 238, 0.4);
}

/* Icon circle */
.pwd-modal__contact-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 2.625rem;
    height: 2.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pwd-border-base);
    background: var(--pwd-bg-card);
    color: var(--_contact-accent);
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.pwd-modal__contact:hover .pwd-modal__contact-icon {
    transform: scale(1.08);
    border-color: var(--_contact-accent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--_contact-accent) 15%, transparent);
}

/* Send icon offset for Telegram */
.pwd-modal__contact--tg .pwd-icon--send {
    transform: translate(2px, 2px);
}

/* Contact info */
.pwd-modal__contact-info {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.pwd-modal__contact-label-text {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--pwd-text-muted);
    margin-bottom: 0.125rem;
    transition: color 0.3s;
}

.pwd-modal__contact-value {
    font-family: var(--pwd-font-display);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
    transition: color 0.3s;
}

.pwd-modal__contact--phone:hover .pwd-modal__contact-value {
    color: var(--pwd-accent-orange);
}

.pwd-modal__contact--wa:hover .pwd-modal__contact-value {
    color: #25D366;
}

.pwd-modal__contact--tg:hover .pwd-modal__contact-value {
    color: #2AABEE;
}

/* Arrow */
.pwd-modal__contact-arrow {
    position: relative;
    z-index: 1;
    margin-left: auto;
    color: var(--pwd-text-muted);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s, transform 0.3s;
}

.pwd-modal__contact:hover .pwd-modal__contact-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* --- Entry animations for children --- */
.pwd-modal__anim {
    opacity: 0;
    transform: translateY(12px);
}

.pwd-modal-overlay--active .pwd-modal__anim {
    animation: pwd-modal-fade-up 0.5s ease forwards;
}

.pwd-modal__anim--d1 { animation-delay: 0.1s !important; }
.pwd-modal__anim--d2 { animation-delay: 0.2s !important; }
.pwd-modal__anim--d3 { animation-delay: 0.3s !important; }
.pwd-modal__anim--d4 { animation-delay: 0.35s !important; }
.pwd-modal__anim--d5 { animation-delay: 0.4s !important; }
.pwd-modal__anim--d6 { animation-delay: 0.45s !important; }
.pwd-modal__anim--d7 { animation-delay: 0.5s !important; }

@keyframes pwd-modal-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Responsive --- */
@media (min-width: 640px) {
    .pwd-modal__header {
        padding: 2.5rem 2.5rem 0;
        padding-right: 4.5rem;
    }

    .pwd-modal__body {
        padding: 1.5rem 2.5rem 2.5rem;
        grid-template-columns: 280px 1fr;
        gap: 1.75rem;
    }

    .pwd-modal__image-wrap {
        aspect-ratio: 4 / 5;
        margin-bottom: 0;
    }

    .pwd-modal__title {
        font-size: 1.75rem;
    }
}

@media (min-width: 768px) {
    .pwd-modal__header {
        padding: 2.5rem 2.5rem 0;
        padding-right: 5rem;
    }

    .pwd-modal__body {
        padding: 1.5rem 2.5rem 2.5rem;
        grid-template-columns: 300px 1fr;
        gap: 2rem;
    }

    .pwd-modal__title {
        font-size: 2rem;
    }
}

@media (max-width: 639px) {
    .pwd-modal__header {
        padding: 1.5rem 1.5rem 0;
        padding-right: 3.5rem;
    }

    .pwd-modal__body {
        padding: 1.25rem 1.5rem 1.75rem;
    }

    .pwd-modal__close {
        top: 0.75rem;
        right: 0.75rem;
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* Вставить в style.css после секции MODAL (перед COOKIE BANNER) */

/* ============================================ */
/* SIMPLE MODAL (pwd-smodal)                    */
/* ============================================ */

/* --- Overlay --- */
.pwd-smodal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.pwd-smodal-overlay--active {
    opacity: 1;
    visibility: visible;
}

/* --- Backdrop --- */
.pwd-smodal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* --- Card --- */
.pwd-smodal {
    position: relative;
    z-index: 1;
    display: flex;                      /* NEW: колонка, чтобы inner мог тянуться/скроллиться */
    flex-direction: column;             /* NEW */
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;                   /* CHANGED: карточка клиппит glow, но САМА НЕ скроллится → уголок не создаёт бар */
    overscroll-behavior: contain;
    background: var(--pwd-bg-card);
    border: 1px solid var(--pwd-border-base);
    transform: scale(0.94) translateY(24px);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.pwd-smodal-overlay--active .pwd-smodal {
    transform: scale(1) translateY(0);
}

/* Scrollbar */
.pwd-smodal__inner::-webkit-scrollbar { width: 5px; }
.pwd-smodal__inner::-webkit-scrollbar-track { background: transparent; }
.pwd-smodal__inner::-webkit-scrollbar-thumb { background: var(--pwd-border-base); border-radius: 3px; }
.pwd-smodal__inner { scrollbar-width: thin; scrollbar-color: var(--pwd-border-base) transparent; }

/* --- Ambient glow --- */
.pwd-smodal__glow {
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(234, 88, 12, 0.10) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* --- Corner accents --- */
.pwd-smodal__corner {
    position: absolute;
    width: 2rem;
    height: 2rem;
    z-index: 10;
    pointer-events: none;
    transition: width 0.5s ease, height 0.5s ease;
}

.pwd-smodal__corner--tl {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--pwd-accent-orange);
    border-left: 2px solid var(--pwd-accent-orange);
}

.pwd-smodal__corner--br {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--pwd-accent-amber);
    border-right: 2px solid var(--pwd-accent-amber);
}

.pwd-smodal:hover .pwd-smodal__corner--tl,
.pwd-smodal:hover .pwd-smodal__corner--br {
    width: 3rem;
    height: 3rem;
}

/* --- Close button --- */
.pwd-smodal__close {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    z-index: 20;
    width: 2.375rem;
    height: 2.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pwd-bg-base);
    border: 1px solid var(--pwd-border-base);
    color: var(--pwd-text-secondary);
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s, color 0.3s;
}

.pwd-smodal__close:hover {
    border-color: var(--pwd-accent-orange);
    background: var(--pwd-gradient-fire);
    color: var(--pwd-bg-base);
}

.pwd-smodal__close .pwd-icon { transition: transform 0.3s; }
.pwd-smodal__close:hover .pwd-icon { transform: rotate(90deg); }

/* --- Inner --- */
.pwd-smodal__inner {
    position: relative;
    z-index: 1;
    padding: 2rem 1.75rem 1.75rem;
    min-height: 0;                      /* NEW: обязательно для flex, иначе не сожмётся */
    overflow-y: auto;                   /* NEW */
    overflow-x: hidden;                 /* NEW */
    -webkit-overflow-scrolling: touch;  /* NEW */
}

/* --- Eyebrow --- */
.pwd-smodal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
}

.pwd-smodal__eyebrow[hidden] { display: none; }

.pwd-smodal__eyebrow-line {
    display: block;
    width: 2rem;
    height: 2px;
    background: var(--pwd-gradient-fire);
    flex-shrink: 0;
}

.pwd-smodal__eyebrow-text {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--pwd-accent-orange);
}

/* --- Title (металл + оранжевый, оба с шиммером) --- */
.pwd-smodal__title {
    font-family: var(--pwd-font-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 5vw, 2rem);
    line-height: 1.12;
    letter-spacing: 0.02em;
    margin-bottom: 0.875rem;
}

.pwd-smodal__title-metal,
.pwd-smodal__title-accent {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pwd-smodal__title-metal {
    background-image: linear-gradient(110deg, #ffffff 15%, #e7e5e4 25%, #78716c 45%, #e7e5e4 65%, #ffffff 85%);
    margin-right: 0.28em;
}

.pwd-smodal__title-accent {
    background-image: linear-gradient(110deg, #f97316 15%, #f59e0b 35%, #facc15 50%, #f59e0b 65%, #f97316 85%);
}

.pwd-smodal__title-metal[hidden],
.pwd-smodal__title-accent[hidden] { display: none; }

/* --- Description --- */
.pwd-smodal__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--pwd-text-secondary);
    margin-bottom: 1.5rem;
}

.pwd-smodal__desc[hidden] { display: none; }

/* --- Separator --- */
.pwd-smodal__separator {
    height: 1px;
    background: linear-gradient(to right, var(--pwd-border-base), transparent);
    margin-bottom: 1.25rem;
}

/* --- Contact label --- */
.pwd-smodal__contact-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--pwd-text-muted);
    margin-bottom: 0.875rem;
}

/* --- Contacts --- */
.pwd-smodal__contacts {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.pwd-smodal__contact {
    --_c: var(--pwd-accent-orange);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.8125rem 1.125rem;
    background: var(--pwd-bg-base);
    border: 1px solid var(--pwd-border-base);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.pwd-smodal__contact::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--_c) 8%, transparent), transparent);
}

.pwd-smodal__contact:hover::before { opacity: 1; }
.pwd-smodal__contact:hover { border-color: color-mix(in srgb, var(--_c) 40%, transparent); }

/* Per-channel accents */
.pwd-smodal__contact--phone { --_c: var(--pwd-accent-orange); }
.pwd-smodal__contact--tg    { --_c: #2AABEE; }
.pwd-smodal__contact--wa    { --_c: #25D366; }

/* Icon */
.pwd-smodal__contact-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pwd-border-base);
    background: var(--pwd-bg-card);
    color: var(--_c);
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.pwd-smodal__contact:hover .pwd-smodal__contact-icon {
    transform: scale(1.08);
    border-color: var(--_c);
    box-shadow: 0 0 16px color-mix(in srgb, var(--_c) 18%, transparent);
}

.pwd-smodal__contact--tg .pwd-icon--send { transform: translate(2px, 2px); }

/* Info */
.pwd-smodal__contact-info {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pwd-smodal__contact-label-text {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--pwd-text-muted);
    margin-bottom: 0.125rem;
}

.pwd-smodal__contact-value {
    font-family: var(--pwd-font-display);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
    transition: color 0.3s;
}

.pwd-smodal__contact:hover .pwd-smodal__contact-value { color: var(--_c); }

/* Arrow */
.pwd-smodal__contact-arrow {
    position: relative;
    z-index: 1;
    margin-left: auto;
    color: var(--pwd-text-muted);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s, transform 0.3s;
}

.pwd-smodal__contact:hover .pwd-smodal__contact-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* --- Entry animations --- */
.pwd-smodal__anim {
    opacity: 0;
    transform: translateY(12px);
}

.pwd-smodal-overlay--active .pwd-smodal__anim {
    animation: pwd-smodal-fade-up 0.5s ease forwards;
}

.pwd-smodal__anim--d1 { animation-delay: 0.08s !important; }
.pwd-smodal__anim--d2 { animation-delay: 0.14s !important; }
.pwd-smodal__anim--d3 { animation-delay: 0.20s !important; }
.pwd-smodal__anim--d4 { animation-delay: 0.26s !important; }
.pwd-smodal__anim--d5 { animation-delay: 0.32s !important; }
.pwd-smodal__anim--d6 { animation-delay: 0.38s !important; }
.pwd-smodal__anim--d7 { animation-delay: 0.44s !important; }

@keyframes pwd-smodal-fade-up {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pwd-smodal__anim {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
    .pwd-smodal { transition: none; }
}

/* --- Responsive --- */
@media (max-width: 480px) {
    .pwd-smodal__inner {
        padding: 1.75rem 1.25rem 1.5rem;
    }

    .pwd-smodal__close {
        top: 0.625rem;
        right: 0.625rem;
        width: 2.125rem;
        height: 2.125rem;
    }

    .pwd-smodal__contact { padding: 0.75rem 1rem; }
    .pwd-smodal__contact-icon { width: 2.375rem; height: 2.375rem; }
}

/* ============================================ */
/* COOKIE BANNER                                */
/* ============================================ */

/* --- Layout --- */
.pwd-cookie {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    z-index: 60;
    max-width: 32rem;
    background-color: rgba(15, 17, 21, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--pwd-border-base);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.pwd-cookie--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* --- Decorative corners --- */
.pwd-cookie__corner {
    position: absolute;
    width: 0.875rem;
    height: 0.875rem;
    pointer-events: none;
    transition: all 0.4s ease;
}

.pwd-cookie__corner--tl {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--pwd-accent-orange);
    border-left: 2px solid var(--pwd-accent-orange);
}

.pwd-cookie__corner--br {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--pwd-accent-orange);
    border-right: 2px solid var(--pwd-accent-orange);
}

.pwd-cookie:hover .pwd-cookie__corner--tl,
.pwd-cookie:hover .pwd-cookie__corner--br {
    width: 1.25rem;
    height: 1.25rem;
}

/* --- Inner layout --- */
.pwd-cookie__inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
}

/* --- Text --- */
.pwd-cookie__text {
    flex: 1;
    min-width: 0;
}

.pwd-cookie__line {
    font-family: var(--pwd-font-sans);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--pwd-text-secondary);
    margin: 0;
}

.pwd-cookie__line--extra {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--pwd-border-base);
}

.pwd-cookie__link {
    color: var(--pwd-accent-orange);
    text-decoration: none;
    border-bottom: 1px solid rgba(249, 115, 22, 0.4);
    transition: color 0.2s, border-color 0.2s;
}

.pwd-cookie__link:hover {
    color: var(--pwd-accent-amber);
    border-bottom-color: var(--pwd-accent-amber);
}

/* "Подробнее" — inline button styled as link */
.pwd-cookie__more {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--pwd-accent-orange);
    border-bottom: 1px solid rgba(249, 115, 22, 0.4);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.pwd-cookie__more:hover {
    color: var(--pwd-accent-amber);
    border-bottom-color: var(--pwd-accent-amber);
}

.pwd-cookie__more[aria-expanded="true"] {
    display: none;
}

/* --- Accept button --- */
.pwd-cookie__btn {
    flex-shrink: 0;
    align-self: stretch;
    background: var(--pwd-gradient-fire);
    color: var(--pwd-bg-base);
    font-family: var(--pwd-font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.875rem 2rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.pwd-cookie__btn:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

/* --- Responsive --- */
@media (min-width: 640px) {
    .pwd-cookie {
        left: 1.5rem;
        bottom: 1.5rem;
        right: auto;
        max-width: 34rem;
        padding: 1.5rem 1.75rem;
    }

    .pwd-cookie__inner {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
    }

    .pwd-cookie__btn {
        align-self: auto;
    }
}

/* ============================================ */
/* CATALOG HERO (shared across catalog pages)   */
/* ============================================ */
/* Insert into style.css — после секции TEXT BOX
   (зона переиспользуемых компонентов), перед SVG ICONS.
   Используется на страницах каталога: Мангалы, Решётки-гриль,
   Планчи, Аксессуары. Контент приходит из template-parts/catalog-hero.php */

/* --- Layout --- */
.pwd-cathero {
    padding: 2rem 0 4rem;
    background-color: var(--pwd-bg-base);
    position: relative;
}

.pwd-cathero__frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--pwd-border-base);
    background-color: var(--pwd-bg-card);
    isolation: isolate;
    min-height: 32rem;
    display: flex;
    align-items: center;
}

/* --- Корнерные акценты --- */
.pwd-cathero__corner {
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    pointer-events: none;
    z-index: 5;
    transition: all 0.5s ease;
}

.pwd-cathero__corner--tl {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--pwd-accent-orange);
    border-left: 2px solid var(--pwd-accent-orange);
}

.pwd-cathero__corner--tr {
    top: -1px;
    right: -1px;
    border-top: 2px solid var(--pwd-accent-orange);
    border-right: 2px solid var(--pwd-accent-orange);
}

.pwd-cathero__corner--bl {
    bottom: -1px;
    left: -1px;
    border-bottom: 2px solid var(--pwd-accent-orange);
    border-left: 2px solid var(--pwd-accent-orange);
}

.pwd-cathero__corner--br {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--pwd-accent-orange);
    border-right: 2px solid var(--pwd-accent-orange);
}

.pwd-cathero__frame:hover .pwd-cathero__corner {
    width: 3.25rem;
    height: 3.25rem;
}

/* --- Background image --- */
.pwd-cathero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.pwd-cathero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    display: block;
    opacity: 0.35;
    filter: grayscale(20%);
}

.pwd-cathero__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--pwd-bg-card) 0%,
        rgba(22, 25, 32, 0.92) 35%,
        rgba(22, 25, 32, 0.4) 70%,
        rgba(22, 25, 32, 0.15) 100%
    );
}

/* --- Декоративный glow --- */
.pwd-cathero__glow {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 140%;
    background: radial-gradient(
        ellipse at center,
        rgba(249, 115, 22, 0.08) 0%,
        transparent 60%
    );
    filter: blur(40px);
    pointer-events: none;
    z-index: 1;
}

/* --- Content --- */
.pwd-cathero__content {
    position: relative;
    z-index: 2;
    padding: 3rem 1.75rem;
    max-width: 42rem;
    width: 100%;
}

/* --- Breadcrumbs --- */
.pwd-cathero__breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.pwd-cathero__breadcrumbs .pwd-icon {
    color: var(--pwd-text-muted);
    flex-shrink: 0;
}

.pwd-cathero__crumb {
    font-family: var(--pwd-font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pwd-text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

a.pwd-cathero__crumb:hover {
    color: var(--pwd-accent-orange);
}

.pwd-cathero__crumb--current {
    color: var(--pwd-accent-orange);
}

/* --- Badge --- */
.pwd-cathero__badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pwd-cathero__badge-line {
    display: block;
    height: 2px;
    width: 3rem;
    background: var(--pwd-gradient-fire);
    flex-shrink: 0;
}

.pwd-cathero__badge-text {
    color: var(--pwd-accent-orange);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* --- Title --- */
.pwd-cathero__title {
    font-family: var(--pwd-font-display);
    font-size: clamp(2.25rem, 6vw, 4.25rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #fff;
    margin-bottom: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pwd-cathero__title-line {
    display: block;
    padding-block: 0.14em;     /* запас сверху и снизу под Й/У/Д/Ё */
    margin-block: -0.14em;
}

.pwd-cathero__title-accent {
    background-image: linear-gradient(
        110deg,
        #d6d3d1 15%,
        #c2410c 35%,
        #dc2626 45%,
        #f59e0b 50%,
        #dc2626 55%,
        #c2410c 65%,
        #d6d3d1 85%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: clamp(1.8rem, 4.85vw, 3.4375rem);
}

/* «Серебряный» шиммер для первой строки заголовка.
   Анимация приходит из соседнего класса .pwd-text-shimmer. */
.pwd-cathero__title-line.pwd-text-shimmer--steel {
    background-image: linear-gradient(
        110deg,
        #ffffff 15%,
        #e7e5e4 25%,
        #78716c 45%,
        #e7e5e4 65%,
        #ffffff 85%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* --- Description --- */
.pwd-cathero__description {
    color: var(--pwd-text-secondary);
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    line-height: 1.7;
    border-left: 2px solid var(--pwd-border-base);
    padding-left: 1.25rem;
    margin-bottom: 2.25rem;
    max-width: 34rem;
}

/* --- Actions --- */
.pwd-cathero__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
    margin-bottom: 2.5rem;
}

.pwd-cathero__btn-primary {
    justify-content: center;
    padding: 1rem 2rem;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
}

.pwd-cathero__btn-secondary {
    justify-content: center;
    padding: 1rem 2rem;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
}

/* --- Highlights --- */
.pwd-cathero__highlights {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding-top: 2rem;
    border-top: 1px solid var(--pwd-border-base);
    list-style: none;
}

.pwd-cathero__highlight {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.pwd-cathero__highlight-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--pwd-bg-base);
    border: 1px solid var(--pwd-border-base);
    color: var(--pwd-accent-orange);
}

.pwd-cathero__highlight-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.pwd-cathero__highlight-title {
    font-family: var(--pwd-font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.15rem;
}

.pwd-cathero__highlight-sub {
    font-size: 0.75rem;
    color: var(--pwd-text-muted);
}

/* --- Mobile-only hero image --- */
.pwd-cathero__mobile-image {
    position: relative;
    margin-top: 2rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--pwd-border-base);
}

.pwd-cathero__mobile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pwd-cathero__mobile-image-corner {
    position: absolute;
    width: 1.75rem;
    height: 1.75rem;
    pointer-events: none;
    z-index: 2;
}

.pwd-cathero__mobile-image-corner--tl {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--pwd-accent-orange);
    border-left: 2px solid var(--pwd-accent-orange);
}

.pwd-cathero__mobile-image-corner--br {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--pwd-accent-orange);
    border-right: 2px solid var(--pwd-accent-orange);
}

/* --- Animations (only with .animations-enabled) --- */
.pwd-cathero.animations-enabled .pwd-cathero__breadcrumbs,
.pwd-cathero.animations-enabled .pwd-cathero__badge,
.pwd-cathero.animations-enabled .pwd-cathero__title,
.pwd-cathero.animations-enabled .pwd-cathero__description,
.pwd-cathero.animations-enabled .pwd-cathero__actions,
.pwd-cathero.animations-enabled .pwd-cathero__highlights {
    opacity: 0;
    transform: translateY(25px);
    animation: pwd-cathero-fade-up 0.8s ease-out forwards;
}

.pwd-cathero.animations-enabled .pwd-cathero__badge       { animation-delay: 0.1s; }
.pwd-cathero.animations-enabled .pwd-cathero__title       { animation-delay: 0.2s; }
.pwd-cathero.animations-enabled .pwd-cathero__description { animation-delay: 0.35s; }
.pwd-cathero.animations-enabled .pwd-cathero__actions     { animation-delay: 0.5s; }
.pwd-cathero.animations-enabled .pwd-cathero__highlights  { animation-delay: 0.65s; }

@keyframes pwd-cathero-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Responsive --- */
@media (min-width: 600px) {
    .pwd-cathero__content {
        padding: 3.5rem 2.5rem;
    }

    .pwd-cathero__actions {
        flex-direction: row;
        align-items: center;
    }

    .pwd-cathero__btn-primary,
    .pwd-cathero__btn-secondary {
        justify-content: flex-start;
    }

    .pwd-cathero__highlights {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

@media (min-width: 900px) {
    .pwd-cathero {
        padding: 2.5rem 0 5rem;
    }

    .pwd-cathero__frame {
        min-height: 38rem;
    }

    .pwd-cathero__content {
        padding: 4.5rem 4rem;
        max-width: 48rem;
    }

    .pwd-cathero__bg-img {
        opacity: 0.84;
    }

    .pwd-cathero__bg-overlay {
        background: linear-gradient(
            to right,
            var(--pwd-bg-card) 0%,
            rgba(22, 25, 32, 0.92) 30%,
            rgba(22, 25, 32, 0.35) 65%,
            rgba(22, 25, 32, 0.1) 100%
        );
    }

    .pwd-cathero__mobile-image {
        display: none;
    }
}

@media (min-width: 1200px) {
    .pwd-cathero__frame {
        min-height: 42rem;
    }

    .pwd-cathero__content {
        padding: 5rem 4.5rem;
    }
}

/* ============================================ */
/* ARTICLE HERO (универсальный hero)            */
/* ============================================ */
/* Переиспользуемый hero для статей, инфостраниц и др.
   Базовый класс .pwd-ahero + модификаторы (.pwd-ahero--info).
   Шаблоны: template-parts/article-hero.php, info-hero.php. */

/* --- Layout --- */
.pwd-ahero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    padding: 6rem 0 4rem;
    overflow: hidden;
}

/* --- Background --- */
.pwd-ahero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.pwd-ahero__bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    transition: transform 8s ease;
}

.pwd-ahero:hover .pwd-ahero__bg-image {
    transform: scale(1.04);
}

.pwd-ahero__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        var(--pwd-bg-base) 0%,
        rgba(15, 17, 21, 0.7) 40%,
        rgba(15, 17, 21, 0.3) 100%
    );
}

/* --- Grid lines --- */
.pwd-ahero__grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    padding: 0 calc(var(--pwd-container-px) * 0.5);
    pointer-events: none;
}

.pwd-ahero__grid-line {
    width: 1px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.04);
}

/* --- Content --- */
.pwd-ahero__content {
    position: relative;
    z-index: 10;
    width: 100%;
}

/* --- Breadcrumbs --- */
.pwd-ahero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
    color: var(--pwd-text-muted);
}

.pwd-ahero__breadcrumb .pwd-icon {
    opacity: 0.5;
    color: var(--pwd-text-muted);
}

.pwd-ahero__breadcrumb-link {
    color: var(--pwd-text-secondary);
    transition: color 0.3s;
}

.pwd-ahero__breadcrumb-link:hover {
    color: var(--pwd-accent-orange);
}

.pwd-ahero__breadcrumb-current {
    color: var(--pwd-text-muted);
}

/* --- Meta row --- */
.pwd-ahero__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.pwd-ahero__badge {
    font-family: var(--pwd-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.25rem 0.875rem;
    background: var(--pwd-gradient-fire);
    color: var(--pwd-bg-base);
    transition: opacity 0.3s;
}

.pwd-ahero__badge:hover {
    opacity: 0.88;
}

.pwd-ahero__meta-item {
    font-size: 0.8125rem;
    color: var(--pwd-text-muted);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.pwd-ahero__meta-item .pwd-icon {
    color: var(--pwd-text-muted);
}

/* --- Title --- */
.pwd-ahero__title {
    font-family: var(--pwd-font-display);
    font-size: clamp(2rem, 6vw, 3.75rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #fff;
    max-width: 56rem;
    margin-bottom: 1.25rem;
}

/* Двухцветный шиммер-заголовок (модификатор) */
.pwd-ahero__title--shimmer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.4em;
    color: #fff; /* fallback */
}

.pwd-ahero__title-white {
    background: linear-gradient(110deg, #ffffff 15%, #e7e5e4 25%, #78716c 45%, #e7e5e4 65%, #ffffff 85%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pwd-ahero__title-orange {
    background: linear-gradient(110deg, #f97316 15%, #f59e0b 35%, #facc15 50%, #f59e0b 65%, #f97316 85%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* --- Subtitle --- */
.pwd-ahero__subtitle {
    font-size: 1.0625rem;
    color: var(--pwd-text-secondary);
    max-width: 42rem;
    line-height: 1.7;
}

/* --- Animations --- */
.pwd-ahero.animations-enabled .pwd-ahero__breadcrumb,
.pwd-ahero.animations-enabled .pwd-ahero__meta,
.pwd-ahero.animations-enabled .pwd-ahero__title,
.pwd-ahero.animations-enabled .pwd-ahero__subtitle {
    opacity: 0;
    transform: translateY(30px);
    animation: pwd-ahero-fade-up 0.8s ease-out forwards;
}

.pwd-ahero.animations-enabled .pwd-ahero__meta     { animation-delay: 0.1s; }
.pwd-ahero.animations-enabled .pwd-ahero__title    { animation-delay: 0.2s; }
.pwd-ahero.animations-enabled .pwd-ahero__subtitle { animation-delay: 0.35s; }

@keyframes pwd-ahero-fade-up {
    to { opacity: 1; transform: translateY(0); }
}

/* --- Responsive --- */
@media (min-width: 768px) {
    .pwd-ahero {
        min-height: 600px;
        padding: 7.5rem 0 5rem;
    }
}

/* ============================================ */
/* ARTICLE HERO — модификатор INFO              */
/* ============================================ */
/* Компактная высота для инфостраниц с малым объёмом текста в hero. */

.pwd-ahero--info {
    min-height: 510px;
    padding: 5rem 0 3rem;
}

@media (min-width: 768px) {
    .pwd-ahero--info {
        min-height: 520px;
        padding: 6.5rem 0 3.5rem;
    }
}

/* ============================================ */
/* PRODUCT PROMO (seasonal action)              */
/* ============================================ */

/* --- Layout --- */
.pwd-ppromo {
    padding: var(--pwd-section-py) 0;
    background-color: var(--pwd-bg-base);
    border-top: 1px solid var(--pwd-border-subtle);
    position: relative;
    overflow: hidden;
}

.pwd-ppromo__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    background: linear-gradient(135deg, var(--pwd-bg-card) 0%, rgba(22, 25, 32, 0.6) 100%);
    border: 1px solid var(--pwd-border-base);
    overflow: hidden;
    isolation: isolate;
}

/* --- Decorative corners --- */
.pwd-ppromo__corner {
    position: absolute;
    width: 2.25rem;
    height: 2.25rem;
    pointer-events: none;
    z-index: 5;
    transition: all 0.4s ease;
}

.pwd-ppromo__corner--tl {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--pwd-accent-orange);
    border-left: 2px solid var(--pwd-accent-orange);
}

.pwd-ppromo__corner--br {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--pwd-accent-orange);
    border-right: 2px solid var(--pwd-accent-orange);
}

.pwd-ppromo__inner:hover .pwd-ppromo__corner--tl,
.pwd-ppromo__inner:hover .pwd-ppromo__corner--br {
    width: 2.75rem;
    height: 2.75rem;
}

/* --- Glow --- */
.pwd-ppromo__glow {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 50%;
    height: 130%;
    background: radial-gradient(
        ellipse at center,
        rgba(249, 115, 22, 0.08) 0%,
        transparent 60%
    );
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

/* --- Content --- */
.pwd-ppromo__content {
    position: relative;
    z-index: 2;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Бейджи */
.pwd-ppromo__badges {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.pwd-ppromo__badge-special {
    display: inline-block;
    background: var(--pwd-gradient-fire);
    color: var(--pwd-bg-base);
    font-family: var(--pwd-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.3rem 0.75rem;
}

.pwd-ppromo__badge-date {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--pwd-accent-orange);
    font-family: var(--pwd-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.3rem 0.625rem 0.3rem 0.5rem;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

/* Заголовок */
.pwd-ppromo__title {
    font-family: var(--pwd-font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: -0.01em;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.pwd-ppromo__title-main {
    color: #fff;
}

.pwd-ppromo__title-accent {
    background-image: linear-gradient(110deg, #ea580c 15%, #ffffff 40%, #fbbf24 60%, #ea580c 85%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Описание */
.pwd-ppromo__desc {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--pwd-text-secondary);
    border-left: 2px solid var(--pwd-border-base);
    padding-left: 1rem;
    max-width: 32rem;
}

.pwd-ppromo__desc-date {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

/* Список подарков */
.pwd-ppromo__gifts {
    margin-top: 0.25rem;
}

.pwd-ppromo__gifts-title {
    font-family: var(--pwd-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
}

.pwd-ppromo__gifts-title-line {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: var(--pwd-gradient-fire);
    flex-shrink: 0;
}

.pwd-ppromo__gifts-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.pwd-ppromo__gifts-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--pwd-text-primary);
}

.pwd-ppromo__gifts-item .pwd-icon--flame {
    color: var(--pwd-accent-orange);
    fill: rgba(249, 115, 22, 0.15);
    flex-shrink: 0;
}

/* Доставка */
.pwd-ppromo__delivery {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background-color: rgba(15, 17, 21, 0.6);
    border: 1px solid var(--pwd-border-base);
    border-left: 3px solid var(--pwd-accent-orange);
    margin-top: 0.25rem;
}

.pwd-ppromo__delivery-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pwd-bg-base);
    border: 1px solid var(--pwd-border-base);
    color: var(--pwd-accent-orange);
}

.pwd-ppromo__delivery-text {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    min-width: 0;
}

.pwd-ppromo__delivery-text strong {
    font-family: var(--pwd-font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.15rem;
}

.pwd-ppromo__delivery-text span {
    font-size: 0.75rem;
    color: var(--pwd-text-muted);
}

/* CTA */
.pwd-ppromo__cta-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 0.5rem;
}

.pwd-ppromo__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    background: var(--pwd-gradient-fire);
    color: var(--pwd-bg-base);
    font-family: var(--pwd-font-display);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 1rem 2rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    align-self: flex-start;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.pwd-ppromo__cta:hover {
    opacity: 0.92;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(249, 115, 22, 0.4);
}

.pwd-ppromo__cta .pwd-icon {
    transition: transform 0.3s ease;
}

.pwd-ppromo__cta:hover .pwd-icon {
    transform: translateX(4px);
}

.pwd-ppromo__cta-note {
    font-size: 0.6875rem;
    color: var(--pwd-text-muted);
    line-height: 1.5;
    letter-spacing: 0.02em;
}

/* --- Visual side --- */
.pwd-ppromo__visual {
    position: relative;
    z-index: 1;
    min-height: 14rem;
    overflow: hidden;
    order: -1; /* на мобильных фото сверху */
}

.pwd-ppromo__visual-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 14rem;
    overflow: hidden;
}

/* Обёртка picture с десктопным и мобильным изображением */
.pwd-ppromo__visual-picture {
    position: absolute;
    inset: 0;
    display: block;
}

.pwd-ppromo__visual-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 1.5s ease;
}

.pwd-ppromo__inner:hover .pwd-ppromo__visual-image img {
    transform: scale(1.04);
}

/* На мобильных оставляем только едва заметное затемнение */
.pwd-ppromo__visual-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(15, 17, 21, 0.02) 0%,
        rgba(15, 17, 21, 0.12) 100%
    );
    pointer-events: none;
}

/* Подарочный бейдж поверх фото */
.pwd-ppromo__gift-badge {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    background: rgba(15, 17, 21, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-left: 3px solid var(--pwd-accent-orange);
}

.pwd-ppromo__gift-badge-icon {
    flex-shrink: 0;
    color: var(--pwd-accent-orange);
}

.pwd-ppromo__gift-badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 0.25rem;
}

.pwd-ppromo__gift-badge-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--pwd-text-muted);
}

.pwd-ppromo__gift-badge-value {
    font-family: var(--pwd-font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}

/* --- Animations --- */
.pwd-ppromo.animations-enabled .pwd-ppromo__inner {
    opacity: 0;
    transform: scale(0.98);
    animation: pwd-ppromo-scale-in 0.7s ease-out forwards;
}

.pwd-ppromo.animations-enabled .pwd-ppromo__content > * {
    opacity: 0;
    transform: translateY(15px);
    animation: pwd-ppromo-fade-up 0.5s ease-out forwards;
}

.pwd-ppromo.animations-enabled .pwd-ppromo__content > *:nth-child(1) { animation-delay: 0.2s; }
.pwd-ppromo.animations-enabled .pwd-ppromo__content > *:nth-child(2) { animation-delay: 0.3s; }
.pwd-ppromo.animations-enabled .pwd-ppromo__content > *:nth-child(3) { animation-delay: 0.4s; }
.pwd-ppromo.animations-enabled .pwd-ppromo__content > *:nth-child(4) { animation-delay: 0.5s; }
.pwd-ppromo.animations-enabled .pwd-ppromo__content > *:nth-child(5) { animation-delay: 0.6s; }
.pwd-ppromo.animations-enabled .pwd-ppromo__content > *:nth-child(6) { animation-delay: 0.7s; }

.pwd-ppromo.animations-enabled .pwd-ppromo__gift-badge {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
    animation: pwd-ppromo-badge-in 0.6s ease-out 0.6s forwards;
}

@keyframes pwd-ppromo-scale-in {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pwd-ppromo-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pwd-ppromo-badge-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- Responsive --- */
@media (min-width: 600px) {
    .pwd-ppromo__content {
        padding: 2.5rem 2rem;
    }

    .pwd-ppromo__visual {
        min-height: 18rem;
    }

    .pwd-ppromo__visual-image {
        min-height: 18rem;
    }
}

/* Мобильная фотография: широкое соотношение сторон */
@media (max-width: 899px) {
    .pwd-ppromo__visual {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .pwd-ppromo__visual-image {
        min-height: 0;
    }
}

@media (min-width: 900px) {
    .pwd-ppromo__inner {
        grid-template-columns: 1.4fr 1fr;
        min-height: 30rem;
    }

    .pwd-ppromo__content {
        padding: 3rem 3rem 3rem 3rem;
        justify-content: center;
    }

    .pwd-ppromo__visual {
        order: 0; /* справа на десктопе */
        min-height: auto;
    }

    .pwd-ppromo__visual-overlay {
        background: linear-gradient(
            to right,
            rgba(15, 17, 21, 0.4) 0%,
            rgba(15, 17, 21, 0) 50%
        );
    }

    .pwd-ppromo__gift-badge {
        bottom: 1.5rem;
        left: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .pwd-ppromo__content {
        padding: 3.5rem 3.5rem 3.5rem 3.5rem;
        gap: 1.5rem;
    }

    .pwd-ppromo__inner {
        grid-template-columns: 1.5fr 1fr;
    }
}