/* =====================================================
   FONTS — TI (TopImpressionists)
   All families (DM Mono, Manrope, Italiana, Cormorant Garamond) self-hosted via
   @font-face below. 2026-07-08: removed a live Google @import for DM Mono here
   (regression from a Jul-7 batch commit) and inlined its @font-face instead
   (files already existed in static/fonts/dm-mono/, just never wired).
   ===================================================== */
/* DM Mono — latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-mono/dm-mono-w400-normal-latin.e1ed461ac183.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Mono — latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-mono/dm-mono-w400-normal-latin-ext.c33164c06d33.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Mono — latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-mono/dm-mono-w500-normal-latin.c4598219c4b8.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Mono — latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-mono/dm-mono-w500-normal-latin-ext.b438d33927f3.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin-ext */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/manrope/manrope-w400-normal-latin-ext.e19a7f36dd91.woff2")
        format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/manrope/manrope-w400-normal-latin.1589a53d0b0e.woff2")
        format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("../fonts/manrope/manrope-w600-700-normal-latin-ext.6d36d5bdedfa.woff2")
        format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("../fonts/manrope/manrope-w600-700-normal-latin.938c6e8019b6.woff2")
        format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
    font-family: "Italiana";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/italiana/italiana-w400-normal-latin.dca43a8eff26.woff2")
        format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/cormorant-garamond/cormorant-garamond-w300-600-italic-latin-ext.61d59919981f.woff2")
        format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/cormorant-garamond/cormorant-garamond-w300-600-italic-latin.3e2c4175a96d.woff2")
        format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/cormorant-garamond/cormorant-garamond-w300-600-normal-latin-ext.acc46a2a7785.woff2")
        format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/cormorant-garamond/cormorant-garamond-w300-600-normal-latin.c47ff12887a3.woff2")
        format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================
   TI — Link hover: dual overline + underline sweep
   ===================================================== */
a {
    position: relative;
    padding: 3px 0;
}
/* I1 @layer reconciliation (2026-07-09): this generic `a{padding}` tag reset
   is unlayered, so it now unconditionally beats Bootstrap's `.page-link`/
   `.nav-link` padding (now layered) even though those used to win here on
   higher (class) specificity — collapsing pagination links and detail-page
   tabs. Restated at Bootstrap's own specificity; no layer trick needed since
   neither side is `!important`. */
.page-link {
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
}
.nav-link {
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
}
.dropdown-item {
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
}
a::before,
a::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--lc);
    transform: translateX(-50%);
    transition: width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
a::before {
    top: 0;
} /* overline */
a::after {
    bottom: 0;
} /* underline */
a:hover::before,
a:hover::after {
    width: 100%;
}
a:hover {
    color: var(--lc);
}
a:visited {
    color: var(--lv);
}


/* =====================================================
   TI — Image hover: zoom retreat (dark background reveal)
   ===================================================== */

/* Dark background shows through as the image shrinks */


/* Base transition */
.swiper-slide .artist_slid_box a img,
img.mouseover_effect_images{
    transition:
        transform 0.6s ease,
        opacity 0.6s ease;
}

/* Hover state — zoom retreat */
.swiper-slide .artist_slid_box a:hover img,
a:hover img.mouseover_effect_images,
img.mouseover_effect_images:hover{
    transform: scale(0.95);
    opacity: 0.9;
}

/* =====================================================
   TI — Slider card title: multi-line hover-frame fix
   inline-block gives the <a> a single rectangular bounding box
   so the dual overline/underline ::before/::after pseudo-elements
   correctly frame the full text block even when the title wraps.
   ===================================================== */
.view_all_art a {
    display: inline-block;
}

/* Suppress any text-link hover decoration on anchors that wrap an image */
a:has(> img)::before,
a:has(> img)::after,
a:has(> picture)::before,
a:has(> picture)::after,
a:has(> figure)::before,
a:has(> figure)::after {
    content: none;
}

a:has(> img),
a:has(> picture),
a:has(> figure) {
    padding: 0;
}

/* TopImpressionists.com — site-specific CSS overrides */
/* Loaded by base.html for dns_domain_base == 'topimpressionists' */

/* =====================================================
   TI — Header & footer logo (TI-LOGO.png)
   ===================================================== */


/* =====================================================
   TI — Override container width for all content
   ===================================================== */
.container {
    --bs-gutter-x: 2rem;
    max-width: 1380px;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-inline: auto;
}

main {
    overflow: clip;
}

/* =====================================================
   TI — Extended design tokens (Impressionist palette)
   ===================================================== */
:root {
    --lc: #a0742a; /* link / hover accent — impressionist gold */
    --lv: #6b4c1a; /* visited link colour */

    /* ── Canonical --ti-* tokens ── */
    --ti-canvas: #f4eee2;
    --ti-paper: #fbf7ee;
    --ti-linen: #ede5d2;
    --ti-gesso: #f9f4e8;
    --ti-shadow-c: #e6dec8;

    --ti-ink: #2a2438;
    --ti-ink-soft: #4a4358;
    --ti-ink-mute: #6c647a;
    --ti-ink-faint: #9a93a4;
    --ti-ink-vapor: #bdb6c3;

    --ti-plein: #d89a78;
    --ti-ochre: #b78b4a;
    --ti-monet: #6b8eb3;
    --ti-wisteria: #9a8bb8;
    --ti-lichen: #8fa280;
    --ti-rose: #c8a2a2;
    --ti-rule: #c7bea8;
    --ti-rule-soft: #ddd4be;

    --font-title-accent: "Manrope", -apple-system, sans-serif;
    --font-title: "Italiana", "Cormorant Garamond", serif;
    --font-body: "Cormorant Garamond", Garamond, serif;
    --ti-f-display: var(--font-title);
    --ti-f-edit: var(--font-body);

    /* ── Unprefixed short-name aliases (match design spec) ── */
    --canvas: var(--ti-canvas);
    --paper: var(--ti-paper);
    --linen: var(--ti-linen);
    --gesso: var(--ti-gesso);
    --shadow: var(--ti-shadow-c);
    --ink: var(--ti-ink);
    --ink-soft: var(--ti-ink-soft);
    --ink-mute: var(--ti-ink-mute);
    --ink-faint: var(--ti-ink-faint);
    --ink-vapor: var(--ti-ink-vapor);
    --monet: var(--ti-monet);
    --wisteria: var(--ti-wisteria);
    --plein: var(--ti-plein);
    --lichen: var(--ti-lichen);
    --rose: var(--ti-rose);
    --ochre: var(--ti-ochre);
    --rule: var(--ti-rule);
    --rule-soft: var(--ti-rule-soft);

    /* ── Font stack shorthand (design spec names) ── */
    --f-display: var(--font-title);
    --f-edit: var(--font-body);
    --f-ui: var(--font-title-accent);
    --f-mono: "DM Mono", ui-monospace, monospace;

    --max-w: 1380px;
    --gutter: clamp(20px, 4vw, 64px);

    /* ── Shadow tokens ── */
    --ti-shadow-sm: 0 4px 20px -8px rgba(42, 36, 56, 0.1);
    --ti-shadow-md: 0 8px 32px -12px rgba(42, 36, 56, 0.12);
    --ti-shadow-lg: 0 10px 30px -8px rgba(42, 36, 56, 0.18);
    --ti-shadow-xl: 0 16px 40px -14px rgba(42, 36, 56, 0.2);
    --ti-shadow-frame: 0 30px 60px -20px rgba(42, 36, 56, 0.18);
    --ti-shadow-deep: 0 30px 70px -25px rgba(42, 36, 56, 0.25);
    --ti-shadow-hover-sm: 0 6px 18px -4px rgba(42, 36, 56, 0.16);
    --ti-shadow-hover-md: 0 6px 20px -6px rgba(42, 36, 56, 0.18);

    /* unprefixed aliases */
    --shadow-sm: var(--ti-shadow-sm);
    --shadow-md: var(--ti-shadow-md);
    --shadow-lg: var(--ti-shadow-lg);
    --shadow-xl: var(--ti-shadow-xl);
    --shadow-frame: var(--ti-shadow-frame);
    --shadow-deep: var(--ti-shadow-deep);
    --shadow-hover-sm: var(--ti-shadow-hover-sm);
    --shadow-hover-md: var(--ti-shadow-hover-md);

    /* Layout tokens — consumed by global-style-V2.1.css via var(--site-*, fallback) */
    --site-bg:         var(--ti-canvas);
    --site-header-bg:  var(--ti-canvas);
    --site-nav-bg:     var(--ti-canvas);
    --site-nav-border: var(--ti-rule);
    --site-footer-bg:  var(--ti-ink);
}

/* =====================================================
   TI — Shared eyebrow / kicker (.ek)
   ===================================================== */
.ek {
    font-family: var(--f-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ochre);
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.ek::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--ochre);
    flex-shrink: 0;
    d: var(--bs-gutter-x);
}

.ek .num {
    font-family: var(--f-mono);
    color: var(--ink-faint);
    font-weight: 500;
}

/* =====================================================
   TI — UI Kit production components
   Global button/chip variants; hero-scoped rules override with higher specificity.
   ===================================================== */

/* Suppress dual-line underline sweep on button/chip anchors */
a.btn-primary::before,
a.btn-primary::after,
a.btn-ghost::before,
a.btn-ghost::after,
a.btn-accent::before,
a.btn-accent::after { content: none; }

.btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 28px; font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase; font-weight: 600; border-radius: 2px;
    transition: all .25s; text-decoration: none;
    background: var(--ink); color: var(--gesso);
}
.btn-primary:hover { background: var(--ink-soft); color: var(--gesso); transform: translateY(-1px); }
.btn-primary svg { transition: transform .25s; }
.btn-primary:hover svg { transform: translateX(3px); }

.btn-ghost {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 28px; font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase; font-weight: 600; border-radius: 2px;
    transition: all .25s; text-decoration: none;
    border: .5px solid var(--ink-soft); color: var(--ink-soft); background: none;
}
.btn-ghost:hover { background: var(--ink); color: var(--gesso); border-color: var(--ink); }

.btn-accent {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 28px; font-size: 11px; letter-spacing: .18em;
    text-transform: uppercase; font-weight: 600; border-radius: 2px;
    transition: all .25s; text-decoration: none;
    background: var(--plein); color: var(--ink);
}
.btn-accent:hover { filter: brightness(1.06); }

.link-cta {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    font-weight: 600; color: var(--ink); display: inline-flex;
    align-items: center; gap: 8px; border-bottom: .5px solid var(--ink);
    padding-bottom: 3px; transition: gap .25s, color .25s, border-color .25s;
    text-decoration: none;
}
.link-cta:hover { gap: 14px; color: var(--plein); border-color: var(--plein); }


/* =====================================================
   TI — Body: warm canvas background with painterly gradients
   ===================================================== */
body,
main {
    background-color: var(--ti-canvas) !important;
    background-image:
        radial-gradient(
            circle at 12% 18%,
            rgba(216, 154, 120, 0.06) 0,
            transparent 38%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(107, 142, 179, 0.05) 0,
            transparent 44%
        ),
        radial-gradient(
            circle at 30% 90%,
            rgba(154, 139, 184, 0.04) 0,
            transparent 48%
        );
    background-attachment: fixed;
}

/* =====================================================
   TI — Widget base class overrides (wa-* classes)
   ===================================================== */


.w-overlay-bottom {
    color: var(--gesso);
    pointer-events: none;
    font-family: var(--f-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 0.5rem 0.6rem;
}


/* =====================================================
   TI — Most popular large slider widget
   ===================================================== */


/* MPL slide image: inner-frame */
/* =====================================================
   TI — Artwork of the day widget
   ===================================================== */


/* =====================================================
   TI — Swiper artwork slides: card styling
   ===================================================== */
.artist_slid_box {
    background: transparent !important;
}

/* Title area below each artwork */
.view_all_art {
    padding-top: 8px !important;
    background: transparent !important;
}

.view_all_art a {
    font-family: var(--ti-f-edit) !important;
    font-style:italic;
    font-size: 13px !important;
    color: var(--ti-ink-soft) !important;
    line-height: 1.35 !important;
}

.view_all_art a:hover {
    color: var(--ti-plein) !important;
}

/* Artist name below artwork */
.vincent_color {
    font-family: var(--font-title-accent) !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    color: var(--ti-ink-faint) !important;
    font-weight:500;
    text-transform:uppercase;
    margin-bottom: 3px !important;
}

/* =====================================================
   TI — Small translated field widget (tag/category links)
   ===================================================== */


/* =====================================================
   TI — Identify masterpiece / quiz widgets
   ===================================================== */


/* =====================================================
   TI — Curated choice widget
   ===================================================== */
[class^="curated-"] {
    background: var(--ti-paper) !important;
    border-color: var(--ti-rule) !important;
    border-radius: 2px !important;
}

/* =====================================================
   TI — Museum widget
   ===================================================== */
/* In `@layer important-pins` (declared before Bootstrap's `vendor` layer in
   vendor-layers.css): these widgets also carry Bootstrap's `.bg-*`/`.border`/
   `.rounded-*` utilities, which are themselves `!important` — per the @layer
   + `!important` reversal rule, an unlayered `!important` can no longer beat
   them on specificity alone once Bootstrap is layered. */
@layer important-pins {
  [class^="widget-museum"] {
    background: var(--ti-linen) !important;
    border-color: var(--ti-rule) !important;
    border-radius: 2px !important;
  }
}

/* =====================================================
   TI — Overlay labels on artwork slides (movement name badge)
   ===================================================== */
.mpl-slide-group-label {
    background: rgba(42, 36, 56, 0.6) !important;
    font-family: var(--font-title-accent) !important;
    font-size: 9px !important;
    letter-spacing: 0.16em !important;
    text-transform:uppercase;
    font-weight:600;
    border-radius: 0 !important;
    padding: 0.28em 0.7em !important;
}

/* =====================================================
   TI — Swiper navigation: warm accent color
   ===================================================== */
.swiper-button-next::after,
.swiper-button-prev::after {
    color: var(--ti-ochre) !important;
}

/* =====================================================
   TI — Paragraph text: editorial feel
   ===================================================== */


/* ── Shared card atoms: kicker / body ── */
.w-card__kicker {
    font-family: var(--f-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ochre);
    margin-bottom: 12px;
}
.w-card__body {
    font-family: var(--f-edit);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
}
.stf-label {
    font-family: var(--f-ui);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.35rem 0.45rem;
    text-align: center;
}

/* ── Museum Masterpieces card ── */
.museum-card {
    background: var(--gesso);
    border: 0.5px solid var(--rule);
    padding: 22px;
}
.museum-title {
    font-family: var(--f-display);
    font-size: clamp(18px, 2vw, 26px);
    color: var(--ink);
    margin-bottom: 6px;
    font-weight: 400;
}
.museum-subtitle {
    font-family: var(--f-edit);
    font-size: 14px;
    color: var(--plein);
    font-style: italic;
    margin-bottom: 14px;
}
.museum-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.museum-cell {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--shadow);
}
.museum-cta {
    font-family: var(--f-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--plein);
    border-bottom: 0.5px solid var(--plein);
    padding-bottom: 1px;
    text-decoration: none;
    display: inline-block;
}
.museum-cta:hover {
    color: var(--ochre);
    border-color: var(--ochre);
}
footer {
    border-top: 0.5px solid var(--ti-rule) !important;
}

/* ═══════════════════════════════════════════════════════
   TI — HEADER ACTION ICONS  (.header-actions / .icon-btn)
   Vertical icon-buttons (icon + label) with count badges:
   Wishlist · Account (dropdown) · Cart · mobile toggle.
   ═══════════════════════════════════════════════════════ */


/* Account auth visual (guest icon ⇄ logged-in initial overlay) */


.aps-user-initial--compact {
    font-size: 10px !important;
}
.aps-header-auth--hidden {
    display:none;
}

/* ── Account dropdown panel (.dd-light / .dd-menu) ── */


/* Guest ⇄ authenticated menu blocks (toggled by header.js via the initials cookie) */


/* ═══════════════════════════════════════════════════════
   TI — UTILITY-BAR NOTE  (.ti-util-note)
   ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   TI — SCROLL-CONDENSE  (body.scrolled)
   Utility bar + nav fold away, logo shrinks, header gains a drop shadow.
   ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   TI — MAIN NAV  (.navbar override)
   ═══════════════════════════════════════════════════════ */


/* Neutralise global hit-area negative margins — they inflate flex width and wrap titles */


/* Animated underline — sweeps in on hover / active (replaces the active-only hairline) */


/* suppress global before sweep on nav items */

/* Caret on dropdown parents (rotates open on hover) */


/* Soft page blur while a nav mega-menu is open */
main.blurred {
    filter: blur(3px);
    opacity: 0.88;
    transition: filter 0.25s ease-in-out, opacity 0.25s ease-in-out;
}
/* Editorial serif links inside the mega-menu dropdown */


/* ═══════════════════════════════════════════════════════
   TI — CHIP SUB-NAV  (.ti-subnav)
   ═══════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════
   TI — FOOTER  (.ti-foot)
   ═══════════════════════════════════════════════════════ */


/* Brand column */


/* Social icons */


/* Messaging links */


/* Footer link columns */


/* suppress global hover lines in footer cols */


/* ═══════════════════════════════════════════════════════
   TI — BOTTOM BAR  (.ti-foot-bot)
   ═══════════════════════════════════════════════════════ */


/* Bottom bar outer wrapper */


/* ═══════════════════════════════════════════════════════
   TI — MOBILE MENU
   ═══════════════════════════════════════════════════════ */


/* dropdown inside side nav */


/* suppress global link hover lines inside side nav */


/* =====================================================
   TI — Hero, Atelier, Process (test homepage editorial)
   ===================================================== */


.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.95fr 1.15fr;
    gap: 80px;
    align-items: center;
    max-width: var(--max-w);
    margin-inline: auto;
}


.section {
    padding-block: 100px;
}

.section-header {
    font-family: var(--f-display);
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1;
    color: var(--ink);
    font-weight: 400;
    letter-spacing: -0.005em;
}

.section-header em {
    font-family: var(--f-edit);
    font-style: italic;
}

/* =====================================================
   TI — RESPONSIVE
   All responsive overrides
   ===================================================== */

/* ── ≤1100px: two-column collapses ── */
@media (max-width: 1100px) {
    
    
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    
}

/* ── ≤700px: phone ── */
@media (max-width: 700px) {
    .section {
        padding-block: 56px;
    }
    
    
    
    
    
    
    
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    

    /* header compact */
    
    
    
    

    /* side nav */
    
    

    /* ti-search inside side nav */
    
}

/* === HOMEPAGETEST migrated inline CSS === */

/* ── widget-imp10: 10 Impressionist artists ── */
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    

/* --- block --- */

/* ── widget-artist-otd5: Artist of the Day ── */
                    
                    
                    
                    
                    
                    

                    
                    
                    

/* --- block --- */

/* ── widget-article-kw: Impressionism articles ── */
                    
                    
                    
                    

                    

/* --- block --- */

/* ── widget-rts-slider: Ready to Ship ── */
                    
                    
                    
                    
                    

                    .artist_slid_box .vincent_color {
                        margin-top: 0;
                    }

                    .artist_slid_box .view_all_art {
                        margin-top: 0;
                    }

                    

/* --- block --- */

/* ── widget-museum-6p: Museum Masterpieces ── */
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    

/* --- block --- */

/* ── Standalone section-hd headers (movements nav + spotlight) ── */
    .ti-sh {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 40px;
        margin-bottom: 32px;
    }
    .ti-sh .section-hd-left {
        max-width: 640px;
    }

    .ti-sh .section-header em {
        color: var(--ink-soft);
    }
@media (max-width: 767.98px) {
  
  .ti-sh { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
}


/* === HOMEPAGETEST — missing rules restored from backup (topimpressionists) === */


/* ===================================================== */
/* MERGED FROM articles_style-V2.0.css */
/* ===================================================== */
a {
    color: inherit;
}
H1, H2, H3 {  
    clear: both; 
    font-size: 29px;
    text-align: left;
    line-height: 38px;
    margin-bottom: 32px;
    font-weight: 400;
    font-family: var(--font-title);
    margin-top: 55px;
}

H2:first-of-type {
    margin-top: 0;
}
    
.HTMLSectionBlock {
    float: right;
    max-width: 20vw;
    padding: 0 1vh 1vh 1vh;
    text-align: justify;         
    clear: both;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    color: #776E62;
    line-height: 21px;    
}

.HTMLSectionBlock p {
    margin: 0;
    padding: 0; 
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    color: #776E62;
    line-height: 21px;    
}

.HTMLSectionBlock a {
    display: inline-block;
    color: #000000;
    text-align: justify;  
    margin-bottom: 8px;
}

.HTMLSectionBlock img {
    display: block;
    margin: 0 auto 0.5em auto;   /* Centers the image & adds space below */
    max-width: 100%;
    max-height: 350px;
    margin-bottom: 8px;
}


/* ===================================================== */
/* MERGED FROM widget-artwork-labels.css */
/* ===================================================== */
/*
 * widget-artwork-labels.css — unified typography for artwork/category captions
 * in widgets. Loaded after site *-V2.0.css in base.html.
 * Typography only — does not override color, background, padding, or overlay layout.
 */


/* ===================================================== */
/* MERGED FROM userprofile-V2.0.css */
/* Re-themed to brand UI Kit (was WA palette): TI — canvas page, violet-ink sidebar, impressionist ochre accent */
/* ===================================================== */
/* Profile: sidebar shell only — do not use * reset (zeros .sidebar_profile_section / link padding) */


.header_box {
    background: var(--ti-paper, #fbf7ee);
    padding: 15px 20px;
    box-shadow: 0px 0px 10px 0px rgb(42 36 56 / 10%);
    -webkit-box-shadow: 0px 0px 10px 0px rgb(42 36 56 / 10%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(42 36 56 / 10%);
    margin-left: 320px;
}
h3.user_heading_text {
    color: var(--ti-ink, #2a2438);
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    font-family: var(--font-title);
    margin-bottom: 0px;
}
p.user_title_text {
    color: var(--ti-ink, #2a2438);
    font-size: 14px;
    font-weight: 400;
    opacity: 0.6;
    line-height: 22px;
    margin-bottom: 0px;
}
.sidebar_box {
    background: var(--ti-ink, #2a2438);
margin-bottom:0 !important;
border:0 !important;
height:100%;
}


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

aside::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

aside::-webkit-scrollbar-thumb {
    background: var(--ti-ochre, #b78b4a);
    border-radius: 10px;
}

aside::-webkit-scrollbar-thumb:hover {
    background: var(--lc, #a0742a);
}

aside {
    scrollbar-width: thin;
    scrollbar-color: var(--ti-rule-soft, #ddd4be) var(--ti-ink, #2a2438);
}


.profile_name {
    color: var(--ti-gesso, #f9f4e8);
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
}


/* .sidebar_menu_link li.active a svg {
    color: var(--ti-ochre, #b78b4a) !important;
} */


/* .sidebar_menu_link li:hover a svg, */


.favorite_img_card {
    border-right: 1px solid var(--ti-rule-soft, #ddd4be);
    border-bottom: 1px solid var(--ti-rule-soft, #ddd4be);
    padding: 42px 33px;
    width: 20%;
}
.fav-artist h2 {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    text-transform: uppercase;
    color: var(--ti-ochre, #b78b4a);
}
.fav-artist h2 a{
    color: var(--ti-ochre, #b78b4a);
}
.favCard_body {
    margin-top: 30px;
    max-width: 250px;
    margin: auto;
    margin-top: 30px;
}
.fav-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: var(--ti-ink, #2a2438);
    margin: 6px 0px 11px;
    min-height: 38px;
}
.fav-title a{
    color: var(--ti-ink, #2a2438);
}
.favorite_img_section {
    display: flex;
    flex-wrap: wrap;
}
.favorite_img_section:nth-child(-n+5) {
    border-top: 1px solid var(--ti-rule-soft, #ddd4be);
}
.top_order_section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}
.order_count {
    color: var(--ti-ink, #2a2438);
    font-size: 14px;
    font-weight: 400;
    opacity: 0.8;
}
table {
    border-color: var(--ti-rule-soft, #ddd4be) !important;
}
table thead th {
    background: var(--ti-linen, #ede5d2) !important;
    color: var(--ti-ink, #2a2438) !important;
    opacity: 0.6;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 14px;
    padding: 9px 12px !important;
}
/* Cart table keeps the global rhythm: the generic table theme below carries
   !important (needed against Bootstrap elsewhere), so the cart scope must re-assert
   the global-custom cart paddings that used to win via !important. */
.cart_table_box .table > :not(caption) > * > * {
    padding: 20px 0 !important;
}
table tbody td {
    background: var(--ti-paper, #fbf7ee) !important;
    color: var(--ti-ink, #2a2438) !important;
    padding: 12px 14px !important;
font-family: var(--font-body);
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0%;

}
.table_type_datail {
    display: flex;
    align-items: center;
    gap: 9px;
}
.table_img {
    width: 18px;
    height: 18px;
    position: relative;
    top: -3px;
}
.table_img img {
    width: 100%;
    height: 100%;
}


/*message_us form css*/


textarea.form-control:focus {
    background-color:var(--ti-paper, #fbf7ee);
}
 

/* Sidebar Default */
aside {
    width: 100%;
    background: var(--ti-linen, #ede5d2);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 0.3s ease-in-out;
    z-index: 999;
}


@media (min-width: 768px) {


.upload_img_form {
    display: flex;
    flex-direction: row-reverse;
    text-align: left;
    gap: 12px;
}
/*     .main-grid-row {
        display: flex;
    } */
/*     .sidebar-col {
        flex-basis: 25%;
        max-width: 25%;
    }
    .main-content-col {
        flex-basis: 75%;
        max-width: 75%;
        padding-left: 2rem;
    } */
    
/* .logout_section {
    position: absolute;
    bottom: 0;
} */
.sidebar_box {
    position: relative;
}
}

/* Responsive */
@media (max-width: 768px) {


.form-container input {
  
    font-size: 14px;
    width: 100%;
    padding: 9px;

    margin-bottom: 8px;
}


.profile_name{ font-size: 15px;}
 
aside {
    height: 100%;

}

 
    .sidebar_box .text-center.mb-20 img{

}
.sidebar_box {
width:auto !important;
}

aside {transform: translateX(0%);}aside.active { transform: translateX(0); }#sidebar { display: block; }.header_box {margin-left:0px;padding: 10px 20px;position: fixed; top: 0; left: 0;width: 100%;z-index: 999;}p.user_title_text {font-size: 12px;}
.favorite_img_card {padding: 40px 0px; width: 100%;}table thead th {font-size: 12px; white-space: nowrap;}
table tbody td { font-size: 12px;white-space: nowrap;}.table_img img {width: 80%; height: 80%;object-fit: contain;}
 
}


/* Tablet Portrait to Tablet Landscape */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet styles */
}


/* Form-floating: always use "focused" style (label above, reduced padding) on account forms */


/* ═══════════════════════════════════════
   TopImpressionists — Infinite Scroll (/art/infinite_scroll/)
   Scoped via .ais-hero-banner; brand tokens only.
   ═══════════════════════════════════════ */
body:has(.ais-hero-banner) {
  --ais-page: var(--ti-canvas);
  --ais-surface: var(--ti-gesso);
  --ais-surface-2: var(--ti-paper);
  --ais-border: var(--ti-rule);
  --ais-divider: var(--ti-rule-soft);
  --ais-frame-bg: var(--ti-shadow-c);
  --ais-ink: var(--ti-ink);
  --ais-ink-2: var(--ti-ink-soft);
  --ais-ink-3: var(--ti-ink-mute);
  --ais-faint: var(--ti-ink-faint);
  --ais-accent: var(--ti-plein);
  --ais-accent-dark: var(--ti-ochre);
  --ais-label-accent: var(--ti-ochre);
  --ais-on-accent: var(--ti-ink);
  --ais-shadow-rgb: 42 36 56;
  --ais-accent-rgb: 216 154 120;
  --ais-f-heading: var(--ti-f-display);
  --ais-f-title: var(--ti-f-edit);
  --ais-f-body: var(--ti-f-edit);
  --ais-f-label: var(--f-ui);
  --ais-f-mono: var(--f-mono);
  --ais-heading-weight: 400;
  --ais-radius: 2px;
  --ais-max-w: 1380px;
  --ais-gutter: clamp(20px, 4vw, 64px);

  background: var(--ais-page);
  color: var(--ais-ink);
  font-family: var(--ais-f-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body:has(.ais-hero-banner) .rake {
  position: fixed;
  inset: -20vh -30vw;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgb(255 255 255 / 45%) 48%,
    rgb(var(--ais-accent-rgb) / 7%) 52%,
    transparent 64%
  );
  mix-blend-mode: soft-light;
  transform: translateX(calc((var(--rake, .2) - .5) * 60vw));
  transition: transform .4s ease-out;
  opacity: .75;
}

body:has(.ais-hero-banner) .scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  z-index: 1001;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ais-accent-dark), var(--ais-accent));
  box-shadow: 0 0 8px -1px rgb(var(--ais-accent-rgb) / 45%);
  transition: width .12s linear;
}

body:has(.ais-hero-banner) .reveal-up {
  opacity: 0;
  transform: translateY(24px);
  animation: ti-ais-reveal-up .9s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes ti-ais-reveal-up {
  to { opacity: 1; transform: none; }
}

@keyframes ti-ais-draw-line {
  to { width: 64px; }
}

body:has(.ais-hero-banner) .ais-intro {
  background: var(--ais-surface);
  border-bottom: 1px solid var(--ais-border);
}

body:has(.ais-hero-banner) .ais-intro-inner {
  max-width: var(--ais-max-w);
  margin: 0 auto;
  padding: 36px var(--ais-gutter) 32px;
  text-align: center;
}

body:has(.ais-hero-banner) .ais-intro-title {
  font-family: var(--ais-f-heading);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: var(--ais-heading-weight);
  color: var(--ais-ink);
  margin-bottom: 14px;
  letter-spacing: .01em;
}

body:has(.ais-hero-banner) .ais-intro-desc {
  font-family: var(--ais-f-body);
  font-size: clamp(15px, 1.4vw, 18px);
  font-style: italic;
  line-height: 1.75;
  color: var(--ais-ink-3);
  max-width: 760px;
  margin: 0 auto;
}

body:has(.ais-hero-banner) .stage {
  position: relative;
  z-index: 2;
  max-width: var(--ais-max-w);
  margin: 0 auto;
  padding: 24px var(--ais-gutter) 120px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  transition: grid-template-columns .65s cubic-bezier(.45, .05, .2, 1);
}

body:has(.ais-hero-banner) .stage.pinned {
  grid-template-columns: 0.92fr 1.08fr;
}

body:has(.ais-hero-banner) .pinned-col {
  display: none;
  position: sticky;
  top: 80px;
  align-self: start;
  height: fit-content;
}

body:has(.ais-hero-banner) .stage.pinned .pinned-col {
  display: block;
  animation: ti-ais-pin-in .8s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes ti-ais-pin-in {
  from { opacity: 0; transform: translateY(34px) scale(.94); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

body:has(.ais-hero-banner) .plate.grand .frame img {
  animation: ti-ais-breathe 14s ease-in-out infinite alternate;
}

@keyframes ti-ais-breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.035); }
}

body:has(.ais-hero-banner) .plate {
  background: var(--ais-surface);
  border: 1px solid var(--ais-border);
  border-radius: var(--ais-radius);
  position: relative;
  overflow: hidden;
}

body:has(.ais-hero-banner) .plate.grand {
  box-shadow: 0 30px 60px -20px rgb(var(--ais-shadow-rgb) / 14%);
}

body:has(.ais-hero-banner) .plate .top {
  display: flex;
  align-items: flex-start;
}

body:has(.ais-hero-banner) .plate .mat {
  padding: 22px;
  position: relative;
  flex: 0 0 auto;
  width: 46%;
  max-width: 340px;
}

body:has(.ais-hero-banner) .plate .frame {
  position: relative;
  background: var(--ais-frame-bg);
  outline: 1px solid var(--ais-divider);
  outline-offset: -1px;
  overflow: hidden;
  width: 100%;
}

body:has(.ais-hero-banner) .plate .frame img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), opacity .9s ease, filter .9s ease;
  opacity: 0;
  filter: blur(10px);
}

body:has(.ais-hero-banner) .plate .frame img.loaded {
  opacity: 1;
  filter: blur(0);
}

body:has(.ais-hero-banner) .plate-no {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: var(--ais-ink);
  color: var(--ais-on-accent);
  font-family: var(--ais-f-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--ais-radius);
}

body:has(.ais-hero-banner) .plate .caption {
  flex: 1 1 auto;
  min-width: 0;
  padding: 26px 26px 22px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body:has(.ais-hero-banner) .plate .caption .artist {
  font-family: var(--ais-f-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ais-ink);
  margin-bottom: 8px;
}

body:has(.ais-hero-banner) .plate .caption .title {
  font-family: var(--ais-f-title);
  font-style: italic;
  font-size: 26px;
  line-height: 1.2;
  color: var(--ais-ink-2);
}

body:has(.ais-hero-banner) .plate .caption .facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ais-divider);
}

body:has(.ais-hero-banner) .fact {
  display: inline-block;
  padding: 8px 13px;
  background: var(--ais-surface-2);
  border: 1px solid var(--ais-border);
  border-radius: var(--ais-radius);
  font-family: var(--ais-f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ais-ink-2);
  opacity: 0;
  transform: translateY(8px) scale(.96);
  animation: ti-ais-fact-in .5s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes ti-ais-fact-in {
  to { opacity: 1; transform: none; }
}

body:has(.ais-hero-banner) a.fact {
  text-decoration: none;
  color: var(--ais-ink-2);
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background .3s ease, transform .3s ease;
}

body:has(.ais-hero-banner) a.fact:hover {
  border-color: var(--ais-accent);
  color: var(--ais-ink);
  background: var(--ais-surface);
  transform: translateY(-1px);
}

body:has(.ais-hero-banner) .plate .mat a.frame {
  display: block;
  cursor: pointer;
}

body:has(.ais-hero-banner) .plate .below {
  padding: 0 26px 26px;
  border-top: 1px solid var(--ais-divider);
  margin-top: 0;
}

body:has(.ais-hero-banner) .plate .below .desc {
  font-family: var(--ais-f-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ais-ink-3);
  padding-top: 20px;
}

body:has(.ais-hero-banner) .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

body:has(.ais-hero-banner) .fav-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ais-f-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ais-ink-2);
  background: var(--ais-surface);
  border: 1px solid var(--ais-border);
  border-radius: var(--ais-radius);
  padding: 11px 18px;
  cursor: pointer;
  transition: transform .3s ease, border-color .3s ease, color .3s ease, background .3s ease, box-shadow .3s ease;
}

body:has(.ais-hero-banner) .fav-btn .heart {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-block;
}

body:has(.ais-hero-banner) .fav-btn .heart svg {
  width: 14px;
  height: 14px;
  display: block;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

body:has(.ais-hero-banner) .fav-btn .heart svg path {
  fill: none;
  stroke: var(--ais-ink-2);
  stroke-width: 1.4;
  transition: fill .35s ease, stroke .35s ease;
}

body:has(.ais-hero-banner) .fav-btn:hover {
  border-color: var(--ais-accent);
  color: var(--ais-ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgb(var(--ais-shadow-rgb) / 22%);
}

body:has(.ais-hero-banner) .fav-btn:hover .heart svg path {
  stroke: var(--ais-accent);
}

body:has(.ais-hero-banner) .fav-btn.saved {
  background: var(--ais-accent);
  border-color: var(--ais-accent);
  color: var(--ais-on-accent);
}

body:has(.ais-hero-banner) .fav-btn.saved .heart svg path {
  fill: var(--ais-on-accent);
  stroke: var(--ais-on-accent);
}

body:has(.ais-hero-banner) .fav-btn.saved .heart svg {
  animation: ti-ais-heart-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes ti-ais-heart-pop {
  0%   { transform: scale(.6); }
  55%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

body:has(.ais-hero-banner) .buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ais-f-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: var(--ais-radius);
  padding: 11px 18px;
  cursor: pointer;
  border: 1px solid var(--ais-ink);
  text-decoration: none;
  transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
}

body:has(.ais-hero-banner) .buy-btn .arrow {
  display: inline-block;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

body:has(.ais-hero-banner) .buy-btn:hover .arrow {
  transform: translateX(3px);
}

body:has(.ais-hero-banner) .buy-btn.print {
  background: var(--ais-surface);
  color: var(--ais-ink-2);
  border-color: var(--ais-border);
}

body:has(.ais-hero-banner) .buy-btn.print:hover {
  border-color: var(--ais-accent);
  color: var(--ais-ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgb(var(--ais-shadow-rgb) / 22%);
}

body:has(.ais-hero-banner) .buy-btn.painting {
  background: var(--ais-accent);
  color: var(--ais-on-accent);
  border-color: var(--ais-accent);
}

body:has(.ais-hero-banner) .buy-btn.painting:hover {
  background: var(--ais-accent-dark);
  border-color: var(--ais-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -10px rgb(var(--ais-accent-rgb) / 45%);
}

body:has(.ais-hero-banner) .feed-col {
  min-width: 0;
}


body:has(.ais-hero-banner) .work-col {
  display: flex;
}

body:has(.ais-hero-banner) .work {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
  background: var(--ais-surface);
  border: 1px solid var(--ais-border);
  border-radius: var(--ais-radius);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 2px 10px -6px rgb(var(--ais-shadow-rgb) / 10%);
  will-change: opacity, transform;
  opacity: 0;
  transform: translateY(40px) scale(.82);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}

body:has(.ais-hero-banner) .work.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body:has(.ais-hero-banner) .work:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 36px -16px rgb(var(--ais-shadow-rgb) / 16%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .9s ease;
}

body:has(.ais-hero-banner) .work.clicked {
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, opacity .22s ease;
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 30px 70px -18px rgb(var(--ais-shadow-rgb) / 24%);
  z-index: 5;
}

body:has(.ais-hero-banner) .work.clicked .frame img {
  transform: scale(1.06);
}

body:has(.ais-hero-banner) .work.clicked .frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgb(var(--ais-accent-rgb) / 35%) 50%, transparent 70%);
  background-size: 280% 100%;
  animation: ti-ais-shine .55s ease-out forwards;
}

@keyframes ti-ais-shine {
  from { background-position: 140% 0; }
  to   { background-position: -140% 0; }
}

body:has(.ais-hero-banner) .work .badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  background: var(--ais-surface);
  border: 1px solid var(--ais-border);
  font-family: var(--ais-f-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ais-label-accent);
  padding: 3px 7px;
  border-radius: var(--ais-radius);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .45s ease, transform .45s ease;
}

body:has(.ais-hero-banner) .work:hover .badge {
  opacity: 1;
  transform: none;
}

body:has(.ais-hero-banner) .work .mat {
  padding: 14px;
  position: relative;
  flex: 0 0 auto;
  width: 40%;
  max-width: 170px;
  display: flex;
  align-items: center;
}

body:has(.ais-hero-banner) .work .frame {
  position: relative;
  background: var(--ais-frame-bg);
  outline: 1px solid var(--ais-divider);
  outline-offset: -1px;
  overflow: hidden;
  width: 100%;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  transform-style: preserve-3d;
}

body:has(.ais-hero-banner) .work .frame img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.3s cubic-bezier(.2, .8, .2, 1), filter .6s ease, opacity .9s ease;
  opacity: 0;
  filter: blur(8px);
}

body:has(.ais-hero-banner) .work .frame img.loaded {
  opacity: 1;
  filter: blur(0);
}

body:has(.ais-hero-banner) .work:hover .frame img {
  transform: scale(1.04);
}

body:has(.ais-hero-banner) .work .frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 120%, rgb(var(--ais-accent-rgb) / 8%), transparent 60%);
  opacity: 0;
  transition: opacity .6s ease;
}

body:has(.ais-hero-banner) .work:hover .frame::after {
  opacity: 1;
}

body:has(.ais-hero-banner) .work .body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 18px 16px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--ais-divider);
}

body:has(.ais-hero-banner) .work .body .artist {
  font-family: var(--ais-f-label);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ais-ink);
  margin-bottom: 6px;
}

body:has(.ais-hero-banner) .work .body .title {
  font-family: var(--ais-f-title);
  font-style: italic;
  font-size: 17px;
  line-height: 1.25;
  color: var(--ais-ink-2);
}

body:has(.ais-hero-banner) .work .body .meta {
  font-family: var(--ais-f-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ais-faint);
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--ais-divider);
}

body:has(.ais-hero-banner) .sentinel {
  width: 100%;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

body:has(.ais-hero-banner) .feed.swapping {
  animation: ti-ais-feed-out .35s ease forwards;
}

@keyframes ti-ais-feed-out {
  to { opacity: 0; transform: translateY(10px); }
}

body:has(.ais-hero-banner) .feed.swap-in {
  animation: ti-ais-feed-in .5s cubic-bezier(.2, .8, .2, 1);
}

@keyframes ti-ais-feed-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (min-width: 992px) {
  body:has(.ais-hero-banner) .stage.pinned .feed > .work-col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 1100px) {
  body:has(.ais-hero-banner) .stage.pinned {
    grid-template-columns: 1fr;
  }

  body:has(.ais-hero-banner) .pinned-col {
    position: relative;
    top: 0;
  }
}

@media (max-width: 991px) {
  body:has(.ais-hero-banner) .stage.pinned .feed > .work-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  body:has(.ais-hero-banner) .work {
    flex-direction: column;
  }

  body:has(.ais-hero-banner) .work .mat {
    width: 100%;
    max-width: none;
  }

  body:has(.ais-hero-banner) .work .body {
    border-left: none;
    border-top: 1px solid var(--ais-divider);
    padding: 16px 18px;
  }

  body:has(.ais-hero-banner) .plate .top {
    flex-direction: column;
  }

  body:has(.ais-hero-banner) .plate .mat {
    width: 100%;
    max-width: none;
  }

  body:has(.ais-hero-banner) .plate .caption {
    padding: 0 26px 22px;
  }
}

/* ===== artwork_info.html — TI (impressionist/ochre) ===== */


.artinfo_top h4 { color: var(--ti-ink, #2a2438); font-family: var(--font-title); }
.art_info_details { background: var(--ti-linen, #ede5d2); border-color: var(--ti-rule, #c7bea8); box-shadow: var(--ti-shadow-md, 0 8px 32px -12px rgba(42,36,56,0.12)); }
.art_info_inner { background: var(--ti-gesso, #f9f4e8); }
.art_info_inner h4 { color: var(--ti-ochre, #b78b4a); text-transform: none; }
.art_info_inner p { color: var(--ti-ink-soft, #4a4358); }
.artwork-info-meta-link { color: var(--ti-ink-soft, #4a4358); }
.artwork-info-meta-link:hover { color: var(--ti-ochre, #b78b4a); }

/* ===== END Artwork catalog list card — TopImpressionists ===== */

/* ============================================================
   Article detail page (article_detail.html) — TopImpressionists
   Overrides the brand-neutral beige structure in global-custom
   with TI tokens: soft canvas, ochre/gold accent, Italiana titles
   over Cormorant Garamond body. Scoped under .article_main_page.
   ============================================================ */

/* Keyword tag pills */


/* Hero title + subtitle */


/* Body copy + headings + links */


/* Sidebar section headings */


/* Table of contents links */


/* Related-artworks sidebar */


/* Related-articles list */


/* ===== END Article detail page — TopImpressionists ===== */


/* ===== TOP 100 PAGES (artists / artworks / museums / articles) ===== */
/* Brand-faithful overrides for TopImpressionists. Structural layout lives in
   global-custom-V2.1.css; here we only set the --top100-* tokens to the
   impressionist palette and add visual overrides that win because this file
   loads after global-custom. No literal hex except when seeding a token. */

/* --- Shared brand tokens for the three component groups --- */
.top100-artist-grid,
.top100-artwork-list {
  --top100-card-bg: var(--ti-gesso);
  --top100-card-border: var(--ti-rule);
  --top100-ink: var(--ti-ink);
  --top100-muted: var(--ti-ink-mute);
  --top100-accent: var(--ti-plein);
  --top100-rank-color: rgba(42, 36, 56, 0.06); /* faint impressionist ink wash */
  --top100-card-radius: 2px;
}

/* ============================================================
   A) ARTISTS PORTRAIT GRID  (/en/ti/artists/top100/)
   Gesso plate cards, hairline rule, circular portrait, Italiana
   display name, Cormorant clamped description. Lift on hover.
   ============================================================ */
.top100-artist-grid .top100-artist-card {
  background: var(--top100-card-bg);
  border: .5px solid var(--top100-card-border);
  border-radius: var(--top100-card-radius);
  transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.top100-artist-grid .top100-artist-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ti-shadow-lg);
  border-color: var(--ti-ink-soft);
}
.top100-artist-grid .top100-artist-card__photo {
  border: .5px solid var(--top100-card-border);
  outline: 5px solid var(--ti-paper);
  outline-offset: -5px;
  background: var(--ti-shadow-c);
  filter: saturate(.96);
  transition: filter .35s ease;
}
.top100-artist-grid .top100-artist-card:hover .top100-artist-card__photo {
  filter: saturate(1.04);
}
.top100-artist-grid .top100-artist-card__name,
.top100-artist-grid .top100-artist-card__name a {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--top100-ink);
  transition: color .25s ease;
}
.top100-artist-grid .top100-artist-card__name a:hover {
  color: var(--top100-accent);
}
.top100-artist-grid .top100-artist-card__desc {
  font-family: var(--f-edit);
  font-style: italic;
  color: var(--top100-muted);
  line-height: 1.55;
}

/* ============================================================
   B) ARTWORKS ZIGZAG GALLERY  (/en/ti/art/top100/)
   Giant ink-wash rank numeral in Italiana, gesso hover box with
   framed mat photo, plein-air accent on revealed meta.
   ============================================================ */
.top100-artwork-list .top100-artwork-card__rank {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--top100-rank-color);
  letter-spacing: -.02em;
}
.top100-artwork-list .top100-artwork-card__inner {
  background: var(--top100-card-bg);
  border: .5px solid var(--top100-card-border);
  border-radius: var(--top100-card-radius);
  transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.top100-artwork-list .top100-artwork-card:hover .top100-artwork-card__inner {
  box-shadow: var(--ti-shadow-frame);
  border-color: var(--ti-ink-soft);
}
.top100-artwork-list .top100-artwork-card__photo {
  background: var(--ti-shadow-c);
  border: .5px solid var(--top100-card-border);
}
/* the framed "mat" variant — gesso mat with inset outline, brand motif */
.top100-artwork-list .top100-artwork-card__photo--framed {
  outline: 6px solid var(--ti-gesso);
  outline-offset: -7px;
  box-shadow: var(--ti-shadow-md);
}
.top100-artwork-list .top100-artwork-card__details {
  color: var(--top100-ink);
}
.top100-artwork-list .top100-artwork-card__artist {
  font-family: var(--f-ui);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--top100-accent);
}
.top100-artwork-list .top100-artwork-card__year {
  font-family: var(--f-mono);
  letter-spacing: .08em;
  color: var(--ti-ochre);
}
.top100-artwork-list .top100-artwork-card__title {
  font-family: var(--f-edit);
  font-style: italic;
  color: var(--top100-ink);
}
.top100-artwork-list .top100-artwork-card__meta {
  border-top: .5px solid var(--ti-rule-soft);
}
/* TI brand identity */


/* ===== orders/art_consultation.html — step image offset shadow ===== */
/* TopImpressionists: warm plein-air wash of the brand accent. */
.step .step-image { --step-image-shadow: rgb(var(--ais-accent-rgb, 216 154 120) / 0.32); }

/* ===== orders/art_consultation.html — TopImpressionists brand colours ===== */
/* Violet ink · ochre accent · linen/canvas surfaces */


/* ===== /orders/art_consultation.html — TopImpressionists ===== */

/* ===== start_selling_* step-image shadow tint — TI · impressionist gold wash ===== */


/* ===== viewcart — cart state tokens (TI) ===== */
:root {
  --cart-placeholder-bg: var(--ti-gesso, #f9f4e8);
  --cart-placeholder-border: var(--ti-rule, #c7bea8);
  --cart-placeholder-icon: var(--ti-ink-mute, #6c647a);
  --cart-alert-warning-text: #876a28;
  --cart-alert-warning-bg: #f6edc8;
  --cart-alert-warning-border: #d9c884;
  --cart-alert-warning-accent: #d9c884;
  --cart-surface: var(--ti-gesso, #f9f4e8);
  --cart-surface-border: var(--ti-rule, #c7bea8);
  --cart-inset: var(--ti-paper, #fbf7ee);
  --cart-icon-bg: #E2DAC4;
  --cart-summary-ink: var(--ti-ink, #2a2438);
  --cart-summary-ink-2: var(--ti-ink-mute, #6c647a);
  --cart-summary-accent: var(--ti-accent, #a8524a);
  --cart-th-bg: #dbd4c0;
  --cart-th-color: var(--ti-ink, #2a2438);
}

/* ===== Art Appraisal (body.art-appraisal-page) — TI ===== */
/* Re-colours the shared ADC-palette appraisal page to the TopImpressionists
   UI Kit. Layout/spacing untouched; colours only. Scoped under
   body.art-appraisal-page so it beats the hardcoded globals. */


/* 1 · Hero caption (light over dark video) */


/* 2 · Intro band */


/* 3 · vertical connector */


/* 4 · step pill */


/* 5 · step headings / copy */


/* 6 · step image shadow */


/* 7 · comparative table */


/* 8 · valuation form */


/* step chip: ink chip + gesso (was warm-brown #3E342A bg leak) */


/* 9 · plan dropdown — align with form surfaces */


/* ===== orders/checkout ===== */
/* Scoped under .checkout-page. Impressionist palette: warm gesso surfaces,
   ink-dark card headers, ochre accent rail on the shipping panel.
   All values reuse TI tokens (hex fallbacks inside var() only). */


/* ===== collectible sell/edit — image upload + sales channels (restyle8) ===== */


@keyframes r8spin-ti { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* ===== TI — artworksimilarslider (artwork_similar_slider_section.html) ===== */
/* Artist name kicker hover color */

/* Artwork title link hover color */

/* ===== END TI — artworksimilarslider ===== */

/* ===== error_404.html + error_general.html — TopImpressionists ===== */
/*
   Tokens:  --lc var(--lc, #a0742a) (impressionist gold)  --ti-ink var(--ti-ink, #2a2438) (plum)
            --ti-ink-soft #4a4358  --font-body Cormorant Garamond serif
*/


/* ===== /error_404.html + error_general.html — TopImpressionists ===== */

/* ===== Native Stripe checkout + payment received — TI brand tokens ===== */


/* ===== artwork_preview_in_interior_room — TopImpressionists tokens (structure in global-custom) ===== */


/* ===== artwork_buy_ProductAuction — auction tokens ===== */
:root {
  --auction-accent:      var(--ti-plein, #D89A78);
  --auction-accent-dark: var(--ti-ochre, #b87a55);
  --auction-accent-text: var(--ti-ink, #2a2438);
  --auction-ink:         var(--ti-ink, #2a2438);
  --auction-ink-mute:    var(--ti-ink-mute, #6c647a);
}
/* ===== /artwork_buy_ProductAuction ===== */

/* =====================================================
   Dashboard feature spotlight — TopImpressionists tokens
   (impressionist canvas + ochre accent, soft shadow, 12px)
   ===================================================== */