/* ==========================================================================
   GalleryHaven — оформление витрины
   --------------------------------------------------------------------------
   Тёплый светлый фон, оранжевый акцент, мягкие скругления везде, многослойные
   тёплые тени и ненавязчивые анимации: блоки плавно проявляются при прокрутке,
   карточки чуть приподнимаются под курсором. Поверх базовой темы и стилей
   модулей: всё строится на их токенах, здесь — значения и немного «характера».
   При «уменьшить движение» в системе анимации выключаются.
   ========================================================================== */

@font-face { font-family: 'Manrope Variable'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/themes/default/assets/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope Variable'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/themes/default/assets/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Onest Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/themes/default/assets/fonts/onest-cyrillic-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/themes/default/assets/fonts/onest-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

:root:root {
    color-scheme: light;
    --gh-orange: #ff6b1a;
    --gh-orange-deep: #e8550a;
    --gh-orange-soft: #ffe9d9;
    --gh-peach: #fff3ea;
    --gh-ink: #2a1d14;

    --c-bg: #fffaf6;
    --c-surface: #ffffff;
    --c-surface-sunk: #fff1e6;
    --c-text: #3a2c22;
    --c-text-strong: #22160d;
    --c-text-muted: #85705f;
    --c-text-faint: #b29c8a;
    --c-border: #f3e3d5;
    --c-border-strong: #e9cdb4;
    --c-accent: var(--gh-orange);
    --c-accent-hover: var(--gh-orange-deep);
    --c-accent-contrast: #ffffff;
    --c-accent-soft: var(--gh-orange-soft);
    --c-link: var(--gh-orange-deep);
    --c-link-hover: #c4470a;
    --c-mark: var(--gh-orange);
    --c-mark-text: #c4470a;
    --c-mark-soft: var(--gh-orange-soft);
    --c-danger: #e0384b;
    --c-success: #2f9e6a;
    --c-slab: var(--gh-ink);
    --c-slab-text: #fff7f0;

    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 18px;
    --r-lg: 26px;
    --r-btn: 999px;
    --r-pill: 999px;
    --card-radius: 22px;
    --card-border: 0;
    --card-bg: transparent;

    --gh-shadow-sm: 0 1px 2px rgb(110 55 15 / .05), 0 4px 12px -4px rgb(110 55 15 / .10);
    --gh-shadow-md: 0 2px 4px rgb(110 55 15 / .05), 0 14px 32px -12px rgb(110 55 15 / .22);
    --gh-shadow-lg: 0 4px 10px rgb(110 55 15 / .06), 0 30px 60px -20px rgb(110 55 15 / .30);
    --gh-shadow-orange: 0 10px 26px -10px rgb(255 107 26 / .6);
    --shadow-sm: var(--gh-shadow-sm);
    --shadow-md: var(--gh-shadow-md);
    --shadow-lg: var(--gh-shadow-lg);
    --shadow-lift: var(--gh-shadow-lg);
    --card-shadow: var(--gh-shadow-sm);

    --font-display: 'Manrope Variable', system-ui, sans-serif;
    --font-ui: 'Onest Variable', system-ui, sans-serif;
    --font-prose: 'Onest Variable', system-ui, sans-serif;
    --fw-heading: 800;

    --gh-media-bg: #fbeee3;
    --gh-card-gap: clamp(.9rem, 2vw, 1.6rem);
    --gh-ease: cubic-bezier(.2, .7, .2, 1);
    --ease: var(--gh-ease);
    --dur: .25s;
}

html { scroll-behavior: smooth; }
body { background: var(--c-bg); color: var(--c-text); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
::selection { background: var(--gh-orange); color: #fff; }
h1, h2, h3, .cms-section__title, .gh-h1, .gh-h2 { letter-spacing: -.02em; }

/* --- header ---------------------------------------------------------------- */

.site-header { background: rgb(255 250 246 / .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: box-shadow .3s var(--gh-ease), border-color .3s; }
.site-header.is-scrolled { box-shadow: 0 8px 30px -18px rgb(110 55 15 / .35); border-bottom-color: var(--c-border); }
.hdr-logo { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
.hdr-el input[type="search"], .site-header input[type="search"] { border-radius: 999px !important; background: #fff; box-shadow: var(--gh-shadow-sm); border-color: var(--c-border) !important; }
.site-header a { transition: color .2s; }

/* --- buttons and fields ----------------------------------------------------------- */

.cms-btn { border-radius: 999px; font-weight: 700; transition: transform .2s var(--gh-ease), box-shadow .25s var(--gh-ease), background-color .2s, color .2s, border-color .2s; }
.cms-btn--primary { background: linear-gradient(180deg, #ff7a2e, var(--gh-orange)); box-shadow: var(--gh-shadow-orange); border-color: transparent; }
.cms-btn--primary:hover { background: linear-gradient(180deg, #ff6f1f, var(--gh-orange-deep)); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgb(255 107 26 / .7); }
.cms-btn--primary:active { transform: translateY(0); }
.cms-btn--ghost { background: #fff; border-color: var(--c-border-strong); box-shadow: var(--gh-shadow-sm); }
.cms-btn--ghost:hover { border-color: var(--gh-orange); color: var(--gh-orange-deep); transform: translateY(-2px); }
.cms-btn:focus-visible, .gh-chip:focus-visible, a:focus-visible { outline: 3px solid rgb(255 107 26 / .45); outline-offset: 2px; }
input, select, textarea { border-radius: var(--r-sm); }
.cms-form__input, .shop-field__input, .gh-sort select, .gh-search-inline input, .gh-price-filter input, .gh-search-big input, .gh-qty input { border-radius: 14px !important; border-color: var(--c-border-strong); background: #fff; transition: border-color .2s, box-shadow .2s; }
.cms-form__input:focus, .shop-field__input:focus, .gh-sort select:focus, .gh-search-inline input:focus, .gh-price-filter input:focus, .gh-search-big input:focus { border-color: var(--gh-orange); box-shadow: 0 0 0 4px rgb(255 107 26 / .14); outline: 0; }

/* --- sections ---------------------------------------------------------------- */

.cms-section__title { font-family: var(--font-display); font-weight: 800; }
.cms-section__subtitle { color: var(--c-text-muted); }
.cms-tone-soft { background: linear-gradient(180deg, var(--gh-peach), #fff6ef); }
.cms-tone-dark { background: var(--gh-ink); }
.cms-tone-primary { background: linear-gradient(135deg, #ff7a2e, var(--gh-orange-deep)); }

/* --- hero ---------------------------------------------------------------------- */

/* The hero's glow reaches past the screen edge: keep it from widening the page. */
.landing { overflow-x: clip; }
.gh-hero { position: relative; }
.gh-hero::before { content: ''; position: absolute; inset: -10% -20% auto 40%; height: 120%; background: radial-gradient(closest-side, rgb(255 107 26 / .16), transparent 70%); z-index: -1; pointer-events: none; }
.gh-hero__eyebrow { display: inline-flex; align-items: center; gap: .45rem; background: #fff; color: var(--gh-orange-deep); padding: .45rem .9rem; border-radius: 999px; box-shadow: var(--gh-shadow-sm); letter-spacing: .06em; font-size: .78rem; }
.gh-hero__eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gh-orange); box-shadow: 0 0 0 4px rgb(255 107 26 / .18); animation: gh-pulse 2.4s ease-in-out infinite; }
.gh-hero__title { font-weight: 800; font-size: clamp(2.2rem, 4.8vw, 4rem); line-height: 1.04; letter-spacing: -.035em; }
.gh-hero__title em, .gh-hero__title b { color: var(--gh-orange); font-style: normal; }
.gh-hero__tile { border-radius: var(--r-lg); box-shadow: var(--gh-shadow-md); background: #fff; animation: gh-float 9s ease-in-out infinite; }
.gh-hero__tile--2 { animation-delay: -2s; }
.gh-hero__tile--3 { animation-delay: -4s; }
.gh-hero__tile--4 { animation-delay: -6s; }
.gh-hero__tile--5 { animation-delay: -1s; }
.gh-hero__tile:hover { box-shadow: var(--gh-shadow-lg); }

/* --- cards ----------------------------------------------------------------------- */

.gh-pcard, .gh-wcard { background: #fff; padding: 10px; border-radius: 24px; box-shadow: var(--gh-shadow-sm); transition: transform .35s var(--gh-ease), box-shadow .35s var(--gh-ease); }
.gh-pcard:hover, .gh-wcard:hover { transform: translateY(-5px); box-shadow: var(--gh-shadow-lg); }
.gh-pcard__media, .gh-wcard__media { border-radius: 18px; }
.gh-pcard__body, .gh-wcard__body { padding: .7rem .45rem .35rem; }
.gh-pcard__title, .gh-wcard__title { font-weight: 700; }
.gh-pcard__price { display: inline-block; justify-self: start; margin-top: .3rem; padding: .18rem .7rem; border-radius: 999px; background: var(--gh-orange-soft); color: var(--gh-orange-deep); font-weight: 800; }
.gh-wcard__facts a { color: var(--c-text-muted); }
.gh-wcard__facts a:hover { color: var(--gh-orange-deep); }
.gh-fav { box-shadow: var(--gh-shadow-md); }
.gh-fav[aria-pressed="true"] svg { fill: var(--gh-orange); stroke: var(--gh-orange); }
.gh-fav[aria-pressed="true"] { animation: gh-pop .35s var(--gh-ease); }
.gh-swatch { transition: transform .2s var(--gh-ease); }
.gh-swatch:hover { transform: scale(1.25); }

.shop-tile, .gh-coll, .gh-author { transition: transform .35s var(--gh-ease), box-shadow .35s var(--gh-ease); }
.shop-tile { border-radius: 24px; overflow: hidden; box-shadow: var(--gh-shadow-sm); }
.shop-tile:hover { transform: translateY(-5px); box-shadow: var(--gh-shadow-lg); }
.shop-tile img { transition: transform .8s var(--gh-ease); }
.shop-tile:hover img { transform: scale(1.06); }
.gh-coll__media { border-radius: 22px; box-shadow: var(--gh-shadow-sm); transition: box-shadow .35s var(--gh-ease); }
.gh-coll:hover .gh-coll__media { box-shadow: var(--gh-shadow-lg); }
.gh-coll:hover .gh-coll__title { color: var(--gh-orange-deep); }
.gh-author { background: #fff; border: 0; border-radius: 24px; box-shadow: var(--gh-shadow-sm); }
.gh-author:hover { transform: translateY(-5px); box-shadow: var(--gh-shadow-lg); }
.gh-avatar { background: var(--gh-orange-soft); color: var(--gh-orange-deep); }

.cms-feature, .cms-card { border-radius: 24px; background: #fff; box-shadow: var(--gh-shadow-sm); border: 0; transition: transform .35s var(--gh-ease), box-shadow .35s var(--gh-ease); }
.cms-feature:hover, .cms-card:hover { transform: translateY(-4px); box-shadow: var(--gh-shadow-md); }
.cms-badge-icon { border-radius: 16px; background: var(--gh-orange-soft); color: var(--gh-orange-deep); }
.cms-news__box { border-radius: 28px; box-shadow: var(--gh-shadow-md); background: linear-gradient(135deg, #fff, var(--gh-peach)); }

/* --- chips, tabs, toolbar ------------------------------------------------------------ */

.gh-chip { background: #fff; border-color: var(--c-border); box-shadow: 0 1px 2px rgb(110 55 15 / .04); transition: all .2s var(--gh-ease); }
.gh-chip:hover { border-color: var(--gh-orange); color: var(--gh-orange-deep); }
.gh-chip[aria-current] { background: var(--gh-orange); border-color: var(--gh-orange); color: #fff; box-shadow: var(--gh-shadow-orange); }
.gh-tabs { border-bottom: 0; gap: .35rem; }
.gh-tabs a { border: 0; border-radius: 999px; padding: .55rem 1rem; margin: 0; transition: background .2s, color .2s; }
.gh-tabs a:hover { background: var(--gh-orange-soft); color: var(--gh-orange-deep); }
.gh-tabs a[aria-current] { background: var(--gh-ink); color: #fff; }
.gh-tabs a[aria-current] small { color: rgb(255 255 255 / .7); }
.gh-pager__pages > * { border-radius: 999px; }
.gh-pager__pages [aria-current] { background: var(--gh-orange); }

/* --- product and artwork pages ---------------------------------------------------- */

.gh-product__stage, .gh-art__figure { border-radius: 28px; box-shadow: var(--gh-shadow-md); }
.gh-thumb { border-radius: 14px; box-shadow: var(--gh-shadow-sm); transition: transform .2s var(--gh-ease); }
.gh-thumb:hover { transform: translateY(-2px); }
.gh-thumb[aria-selected="true"] { border-color: var(--gh-orange); }
.gh-price { color: var(--gh-orange-deep); font-weight: 800; }
.gh-color { transition: transform .2s var(--gh-ease); }
.gh-color:hover { transform: scale(1.12); }
.gh-color:has(input:checked) { outline-color: var(--gh-orange); }
.gh-size span { border-radius: 14px; transition: all .2s var(--gh-ease); background: #fff; }
.gh-size span:hover { border-color: var(--gh-orange); }
.gh-size:has(input:checked) span { background: var(--gh-orange); border-color: var(--gh-orange); color: #fff; box-shadow: var(--gh-shadow-orange); }
.gh-buy__cta { min-height: 54px; }
.gh-perks { border: 0; background: #fff; border-radius: 20px; padding: 1rem 1.2rem; box-shadow: var(--gh-shadow-sm); }
.gh-perks li::before { color: var(--gh-orange); }
.gh-licence { border: 0; border-radius: 22px; background: linear-gradient(135deg, #fff, var(--gh-peach)); box-shadow: var(--gh-shadow-md); }
.gh-details summary { transition: color .2s; }
.gh-details summary:hover { color: var(--gh-orange-deep); }
.gh-shop-hero { background: var(--banner, radial-gradient(120% 140% at 0% 0%, #ffd3b0, #fff1e6 55%, #fffaf6)) center / cover; }

/* --- account, cart, checkout --------------------------------------------------------- */

.shop-acct-box, .shop-cart__lines, .shop-summary, .shop-checkout__section { border-radius: 24px !important; box-shadow: var(--gh-shadow-sm); border-color: transparent !important; background: #fff; }
.shop-line, .shop-pline { border-radius: 18px; }
.shop-line__img, .shop-pline__img, .shop-mini-line__img, .shop-added__img { border-radius: 14px; }

/* --- footer -------------------------------------------------------------------------- */

.site-footer { background: var(--gh-ink); color: #f3e6da; border-radius: 36px 36px 0 0; margin-top: 3rem; }
.site-footer a { color: #f3e6da; transition: color .2s; }
.site-footer a:hover { color: #ffb27e; }

/* --- motion --------------------------------------------------------------------------- */

@keyframes gh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes gh-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgb(255 107 26 / .18); } 50% { box-shadow: 0 0 0 7px rgb(255 107 26 / .06); } }
@keyframes gh-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }

/* Blocks and cards appear softly as they scroll in (galleryhaven.js adds the classes). */
.gh-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--gh-ease), transform .7s var(--gh-ease); transition-delay: var(--gh-delay, 0s); }
.gh-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .gh-reveal { opacity: 1; transform: none; }
}

/* --- account: the way into selling ----------------------------------------------------- */

.gh-acct-sell { background: linear-gradient(135deg, #ff7a2e, var(--gh-orange-deep)) !important; color: #fff; box-shadow: var(--gh-shadow-orange); }
.gh-acct-sell .shop-acct-stat__label, .gh-acct-sell .shop-acct-stat__note { color: rgb(255 255 255 / .9) !important; }
.gh-acct-sell .shop-acct-stat__value { color: #fff !important; }
.gh-acct-sell .shop-acct-stat__value::after { content: ' →'; }
.gh-acct-sell:hover, .gh-acct-shop:hover { transform: translateY(-3px); box-shadow: var(--gh-shadow-lg); }

/* --- logo ------------------------------------------------------------------------- */

.hdr-logo__image img { height: clamp(30px, 3.2vw, 40px); width: auto; }
.ftr-brand__logo { height: 40px; width: auto; }

/* Account menu: the «Мои покупки» heading in an author's cabinet */
.gh-acct-group { margin: .9rem .75rem .3rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted, #888); list-style: none; }
@media (max-width: 860px) { .gh-acct-group { display: none; } }

/* Premium author's crown (catalog cards, shop page) */
.gh-premium { display: inline-flex; vertical-align: -.1em; margin-left: .3em; color: #f5a400; }
.gh-premium svg { width: 1em; height: 1em; }

/* «Поделиться» on the author's shop */
.gh-share { position: relative; display: inline-block; margin-right: .5rem; }
.gh-share > summary { list-style: none; cursor: pointer; }
.gh-share > summary::-webkit-details-marker { display: none; }
.gh-share__menu { position: absolute; z-index: 20; top: calc(100% + .4rem); right: 0; min-width: 200px; display: grid; padding: .4rem; border-radius: 14px; background: var(--c-surface, #fff); box-shadow: 0 10px 30px rgb(0 0 0 / .15); }
.gh-share__menu a { padding: .55rem .75rem; border-radius: 10px; color: inherit; text-decoration: none; }
.gh-share__menu a:hover { background: var(--c-surface-sunk, #f6f6f4); }

/* Gallery: «Цвета изображения» */
.gh-colors { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: -.25rem 0 1.25rem; }
.gh-colors__label { font-size: .88rem; color: var(--c-text-muted, #777); margin-right: .25rem; }
.gh-swatch { width: 26px; height: 26px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); transition: transform .15s ease, box-shadow .15s ease; }
.gh-swatch:hover { transform: scale(1.12); }
.gh-swatch.is-on { box-shadow: 0 0 0 2px var(--c-bg, #fff), 0 0 0 4px var(--gh-orange, #f26b1d); }
@media (prefers-reduced-motion: reduce) { .gh-swatch { transition: none; } }

/* Artwork page: the picture as it is — its own background, no tinted frame around it (client, 30.10.2026).
   Transparent artworks sit on a neutral light grey. */
.gh-art__figure { padding: 0; background: #f2f2f0; overflow: hidden; }
.gh-art__figure img { width: 100%; max-height: none; filter: none; display: block; }