/* /shop.base.css
   SHOP CORE (ALL SIZES)
   - только shop-* и product-card*
   - без правок header/footer/.page/global
*/

/* =========================
   0) TOKENS (SHOP ONLY)
   ========================= */
body[data-page="shop"] {
    /* layout */
    --shop-max: 860px;
    /* ширина контента магазина */
    --shop-pad-x: 16px;
    /* горизонтальный паддинг внутри shop-wrap */
    --shop-gap: 14px;

    /* grid controllers (универсально) */
    --shop-cols: 3;
    /* X: кол-во карточек в ряд на широких */
    --shop-cols-md: 2;
    /* X: кол-во карточек в ряд на средних */
    --shop-cols-sm: 1;
    /* X: кол-во карточек в ряд на мобильных */

    /* card look */
    --shop-card-radius: 20px;
    --shop-card-border: rgba(255, 255, 255, .08);

    --shop-accent: var(--accent);
    --shop-accent-soft: rgba(245, 193, 91, .10);
    --shop-text: rgba(244, 244, 244, .92);
    --shop-muted: rgba(244, 244, 244, .68);
    --shop-dim: rgba(244, 244, 244, .56);

    --shop-shadow: 0 18px 52px rgba(0, 0, 0, .55);
    --shop-shadow-soft: 0 14px 36px rgba(0, 0, 0, .42);

    /* =========================
       PRODUCT CARD CONTROLLERS (GLOBAL)
       ========================= */

    /* size */
    --pc-min-h: 20px;
    /* Y: минимальная высота карточек */
    --pc-h: 20px;
    /* Y: если хочешь фикс — ставь px (например 320px) */
    --pc-pad-x: 16px;
    /* внутренние отступы по X */
    --pc-pad-y: 16px;
    /* внутренние отступы по Y */

    /* hover */
    --pc-hover-scale: 1.05;
    /* scale при наведении (1.05 = +5%) */
    --pc-hover-raise: -2px;
    /* лёгкий подъём (можно 0px) */
    --pc-hover-dur: .16s;

    /* vertical distribution (без костылей) */
    --pc-top-gap: 14px;
    /* расстояние от top-строки до заголовка */
    --pc-content-bottom-gap: 0px;
    /* если хочешь прижать/отпустить весь контент вниз */

    /* per-block spacing (вертикальные отступы) */
    --pc-title-mt: 0px;
    /* доп. отступ сверху заголовка (после --pc-top-gap) */
    --pc-sub-mt: 8px;
    --pc-pills-mt: 12px;
    --pc-cta-mt: 14px;

    /* per-block position (тонкая подстройка) */
    --pc-title-x: 0px;
    --pc-title-y: 0px;
    --pc-sub-x: 0px;
    --pc-sub-y: 0px;
    --pc-pills-x: 0px;
    --pc-pills-y: 0px;
    --pc-cta-x: 0px;
    --pc-cta-y: 0px;

    /* text widths */
    --pc-sub-max: 46ch;
    /* ширина описания */
    --pc-pills-wrap: wrap;
    /* wrap / nowrap */
    --pc-pills-gap: 8px;
    /* зазор между pills */
}

/* =========================
   1) WRAPPER
   ========================= */
body[data-page="shop"] .shop-wrap {
    width: 100%;
    max-width: var(--shop-max);
    margin: 0 auto;
    padding-left: calc(var(--shop-pad-x) + env(safe-area-inset-left));
    padding-right: calc(var(--shop-pad-x) + env(safe-area-inset-right));
    box-sizing: border-box;
    min-width: 0;
}

/* секции магазина не должны “жить своей жизнью” по ширине */
body[data-page="shop"] .shop-hero,
body[data-page="shop"] .shop-tabs-section,
body[data-page="shop"] .shop-grid,
body[data-page="shop"] .shop-trust {
    width: 100%;
    box-sizing: border-box;
}

/* =========================
   2) HERO
   ========================= */
body[data-page="shop"] .shop-hero {
    padding: 18px 0 14px;
}

body[data-page="shop"] .hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
}

body[data-page="shop"] .hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;

    padding: 8px 12px;
    border-radius: 999px;

    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .02);
    color: rgba(255, 255, 255, .74);
}

body[data-page="shop"] .hero-title {
    margin: 0;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--shop-text);
}

body[data-page="shop"] .hero-sub {
    margin: 14px 0 0;
    max-width: 820px;
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .72);
    text-wrap: balance;
}

/* =========================
   3) CONTROLS (search + sort)
   ========================= */
body[data-page="shop"] .shop-controls {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 112px;
    gap: 12px;
    align-items: center;
}

body[data-page="shop"] .shop-search {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 44px;
    padding: 10px 12px;

    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .02);

    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18) inset;
}

body[data-page="shop"] .shop-search-icn {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(245, 193, 91, .55);
    border-radius: 999px;
    position: relative;
    flex: 0 0 auto;
}

body[data-page="shop"] .shop-search-icn::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 2px;
    background: rgba(245, 193, 91, .55);
    right: -7px;
    bottom: -2px;
    transform: rotate(45deg);
    border-radius: 2px;
}

body[data-page="shop"] .shop-search input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;

    color: rgba(255, 255, 255, .88);
    font-size: 14px;
    line-height: 1.2;
}

body[data-page="shop"] .shop-search input::placeholder {
    color: rgba(255, 255, 255, .42);
}

body[data-page="shop"] .shop-sort {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 44px;
    padding: 0 14px;

    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .02);

    color: rgba(255, 255, 255, .76);
    font-size: 12px;
    letter-spacing: .10em;
    text-transform: uppercase;

    cursor: pointer;
    user-select: none;
}

body[data-page="shop"] .shop-sort:hover {
    border-color: rgba(255, 255, 255, .14);
}

body[data-page="shop"] .shop-sort-icn {
    width: 10px;
    height: 10px;
    border-left: 2px solid rgba(245, 193, 91, .55);
    border-bottom: 2px solid rgba(245, 193, 91, .55);
    transform: rotate(-45deg);
    margin-top: 2px;
}

/* =========================
   4) TABS
   ========================= */
body[data-page="shop"] .shop-tabs-section {
    padding: 10px 0 6px;
}

body[data-page="shop"] .shop-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 10px;
    align-items: center;

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    padding: 6px 0 10px;
    margin: 0;
}

body[data-page="shop"] .shop-tab {
    flex: 0 0 auto;

    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .02);
    color: rgba(255, 255, 255, .70);

    border-radius: 999px;
    padding: 10px 14px;

    font-size: 12px;
    letter-spacing: .10em;
    text-transform: uppercase;

    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, transform .14s ease, color .14s ease;
}

body[data-page="shop"] .shop-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, .14);
}

body[data-page="shop"] .shop-tab:active {
    transform: translateY(0);
}

body[data-page="shop"] .shop-tab.is-active {
    border-color: rgba(245, 193, 91, .38);
    background: rgba(245, 193, 91, .08);
    color: rgba(255, 255, 255, .88);
}

/* =========================
   5) GRIDS
   ========================= */
body[data-page="shop"] .shop-grid {
    display: none;
    padding: 10px 0 16px;
}

body[data-page="shop"] .shop-grid.is-active {
    display: block;
}

body[data-page="shop"] .shop-grid .shop-wrap {
    display: grid;
    grid-template-columns: repeat(var(--shop-cols), minmax(0, 1fr));
    gap: var(--shop-gap);
}

/* md */
@media (max-width: 1180px) {
    body[data-page="shop"] .shop-grid .shop-wrap {
        grid-template-columns: repeat(var(--shop-cols-md), minmax(0, 1fr));
    }
}

/* sm */
@media (max-width: 820px) {
    body[data-page="shop"] .shop-grid .shop-wrap {
        grid-template-columns: repeat(var(--shop-cols-sm), minmax(0, 1fr));
    }
}

/* =========================
   6) PRODUCT CARD
   ========================= */
body[data-page="shop"] .product-card {
    position: relative;
    display: flex;
    flex-direction: column;

    border-radius: var(--shop-card-radius);
    border: 1px solid var(--shop-card-border);

    background:
        radial-gradient(900px 300px at 15% 0%, rgba(255, 255, 255, .04), transparent 55%),
        linear-gradient(145deg, var(--bg-elevated), #060915);

    padding: var(--pc-pad-y) var(--pc-pad-x);

    box-shadow: var(--shop-shadow);
    overflow: hidden;

    text-decoration: none;
    color: inherit;

    min-height: var(--pc-min-h);
    height: var(--pc-h);

    isolation: isolate;

    transform: translateZ(0);
    transition:
        transform var(--pc-hover-dur) ease,
        border-color var(--pc-hover-dur) ease;
}

body[data-page="shop"] .product-card:hover {
    border-color: rgba(255, 255, 255, .12);
    transform:
        translateY(var(--pc-hover-raise)) scale(var(--pc-hover-scale));
}

body[data-page="shop"] .product-card.is-disabled {
    opacity: .62;
    filter: saturate(.85);
    pointer-events: none;
}

/* верхняя строка */
body[data-page="shop"] .pc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    flex: 0 0 auto;
}

body[data-page="shop"] .pc-meta {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

body[data-page="shop"] .pc-price {
    font-size: 12px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
}

/* единый вертикальный ритм карточки (без “подгонки”) */
body[data-page="shop"] .pc-title {
    margin-top: calc(var(--pc-top-gap) + var(--pc-title-mt));
    transform: translate(var(--pc-title-x), var(--pc-title-y));
    font-size: 18px;
    font-weight: 850;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .92);
}

body[data-page="shop"] .pc-sub {
    margin-top: var(--pc-sub-mt);
    transform: translate(var(--pc-sub-x), var(--pc-sub-y));
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .68);
    max-width: var(--pc-sub-max);
}

/* pills */
body[data-page="shop"] .pc-pills {
    margin-top: var(--pc-pills-mt);
    transform: translate(var(--pc-pills-x), var(--pc-pills-y));

    display: flex;
    flex-wrap: var(--pc-pills-wrap);
    gap: var(--pc-pills-gap);
}

body[data-page="shop"] .pc-pill {
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 999px;

    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .02);
    color: rgba(255, 255, 255, .66);

    letter-spacing: .08em;
    text-transform: uppercase;
}

/* CTA */
body[data-page="shop"] .pc-cta {
    margin-top: var(--pc-cta-mt);
    transform: translate(var(--pc-cta-x), var(--pc-cta-y));

    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 193, 91, .86);

    /* глобальный сдвиг всей “нижней” части, если нужно */
    margin-bottom: var(--pc-content-bottom-gap);
}

body[data-page="shop"] .pc-arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(245, 193, 91, .70);
    border-bottom: 2px solid rgba(245, 193, 91, .70);
    transform: rotate(-45deg);
    margin-top: 1px;
}

/* =========================
   7) FEATURED CARD
   ========================= */
body[data-page="shop"] .product-card--featured {
    border-color: rgba(245, 193, 91, .18);
    background:
        radial-gradient(900px 300px at 18% 0%, rgba(245, 193, 91, .16), transparent 58%),
        linear-gradient(145deg, var(--bg-elevated), #060915);
}

body[data-page="shop"] .product-card--featured .pc-title {
    font-size: 22px;
}

/* glow */
body[data-page="shop"] .pc-glow {
    position: absolute;
    inset: -40% -20%;
    background: radial-gradient(circle at 28% 32%, rgba(245, 193, 91, .18), transparent 62%);
    filter: blur(2px);
    pointer-events: none;
    z-index: 2;
}

/* video preview (works for all sizes) */
body[data-page="shop"] .pc-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: .14;
    pointer-events: none;
    z-index: 0;
}

/* затемнение/виньетка поверх видео */
body[data-page="shop"] .product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(150% 130% at 0% 50%,
            rgba(0, 0, 0, 0) 14%,
            rgba(0, 0, 0, .58) 48%,
            rgba(0, 0, 0, .92) 100%),
        linear-gradient(90deg,
            rgba(0, 0, 0, .78) 0%,
            rgba(0, 0, 0, .50) 34%,
            rgba(0, 0, 0, .18) 60%,
            rgba(0, 0, 0, 0) 100%);
}

/* весь контент карточки над видео */
body[data-page="shop"] .product-card> :not(.pc-video):not(.pc-glow) {
    position: relative;
    z-index: 3;
}

/* =========================
   8) TRUST / NOTE
   ========================= */
body[data-page="shop"] .shop-trust {
    padding: 8px 0 26px;
}

body[data-page="shop"] .trust-card {
    border-radius: var(--shop-card-radius);
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .015);

    padding: 16px 16px 18px;
    box-shadow: var(--shop-shadow-soft);
}

body[data-page="shop"] .trust-t {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

body[data-page="shop"] .trust-d {
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .66);
}

/* =========================
   9) SAFETY: do not break layout
   ========================= */
body[data-page="shop"] .shop-grid .shop-wrap,
body[data-page="shop"] .shop-controls,
body[data-page="shop"] .shop-tabs {
    min-width: 0;
}

body[data-page="shop"] .product-card * {
    box-sizing: border-box;
}

/* SVG as "media layer" (same mechanics as pc-video) */
.pc-video--svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .10;
    transform: scale(1.08);
    filter: blur(.2px) brightness(1.05);
    pointer-events: none;
}