/* === BBC Shop - оформление в стиле главной beautybureaui.ru ===
   Палитра главной: светлые зоны - зерно noise.png на сером (#cfcfcf -> #ddd), тёмные - на чёрном (#222 -> #000),
   золото #D4AF37, чёрные кнопки с бегущим бликом. Стыки секций - завитки с медальоном (приём KVEST seam()).
   Треугольный паттерн главной (images/pattern.png) - из-за угла фото. SVG-орнаменты: docs/decor/build_svgs.py */

:root {
    --shop-svg-title: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='18' fill='none' stroke='%23C9A646' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M0 9H52M108 9H160'/%3E%3Cpath d='M73 9c-4 0-6-4-10-4s-5 4-2 5 4-2 2-3'/%3E%3Cpath d='M87 9c4 0 6-4 10-4s5 4 2 5-4-2-2-3'/%3E%3Cpath d='M80 3l6 6-6 6-6-6z' fill='%23C9A646' fill-opacity='.18'/%3E%3Ccircle cx='80' cy='9' r='1.4' fill='%23C9A646' stroke='none'/%3E%3C/svg%3E");
    --shop-svg-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='none' stroke='%23C9A646' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M2 62V18C2 9 9 2 18 2h44'/%3E%3Cpath d='M8 56V22c0-8 6-14 14-14h34'/%3E%3Cpath d='M18 14c6 0 9 4 6 7s-6 0-3-2'/%3E%3Cpath d='M30 8c4-4 9-4 11 0c-4 2-7 2-11 0z' fill='%23C9A646' fill-opacity='.3'/%3E%3Cpath d='M8 30c-4 4-4 9 0 11c2-4 2-7 0-11z' fill='%23C9A646' fill-opacity='.3'/%3E%3C/svg%3E");
    --shop-noise: url('/images/noise.png');
    --shop-gold: #D4AF37;
    --shop-gold-lt: #f0d98c;
    --shop-pat-color: #c9c9c5;
    --shop-pat-opacity: 0.45;
    --shop-glass: rgba(255, 255, 255, 0.55);

    /* светлая тема магазина - серый главной вместо кремового */
    --shop-bg: #f1f1ef;
    --shop-surface: #ffffff;
    --shop-soft: #f4f3f0;
    --shop-border: #d9d9d5;
    --shop-line: #e2e2de;
    --shop-text: #1a1a1a;
    --shop-muted: #6f6f6f;
}

/* Глобальное section{border-bottom:3px ridge #000} главной - в магазине стыки рисуют полосы и печати */
.shop-main section, .shop-header section { border-bottom: 0; }

/* Фон страницы - зерно на сером, как светлые секции главной */
.shop-main { background: var(--shop-noise), radial-gradient(at top, #ebebe9 0%, #f2f2f0 55%, #f5f5f3 100%); background-size: 250px, 100% 100%; }

/* ---------------------------------------------------------------- полосы (светлая / тёмная зона)
   Полоса на всю ширину окна, содержимое - по ширине контейнера. */
.shop-band { position: relative; isolation: isolate; margin-inline: calc(50% - 50vw); padding: 76px calc(50vw - 50%); }
.shop-band > .shop-section { margin: 0; }
.shop-band > .shop-section + .shop-section { margin-top: 64px; }
.shop-band--light { background: var(--shop-noise), radial-gradient(at top, #e8e8e6 0%, #f1f1ef 100%); background-size: 250px, 100% 100%; }
.shop-band--dark {
    --shop-bg: #111111; --shop-surface: #1a1a1a; --shop-soft: #222222; --shop-border: #353535; --shop-line: #2b2b2b;
    --shop-text: #ececec; --shop-muted: #9b9b9b; --shop-accent: #D4AF37; --shop-accent-dk: #e7c967; --shop-accent-soft: #8f7530;
    --shop-pat-color: #8a8a8a; --shop-pat-opacity: 0.35; --shop-glass: rgba(20, 20, 20, 0.55);
    color: var(--shop-text);
    background: var(--shop-noise), radial-gradient(at top, #222222 0%, #000000 100%); background-size: 250px, 100% 100%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
.shop-band--dark .shop-section__title { color: var(--shop-text); }
.shop-band--first { margin-top: 0; }
/* последняя полоса стыкуется с подвалом без зазора */
.shop-main:has(.shop-band--last) { padding-bottom: 0; }
.shop-main:has(.shop-band--last) + .shop-seam + .shop-footer, .shop-main:has(.shop-band--last) + .shop-footer { margin-top: 0; }

/* Заставка каталога внутри полосы - без своего фона */
.shop-band--hero .shop-hero { background: none; margin: 0; padding: 30px 0 10px; overflow: visible; }
.shop-band--hero .shop-hero::before { display: none; }

/* ---------------------------------------------------------------- стык секций (как в «Улыбке»: тонкая нить + знак в круге)
   Высоты не занимает. Нить 1px растворяется к краям, по ней изредка пробегает блик; в центре - монограмма BB золотом. */
.shop-seam { position: relative; z-index: 6; height: 0; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.shop-seam::before, .shop-seam::after { content: ''; position: absolute; left: 50%; top: 0; width: min(780px, 82%); height: 1px; transform: translate(-50%, -.5px); }
.shop-seam::before { background: linear-gradient(90deg, transparent, rgba(201, 166, 70, .35) 20%, #C9A646 50%, rgba(201, 166, 70, .35) 80%, transparent); }
.shop-seam::after { background: linear-gradient(90deg, transparent, rgba(255, 238, 190, .95), transparent) no-repeat, linear-gradient(90deg, transparent, rgba(255, 238, 190, .95), transparent) no-repeat;
    background-size: 90px 1px, 90px 1px; background-position: 50% 0, 50% 0; filter: drop-shadow(0 0 3px rgba(212, 175, 55, .8)); animation: shop-seam-run 7s ease-in-out infinite; }
@keyframes shop-seam-run { 0%, 30% { background-position: 50% 0, 50% 0; opacity: 0 } 40% { opacity: 1 } 85%, 100% { background-position: 0% 0, 100% 0; opacity: 0 } }

.shop-seam__core { position: relative; width: 54px; height: 54px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #ffffff, #f2f0ea);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .28), 0 0 0 6px rgba(201, 166, 70, .55), 0 10px 24px rgba(0, 0, 0, .16);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.shop-seam__gem { width: 30px; height: 26px; background: linear-gradient(135deg, #a8822a 0%, #e8cd78 48%, #b8902e 100%);
    -webkit-mask: url('/images/logo.png') center / contain no-repeat; mask: url('/images/logo.png') center / contain no-repeat; }
.shop-seam:not(.is-in)::after { animation-play-state: paused; }

/* ---------------------------------------------------------------- плавный переход светлая <-> тёмная у шва */
:root { --shop-fade-light: rgba(225, 225, 223, .26); --shop-fade-dark: rgba(0, 0, 0, .12); }
.shop-band--light + .shop-seam + .shop-band--dark::before,
.shop-band--dark:has(+ .shop-seam + .shop-band--light)::after,
.shop-band--dark + .shop-seam + .shop-band--light::before,
.shop-band--light:not(.shop-band--hero):has(+ .shop-seam + .shop-band--dark)::after,
.shop-band--hero:has(+ .shop-seam + .shop-band--dark) > .shop-band__fade-b {
    content: ''; position: absolute; left: 0; right: 0; height: 170px; pointer-events: none; z-index: -1; }
.shop-band--light + .shop-seam + .shop-band--dark::before { top: 0; background: linear-gradient(180deg, var(--shop-fade-light), transparent); }
.shop-band--dark:has(+ .shop-seam + .shop-band--light)::after { bottom: 0; background: linear-gradient(0deg, var(--shop-fade-light), transparent); }
.shop-band--dark + .shop-seam + .shop-band--light::before { top: 0; background: linear-gradient(180deg, var(--shop-fade-dark), transparent); }
.shop-band--light:not(.shop-band--hero):has(+ .shop-seam + .shop-band--dark)::after { bottom: 0; background: linear-gradient(0deg, var(--shop-fade-dark), transparent); }
.shop-band__fade-b { display: block; bottom: 0; background: linear-gradient(0deg, var(--shop-fade-dark), transparent); }

/* ---------------------------------------------------------------- фон полос: треугольная геометрика главной по углам */
.shop-band__geo { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.shop-band__geo::before, .shop-band__geo::after { content: ''; position: absolute; width: 260px; height: 420px; background: var(--shop-pat-color); opacity: calc(var(--shop-pat-opacity) * .7); }
.shop-band__geo::before { top: 0; left: 0; -webkit-mask: url('/images/pattern.png') no-repeat 0 0 / 260px auto; mask: url('/images/pattern.png') no-repeat 0 0 / 260px auto; }
.shop-band__geo::after { bottom: 0; right: 0; transform: scaleY(-1); -webkit-mask: url('/images/pattern_r.png') no-repeat 100% 0 / 260px auto; mask: url('/images/pattern_r.png') no-repeat 100% 0 / 260px auto; }
.shop-band--dark .shop-band__geo::before, .shop-band--dark .shop-band__geo::after { opacity: .14; }

/* ---------------------------------------------------------------- орнамент под заголовками секций */
.shop-section__title::after, .shop-section__head .shop-section__title::after { width: 160px; height: 18px; background: var(--shop-svg-title) center / 160px 18px no-repeat; margin-top: 14px; opacity: .9; }
.shop-section__head .shop-section__title::after { background-position: left center; }

/* ---------------------------------------------------------------- рамки с завитками в углах */
.shop-ornate { position: relative; }
.shop-ornate::before, .shop-ornate::after { content: ''; position: absolute; width: 64px; height: 64px; background: var(--shop-svg-corner) 0 0 / 64px 64px no-repeat; pointer-events: none; opacity: .8; z-index: 1; }
.shop-ornate::before { top: 10px; left: 10px; }
.shop-ornate::after { bottom: 10px; right: 10px; transform: rotate(180deg); }

/* ---------------------------------------------------------------- стекло (полупрозрачные панели) */
.shop-glass { background: var(--shop-glass) !important; -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); border: 1px solid rgba(201, 166, 70, .28) !important; box-shadow: 0 18px 50px rgba(0, 0, 0, .12) !important; }

/* ---------------------------------------------------------------- треугольный паттерн главной из-за угла фото */
.shop-pat { position: relative; isolation: isolate; }
.shop-pat::before { content: ''; position: absolute; z-index: -1; left: -44px; top: -44px; width: min(60%, 387px); height: min(75%, 520px); pointer-events: none;
    background: var(--shop-pat-color); opacity: var(--shop-pat-opacity);
    -webkit-mask: url('/images/pattern.png') no-repeat 0 0 / 387px auto; mask: url('/images/pattern.png') no-repeat 0 0 / 387px auto; }
.shop-pat--r::before { left: auto; right: -44px; -webkit-mask-image: url('/images/pattern_r.png'); mask-image: url('/images/pattern_r.png'); -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.shop-pat > img, .shop-pat > a > img { border-radius: 8px; box-shadow: 0 22px 44px rgba(0, 0, 0, .2); }
.shop-product__main-img.shop-pat, .shop-product__story-img.shop-pat { overflow: visible; background: none; }
.shop-product__story-img.shop-pat img, .shop-product__main-img.shop-pat img { border-radius: 8px; }

/* ---------------------------------------------------------------- кнопки: бегущий блик по рамке (как «Начать сейчас» на главной) */
@property --shop-btn-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.shop-btn--primary, .shop-qbar__submit, .shop-filters__submit, .shop-catbtn {
    --btn-bg: #0b0b0b; --btn-hl: var(--shop-gold);
    position: relative; isolation: isolate; overflow: hidden; color: #fff !important;
    border: 1px solid transparent !important;
    background: linear-gradient(var(--btn-bg), var(--btn-bg)) padding-box,
                conic-gradient(from var(--shop-btn-angle), transparent 0 64%, var(--btn-hl) 74%, #fff4d1 80%, var(--btn-hl) 86%, transparent 94%) border-box !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    animation: shop-btn-spin 4.5s linear infinite;
    transition: box-shadow .35s var(--shop-ease), transform .15s;
}
.shop-qbar__submit { --btn-bg: #8c6c22; }
.shop-btn--primary::before, .shop-qbar__submit::before, .shop-filters__submit::before, .shop-catbtn::before {
    content: ''; position: absolute; inset: 2px; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .22;
    background: radial-gradient(circle at 2px 2px, #fff .6px, transparent 0) 0 0 / 4px 4px;
    -webkit-mask-image: conic-gradient(from calc(var(--shop-btn-angle) + 45deg), #000, transparent 12% 88%, #000);
            mask-image: conic-gradient(from calc(var(--shop-btn-angle) + 45deg), #000, transparent 12% 88%, #000);
}
.shop-btn--primary::after, .shop-qbar__submit::after, .shop-filters__submit::after, .shop-catbtn::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 236, 180, .35), transparent); transform: skewX(-18deg);
    transition: left .8s cubic-bezier(.25, 1, .5, 1);
}
.shop-btn--primary:hover, .shop-qbar__submit:hover, .shop-filters__submit:hover, .shop-catbtn:hover { box-shadow: 0 0 0 1px rgba(212, 175, 55, .35), 0 10px 28px rgba(212, 175, 55, .28); }
.shop-btn--primary:hover::after, .shop-qbar__submit:hover::after, .shop-filters__submit:hover::after, .shop-catbtn:hover::after { left: 120%; }
.shop-btn--primary:active, .shop-qbar__submit:active, .shop-filters__submit:active { transform: translateY(1px); }
.shop-catbtn[aria-expanded="true"] { --btn-bg: #8c6c22; }
@keyframes shop-btn-spin { to { --shop-btn-angle: 360deg; } }
/* вторичные кнопки - мягкая заливка снизу */
.shop-btn:not(.shop-btn--primary):not(.shop-qbar__submit):not(.shop-filters__submit):not(.shop-btn--cart) { position: relative; overflow: hidden; isolation: isolate; }
.shop-btn--cart { transition: background .25s, color .25s, box-shadow .25s; }
.shop-btn--cart:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }

/* ---------------------------------------------------------------- карточки товара: мягкая глубина */
.shop-card__img-wrap { border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); transition: box-shadow .35s var(--shop-ease), transform .35s var(--shop-ease); }
.shop-card:hover .shop-card__img-wrap { box-shadow: 0 18px 40px rgba(0, 0, 0, .14); transform: translateY(-3px); }
.shop-cat-card { border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.shop-cat-card:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .14); transform: translateY(-3px); }

/* Шапка категории / подбора - светлая полоса главной вместо серой кожи */
.shop-cat-header.shop-band { padding-top: 48px; padding-bottom: 48px; text-align: center; }

/* ---------------------------------------------------------------- подвал: геометрика на чёрном, как на главной */
.shop-footer { position: relative; isolation: isolate; overflow: hidden; margin-top: 0;
    background: var(--shop-noise), radial-gradient(at top, #333333 0%, #000000 100%) !important; background-size: 250px, 100% 100% !important; }
.shop-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--shop-gold) 30%, var(--shop-gold-lt) 50%, var(--shop-gold) 70%, transparent); opacity: .75; }
.shop-footer__geo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.shop-footer__geo::before, .shop-footer__geo::after { content: ''; position: absolute; top: 0; width: 387px; height: 100%; background: #9a9a9a; opacity: .14; }
.shop-footer__geo::before { left: 0; -webkit-mask: url('/images/pattern.png') no-repeat 0 0 / 387px auto; mask: url('/images/pattern.png') no-repeat 0 0 / 387px auto; }
.shop-footer__geo::after { right: 0; -webkit-mask: url('/images/pattern_r.png') no-repeat 100% 0 / 387px auto; mask: url('/images/pattern_r.png') no-repeat 100% 0 / 387px auto; }
.shop-footer__col h3 { color: var(--shop-gold) !important; display: flex; align-items: center; gap: 10px; }
.shop-footer__col h3::before { content: ''; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--shop-gold)); }
.shop-footer__col a { transition: color .2s, padding-left .2s; }
.shop-footer__col li a:hover { color: var(--shop-gold-lt) !important; padding-left: 4px; }

@media (prefers-reduced-motion: reduce) {
    .shop-seam::after,
    .shop-btn--primary, .shop-qbar__submit, .shop-filters__submit, .shop-catbtn { animation: none; }
    .shop-seam::after { opacity: 0; }
}

/* Полоса-заставка (каталог, категория, подбор): треугольный паттерн главной по краям, растворяется */
.shop-band--hero { overflow: visible; } /* паттерны не выходят за полосу; visible - чтобы не резать выпадающий подбор */
.shop-band--hero::before, .shop-band--hero::after { content: ''; position: absolute; top: 0; bottom: 0; width: 300px; z-index: -1; pointer-events: none; background: var(--shop-pat-color); opacity: calc(var(--shop-pat-opacity) * .8); }
.shop-band--hero::before { left: 0; -webkit-mask: url('/images/pattern.png') no-repeat 0 0 / 300px auto; mask: url('/images/pattern.png') no-repeat 0 0 / 300px auto; }
.shop-band--hero::after { right: 0; -webkit-mask: url('/images/pattern_r.png') no-repeat 100% 0 / 300px auto; mask: url('/images/pattern_r.png') no-repeat 100% 0 / 300px auto; }
.shop-cat-header.shop-band--hero { margin-top: 0; }
.shop-header__contacts { align-items: center; }
.shop-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.shop-footer__bottom a { color: rgba(255, 255, 255, .6); }
.shop-footer__bottom a:hover { color: var(--shop-gold-lt); }

/* Открытый выпадающий фильтр - полоса поверх соседних полос и шва (иначе следующая полоса перекрывает список) */
.shop-band:has(.shop-qbar__item.is-open) { z-index: 20; }

/* ================================================================ ритм отступов (сетка 8px)
   Секции 40-56px, заголовок -> контент 24px, сетки 20-28px. Перекрывает крупные отступы базового shop.css. */
.shop-main { padding-bottom: 56px; }
.shop-breadcrumbs { padding: 16px 0; }
.shop-section { margin: 40px 0; }
.shop-seam + .shop-section, .shop-seam + .shop-section--filters { margin-top: 48px; }
.shop-section__title { margin-bottom: 24px; }
.shop-section__title::after, .shop-section__head .shop-section__title::after { margin-top: 10px; }
.shop-section__head { margin-bottom: 24px; }

.shop-band { padding-top: 56px; padding-bottom: 56px; }
.shop-band > .shop-section + .shop-section { margin-top: 48px; }
.shop-band--hero { padding-top: 44px; padding-bottom: 52px; }
.shop-band--hero .shop-hero { padding: 0; }
.shop-hero__eyebrow { margin-bottom: 12px; }
.shop-hero__title { margin-bottom: 14px; }
.shop-cat-header.shop-band { padding-top: 28px; padding-bottom: 40px; }
.shop-cat-header h1 { font-size: 38px; margin-bottom: 6px; }

.shop-qbar { margin: 0; padding: 24px 28px 26px; }
.shop-qbar__head { margin-bottom: 14px; }

.shop-cats-grid { gap: 20px; }
.shop-products-grid { gap: 28px 20px; }
.shop-list-bar { padding: 12px 0; margin-bottom: 24px; }
.shop-fchips { margin: -8px 0 20px; }
.shop-pagination { margin-top: 36px; }
.shop-empty { padding: 56px 20px; }
.shop-section--filters { gap: 40px; }
.shop-fgroup { padding-bottom: 12px; }
.shop-fgroup__legend { padding-top: 14px; }

.shop-product-page { padding: 8px 0 40px; }
.shop-product__hero { gap: 56px; margin-bottom: 56px; }
.shop-product__story { gap: 56px; margin: 56px 0; }
.shop-cat-desc { margin: 40px auto 0; padding-top: 32px; }

.shop-footer { padding: 48px 0 24px; }
.shop-footer__cols { gap: 40px; }

/* Плитки категорий компактнее: иконка 88px вместо 130px */
.shop-cat-card { padding: 18px 14px 16px; }
.shop-cat-card__icon, .shop-cat-card__img { width: 88px; height: 88px; margin: 4px auto 14px; }
.shop-cats-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
/* паттерн у главного фото не заходит на хлебные крошки */
.shop-product__main-img.shop-pat::before { top: -20px; left: -32px; }

/* Быстрый подбор в светлой заставке - тёмная стеклянная карточка (своя тёмная палитра) */
.shop-band--light .shop-qbar {
    --shop-bg: #111111; --shop-surface: #1a1a1a; --shop-soft: #222222; --shop-border: #353535; --shop-line: #2b2b2b;
    --shop-text: #ececec; --shop-muted: #a3a3a3; --shop-accent: #D4AF37; --shop-accent-dk: #e7c967; --shop-accent-soft: #8f7530;
    color: var(--shop-text); background: rgba(16, 16, 16, .9) !important; margin-top: 32px; }
.shop-band--light .shop-qbar .shop-qbar__title { color: var(--shop-text); }

/* Категории в тёмной полосе: тёмный круг, светлая иконка */
.shop-band--dark .shop-cat-card__icon { background: #2a2a2a; box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .25); }
.shop-band--dark .shop-cat-card--icon:hover .shop-cat-card__icon { background: var(--shop-gold); }
.shop-band--dark .shop-cat-card__icon img { filter: brightness(0) invert(1); }