/* =====================================================
   FONTS — Bricolage Grotesque · Familjen Grotesk · JetBrains Mono
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght,wdth@12..96,200..800,75..100&family=Familjen+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Design-system colour tokens (mirrors reference HTML) */
  --aps-bg:           #F6F4EF;
  --aps-bg-2:         #ECE9E1;
  --aps-paper:        #FBFAF6;
  --aps-ink:          #161310;
  --aps-ink-2:        #4A4641;
  --aps-ink-3:        #8A857D;
  --aps-rule:         #DCD7CB;
  --aps-rule-2:       #C8C2B3;
  --aps-burgundy:     #5B1622;
  --aps-burgundy-2:   #7A1F30;
  --aps-burgundy-ink: #2E0B12;
  --aps-cream:        #E8DFC9;
  --aps-cream-2:      #F2E6D8;  /* text on burgundy   */
  --aps-cream-3:      #F4ECDD;  /* text on ink        */
  --aps-gold:         #E8C9A8;  /* highlight on dark  */
  --aps-surcharge:    #A8321F;  /* +price / surcharge */
  --aps-warn-bg:      #F5EDD2;  /* amber alert fill   */
  --aps-warn-bd:      #E2CC85;  /* amber alert border */
  --aps-warn-ink:     #6E5712;  /* amber alert text   */
  --aps-max:          1440px;
  /* Horizontal page padding — mirrors global .search_sec side padding so the
     masthead, navbar and footer line up with the page content. Overridden at
     the same breakpoints as .search_sec further below (60px / 20px). */
  --aps-page-pad:     160px;

  /* Font stacks */
  --aps-f-display: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  --aps-f-text:    "Familjen Grotesk", ui-sans-serif, sans-serif;
  --aps-f-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Legacy aliases — keep existing site CSS working */
  --font-title-accent: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  --font-title:        "Familjen Grotesk", ui-sans-serif, sans-serif;
  --font-body:         "Familjen Grotesk", ui-sans-serif, sans-serif;
  --font-mono:         "JetBrains Mono", ui-monospace, monospace;
  --w-radius:          2px;

  /* Layout token — prevents global beige fallback (#EDE9DE) on body/main */
  --site-bg: var(--aps-bg);
}

/* Keep --aps-page-pad in lock-step with the global .search_sec breakpoints
   (global-style: 160px · global-responsive 992–1500px: 60px · ≤991px: 20px)
   so the masthead, navbar and footer always share the page content margins. */
@media (max-width: 1500px) { :root { --aps-page-pad: 60px; } }
@media (max-width: 991px)  { :root { --aps-page-pad: 20px; } }

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

/* Contain Bootstrap row negative-gutter margins so the homepage doesn't
   produce an ~8px horizontal scroll inside the px-2 container-fluid wrapper. */


/* =====================================================
   APS — Image hover: dark veil (radial ::after overlay)
   ===================================================== */

/* Veil pseudo-element — hidden by default */
.artist_slid_box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(transparent 30%, rgba(0, 0, 0, .55) 100%);
    opacity: 0;
    transition: opacity 1.1s;
    pointer-events: none;
}

/* Reveal veil on hover */
.artist_slid_box:hover::after {
    opacity: 1;
}

/* mouseover_effect_images — subtle scale for widget images (mouseover_image_effect kept as alias) */
img.mouseover_effect_images,
img.mouseover_image_effect {
    transition: transform 0.6s ease;
}

a:hover img.mouseover_effect_images,
img.mouseover_effect_images:hover,
a:hover img.mouseover_image_effect,
img.mouseover_image_effect:hover {
    transform: scale(1.03);
}

/* =====================================================
   APS — text link hover: center-out underline
   ===================================================== */

a {
    position: relative;
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--aps-burgundy);
    transform: translateX(-50%);
    transition: width .38s cubic-bezier(.22, 1, .36, 1);
}

a:hover::after {
    width: 100%;
}

/* Suppress underline effect on anchors that wrap an image or are styled buttons */
a:has(> img)::after,
a:has(> picture)::after,
a:has(> figure)::after,
a.btn-primary::after,
a.btn-ghost::after,
a.navbtn::after,
a.vibe-tag::after,
a.ci::after,
a.crest-tag::after,
a.pill::after,
a.ship-tag::after {
    content: none;
}

/* =====================================================
   mouseover_effect_texts — opt-in class for text links
   (nav, footer, breadcrumb anchors; not image links or buttons)
   ===================================================== */



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

/* =====================================================
   APS — UTILITY BAR (aps-utility)
   ===================================================== */









/* =====================================================
   APS — MASTHEAD (aps-masthead)
   ===================================================== */



/* left — config selectors */






/* flatten selector wrapper elements into the flex row */



/* avoid the double-V caret: keep the APS SVG caret (.aps-mh-config__car),
   suppress the generic Font Awesome chevron from the global dropdown styles */

/* keep the toggle flat (no cream pill) when the dropdown is open */


/* ---- open dropdown menu (country / currency / language) ----
   the global item styling is scoped to .topright_side, which the APS
   masthead does not use, so the menu items fall back to unstyled native
   buttons. Restyle the menu + items with APS tokens. */







/* center — brand */







/* right — account / wishlist / cart */







.aps-user-icon--guest,
.aps-user-icon--auth {
  width: 22px;
  height: 22px;
}
.aps-user-initial {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  font-size: 9px;
  font-family: var(--aps-f-mono);
}





/* mobile toggle */













/* =====================================================
   APS — PRIMARY NAVBAR (aps-navbar)
   ===================================================== */













/* ── Mega-menu dropdown panel — APS surface (override global #EDE9DE beige) ── */


/* Dropdown option links — match the nav title size/font (14px display) */



/* =====================================================
   APS — FOOTER (aps-foot) — header-style light redesign
   ===================================================== */



/* =====================================================
   APS — FOOTER watercolour strokes (canvas)
   Soft translucent horizontal bands that drift with
   mass-spring inertia and bend toward the pointer, painted
   on a <canvas> behind the footer content.
   ===================================================== */
/* canvas-rendered watercolour strokes — pointer-reactive bands behind content */


/* ── top columns ── */


/* ── brand block — mirrors .aps-mh-brand ── */







/* stats grid */




/* social icons — inline SVG, dark stroke on light bg */





/* ── footer link columns via render_footer_menu ── */







/* ── language bar — full-width row, below brand/link columns ── */

.foot-langs__lead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.foot-langs__lbl {
  font-family: var(--aps-f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--aps-ink-3, #8A857D);
}
.foot-langs__lbl b {
  color: var(--aps-ink, #161310);
  font-weight: 500;
}
.foot-langs__cur {
  font-family: var(--aps-f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--aps-burgundy, #5B1622);
  font-weight: 500;
}





/* ── contact strip — inline footer style, after language list ── */








/* ── bottom copyright / payment bar ── */
.aps-foot-cta {
  padding: 22px 0;
  border-bottom: 1px solid var(--aps-rule, #DCD7CB);
}
.aps-foot-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--aps-f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--aps-burgundy);
  text-decoration: none;
  transition: opacity .2s ease;
}
.aps-foot-cta__btn:hover { opacity: .7; }

.aps-foot-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0 24px;
  font-family: var(--aps-f-mono);
  font-size: 10px;
  color: var(--aps-ink-3, #8A857D);
  letter-spacing: .1em;
}
.aps-foot-legal__l { display: flex; gap: 22px; }
.aps-foot-legal__r { display: flex; gap: 14px; align-items: center; }
.aps-foot-badge {
  padding: 2px 6px;
  border: 1px solid var(--aps-rule, #DCD7CB);
  color: var(--aps-ink-3);
  font-size: 9px;
  letter-spacing: .08em;
}







/* Payment badge chips — crisp SVG icons on the burgundy bar */




/* =====================================================
   APS — Responsive overrides
   ===================================================== */
@media (max-width: 1100px) {
  
  
}

@media (max-width: 991px) {
  
  
  
  
}

@media (max-width: 768px) {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .aps-foot-legal {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  
}

/* =====================================================
   APS — UI Kit production components
   Classes from the UI Kit translated to --aps-* tokens
   ===================================================== */

/* buttons */
.btn-primary { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 2px; font-family: var(--aps-f-display); font-weight: 500; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; transition: background .18s ease; text-decoration: none; background: var(--aps-burgundy); color: var(--aps-cream-2); }
.btn-primary:hover { background: var(--aps-burgundy-2); color: var(--aps-cream-2); }
.btn-ghost { display: inline-flex; align-items: center; color: var(--aps-ink); border-bottom: 1px solid var(--aps-ink); border-radius: 0; padding: 0 0 4px; height: auto; font-family: var(--aps-f-display); font-weight: 500; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; transition: color .18s ease, border-color .18s ease; text-decoration: none; }
.btn-ghost:hover { color: var(--aps-burgundy); border-color: var(--aps-burgundy); }
.btn-primary svg, .btn-ghost svg { width: 14px; height: 14px; }

/* eyebrow / section kicker */
.eyebrow { font-family: var(--aps-f-mono); font-size: 11px; letter-spacing: .16em; color: var(--aps-burgundy); text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--aps-burgundy); }

/* search field */
.search { display: flex; align-items: center; gap: 10px; background: var(--aps-paper); border: 1px solid var(--aps-rule); height: 44px; border-radius: 2px; padding: 0 14px; min-width: 320px; max-width: 560px; }
.search svg { width: 16px; height: 16px; color: var(--aps-ink-3); }
.search input { flex: 1; border: 0; background: transparent; outline: none; font: inherit; color: var(--aps-ink); }
.search .kbd { font-family: var(--aps-f-mono); font-size: 10px; color: var(--aps-ink-3); border: 1px solid var(--aps-rule); padding: 2px 6px; border-radius: 2px; }

/* filter chips */




/* vibe tags */
.vibe-tag { font-family: var(--aps-f-display); font-weight: 500; font-size: 12px; letter-spacing: .01em; padding: 6px 10px; background: var(--aps-bg); border: 1px solid var(--aps-rule); border-radius: 999px; color: var(--aps-ink-2); cursor: pointer; transition: .15s; font-variation-settings: "wdth" 92; }
.vibe-tag:hover { border-color: var(--aps-burgundy); color: var(--aps-burgundy); }

.vibe-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* circular nav/carousel buttons */
.navbtn { width: 44px; height: 44px; border: 1px solid var(--aps-rule-2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--aps-ink); transition: .18s ease; background: none; cursor: pointer; }
.navbtn:hover { background: var(--aps-burgundy); border-color: var(--aps-burgundy); color: var(--aps-cream-2); }
.navbtn svg { width: 14px; height: 14px; }

/* badge / pill tags */
.pill { display: inline-block; background: var(--aps-burgundy); color: var(--aps-cream-2); border-radius: 999px; font-size: 11px; padding: 2px 9px; font-family: var(--aps-f-mono); letter-spacing: .04em; }
.ship-tag { display: inline-block; font-family: var(--aps-f-mono); font-size: 9px; letter-spacing: .1em; background: var(--aps-burgundy); color: var(--aps-cream-3); padding: 3px 7px; text-transform: uppercase; }
.crest-tag { display: inline-block; font-family: var(--aps-f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--aps-burgundy); border: 1px solid var(--aps-rule-2); padding: 6px 10px; }

/* connect chip (for dark surfaces) */
.ci { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid rgba(244,236,221,.18); border-radius: 999px; font-family: var(--aps-f-mono); font-size: 11px; color: var(--aps-cream-3); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: .18s; }
.ci:hover { background: rgba(244,236,221,.08); border-color: rgba(244,236,221,.4); }
.ci svg { width: 14px; height: 14px; }

/* breadcrumb */
.crumb { display: flex; align-items: center; gap: 9px; font-family: var(--aps-f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--aps-ink-3); }
.crumb a { color: var(--aps-ink-2); }
.crumb a:hover { color: var(--aps-burgundy); }
.crumb .sep { color: var(--aps-rule-2); }
.crumb .cur { color: var(--aps-burgundy); }

/* panel */
.panel { background: var(--aps-paper); border: 1px solid var(--aps-rule); border-radius: 2px; padding: 28px 28px 26px; }
.panel .p-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.panel h3 { font-family: var(--aps-f-display); font-weight: 600; font-size: 22px; letter-spacing: -.015em; color: var(--aps-ink); font-variation-settings: "wdth" 88; }
.panel .p-kicker { font-family: var(--aps-f-mono); font-size: 10px; color: var(--aps-burgundy); letter-spacing: .16em; text-transform: uppercase; }


/* alerts */
.banner { display: flex; align-items: center; gap: 12px; background: var(--aps-burgundy); color: var(--aps-cream-3); border-radius: 2px; padding: 12px 16px; font-size: 13px; }


.warn { display: flex; align-items: flex-start; gap: 12px; background: var(--aps-warn-bg); border: 1px solid var(--aps-warn-bd); border-radius: 2px; padding: 14px 16px; }
.warn .ic { flex: none; color: var(--aps-warn-ink); margin-top: 1px; }
.warn .ic svg { width: 18px; height: 18px; }
.warn .tx { font-size: 12.5px; color: var(--aps-warn-ink); line-height: 1.5; }
.warn .tx b { font-weight: 700; }
.warn .tx a { color: var(--aps-warn-ink); text-decoration: underline; }
.notice { display: flex; align-items: flex-start; gap: 12px; background: rgba(91,22,34,.05); border: 1px solid rgba(91,22,34,.16); border-radius: 2px; padding: 14px 16px; }
.notice .ic { flex: none; color: var(--aps-burgundy); margin-top: 1px; }
.notice .ic svg { width: 18px; height: 18px; }
.notice .tx { font-size: 12.5px; color: var(--aps-ink-2); line-height: 1.5; }
.notice .tx b { color: var(--aps-burgundy); font-weight: 600; }
.readmore { font-family: var(--aps-f-display); font-weight: 500; font-size: 12.5px; color: var(--aps-burgundy); border-bottom: 1px solid var(--aps-burgundy); font-variation-settings: "wdth" 92; text-decoration: none; }

/* =====================================================
   APS — Homepage site widgets
   Extracted from inline styles, deduplicated, APS tokens merged
   ===================================================== */






/* =====================================================
   APS — Reusable section heading strip
   ===================================================== */





@media (max-width: 575px) {
  
  
}

/* ── APS decor section (trade / interior designers) ── */



























@media (max-width: 1100px) {
  
}
@media (max-width: 768px) {
  
  
  
  
  
}























@media (min-width: 768px) {
  
}










@media (min-width: 768px) {
  
}

@media (min-width: 768px) {
  
  
  
  
  
  
  
}













@media (min-width: 992px) {
  
}
@media (max-width: 991.98px) {
  
}















@media (max-width: 767.98px) {
  
}




@media (max-width: 1024px) {
  
}














/* Featured artist portrait sized ~80% of the 142px artwork image */

















@media (min-width: 768px) {
  
}

@media (min-width: 768px) {
  
}

@media (min-width: 768px) {
  
}

@media (min-width: 768px) {
  
}

@media (min-width: 768px) {
  
}




@media (min-width: 768px) {
  
}



@media (min-width: 768px) {
  
}







@media (min-width: 768px) {
  
}





@media (min-width: 768px) {
  
}




@media (min-width: 768px) {
  
  
}

@media (min-width: 992px) {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

@media (min-width: 768px) {
  
}

@media (min-width: 768px) {
  
}
@media (min-width: 768px) {
  
}




@media (min-width: 768px) {
  
}









@media (min-width: 768px) {
  
}





@media (min-width: 768px) {
  
}
@media (min-width: 992px) {
  
}





@media (min-width: 768px) {
  
}
@media (min-width: 992px) {
  
  
}

@media (min-width: 992px) {
  
}


@media (max-width: 991.98px) {
  
}
@media (max-width: 575.98px) {
  
}



@media (min-width: 992px) {
  
}

@media (min-width: 768px) {
  
}
@media (min-width: 992px) {
  
}




























@media (min-width: 768px) {
  
}

@media (min-width: 768px) {
  
}


@media (min-width: 768px) {
  
}













@media (min-width: 768px) {
  
  
  
  
}








@media (max-width: 767.98px) {
  
}

.exarti-widget {
  padding: 2.5rem 0 2.75rem;
  background: var(--aps-bg-2, #ECE9E1);
  border-top: 1px solid var(--aps-rule, #DCD7CB);
  border-bottom: 1px solid var(--aps-rule, #DCD7CB);
}
.exarti-widget .exarti-head {
  margin-bottom: 1.75rem;
}
.exarti-widget .exarti-head h2 {
  font-family: var(--aps-f-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.75vw, 2.125rem);
  letter-spacing: -0.02em;
  color: var(--aps-ink, #161310);
  margin-bottom: 0.35rem;
  line-height: 1.15;
}
.exarti-widget .exarti-head h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--aps-burgundy, #5B1622);
}
.exarti-widget .exarti-head-meta {
  font-family: var(--aps-f-mono, "JetBrains Mono", monospace);
  font-size: 0.7rem;
  color: var(--aps-ink-3, #8A857D);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.exarti-widget .exarti-head-meta b {
  color: var(--aps-ink, #161310);
  font-weight: 600;
}

.exa-widget-card {
  font-family: var(--aps-f-text);
  background: var(--aps-paper, #FBFAF6);
  border: 1px solid var(--aps-rule, #DCD7CB);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.25s ease;
  text-decoration: none;
  color: inherit;
}
.exa-widget-card:hover {
  transform: translateY(-3px);
  border-color: var(--aps-burgundy-2, #7A1F30);
}
.exa-widget-top {
  display: flex;
  gap: 18px;
  padding: 22px 22px 16px;
}
.exa-widget-portrait {
  width: 80px;
  height: 80px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--aps-bg-2, #ECE9E1);
  border: 1px solid var(--aps-rule-2, #C8C2B3);
  filter: saturate(0.9) contrast(1.02);
  display: block;
}
.exa-widget-portrait-wrap {
  width: 80px;
  height: 80px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--aps-bg-2, #ECE9E1);
  border: 1px solid var(--aps-rule-2, #C8C2B3);
  display: block;
  text-decoration: none;
}
.exa-widget-id {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
.exa-widget-tag {
  font-family: var(--aps-f-mono, "JetBrains Mono", monospace);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aps-burgundy, #5B1622);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.exa-widget-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--aps-burgundy, #5B1622);
  flex: none;
}
.exa-widget-name {
  font-family: var(--aps-f-display, var(--aps-f-display));
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--aps-ink, #161310);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exa-widget-name:hover {
  color: var(--aps-burgundy, #5B1622);
}
.exa-widget-birth {
  font-family: var(--aps-f-mono, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  color: var(--aps-ink-3, #8A857D);
  letter-spacing: 0.05em;
}
.exa-widget-bio {
  font-family: var(--aps-f-text);
  padding: 0 22px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--aps-ink-2, #4A4641);
  flex-grow: 1;
}
.exa-widget-stat {
  display: flex;
  gap: 18px;
  margin: 14px 22px 18px;
  padding-top: 12px;
  border-top: 1px solid var(--aps-rule, #DCD7CB);
  font-family: var(--aps-f-mono, "JetBrains Mono", monospace);
  font-size: 0.56rem;
  color: var(--aps-ink-3, #8A857D);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.exa-widget-stat b {
  color: var(--aps-burgundy, #5B1622);
  font-family: var(--aps-f-display, var(--aps-f-display));
  font-weight: 600;
  font-size: 0.9rem;
  display: block;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.exa-widget-works {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  margin-top: auto;
}
.exa-widget-work {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  display: block;
  background: var(--aps-bg-2, #ECE9E1);
  text-decoration: none;
}
.exa-widget-work img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.exa-widget-work:hover img {
  transform: scale(1.04);
}
.exa-widget-work::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,15,12,0) 50%, rgba(20,15,12,0.66) 100%);
  opacity: 0;
  transition: 0.22s;
}
.exa-widget-work:hover::after {
  opacity: 1;
}
.exa-widget-wname {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  font-family: var(--aps-f-display, var(--aps-f-display));
  font-style: italic;
  font-size: 0.68rem;
  color: #F4ECDD;
  opacity: 0;
  transform: translateY(4px);
  transition: 0.22s;
  line-height: 1.15;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.exa-widget-work:hover .exa-widget-wname {
  opacity: 1; transform: none;
}
.exa-widget-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 22px;
  border-top: 1px solid var(--aps-rule, #DCD7CB);
  font-family: var(--aps-f-mono, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  color: var(--aps-ink-3, #8A857D);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.exa-widget-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--aps-ink, #161310);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.62rem;
  transition: color 0.15s;
}
.exa-widget-view svg {
  width: 11px; height: 11px; color: var(--aps-burgundy, #5B1622); flex: none;
}
.exa-widget-card:hover .exa-widget-view {
  color: var(--aps-burgundy, #5B1622);
}








@media (max-width: 575px) {
  
}





@media (min-width: 768px) {
  
}
@media (min-width: 1100px) {
  
}







































































.mpl-slide-group-label {
  background: var(--aps-burgundy) !important;
  color: #F2E6D8 !important;
  font-family: var(--aps-f-mono) !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
}









/* Artist portrait sized ~80% of the 200px artwork image so artworks lead */













/* APS-only swiper arrow icons — burgundy-accented on cream, replacing the generic warm-brown SVG */





/* =====================================================
   APS — Bespoke Commissions section
   ===================================================== */





/* heading strip — mirrors .aps-section-head */










/* 3-column card grid */


/* Individual commission card */




/* Process visualization — before/after image panels */




/* "before" step — slight warm desaturation to read as the source photo */








/* Card body */


/* "01 · Family Portrait" + price line */








/* Specs dl */










/* CTA link */










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

@media (max-width: 768px) {
  
  
  
  
  
}

@media (max-width: 575px) {
  
}

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


























@media (max-width: 900px) {
  
  
}
@media (max-width: 480px) {
  
  
}

/* --- block --- */








@media(min-width:768px){  }






















/* --- block --- */










@media(min-width:768px){  }






























/* --- block --- */




@media(min-width:768px){  }


















/* --- block --- */




@media(min-width:768px){  }


@keyframes blink { 50%{opacity:0;} }














/* --- block --- */











@media(min-width:600px){  }










/* --- block --- */








@media(min-width:600px){  }









/* === APS hompagetest — utility classes === */




/* === HOMEPAGETEST shared layout utilities === */






















@media (max-width: 991.98px) {
  
  
  
  
  
}
@media (max-width: 767.98px) {
  .homepage-impressionist-widgets,
.homepage-buypopart-widgets { padding-left: clamp(12px, 3vw, 24px); padding-right: clamp(12px, 3vw, 24px); }
  
  .ti-sh { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
}


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







/* ===================================================== */
/* 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): APS — warm paper page, burgundy sidebar, gold accent on dark */
/* ===================================================== */
/* Profile: sidebar shell only — do not use * reset (zeros .sidebar_profile_section / link padding) */





.header_box {
    background: var(--aps-paper, #FBFAF6);
    padding: 15px 20px;
    box-shadow: 0px 0px 10px 0px rgb(22 19 16 / 10%);
    -webkit-box-shadow: 0px 0px 10px 0px rgb(22 19 16 / 10%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(22 19 16 / 10%);
    margin-left: 320px;
}
h3.user_heading_text {
    color: var(--aps-ink, #161310);
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    font-family: var(--font-title);
    margin-bottom: 0px;
}
p.user_title_text {
    color: var(--aps-ink, #161310);
    font-size: 14px;
    font-weight: 400;
    opacity: 0.6;
    line-height: 22px;
    margin-bottom: 0px;
}
.sidebar_box {
    background: var(--aps-burgundy, #5B1622);
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: #7A1F30;
    border-radius: 10px;
}

aside::-webkit-scrollbar-thumb:hover {
    background: #5B1622;
}

aside {
    scrollbar-width: thin;
    scrollbar-color: var(--aps-rule, #DCD7CB) var(--aps-burgundy, #5B1622);
}



.profile_name {
    color: var(--aps-cream-2, #F2E6D8);
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
}





/* .sidebar_menu_link li.active a svg {
    color: var(--aps-gold, #E8C9A8) !important;
} */





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







.favorite_img_card {
    border-right: 1px solid var(--aps-rule, #DCD7CB);
    border-bottom: 1px solid var(--aps-rule, #DCD7CB);
    padding: 42px 33px;
    width: 20%;
}
.fav_img {
    max-width: 250px;
    height: 233px;
    margin: auto;
}
.fav_img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.fav-artist h2 {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    text-transform: uppercase;
    color: var(--aps-surcharge, #A8321F);
}
.fav-artist h2 a{
    color: var(--aps-surcharge, #A8321F);
}
.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(--aps-ink, #161310);
    margin: 6px 0px 11px;
    min-height: 38px;
}
.fav-title a{
    color: var(--aps-ink, #161310);
}
.button-dash {
    width: 100%;
    border: 1px solid var(--aps-burgundy);
    border-radius: 0;
    padding: 11px 15px;
    color: var(--aps-burgundy);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    background: transparent;
}
.favorite_img_section {
    display: flex;
    flex-wrap: wrap;
}
.favorite_img_section:nth-child(-n+5) {
    border-top: 1px solid var(--aps-rule, #DCD7CB);
}




.main_gap {
    padding: 16px;
}
.top_order_section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}
.order_count {
    color: var(--aps-ink, #161310);
    font-size: 14px;
    font-weight: 400;
    opacity: 0.8;
}
.purchase_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px 12px 18px;
    border-bottom: 1px solid var(--aps-rule, #DCD7CB);
}
.date_amount h6 {
    color: var(--aps-ink, #161310);
    font-size: 14px;
    opacity: 0.6;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 0px;
}
.date_amount p {
    color: var(--aps-ink, #161310);
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 0px;
}
.pur_top_box {
    display: flex;
    gap: 17px;
}
.purchase_section {
    margin-top: 11px;
    box-shadow: 0px 0px 10px 0px rgb(22 19 16 / 10%);
    -webkit-box-shadow: 0px 0px 10px 0px rgb(22 19 16 / 10%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(22 19 16 / 10%);
    background: var(--aps-paper, #FBFAF6);
}
.purchase-bottom {
    padding: 15px 18px 15px 18px;
}
.purchase-bottom ul {
    display: flex;
    gap: 15px;
}
.purchase-bottom ul li {
    width: 90px;
    height: 90px;
}
.purchase-bottom ul li img{
    width: 100%;
    height: 100%;
}
table {
    border-color: var(--aps-rule, #DCD7CB) !important;
}
table thead th {
    background: var(--aps-bg-2, #ECE9E1) !important;
    color: var(--aps-ink, #161310) !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(--aps-paper, #FBFAF6) !important;
    color: var(--aps-ink, #161310) !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%;

}
.red_box {
    color: #B0312E;
    display: inline;
    font-weight: 500;
    background: #F0DFCF;
    padding: 4px 10px;
    border-radius: 4px;
}
.green_box {
    color: #389544;
    display: inline;
    font-weight: 500;
    background: #E4E9D1;
    padding: 4px 10px;
    border-radius: 4px;
}
.yellow_box {
    color: #D08608;
    display: inline;
    font-weight: 500;
    background: #F3E7CB;
    padding: 4px 10px;
    border-radius: 4px;
}
.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%;
}
.img_date_box {
    position: relative;
    top: -2px;
    left: -3px;
}


/*message_us form css*/






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













/* When textarea is focused, change button color */



/*succesfull msg */


.text-center.suceesfulmsg_textt{
    padding-top: 230px;
}
.text-center.suceesfulmsg_textt img {
    padding-bottom: 30px;
}
.text-center.suceesfulmsg_textt h1 {
    font-size: 45px;
    font-weight: 400;
    font-family: var(--font-title);
    line-height: 66px;
    color: var(--aps-ink, #161310);
}
.text-center.suceesfulmsg_textt p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    font-family: var(--font-body);
    color: var(--aps-ink, #161310);
}

.suceesfulmsg_textt button
 {
    padding: 10px 120px;
    border: none;
    background: var(--aps-burgundy);
    font-size: 16px;
    line-height: 24px;
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--aps-cream-2, #F2E6D8);
    text-transform: uppercase;
}
 

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


/* Toggle Button */
.sidebar-toggle {
    background: var(--aps-burgundy-2, #7A1F30);
    color: white;
    border: none;
    padding: 8px 12px;
    font-size: 18px;
    cursor: pointer;
    z-index: 1000;
}









@media (min-width: 768px) {
    

.profile_picture_top_header_initiales {
    font-size: 15.43px;
}



.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;
}

.puchase-card-content {
    padding: 14px;
    gap: 14px;
}


.profile_name{ font-size: 15px;}

 .text-center.suceesfulmsg_textt h1 { font-size: 30px;line-height: 38px;}
 .text-center.suceesfulmsg_textt p {font-size: 13px;line-height: 20px;} .suceesfulmsg_textt button {padding: 10px 80px;font-size: 14px;}
 
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-toggle {display: block;}#sidebar { display: block; }
.sidebar-toggle { display: block;}.header_box {margin-left:0px;padding: 10px 20px;position: fixed; top: 0; left: 0;width: 100%;z-index: 999;}
.date_amount h6 {font-size: 12px;}p.user_title_text {font-size: 12px;}.date_amount p {font-size: 12px;}.button-dash {padding: 5px 8px; font-size: 12px;}.purchase-bottom ul li img { object-fit: cover;}
.fav_img {height: auto;}.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;}.img_date_box {position: relative;top: 0px;left: 0px;}

.text-center.suceesfulmsg_textt {padding-top: 50px; padding-bottom: 50px;}
 
}


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

/* Small Desktop / Laptop */
@media (min-width: 1024px) and (max-width: 1199px) {
  
}

/* Large Desktop */
@media (min-width: 1200px) and (max-width: 1365px) {
 
   

}

/* Extra Large Desktop */
@media (min-width: 1366px) and (max-width: 1919px) {
}

/* Full HD (1920px) to Ultra-wide */
@media (min-width: 1920px) and (max-width: 2499px) {
  
}


/* Ultra-wide 2K/4K */
@media (min-width: 2500px) {

}



/* Profile Photo Edit Section */

























/* user interaction-card  */











.puchase-card-content {
padding:20px;
    flex-wrap: wrap;
gap:20px;
}
.puchase-card-content img {
height:120px;
width:120px;
}


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


/* ═══════════════════════════════════════
   AllPaintingsStore — Infinite Scroll (/art/infinite_scroll/)
   Scoped via .ais-hero-banner; brand tokens only.
   ═══════════════════════════════════════ */
body:has(.ais-hero-banner) {
  --ais-page: var(--aps-bg);
  --ais-surface: var(--aps-paper);
  --ais-surface-2: var(--aps-bg-2);
  --ais-border: var(--aps-rule);
  --ais-divider: var(--aps-rule);
  --ais-frame-bg: var(--aps-bg-2);
  --ais-ink: var(--aps-ink);
  --ais-ink-2: var(--aps-ink-2);
  --ais-ink-3: var(--aps-ink-3);
  --ais-faint: var(--aps-ink-3);
  --ais-accent: var(--aps-burgundy);
  --ais-accent-dark: var(--aps-burgundy-ink);
  --ais-label-accent: var(--aps-burgundy);
  --ais-on-accent: var(--aps-cream-2);
  --ais-shadow-rgb: 22 19 16;
  --ais-accent-rgb: 91 22 34;
  --ais-f-heading: var(--aps-f-display);
  --ais-f-title: var(--aps-f-text);
  --ais-f-body: var(--aps-f-text);
  --ais-f-label: var(--aps-f-text);
  --ais-f-mono: var(--aps-f-mono);
  --ais-heading-weight: 600;
  --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: aps-ais-reveal-up .9s cubic-bezier(.16, 1, .3, 1) forwards;
}

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

body:has(.ais-hero-banner) .feed-head {
  position: relative;
}

body:has(.ais-hero-banner) .feed-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--ais-accent);
  animation: aps-ais-draw-line 1.1s 1s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes aps-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: aps-ais-pin-in .8s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes aps-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: aps-ais-breathe 14s ease-in-out infinite alternate;
}

@keyframes aps-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: aps-ais-fact-in .5s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes aps-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: aps-ais-heart-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes aps-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) .feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ais-border);
}

body:has(.ais-hero-banner) .feed-head .label {
  font-family: var(--ais-f-label);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ais-label-accent);
}



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: aps-ais-shine .55s ease-out forwards;
}

@keyframes aps-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: aps-ais-feed-out .35s ease forwards;
}

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

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

@keyframes aps-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 — APS (burgundy/cream) ===== */


.artinfo_top h4 { color: var(--aps-ink, #161310); }
.art_info_details { background: var(--aps-cream, #E8DFC9); border-color: var(--aps-rule, #DCD7CB); box-shadow: 0 4px 16px rgba(22,19,16,0.08); }
.art_info_inner { background: var(--aps-cream-3, #F4ECDD); }
.art_info_inner h4 { color: var(--aps-burgundy, #5B1622); text-transform: none; }
.art_info_inner p { color: var(--aps-ink-2, #4A4641); }
.artwork-info-meta-link { color: var(--aps-ink-2, #4A4641); }
.artwork-info-meta-link:hover { color: var(--aps-burgundy, #5B1622); }



/* ═══════════════════════════════════════════════════════════════════
   APS — AllPaintingsStore — Similar artworks browse (/art/similar/<slug>/)
   Scoped to .artwork-similar-page — gallery-minimal tokens
   ═══════════════════════════════════════════════════════════════════ */


/* Page chrome — breadcrumb, title row, sort */



/* Criteria sidebar */










/* Grid — catalog cards */



















/* ===================================================================
   Ecard (artworks/artwork_ecard.html) — APS AllPaintingsStore
   Cream editorial + burgundy CTA, Familjen Grotesk, tight radius.
   =================================================================== */












/* ===== Artwork catalog list card — AllPaintingsStore (UI Kit aligned) ===== */
/*
   Scope: .search_sec.catalog-list-page  and  .search_sec.artwork-list-page
   Tokens: --aps-paper, --aps-bg, --aps-bg-2, --aps-ink, --aps-ink-2, --aps-ink-3,
           --aps-rule, --aps-rule-2, --aps-burgundy, --aps-burgundy-2,
           --aps-cream-2, --aps-cream-3,
           --aps-f-display (Bricolage Grotesque), --aps-f-text (Familjen Grotesk),
           --aps-f-mono (JetBrains Mono)
   All selectors are double-prefixed to avoid collision with ~95 other .search_card pages.
   Pure CSS — no HTML/class-name changes.
*/

/* ── Convenience scope alias ──────────────────────────────────────────────── */


/* ── Card hover: lift + border intensify (no drop shadow per UI Kit rules) ── */


/* ── Column border (grid gutters) ─────────────────────────────────────────── */


/* ── Image container ──────────────────────────────────────────────────────── */


/* ── Card body ────────────────────────────────────────────────────────────── */


/* ── Artist row: name + year on one line ─────────────────────────────────── */


/* Artist name — Bricolage Grotesque semi-bold, ink, narrow */



/* Year — JetBrains Mono, tertiary ink, no underline animation */


/* ── Artwork title ────────────────────────────────────────────────────────── */



/* ── Hover overlay panel ──────────────────────────────────────────────────── */
/* Preserve global display:none / display:block reveal — just restyle the surface.
   The panel floats absolutely below the card, so it must read as a seamless
   extension: same paper background + matching side/bottom border as the card. */

/* On hover, the card's own bottom border merges into the panel's top border */


/* Snippet text inside hover overlay */



/* ── card_bottom: CTA + favourite side by side ───────────────────────────── */


/* ── addToCart — burgundy primary button (UI Kit .btn-primary) ───────────── */



/* Price display inside addToCart — JetBrains Mono for the number */


/* ── Favourite control ────────────────────────────────────────────────────── */





/* Unfav icon: burgundy tint for clear visibility; Fav icon: cream on hover (handled by .fav_group bg) */





/* ── Suppress the global center-out underline on image links inside cards ─── */

/* ===== /Artwork catalog list card — AllPaintingsStore ===== */

/* =====================================================
   PrintReproduction & DigitalImage buy pages — article (historicle_box) typography
   Structure lives in global-custom-V2.1.css; brand ink/links here.
   ===================================================== */



/* ============================================================
   Article detail page (article_detail.html) — AllPaintingsStore
   Overrides the brand-neutral beige structure in global-custom
   with APS tokens: warm paper, burgundy accent, Familjen Grotesk.
   Scoped under .article_main_page so artwork/artist/museum pages
   are unaffected.
   ============================================================ */

/* 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 — AllPaintingsStore ===== */

/* ===== TOP 100 PAGES (artists / artworks / museums / articles) ===== */
/* AllPaintingsStore identity: warm paper, deep burgundy accent, 3 fonts
   (Bricolage display / Familjen text / JetBrains mono), 2px radius,
   hairline rules, hover-lift instead of drop shadows. All colors come from
   the brand --aps-* variables defined in :root. */

/* --- Brand palette → --top100-* tokens (inherit into all 3 components) --- */
.top100-artist-grid,
.top100-artwork-list {
  --top100-card-bg:     var(--aps-paper, #FBFAF6);
  --top100-card-border: var(--aps-rule, #DCD7CB);
  --top100-ink:         var(--aps-ink, #161310);
  --top100-muted:       var(--aps-ink-3, #8A857D);
  --top100-accent:      var(--aps-burgundy, #5B1622);
  --top100-rank-color:  rgba(91, 22, 34, 0.07); /* faint burgundy ghost number */
  --top100-card-radius: 2px;
}

/* ───────────────────────────────────────────────────────────────────────────
   A) ARTISTS portrait grid  (/en/aps/artists/top100/)
   ─────────────────────────────────────────────────────────────────────────── */
.top100-artist-card {
  background: var(--aps-paper, #FBFAF6);
  border: 1px solid var(--aps-rule, #DCD7CB);
  border-radius: 2px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.top100-artist-card:hover {
  transform: translateY(-3px);
  border-color: var(--aps-rule-2, #C8C2B3);
}
/* Circular portrait — hairline ring, warm placeholder */
.top100-artist-card__photo {
  border: 1px solid var(--aps-rule, #DCD7CB);
  background: var(--aps-bg-2, #ECE9E1);
  transition: border-color 0.2s ease;
}
.top100-artist-card:hover .top100-artist-card__photo {
  border-color: var(--aps-burgundy, #5B1622);
}
/* Name — Bricolage display, narrowed width */
.top100-artist-card__name,
.top100-artist-card__name a {
  font-family: var(--aps-f-display, "Bricolage Grotesque", sans-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variation-settings: "wdth" 90;
  color: var(--aps-ink, #161310);
  transition: color 0.15s ease;
}
.top100-artist-card__name a:hover {
  color: var(--aps-burgundy, #5B1622);
}
/* Description — Familjen text, secondary ink */
.top100-artist-card__desc {
  font-family: var(--aps-f-text, "Familjen Grotesk", sans-serif);
  font-weight: 400;
  color: var(--aps-ink-2, #4A4641);
}

/* ───────────────────────────────────────────────────────────────────────────
   B) ARTWORKS zigzag gallery  (/en/aps/art/top100/)
   ─────────────────────────────────────────────────────────────────────────── */
/* Giant background rank number — light display, ghost burgundy */
.top100-artwork-card__rank {
  font-family: var(--aps-f-display, "Bricolage Grotesque", sans-serif);
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variation-settings: "wdth" 80;
  color: var(--top100-rank-color);
}
/* Hover box — paper surface, hairline border, lift (no shadow) */
.top100-artwork-card__inner {
  background: var(--aps-paper, #FBFAF6);
  border: 1px solid var(--aps-rule, #DCD7CB);
  border-radius: 2px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.top100-artwork-card:hover .top100-artwork-card__inner {
  transform: translateY(-3px);
  border-color: var(--aps-burgundy-2, #7A1F30);
}
.top100-artwork-card__photo {
  border-radius: 2px;
  background: var(--aps-bg-2, #ECE9E1);
}
/* Framed variant — warm dark "frame" edge */
.top100-artwork-card__photo--framed {
  border: 8px solid var(--aps-burgundy-ink, #2E0B12);
  border-radius: 2px;
}
/* Meta block revealed on hover */
.top100-artwork-card__meta {
  font-family: var(--aps-f-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aps-burgundy, #5B1622);
}
.top100-artwork-card__artist {
  font-family: var(--aps-f-display, "Bricolage Grotesque", sans-serif);
  font-weight: 600;
  letter-spacing: -0.005em;
  font-variation-settings: "wdth" 90;
  color: var(--aps-ink, #161310);
}
.top100-artwork-card__year {
  font-family: var(--aps-f-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aps-ink-3, #8A857D);
}
.top100-artwork-card__title {
  font-family: var(--aps-f-display, "Bricolage Grotesque", sans-serif);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.008em;
  color: var(--aps-ink-2, #4A4641);
}

/* ───────────────────────────────────────────────────────────────────────────
   C) MUSEUMS + ARTICLES listing  (reuses .search_card under .top100-listing)
   Scoped overrides only — never touches bare .search_card.
   ─────────────────────────────────────────────────────────────────────────── */




/* Artist / museum name row — Bricolage display */


/* Title — italic display */


/* addToCart — burgundy primary button (UI Kit .btn-primary) */


/* Articles variant: no cart button, lead with editorial title */

/* Hover panel — match article_list card frame (full box, aligned sides) */





/* ===== END TOP 100 PAGES — AllPaintingsStore ===== */

/* ===== fts_search — model type badge (APS) ===== */
/* Overrides the global default to match the APS UI Kit overlay-tag idiom
   (.ship-tag / .frame-tag): burgundy fill, cream text-on-burgundy, mono
   uppercase micro-label, brand 2px radius. Inherits absolute top/left 10px. */



/* ===== artwork-catalog-card (catalog list grid card) ===== */
/* Dedicated, self-contained styling for the catalog list grid card via the
   long companion classes. Aligned to the APS UI Kit: warm "paper" surface,
   hairline rule borders, 2px radius, NO drop shadow (hover = lift + border),
   Bricolage Grotesque display type (narrow width axis), Familjen Grotesk body,
   JetBrains Mono micro-labels, and the single deep burgundy accent used
   sparingly (links, the buy button, the favourite-active state).
   Scoped under .custom_search + the long classes so it wins the cascade over
   the older shared .search_card rules. Tokens only — no hardcoded colours.
   Tokens used: --aps-paper, --aps-bg-2, --aps-rule, --aps-rule-2,
   --aps-ink, --aps-ink-2, --aps-ink-3, --aps-burgundy, --aps-burgundy-2,
   --aps-cream-2, --aps-cream-3, --aps-f-display, --aps-f-text, --aps-f-mono,
   --w-radius. */

/* ── Card root: paper surface, hairline border, 2px radius, hover lift ────── */



/* ── Media wrapper: warm placeholder fill, hairline base rule, clip zoom ──── */



/* ── Image: quiet zoom on card hover (UI Kit "card hover = subtle move") ──── */



/* ── Body: artist + title block ──────────────────────────────────────────── */


/* ── Artist row: name (left) + year (right) on one baseline ──────────────── */

/* Artist name — Bricolage Grotesque semi-bold, ink, narrowed width axis */


/* Year — JetBrains Mono micro-label, tertiary ink, uppercase wide tracking */


/* ── Title — light italic Bricolage display, secondary ink ───────────────── */



/* ── Hover overlay: revealed on card hover, alt warm band + hairline rule.
      Floats absolutely BELOW the card (top:100% = card's bottom edge) so it
      overlays the row beneath instead of pushing it down. top:100% is explicit
      because, on a column-flex card, an absolute child with top:auto would pin
      to the flex start (= over the image). ── */




/* ── Footer: buy button + favourite toggle, side by side ─────────────────── */



/* ── Buy button — UI Kit .btn-primary: burgundy fill, cream text, 2px, mono ─ */


/* Price — kept legible on the burgundy fill (cream-on-dark) */


/* ── Favourite toggle — circular outline icon button, burgundy when active ── */




/* Active favourite: burgundy fill, cream icon (the rare "this matters" accent) */


/* On the artwork-list cards the legacy .fav_group (further up) is the favourite
   control — a paper circle that fills burgundy on hover with white icons.
   Neutralise the BEM __fav-toggle here so it doesn't stack a second ring inside
   it (the double border). The toggle becomes a transparent icon holder; the
   .fav_group circle stays the single, complete control. */

/* ===== END artwork-catalog-card — AllPaintingsStore ===== */

/* ===== article_list.html — article list cards (article-list-card) ===== */
/* APS UI-Kit catalogue idiom: warm paper surface, 1px hairline rule, 2px
   radius, NO shadow — hover is a quiet translateY lift + border tint.
   Image zoom on hover, mono uppercase burgundy eyebrow, display title in
   ink with burgundy hover, neutral text excerpt, burgundy PRIMARY button.
   Tokens: --aps-paper/-bg-2/-rule/-rule-2/-ink/-ink-2/-ink-3/-burgundy/
   -burgundy-2/-cream-2/-f-display/-f-text/-f-mono/-w-radius.
   Scoped under .article-list-page; chained page+grid+long-class selectors
   match/exceed global specificity (.custom_search .search_card ... = 0,3,1
   and .search_sec.catalog-list-page ... art-artist h2 a ~ 0,5,2). */

/* Grid spacing — UI Kit card-grid gap rhythm (14–18px). Layout comes from the
   Bootstrap .row>col-* in the markup (same as the sibling catalog lists); the
   container is not a grid, so the gap must be applied as the row's vertical
   gutter (a bare `gap` on a block does nothing). */


/* Card surface — paper, hairline rule, 2px radius, no shadow */





/* Media — square-ish, warm fill, 2px radius, image zoom on hover */





/* Body — generous catalogue padding */


/* Meta eyebrow — mono uppercase burgundy category + muted mono year.
   Uses !important to win over the over-specified global
   .search_sec.catalog-list-page .custom_search .search_card .art-artist h2 a (~0,5,2). */





/* Title — display family, ink, tight tracking; burgundy on hover.
   Chained selector (0,3,1) matches global .custom_search .search_card .art-title a. */






/* Hover panel — excerpt typography in neutral text font */



/* Footer / actions */



/* Read button — APS PRIMARY: burgundy fill, cream text, 2px, mono-ish caps */


/* ===== END article_list.html — article list cards (AllPaintingsStore) ===== */

/* ===== article_list.html — specificity lift over artwork-list base rules (eyebrow accent) ===== */


/* ===== article_list.html — horizontal alignment: defeat leaked catalog-list-page
   padding so the hover excerpt/button line up with the resting eyebrow/title.
   The page carries both .catalog-list-page and .article-list-page, so the shared
   catalog rules (0,5,0) force searchCard_body to 16px and hover_visible to 31px.
   These article-scoped selectors are (0,5,0) too and sit later in the file, so
   they win — restoring the article card's intended 20px text inset on BOTH the
   body and the hover panel (whose only inset is its own __content padding). ===== */



/* ===== list-page filter sidebar + sort (artwork-list-page scope, shared by art/article/artist/museum lists) — APS ===== */

/* Sort chrome — ink text + brand sans */



/* Filter panel surface — match group-by sidebar band (--aps-gb-band / --aps-bg-2) */


/* Filter title — mono micro-label + CLEAR ALL burgundy link */




/* Active-filter badge list + chips */



/* Accordion (filter groups) — match group-by sidebar band */




/* Colour / criteria chips list */
/* Category value links (filter sidebar) — chip styling consistent with group-by Sidebar_tags + list_category. */












/* Checkboxes — burgundy when checked */



/* Artist text filter + tag buttons */




/* Range sliders (noUiSlider) — burgundy fill on rule track */




/* ===== APS — Artists alphabet (group_by_alphabet / start_by_letter) ===== */

/* 1. Alphabet nav box — letter cells */






/* 2. Alphabet section heading (letter group title) */


/* 3. Artist profile card */





/* 4. "View more" link */




/* ===== photo_to_restyled_masterpiece ===== */
/* APS brand styling for the photo→art page. Shared markup/structure lives in
   global-custom; this section gives APS values to the --pr-* tokens read there
   and brand-styles every component (steps, headings, chips, upload box,
   textarea, style cards) using the APS palette. */



/* ── Hero caption ─────────────────────────────────────────────────────── */



/* ── Intro paragraphs ─────────────────────────────────────────────────── */


/* ── Step blocks (panel surface, like UI Kit .panel) ──────────────────── */


/* Step badge — burgundy mono kicker */


/* Step heading — Bricolage display */


/* Step body copy */


/* File-extension hint — mono tertiary */


/* ── Step 01: upload box ──────────────────────────────────────────────── */



/* ── Step 02: edit-request textarea ───────────────────────────────────── */




/* ── Chips: edit-request examples + category filters ──────────────────── */


/* Active category chip — solid burgundy */


/* Suppress the global center-out underline on these chips */


/* ── Step 04: style cards (reuse APS list-card look) ──────────────────── */




/* Category label (art-artist h2) — display, ink */

/* Style name (art-title span) — italic display */

/* Card description */


/* ===== artist_group_by_attribute / group-by browse — APS ===== */


/* ── breadcrumb-navigation-list / breadcrumb-current-page-item / Showing_text / sortABC base ── */




/* ── groupby-selector / search form inputs ── */


/* ── placeholder + search icon ── */



/* ── badge list / filter chips ── */



/* ── sortABC letters (active / disabled) ── */



/* ── sidebar boxes ── */




/* ── sidebar_box_title + description ── */





/* ── Sidebar_tags chips ── */




/* ── .showMainResuls container ── */


/* ── group heading + count badge ── */




/* ── "See All" link ── */



/* ── result cards ── */


/* ── image overlay caption ── */


/* Light text sits on the dark image overlay, so an underline reads better than a colour shift on hover. */


/* ── result-item text rows ── */



/* ===== end artist_group_by_attribute / group-by browse — APS ===== */

/* ===== APS — Custom reproduction / photo-to-painting order ===== */
/* Overrides COLOURS/identity only; structural layout + neutral (brown) defaults
   live in global-custom-V2.1.css. Scoped under .production_form / .summery_checkout.
   Palette = APS editorial: bone surfaces, ink text, burgundy identity, terracotta
   surcharge, amber alert. All values reference :root --aps-* tokens (top of file). */


/* ---- Step shell --------------------------------------------------------- */





/* ---- Step 01 upload ----------------------------------------------------- */





/* ---- Step 02 faces ------------------------------------------------------ */






/* ---- Step 03 size ------------------------------------------------------- */











/* ---- Step 04 style ------------------------------------------------------ */







/* ---- Step 05 frame ------------------------------------------------------ */











/* ---- Radio dials (faces / frame / medium) ------------------------------- */




/* ---- Step 07 / 08 customization + add-ons ------------------------------- */









/* ---- Summary card (.summery_checkout) ----------------------------------- */















/* ---- Read-more CTA (brand accent) --------------------------------------- */


/* ===== end APS — Custom reproduction / photo-to-painting order ===== */

/* ═══════════════════════════════════════════════════════════════════
   APS — Catalog categories browse (list_category)
   URL: /en/art/list_category/<field_code_name>/
   Wrapper: .search_sec same-space-card catalog-categories-page artwork-categories-page
   Scope: .search_sec.catalog-categories-page  AND  .search_sec.artwork-categories-page
   Tokens (APS UI Kit):
     --aps-bg #F6F4EF · --aps-bg-2 #ECE9E1 · --aps-paper #FBFAF6 · --aps-cream-3 #F4ECDD
     --aps-ink #161310 · --aps-ink-2 #4A4641 · --aps-ink-3 #8A857D
     --aps-rule #DCD7CB · --aps-rule-2 #C8C2B3
     --aps-burgundy #5B1622 · --aps-burgundy-2 #7A1F30 · --aps-cream-2 #F2E6D8
     --aps-f-display (Bricolage Grotesque) · --aps-f-text (Familjen Grotesk) · --aps-f-mono (JetBrains Mono)
   Structure mirrors ADC "Catalog categories browse"; every value mapped to APS tokens.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Page chrome: breadcrumb nav, heading, results count, sort ─────────── */




/* ── 2. Filter panel surface — match group-by sidebar band (--aps-gb-band / --aps-bg-2) ── */


/* ── 3. Filter title (flex header + Bricolage label + 16px icon) ──────────── */




/* ── 4. Active-filter badge list + chips (slot/inset bg) ──────────────────── */



/* ── 5. CORE category links (.catalog-sidebar-values-list) — slot chip cloud ──────────────── */






/* ── 6. Card grid — identical chrome to .artwork-list-page list card ──────── */



















/* ── 7. Pagination — SITE-WIDE (every paginated template: list, categories,
   search, color search). Paper cell, hairline rule; burgundy active pill.
   Overrides the global brown #875D2A defaults. ─────────────────────────────── */




/* ═══ end APS — Pagination (site-wide) ═══════════════════════════════════════ */

/* ===== museum_list (restyle8) — pagination active pill = brand accent =====
   Overrides the generic global default (brown #875D2A) and the :first-child
   grey (#858585). Scoped to .museum-list-page only; matches the card CTA. */


/* =====================================================
   DigitalImage buy page — "Included in Every Digital Image Order"
   premium benefits band — AllPaintingsStore tokens (overrides the ADC-gold
   default in global-custom-V2.1.css). Layout mirrors ADC/OUA/WK.
   ===================================================== */
















/* ===== search_by_color ===== */




























/* Brand accent on all checkboxes within the color-search page */


@media (max-width: 768px) {
  
  
}

/* ===== orders/art_consultation.html — step image offset shadow ===== */
/* AllPaintingsStore: soft burgundy wash of the brand accent. */
.step .step-image { --step-image-shadow: rgb(var(--ais-accent-rgb, 91 22 34) / 0.15); }

/* ===== orders/art_consultation.html — AllPaintingsStore brand colours ===== */
/* Deep ink + burgundy accent + parchment surfaces */


























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

/* ===== viewcart — cart state tokens (APS) ===== */
:root {
  --cart-placeholder-bg: var(--aps-paper, #FBFAF6);
  --cart-placeholder-border: var(--aps-rule, #DCD7CB);
  --cart-placeholder-icon: var(--aps-ink-3, #8A857D);
  --cart-alert-warning-text: var(--aps-warn-ink, #6E5712);
  --cart-alert-warning-bg: var(--aps-warn-bg, #F5EDD2);
  --cart-alert-warning-border: var(--aps-warn-bd, #E2CC85);
  --cart-alert-warning-accent: var(--aps-gold, #E8C9A8);
  --cart-surface: var(--aps-cream-2, #F2E6D8);
  --cart-surface-border: var(--aps-rule, #DCD7CB);
  --cart-inset: var(--aps-paper, #FBFAF6);
  --cart-icon-bg: var(--aps-cream, #E8DFC9);
  --cart-summary-ink: var(--aps-ink, #161310);
  --cart-summary-ink-2: var(--aps-ink-2, #4A4641);
  --cart-summary-accent: var(--aps-burgundy, #5B1622);
  --cart-th-bg: var(--aps-cream, #E8DFC9);
  --cart-th-color: var(--aps-ink, #161310);
}

/* Summary panel surface matches the cart table header (DETAILS) background */


/* Discount "Apply" button — APS burgundy, aligned with the discount input field.
   The form row uses .align-items-center, which centres the button against the
   taller input column (input + status line) and drops it below the input top.
   Pin the row contents to the top and mirror the input box model so the button
   lines up with the input. */




/* ===== start_selling_* step-image shadow tint — APS · gold highlight ===== */


/* ===== Art Appraisal (body.art-appraisal-page) — APS ===== */


/* 1 — Hero caption over dark video (keep light, legible) */


/* 2 — Intro band */



/* 3 — Vertical connector */


/* 4 — Step pill */


/* 5 — Step text */



/* 6 — Step image shadow (token consumed by global) */


/* 7 — Pricing table */







/* 8 — Request form */




/* step chip: filled burgundy + cream (was warm-brown #3E342A bg leak) */





/* 9 — Plan dropdown (consume tokens declared above) */





/* ===== orders/checkout ===== */
/* AllPaintingsStore — printed-catalogue look: warm paper, hairline rules,
   burgundy accent, 2px radius, Bricolage display titles. No drop shadows —
   cards read as bordered panels (brand rule), so the card "shadow" is a
   1px burgundy-tinted hairline ring rather than a soft blur. */
















/* ===== apr-thanks (art project request thank-you) ===== */

/* Page wrapper — warm off-white, generous vertical breathing room */


/* 2-col grid: equal columns, responsive gap.
   Centered pair with a comfortable max-width so the two boxes read large. */


/* Neutralise the bootstrap col sizing/padding so each card fills its track
   and both columns share the same (tallest) height. */


@media (max-width: 767px) {
  
}

/* ── Card surface ──
   Specificity (0,2,0): loads after global-custom so wins on tie */




/* Intro card: top border accent in brand burgundy */


/* Steps card: slightly warmer background to differentiate */


/* ── Card body ── */


/* Intro card body: center the content (both axes) */


/* ── Card title ──
   Specificity (0,3,0): overrides global .col-md-6 .card .card-title (0,3,0) because site CSS loads after global-custom */


/* ── Card body text ── */


/* ── Steps list ── */




/* Replace default bullet with a small burgundy square marker */


/* ── Contact strip ── */




/* Raise to (0,2,0) to beat .text-muted a (0,2,0) in global-custom — loads after so wins on tie */




/* ── Mobile tweaks ── */
@media (max-width: 575px) {
  

  

  
}

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








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





/* ===== start_selling_* (body.start-selling-page) — APS · AllPaintingsStore ===== */
/* --- right CTA card "Start selling today" --- */
























/* ===== Artwork Not Found Page ===== */

/* Card surface */


/* Page heading inside card */


/* Body copy / description */




/* Breadcrumb breadcrumb-navigation-list */






/* Suppress the global center-out underline on breadcrumb-navigation-list links */


/* "Not Found" terminal crumb — muted */


/* Primary CTA — burgundy fill, cream text (UI Kit .btn-primary) */




/* Secondary button — outlined in ink, ink text */




/* Suppress center-out underline on both button types */


/* =====================================================
   APS — AllPaintingsStore — Artwork buy / reproduction page (artwork_buy_ArtistReproduction)
   Structure lives in global-custom; brand colours/identity here.
   Warm paper / burgundy accent / Bricolage display + Familjen Grotesk text, 2px radius.
   Scoped to .reproduction_main_page (mirrors ADC reference block).
   ===================================================== */


/* Academic block — full width (no nested container gutters) */




/* Custom width/height fields — warm slot */


/* ---- Action bar + cross-channel links (Buy print, Share, Favorites, …) ---- */




/* Monochrome icons — neutral ink, burgundy on hover */




/* ---- Metadata chips (medium, movement, year, …) ---- */



/* ---- PDP titles ---- */



/* ---- Accordions (description, size, summary, …) — warm band ---- */















/* Configurator tabs (.reproduc_tabs nav-pills) */




/* Size / frame radio controls */





/* Clickable frame/size tile cards — lighter surface so they read as selectable */


/* Section containers (.commn_strache_frame) — transparent so they absorb the
   accordion band (#ECE9E1) instead of floating as a white card */



/* Preset-size dropdown — override legacy cream defaults (#f5f1df / #F7F2E1 /
   #f6f2e1 from global-style) so the control matches the APS paper palette.
   The outer .commn_strache_frame is now transparent; the border lives here. */





/* Price spans */

/* Surcharge / +price markers */


/* Order summary block */





/* CTA buttons (add-to-cart, primary buy) */



/* ---- Academic / story block ---- */


/* Unified section headings */








/* Quick Facts cards — paper surface (matches Art Quiz / TOC cards) */

/* Art Quiz — paper surface card */














/* Collections band at bottom of buy page */







/* Optional extras (checkbox row) */




/* Read more — APS text CTA (accordions, tabs, options) */








/* Related articles — « Explore Article » CTA */







/* Academic block — Related Artworks inside reproduction_main_page */




/* Artist-detail & related-artworks sliders — reuse the APS homepage swiper
   arrow style: burgundy aps icon, no background band, prev flipped, hover lift. */








/* ===== APS — artist_detail.html — artistPage_Slider_section (corpus/popular/medium sliders) ===== */
/* Background — linen-parchment band matching APS card surfaces */









/* view_all_art tag links */



/* Disable the box-level veil (inset:0 would cover the text area below the image) */

/* Veil reattached to the image <a> — covers only the artwork thumbnail */



/* ===== END APS — artist_detail.html artistPage_Slider_section ===== */

/* ===== APS — artworksimilarslider (artwork_similar_slider_section.html) ===== */
/* Disable the box-level veil (inset:0 would cover the text area below the image) */

/* Veil reattached to the image <a> — covers only the artwork thumbnail */


/* Artist name kicker hover color */

/* Artwork title link hover color */

/* ===== END APS — artworksimilarslider ===== */

/* Digital Image — benefits band (dark burgundy-ink surface) */







/* ===== APS — museum / artist / article detail sidebar (Quick Facts, Art Quiz, List of Artworks) =====
   Parity with the reproduction page: these scopes were only branded under
   .reproduction_main_page / .adc-buy-page-section, so on .article_main_page
   (museum/artist/article detail, no reproduction ancestor) the Quick Facts /
   Art Quiz / artwork-list fell back to the neutral global-custom theme
   (beige #E8E2CD facts, dark #3E342A quiz, gold buttons). Re-apply APS tokens. */





/* Quick Facts card — paper surface (matches Art Quiz card) */

/* Art Quiz card — paper surface (overrides global dark #3E342A) */






/* Quiz radio dial — paper surface (parity with reproduction page; the global
   .question_option rule fills the dial dark #3e342b, made for the old dark card) */









/* List of Artworks — paper band (overrides global beige #E8E2CD) */



/* ===== END APS — museum / artist / article detail sidebar ===== */

/* ===== customers_reviews — APS brand tokens (structure lives in global-custom) ===== */


/* ===== wheel-of-affinities (similar artworks study plate) =====
   APS identity: warm paper plate, light rules, burgundy accent (centered
   frame + bars), Bricolage Grotesque captions. Structure in global-custom. */


/* ===== artwork_info — action bar (Buy print, Send, Share, Favorites, Download, Similars, X-Ray, Diaporama) ===== */





/* hover/active icon recolour → APS burgundy #5B1622 */



/* ===== Catalog hover panel — align snippet + buy with the card body text =====
   Card padding is reset globally on the A1 card component root; match __body 16px inset. */


/* ===== error_404.html + error_general.html — AllPaintingsStore ===== */
/*
   Tokens:  --aps-accent #5B1622 (crimson)  --aps-accent-dark #2E0B12
            --aps-ink #161310  --aps-ink-2 #4A4641  --font-body Familjen Grotesk
*/
















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

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


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


/* ===== artwork_buy_ProductAuction — auction tokens ===== */
:root {
  --auction-accent:      var(--aps-burgundy, #5B1622);
  --auction-accent-dark: var(--aps-burgundy-ink, #3d0f17);
  --auction-accent-text: #ffffff;
  --auction-ink:         var(--aps-ink, #161310);
  --auction-ink-mute:    var(--aps-ink-3, #8A857D);
}
/* ===== /artwork_buy_ProductAuction ===== */

/* =====================================================
   Page side margins on non-large windows
   Below the large (xl) breakpoint — e.g. snapped quarter (1/4)
   and half (2/4) windows — Bootstrap caps .container at a fixed
   max-width (540/720/960px), leaving very wide empty side margins.
   We want the page content to use almost the full width with only a
   small gutter at those sizes. Scoped to in-page <main> content so
   header/top-bar/footer containers are unaffected.
   ===================================================== */
@media (max-width: 1199.98px) {
    main .container,
    main .container-sm,
    main .container-md,
    main .container-lg,
    main .container-xl {
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =====================================================
   Dashboard feature spotlight — AllPaintingsStore tokens
   (cream paper + burgundy accent, 2px corners)
   ===================================================== */