/* =====================================================
   SITE — OUA (OriginalUniqueArt.com)
   Identity: gallery-minimal, monochrome ink palette with a
   warm-gray accent, Schibsted Grotesk, tight radius.
   One-of-a-kind exclusivity is the brand signature.
   ===================================================== */

/* =====================================================
   FONTS — OUA (Schibsted Grotesk)
   Self-hosted via @font-face below (static/fonts/schibsted-grotesk/, downloaded
   2026-07-08). 2026-07-08: removed a live Google @import here — OUA had NO
   self-hosted font at all before this (100% dependent on Google at every
   pageview). One variable-font file covers the whole 400-700 weight range.
   ===================================================== */
/* Schibsted Grotesk — latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk/schibsted-grotesk-w400-700-normal-latin.ba4038fc5cb5.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;
}
/* Schibsted Grotesk — latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk/schibsted-grotesk-w400-700-normal-latin-ext.65233324c912.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;
}

:root {
  /* OUA UI Kit: one family does everything — Schibsted Grotesk, a neutral grotesque.
     It is the only webfont the site loads. */
  --font-title-accent: 'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-title:        'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:         'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Horizontal rhythm — matches .adc-header / .adc-footer-v2 */
  --oua-pad: 56px;

  /* Layout tokens — consumed by global-style-V2.1.css via var(--site-*, fallback) */
  --site-bg:            #ffffff;
  --site-header-bg:     #ffffff;
  --site-nav-bg:        #ffffff;
  --site-nav-border:    transparent;
  --site-footer-bg:     #333333;
  --site-footer-border: transparent;
  --site-copyright-bg:  #2A2A2A;
  --site-topbar-bg:     #5A5A5A;
  --site-link:          #4A4A4A;
  --site-btn:           #6B6B6B;
  --site-btn-text:      #E8E8E8;
}
@media (max-width: 768px) {
  :root { --oua-pad: 28px; }
}
@media (max-width: 520px) {
  :root { --oua-pad: 20px; }
}

/* =====================================================
   ADC — Image hover: grayscale + scale (consolidated)
   Three contexts merged into one consistent block.
   ===================================================== */

/* Base transition */
.swiper-slide .artist_slid_box a img,
img.mouseover_effect_images{
	-webkit-filter: none;
	filter: none;
	transition: filter 0.3s ease-out, transform 1s ease-out;
}

/* Hover state — full grayscale + subtle zoom */
.swiper-slide .artist_slid_box a:hover img,
a:hover img.mouseover_effect_images,
img.mouseover_effect_images:hover{
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	transform: scale(1.02);
}

/* =====================================================
   ADC — Link hover effects (consolidated)
   Nav, dropdown, footer, column, slider, and muted-text links.
   ===================================================== */

/* Nav top-level links → accent */


/* Nav dropdown inner links → accent + underline */


/* General dropdown links → accent */
.dropdown a:hover {
	color: var(--oua-accent, #45433f);
	/* text-decoration: underline; */
}

/* Footer list links → accent */


/* Nav-pills / table-of-contents links → accent (overrides Bootstrap's .nav-link:hover) */
.nav-link:hover {
	color: var(--oua-accent, #45433f);
}

/* Dropdown column links — strip underline */


/* Numeric slider label links → muted grey + underline */


/* Generic muted-text links (slightly lighter on hover) */
.black-hover:hover {
	color: #8B8B8B;
}

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


body, main {
	background: #ffffff;
	background-color: #ffffff !important;
}

/* ADC list/browse pages: main content card on white page */
.search_sec.same-space-card {
	background-color: #ffffff;
}
#Most-Popular-Artists,
#Artworks-By-Styles,
#Specialize-Oil-Paintings,
#Shop-By-Room,
#reviews {
	padding-left: var(--oua-pad);
	padding-right: var(--oua-pad);
}
/* } */

@media (min-width: 1400px) { /* Bootstrap 5 XXL breakpoint */
  .w-xxl-auto {
    width: auto !important;
  }
  /* .navbar padding-left removed: ADC nav uses --oua-pad on .adc-mainnav__row instead */
}

/* Do not use `all: unset` here: it strips intrinsic sizing from checkbox inputs so they
   can collapse to 0×0 inside flex rows (e.g. photo-to-painting optional add-ons). */


    


/* NOTE: WahooArt site styling (.wa-*, .WahooArt-Header-Flags, etc.) removed.
   That site has its own CSS file (wahooart-V2.0.css). */

/* Customized CSS */
/* Old page rules removed:
   - #ArtsDot-Slider-Most_Famous_Artworks-Block
   - .main-header .logo img (not used in current templates)
   - Commented-out dead rules for .main-header and .nav-menu */

.ArtsDot-Content-Specialize-Block {
	padding-bottom: 0 !important;
}

.ArtsDot-Content-Specialize-Block-50 p {
	line-height: 1.6vw;
}

.ArtsDot-Content-Specialize-Block-50-Warranty-Title {
	font-size: 1vw;
}

.ArtsDot-Content-Specialize-Block-50-Warranty-Text {
	font-size: 1vw;
}

/* Old override rules removed:
   - .nav-menu > li { border-bottom: none; } (only relevant to legacy nav)
   - input[name="q"]::placeholder (ADC search has its own styling)
   - .top100_banner h2 (unused page section)
   - Kept: .consultation_content h1 color (used in thanks-for pages) */


    
/* NOTE: The old "ADC dark footer" block (dark #1c1a15 background, orange #e89177
   links, near-white .links_heading, inverted social icons, black .footer-container-bottom)
   was removed. The footer is now the light UI-Kit design in base_artsdot_footer.html
   (.adc-footer-v2) with the legal row replacing the old black bottom bar. The light
   .footer_sec chrome further below (~line 4225) remains for any legacy markup. */

/* Blur only while a nav mega-menu is open; fade in on open, snap off on close */
main {
	transition: opacity 0.2s ease-in-out;
}

/* Alternative: Even darker with multiple effects */
main.blurred.darker {
	filter: blur(3px) brightness(0.9);
	opacity: 1;
	transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* Header icons: clean ink line-icons (grayscale filter removed). Sizing handled by
   .adc-utility-right .icon-group img below. */

/* User auth widget: do not apply cart/search icon sizing to dashboard avatar (incl. header_initial span) */


 

/* NOTE: Extensive old page/form styling removed. The rules below (lines ~415–554 in original)
   were for deprecated sections and forms:
   - .yellow_cont, .confirmation_notice, .explore_techniques (old UI sections)
   - .top100_posts_col (old blog)
   - .consultation_bottom, .step-*, .appraisel_* (old form pages)
   - Generic .table, tbody/th/thead styling (rarely needed for modern pages)
   - .input_label_text, .input_box, form inputs (old form styling)
   - .swp_btn, .artistPage_Slider_section (old slider styling)
   - .question_option, .ques_*, .repro_radio (old questionnaire/appraisal forms)
   - .fav-icon-artwork, .include_benifits_box, .collapse_tab_repro (old page components)

   Kept: .sidebar-section-heading (used in article TOC), .consultation_content h6, h1/h2/h3 global styling. */

/* side_headings — legacy class; prefer .art_heading on ADC buy/academic pages */
.sidebar-section-heading {
  font-family: var(--oua-body, var(--font-body)) !important;
  font-size:15px;
  font-weight: 700 !important;
  line-height:1.4;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: var(--oua-ink, #232323) !important;
  margin-top:0;
  margin-bottom:18px;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--oua-line-2, #d6d6d6) !important;
  opacity: 1;
}

H1, H2, H3 {
    font-weight: bold !important;
    font-family: var(--font-body) !important;
}


/* Cart link is wrapped in .aps-cart-icon-wrap for the count badge; keep same img sizing as direct .icon-group > a */


 


/* Not-found / CTA row: global form max-width must not offset centered buttons */


.step-content .step-number-box {
    background: #dbdbdb;
    border: 1px solid #c7c7c7;
}

.custom_search .col-sm-12.col-md-6.col-lg-4.col-xl-3 {
    border: 1px solid var(--oua-divider, #dddddd);
}

.colorPlatte li{
   background: #e7e7e7;
    border: 1px solid #c7c7c7;
    color: #2d2d2d;
}


.search_results #fieldSelector {
    border: 1px solid #AAA;
    background: #d1d1d1;
}


/* User dashboard sidebar only — browse/group-by uses catalog-groupby-page tokens below */
aside .sidebar_box {
    background: #5b5b5b;
}


.btn:hover {
    border: 1px solid var(--btn-color);
    color: var(--btn-text-color);
    background: var(--btn-color);
}

.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after {
    background-color: #ffffff;
}

.contactfull_width_hero_banner_with_background_image {
    background: #d3d3d3;
}

/* consultant_right copy lives on a dark photo band — typography scoped under
   body.art-consultation-page / body.start-selling-page below. */


.alert-info {
    color: #717171;
    background-color: var(--oua-matte, #f5f5f5);
    border-color: #bdbdbd;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid var(--oua-muted, #888);
  -webkit-text-fill-color:#222;
  -webkit-box-shadow:0 0 0px 1000px #fff inset;
  box-shadow:0 0 0px 1000px #fff inset;
  transition:background-color 5000s ease-in-out 0s;
}


#upload-spinner {
    background: rgb(204, 204, 204);
}

a {
	color: var(--site-link, #4A4A4A);
}

a:hover {
	color: var(--oua-accent, #45433f);
}

:root {
	--btn-color: #6B6B6B;
	--btn-text-color: #E8E8E8;
}

.btn {
	background: var(--oua-ink, #232323);
}

/* =====================================================
   OUA — UI Kit button variants (gallery-minimal B&W)
   ===================================================== */
.btn--solid, .btn--accent {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
    padding: 14px 24px; border-radius: 10px; border: 1px solid transparent;
    transition: all .16s; white-space: nowrap; text-decoration: none;
    background: var(--oua-ink-2, #6f6f6f); color: var(--oua-bg, #ffffff);
}
.btn--solid:hover, .btn--accent:hover { background: var(--oua-accent, #45433f); }

.btn--ghost {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
    padding: 14px 24px; border-radius: 10px; border: 1px solid var(--oua-line, #e3e3e3);
    transition: all .16s; white-space: nowrap; text-decoration: none;
    background: transparent; color: var(--oua-ink-2, #6f6f6f);
}
.btn--ghost:hover { border-color: var(--oua-ink, #232323); color: var(--oua-ink, #232323); }

.btn--light {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
    padding: 14px 24px; border-radius: 10px; border: 1px solid transparent;
    transition: all .16s; white-space: nowrap; text-decoration: none;
    background: var(--oua-bg, #ffffff); color: var(--oua-ink, #232323);
}

.btn--lightghost {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
    padding: 14px 24px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.32);
    transition: all .16s; white-space: nowrap; text-decoration: none;
    background: transparent; color: var(--oua-bg, #ffffff);
}
.btn--lightghost:hover { border-color: var(--oua-bg, #ffffff); }

.btn--sm { padding: 10px 16px !important; font-size:12px; }
.btn--solid svg, .btn--accent svg, .btn--ghost svg, .btn--light svg, .btn--lightghost svg { width: 16px; height: 16px; }


.overlay_img {
	background: #09090987;
}


.heading_text,
.heading_paragrap {
	color: var(--site-link, #4A4A4A);
}

.swiper-button-prev:after,
.swiper-button-next:after {
	background: #444;
}


.black_back {
	background: var(--site-topbar-bg, #5A5A5A);
}

.black_back p {
	color: var(--oua-border, #E5E5E5);
}


.why_choose_info h5,
.why_choose_info p {
	color: var(--site-link, #4A4A4A);
}


.why_choose_icon img {
	background: #6B6B6B;
}

#swiper_thumb::-webkit-scrollbar-thumb {
	background: #fff;
}

.swiper_main_thumb span {
	color: #E8E8E8;
}

.swiper_bottom_content .heading_text,
.swiper_bottom_content .heading_paragrap {
	color: #E8E8E8;
}
.form_heading,
.form_content,
.detail_cont_shared h4,
.detail_cont_shared p,
select option {
	color: var(--site-link, #4A4A4A);
}


.black-hover {
	color: #6B6B6B;
}


.steps_count span {
	background: var(--site-link, #4A4A4A);
	color: #E8E8E8;
}


.sum_chek_text {
	border-bottom: 1px solid #D0D0D0;
	color: var(--site-link, #4A4A4A);
}


select:focus>option:checked {
	background: #6B6B6B;
	color: var(--oua-card-border, #E0E0E0);
}


.checked_box {
	border: 1px solid var(--site-link, #4A4A4A) !IMPORTANT;
}


.artistic_img .overlay_img,
.swiper-button-prev,
.collection_other_detail {
	color: var(--site-link, #4A4A4A);
}


.form-floating>label {
	color: var(--site-link, #4A4A4A) !important;
	border-bottom: none !important;
}


.repruct_content_collapse .accordion-body {
	color: #6B6B6B;
}

body,
main {
	background: #E8E8E8;
}

.text-op-80,
.text-op-0 {
	color: var(--site-link, #4A4A4A);
}

.text-op-80 {
	opacity: 0.8;
}


/* .links_heading {
	color: #4E4339;
} */


/* (breadcrumb ul/li/a/current-item ink MIGRATED 2026-07-05 to
   components/breadcrumb/breadcrumb--originaluniqueart.css — --breadcrumb-ink) */
.search_results,
.Showing_text,
.sorting_content {
	color: var(--site-link, #4A4A4A);
}

.Showing_text .form-control {
	border: 1px solid #C0C0C0 !important;
}

.accordion-item {
	background-color: var(--oua-card-border, #E0E0E0);
	border-bottom: 1px solid #D0D0D0;
}

button.accordion-button,
.accordion-button:not(.collapsed) {
	background: var(--oua-card-border, #E0E0E0);
	color: var(--site-link, #4A4A4A);
}

.artist_input {
	background: #E8E8E8 !important;
	border: 1px solid #D0D0D0 !important;
	color: var(--site-link, #4A4A4A);
}

.artist_input::placeholder {
	color: #4A4A4A66;
}

.form-check input {
	border: 1px solid #8B8B8B !important;
	background-color: var(--oua-card-border, #E0E0E0) !important;
}

.form-check input:checked {
	background-color: var(--site-link, #4A4A4A) !important;
	border-color: var(--site-link, #4A4A4A) !important;
}

.search_sec {
	padding: 20px var(--oua-pad);
}


/* @media (max-width: 768px) {
	.search_sec {
		padding: 20px 20px;
	}

	.article_main_page {
		padding: 20px 20px;
	}
}

@media (max-width: 1280px) {
	.search_sec {
		padding: 20px 40px;
	}

	.article_main_page {
		padding: 20px 40px;
	}
} */

.search_sec .form-check,
.search_sec .form-check .form-check-label {
	color: var(--site-link, #4A4A4A);
}

.noUi-target {
	background: #C0C0C0 !important;
}

.noUi-connect {
	background: var(--site-link, #4A4A4A) !important;
}

.noUi-horizontal .noUi-handle {
	background: var(--site-link, #4A4A4A);
}

.noUi-handle:before {
	background: var(--oua-border, #E5E5E5) !important;
}

.colorPlatte li.active{
	background-color: #D8D8D8;
	border: 1px solid var(--site-link, #4A4A4A);
}


.btn-prev {
	color: var(--site-link, #4A4A4A) !important;
}


.btn-prev {
	border: 1px solid #9f9f9e !important;
}


.dropdown-list {
	background: #C8C8C8;
}


.floating_footer,
.upload_img_form label,
.image-upload-container,
.image-preview,
.image-preview img,
.image-upload-box,
.image-preview-list-box,
#image-preview-list,
.loader,
.form-floating input,
.loader::after {
	color: var(--site-link, #4A4A4A);
}

.upload_img_form span {
	color: #6B6B6B;
}
.art-curator,
.thank_you img,
.thank_you h3,
.thank_you p,
.proceed_box,
.proceed_radio_box,
.proceed_box input[type="radio"],
.proceed_box input[type="radio"]:after,
.proceed_box input[type="radio"]:checked:after,
.proceed_radio_box label,
.img_extention,
.calendar input[type="date"],
.calendar,
.timeslots,
.timeslots h4,
.sloat-btn,
.time-btn,
.artworks-container,
.btn-group,
.btn-group button,
.btn-group button:hover,
.ui-widget.ui-widget-content,
.ui-widget-content,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-widget-header,
a.ui-state-default,
a.ui-state-default:hover,
.ui-icon-circle-triangle-w,
.ui-icon-circle-triangle-e{
	color: var(--site-link, #4A4A4A);
}

.time-btn:hover {
	background: var(--site-link, #4A4A4A);
	color: #E8E8E8;
}

.card {
	color: var(--site-link, #4A4A4A);
	background: #d3d3d3;
}

.custom_search .row .col-md-3,
.custom_search .row .col-md-4.col-12.col-lg-4.col-xl-3 {
	border: 1px solid #D0D0D0;
}
p.Showing_text1,
p.Showing_text1 span {
	color: var(--site-link, #4A4A4A);
}


.sorting_content select.custom-select {
	background: url("/static/images/arrow-down.5a2ececd62b2.png") no-repeat right center;
	background-size: 12px;
}

/* Legacy gray browse chrome — not used on catalog group-by (ADC tokens at EOF) */


ul.sidebar-tags-chip-list a {
	background: #c8c8c8 !important;
}

/* ADC — grid card price/buy CTA (UI Kit #artcard .price / button.pill: ink bg, white text) */
.added {
	background: var(--oua-ink, #232323) !important;
	color: #ffffff !important;
	font-family: var(--oua-body, var(--font-body));
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.04em;
	text-transform: none;
	border-radius: 999px;
	padding: 10px 20px;
	width: auto;
	min-width: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}


/* ===== artwork_info.html — OUA (gallery-minimal, monochrome) ===== */


.artinfo_top h4 { color: var(--oua-ink, #333333); font-family: var(--font-body); font-weight: 600; }
.art_info_details { background: var(--oua-slot, #ececec); border: 1px solid var(--oua-line, #e6e6e6); box-shadow: none; }
.art_info_inner { background: var(--oua-line-soft, #f2f2f2); }
.art_info_inner h4 { color: var(--oua-accent, #575248); text-transform: none; font-weight: 600; }
.art_info_inner p { color: var(--oua-ink-2, #575757); text-align: justify; }
.artwork-info-meta-link { color: var(--oua-muted, #848484); }
.artwork-info-meta-link:hover { color: var(--oua-ink, #333333); }

.art_his_text {
	background: #dbdbdb !important;
}


.image-upload-box {
	background: #dbdbdb !important;
}


.artist_posts:hover .artist_posts_innr {
	background: #dbdbdb !important;
}


.artistPage_Slider_section {
	background: #efefef !important;
}

/* .artwork_section — legacy gray band removed; ADC buy/academic blocks styled below */

.yellow_cont a {
	color: #515151 !important;
}


/* quick_facts_section — ADC surfaces set in “Academic / story block” (article_main_page) */

/* .art_quize_section — legacy WA dark panel removed; ADC buy-page quiz uses tokens below */

.sidebar_box:hover, .sidebar_box.active {
	border: 1px solid var(--site-link, #4A4A4A);
}

ul.sidebar-tags-chip-list,
ul.sidebar-tags-chip-list a{
	color: var(--site-link, #4A4A4A);
}

.repruct_content_collapse button.accordion-button,
.repruct_content_collapse button.accordion-button:not(.collapsed) {
	background: transparent !important;
}


.buy_sale_channel_heading_alternate_buy a {
	color: #828282;
}

.buy_sale_channel_heading_alternate_buy a img {
	filter: brightness(0) saturate(100%) invert(54%) sepia(2%) saturate(0%) hue-rotate(314deg) brightness(93%) contrast(86%);
}


/* It is for new svg icons USER and CART */


input[type=range],
input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-moz-range-track,
input[type=range]::-webkit-slider-thumb,
input[type=range]::-moz-range-thumb {
	color: var(--site-link, #4A4A4A);
}


.steps_count{
	color: var(--site-link, #4A4A4A);
}


page-link {
    color: var(--oua-text-3, #666666) !important;
}


/* showMainResulsBox hover — handled by consolidated block above */

/* custom_search .search_card hover — handled by consolidated block above */

/* 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;
}

/* =====================================================
   ADC — Slider card title: multi-line hover-frame fix
   inline-block gives the <a> a single rectangular bounding box
   so hover decorations correctly cover
   the full text block even when the title wraps.
   ===================================================== */
.view_all_art a {
    display: inline-block;
}

/* =====================================================
   ARTSDOT (ADC) — Text-link hover colors (site-specific)

   Do NOT put these hover colors in custom-V2.0.css — WahooArt (WA) uses
   brand brown (#875D2A / #6B4822) instead. Documented in:
   -Documentation Project/DOC_APS_THE_7_SITES.md
   → section "Frontend CSS: text-link hover (WahooArt vs ArtsDot)"

   Brand token:
   - var(--oua-accent, #45433f) — ADC rust accent (global a:hover also uses this;
     rules below override inline color: inherit on buy/info templates)

   Covered templates / URLs:
   - artwork_buy_*.html (e.g. …/ArtistReproduction/)
   - artwork_info.html (/art/info/{slug}/)

   Shared transition: custom-V2.0.css (.collection_details h4 a, .art_info_box …)
   ===================================================== */

/* Buy page — collections section (#collections-section) + slider labels */


.yellow_cont a:hover,
.view_all_art a:hover {
    color: var(--oua-accent, #45433f) !important;
}
@media (max-width: 767.98px) {
  
  .ti-sh { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
}

/* =====================================================
   ADC v2 — ArtsDot editorial design system
   (scoped to .adc-v2, used by homepage_artsdot.html)
   ===================================================== */


/* ---- Typography ---- */


.adc-h3 { font-family: var(--oua-serif); font-weight: 600; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 6px; }
.adc-h3 em { font-style: italic; font-weight: inherit; color: var(--oua-accent); }
/* Editorial headings use the kit serif; !important overrides a global heading
   rule that otherwise forces --font-title-accent (Inter) onto these headings. */

.adc-eyebrow { font-family: var(--oua-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oua-accent); margin-bottom: 14px; }


/* ---- ADC artwork card (UI-Kit #16) — shared tile for gallery widgets ---- */


.adc-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border-radius: 3px; line-height: 1; }
.adc-badge--exclusive { background: var(--oua-accent); color: #fff; }
.adc-badge--bestseller { background: var(--oua-ink); color: #fff; }

/* ---- Curation steps ---- */


/* ---- CTA band / newsletter ---- */


/* ---- Buttons ---- */
.adc-btn { display: inline-block; padding: 11px 22px; border-radius: 999px; background: var(--oua-ink); color: #fff; font-weight: 600; font-size: 13px; font-family: var(--oua-sans); border: 0; cursor: pointer; align-self: flex-start; transition: background .15s ease; }
.adc-btn:hover { background: #2c2a27; color: #fff; }

/* ---- Featured-artist facts / quick-fact box ---- */

.adc-faf { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(18px, 2.5vw, 32px); align-items: start; }
.adc-faf__works { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.adc-faf__desc { color: var(--oua-muted); font-size: 13.5px; line-height: 1.55; margin: 14px 0 0; }
.adc-faf__cta { margin-top: 16px; }
@media (max-width: 900px) { .adc-faf { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .adc-faf__works { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .adc-faf__works { grid-template-columns: 1fr 1fr; } }
.adc-factbox { background: var(--oua-paper); border: 1px solid var(--oua-line); border-radius: var(--oua-radius); padding: 22px; }


.adc-factbox__photo { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--oua-soft); border: 1px solid var(--oua-line); margin-bottom: 14px; }
.adc-factbox__photo img { width: 100%; height: 100%; object-fit: cover; }
.adc-factlist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.adc-factlist li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.5; color: var(--oua-muted); }
.adc-factlist li::before { content: "—"; position: absolute; left: 0; color: var(--oua-accent); }


/* ---- Quizzes / identify ---- */


/* ---- Reimagine your photo ---- */


/* Reimagine style rail: very slow auto-scroll (duplicated track for seamless loop). */


@keyframes adc-reimagine-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =====================================================
   ADC — Site-wide page content horizontal rhythm
   Match header utility bar / category nav / footer inset.
   ===================================================== */
main > .container,
main > main > .container,
main > .container-fluid {
  width: 100%;
  max-width: none;
  padding-left: var(--oua-pad);
  padding-right: var(--oua-pad);
}


.consultation_bottom {
  padding-left: var(--oua-pad);
  padding-right: var(--oua-pad);
}

/* Hero intro band — light copy on dark band (overrides legacy #4A4A4A text bucket) */
.consultation_bottom,
.consultation_bottom .row,
.consultation_bottom p,
.consultation_bottom p.consultation_text {
  font-family: var(--oua-body, var(--font-body));
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: normal;
  color: #E8E5DC;
  opacity: 1;
}

/* ---- Footer — UI Kit .fx exclusive dark panel ---- */


/* Ticker strip */


@keyframes oua-fxscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Legacy duplicate rules below — kept for non-header search contexts */


/* ===================================================== */
/* 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): OUA — white gallery page, warm-taupe sidebar, white active state */
/* ===================================================== */
/* Profile: sidebar shell only — do not use * reset (zeros .sidebar_profile_section / link padding) */


.header_box {
    background: #ffffff;
    padding: 15px 20px;
    box-shadow: 0px 0px 10px 0px rgb(51 51 51 / 10%);
    -webkit-box-shadow: 0px 0px 10px 0px rgb(51 51 51 / 10%);
    -moz-box-shadow: 0px 0px 10px 0px rgb(51 51 51 / 10%);
    margin-left: 320px;
}
h3.user_heading_text {
    color: var(--oua-ink, #333333);
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    font-family: var(--font-title);
    margin-bottom: 0px;
}
p.user_title_text {
    color: var(--oua-ink, #333333);
    font-size: 14px;
    font-weight: 400;
    opacity: 0.6;
    line-height: 22px;
    margin-bottom: 0px;
}
aside > .sidebar_box {
    background: var(--oua-accent, #575248);
margin-bottom:0;
border:0 !important;
height:100%;
}


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

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

aside::-webkit-scrollbar-thumb {
    background: #848484;
    border-radius: 10px;
}

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

aside {
    scrollbar-width: thin;
    scrollbar-color: var(--oua-line, #e6e6e6) var(--oua-accent, #575248);
}


.profile_name {
    color: #EDEDED;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
}


/* .sidebar_menu_link li.active a svg {
    color: #ffffff !important;
} */


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


.favorite_img_card {
    border-right: 1px solid var(--oua-line, #e6e6e6);
    border-bottom: 1px solid var(--oua-line, #e6e6e6);
    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(--oua-accent-dark, #93311f);
}
.fav-artist h2 a{
    color: var(--oua-accent-dark, #93311f);
}
.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(--oua-ink, #333333);
    margin: 6px 0px 11px;
    min-height: 38px;
}
.fav-title a{
    color: var(--oua-ink, #333333);
}
.favorite_img_section {
    display: flex;
    flex-wrap: wrap;
}
.favorite_img_section:nth-child(-n+5) {
    border-top: 1px solid var(--oua-line, #e6e6e6);
}
.top_order_section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}
.order_count {
    color: var(--oua-ink, #333333);
    font-size: 14px;
    font-weight: 400;
    opacity: 0.8;
}
table {
    border-color: var(--oua-line, #e6e6e6) !important;
}
table thead th {
    background: var(--oua-band, #f7f7f7) !important;
    color: var(--oua-ink, #333333) !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: #ffffff !important;
    color: var(--oua-ink, #333333) !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:#ffffff;
}
 

/* Sidebar Default */
aside {
    width: 100%;
    background: var(--oua-band, #f7f7f7);
    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 */


/* =====================================================
   ADC — Artwork buy / reproduction page (gallery-minimal)
   Overrides legacy gray/WA tokens on PDP + academic block.
   Scoped to .reproduction_main_page only.
   ===================================================== */


/* Academic block — same horizontal width as reproduction_section (no nested container gutters) */


/* ADC — custom width/height fields: neutral gray (WA uses beige in site-wahooart) */


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


/* Monochrome icons — neutral ink (SVG assets still carry legacy WA #875D2A) */


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


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


/* ---- Accordions (description, size, summary, …) — band on full panel ---- */


/* Gap between description/bio block and following collapse (e.g. digital images) */


/* Configurator tabs + radios */


/* CTA buttons */


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


/* Unified section headings (Quick Facts, Quiz, story, sidebars, sliders) */

/* Beat global-custom .art_header h4 (24px / cream) on quiz titles */


/* Related slider — contained width, no legacy full-bleed padding */


/* Quick Facts cards */

/* Art Quiz — ADC card (reproduction academic block + digital image sidebar) */

/* List of Artworks — white band (ADC; overrides global beige #E8E2CD) */

/* View more — same secondary action as catalog group-by "See All" */


/* Table of Contents — same card surface as Art Quiz (white bg) */

/* Article sidebar — TOC flat like Browse; Quick Facts card matches reproduction #facts */


/* Collections band at bottom of buy page */


/* Optional extras (checkbox row) — Read more on its own line after label/description */


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


/* Read more placed after .accordion-body (legacy markup) — align with body inset */


/* Related articles — « Explore Article » CTA (sidebar + story) */


/* Academic block — Related Artworks inside reproduction_main_page */


/* Related artworks slider — swiper prev/next (ADC asset: round band + arrow in SVG) */


/* Below-fold sections — same horizontal inset as header/footer */


/* Below-fold blocks (Related Artworks, Artist Biography, …) */


main > hr {
  margin: 0 var(--oua-pad, 44px);
  padding: 0;
  height: 0;
  border: none;
  border-top: 1px solid var(--oua-line, #e3e3e3);
  opacity: 1;
}

/* =====================================================
   ADC — Artists alphabet bar (group_by_alphabet / ofletter)
   ===================================================== */


/* View more — same secondary action as catalog group-by "See All" */


/* =====================================================
   ADC — Under the Light (.utl-reading)
   Remap global museum/conservator tokens → ArtsDot UI Kit.
   ===================================================== */


/* Breadcrumb */


/* Hero head */


/* Canvas stage */


/* Reading panel */


/* Gauges */


/* Support / medium */


/* Optical profile verdict */


@keyframes utl-flash-adc {
  0%   { background: rgb(179 64 42 / 12%); }
  100% { background: var(--oua-band, #f5f5f5); }
}

/* ═══════════════════════════════════════════════════════════════════
   ADC — Infinite Scroll (/art/infinite_scroll/)
   Scoped to this page via .ais-hero-banner (ADC tokens only)
   ═══════════════════════════════════════════════════════════════════ */
body:has(.ais-hero-banner) {
  --oua-carbon:      #232323;
  --oua-accent:      #45433f;
  --oua-accent-dark: #93311f;
  --oua-matte:       #f5f5f5;
  --oua-section:     #f8f8f8;
  --oua-white:       #ffffff;
  --oua-border:      #e5e5e5;
  --oua-structural:  #eeeeee;
  --oua-divider:     #dddddd;
  --oua-card-border: #e0e0e0;
  --oua-text-2:      #555555;
  --oua-text-3:      #666666;
  --oua-label:       #777777;
  --oua-muted:       #888888;
  --oua-serif:       'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --oua-sans:        'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --oua-radius:      2px;
  --ais-max-w:       1380px;
  --ais-gutter:      clamp(20px, 4vw, 64px);

  background: var(--oua-matte);
  color: var(--oua-carbon);
  font-family: var(--oua-sans);
  -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(179 64 42 / 6%) 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(--oua-accent-dark), var(--oua-accent));
  box-shadow: 0 0 8px -1px rgb(179 64 42 / 45%);
  transition: width .12s linear;
}

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

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

/* ===== article_list.html — article list cards (article-list-card) ===== */
/* OUA gallery-minimal identity: pure-white surface, hairline lines, warm
   neutral accent (#45433f), Schibsted-Grotesk body. Reuses page-scoped
   --oua-* tokens declared on .search_sec.article-list-page (line ~7555).
   Targets ONLY the long .article-list-card* / .article-list-grid hooks,
   scoped under .article-list-page; selectors chain page+grid+long class to
   match/exceed the global .custom_search .search_card chains. */

/* Card shell — white surface, hairline border, restrained radius + lift */


/* Media — square-ish slot, subtle zoom on hover */


/* Body padding */


/* Meta eyebrow — uppercase category in warm accent + year span */


/* Title — brand title font, ink color, accent on hover */


/* Hover reveal — excerpt block on warm band */


/* Footer + actions */


/* Read button — brand PRIMARY (ink pill, white text) */


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

body:has(.ais-hero-banner) .ais-intro {
  background: var(--oua-white);
  border-bottom: 1px solid var(--oua-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(--oua-serif);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 700;
  color: var(--oua-carbon);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

body:has(.ais-hero-banner) .ais-intro-desc {
  font-family: var(--oua-sans);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.75;
  color: var(--oua-text-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: adc-ais-pin-in .8s cubic-bezier(.16, 1, .3, 1) both;
}

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

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

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

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

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(--oua-structural);
  outline: 1px solid var(--oua-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(--oua-carbon);
  color: var(--oua-white);
  font-family: var(--oua-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--oua-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(--oua-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oua-carbon);
  margin-bottom: 8px;
}

body:has(.ais-hero-banner) .plate .caption .title {
  font-family: var(--oua-serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1.2;
  color: var(--oua-text-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(--oua-divider);
}

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

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

body:has(.ais-hero-banner) a.fact {
  text-decoration: none;
  color: var(--oua-text-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(--oua-accent);
  color: var(--oua-carbon);
  background: var(--oua-white);
  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(--oua-divider);
  margin-top: 0;
}

body:has(.ais-hero-banner) .plate .below .desc {
  font-family: var(--oua-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--oua-text-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(--oua-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oua-text-2);
  background: var(--oua-white);
  border: 1px solid var(--oua-border);
  border-radius: var(--oua-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(--oua-text-2);
  stroke-width: 1.4;
  transition: fill .35s ease, stroke .35s ease;
}

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

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

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

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

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

@keyframes adc-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(--oua-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: var(--oua-radius);
  padding: 11px 18px;
  cursor: pointer;
  border: 1px solid var(--oua-carbon);
  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(--oua-white);
  color: var(--oua-text-2);
  border-color: var(--oua-border);
}

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

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

body:has(.ais-hero-banner) .buy-btn.painting:hover {
  background: var(--oua-accent-dark);
  border-color: var(--oua-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -10px rgb(179 64 42 / 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(--oua-white);
  border: 1px solid var(--oua-card-border);
  border-radius: var(--oua-radius);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 2px 10px -6px rgb(17 17 16 / 8%);
  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(17 17 16 / 14%);
  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(17 17 16 / 22%);
  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(179 64 42 / 35%) 50%, transparent 70%);
  background-size: 280% 100%;
  animation: adc-ais-shine .55s ease-out forwards;
}

@keyframes adc-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(--oua-white);
  border: 1px solid var(--oua-border);
  font-family: var(--oua-sans);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oua-accent);
  padding: 3px 7px;
  border-radius: var(--oua-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(--oua-structural);
  outline: 1px solid var(--oua-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(179 64 42 / 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(--oua-divider);
}

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

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

body:has(.ais-hero-banner) .work .body .meta {
  font-family: var(--oua-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oua-muted);
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--oua-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: adc-ais-feed-out .35s ease forwards;
}

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

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

@keyframes adc-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(--oua-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;
  }
}
/* ===================================================================
   Ecard (artworks/artwork_ecard.html) — OUA OriginalUniqueArt
   Clean contemporary: white surfaces, warm taupe accent.
   =================================================================== */


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


/* ============================================================
   Article detail page — OriginalUniqueArt: body typography ink
   tokens. Sidebar/TOC/related blocks are styled above; this
   closes the last gap where the article body text fell back to
   the hardcoded beige (#3E342A) in global-custom. Scoped under
   .article_main_page (excludes the reproduction buy page).
   ============================================================ */


/* ===== END Article detail page body typography — OriginalUniqueArt ===== */

/* ===== TOP 100 PAGES (artists / artworks / museums / articles) ===== */
/* OUA identity: pure-white surfaces, Schibsted Grotesk, monochrome ink
   palette with a warm-gray accent, tight 4px radius, hairline neutral
   borders, ink pill buttons, grayscale+scale image hover. The layout
   structure lives in global-custom-V2.1.css; here we only set the brand
   tokens and add gallery-minimal visual overrides. No hardcoded colours
   inside component rules — everything reads the brand chrome variables. */

/* --- Brand tokens feeding the global-custom base --- */
.top100-artist-grid,
.top100-artwork-list {
  --oua-bg:          #ffffff;
  --oua-ink:         #333333;
  --oua-ink-2:       #575757;
  --oua-muted:       #848484;
  --oua-line:        #e6e6e6;
  --oua-line-soft:   #f2f2f2;
  --oua-band:        #f7f7f7;
  --oua-accent:      #575248;
  --oua-accent-ink:  #4d4844;

  --top100-card-bg:     var(--oua-bg);
  --top100-card-border: var(--oua-line);
  --top100-card-radius: 4px;
  --top100-ink:         var(--oua-ink);
  --top100-muted:       var(--oua-muted);
  --top100-accent:      var(--oua-accent);
  /* giant rank numeral: a very faint neutral wash, gallery-minimal */
  --top100-rank-color:  var(--oua-line-soft);

  font-family: var(--font-body);
  color: var(--oua-ink);
}

/* =====================================================
   A) ARTISTS — portrait grid (/en/oua/artists/top100/)
   ===================================================== */
.top100-artist-card {
  background: var(--oua-bg);
  border: 1px solid var(--oua-line);
  border-radius: var(--top100-card-radius);
  transition: border-color .18s ease, box-shadow .25s ease, transform .25s ease;
}
.top100-artist-card:hover {
  border-color: var(--oua-ink);
  box-shadow: 0 14px 30px -20px rgba(0,0,0,0.45);
  transform: translateY(-2px);
}
.top100-artist-card__photo {
  border: 1px solid var(--oua-line);
  filter: none;
  transition: filter .3s ease-out, transform 1s ease-out;
}
.top100-artist-card__media:hover .top100-artist-card__photo {
  filter: grayscale(100%);
  transform: scale(1.02);
}
.top100-artist-card__name,
.top100-artist-card__name a {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--oua-ink);
  transition: color .15s ease;
}
.top100-artist-card__media:hover .top100-artist-card__name a {
  color: var(--oua-accent);
}
.top100-artist-card__desc {
  font-family: var(--font-body);
  color: var(--oua-muted);
}

/* =====================================================
   B) ARTWORKS — zigzag gallery (/en/oua/art/top100/)
   ===================================================== */
.top100-artwork-card__rank {
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--top100-rank-color);
}
.top100-artwork-card__inner {
  background: var(--oua-bg);
  border: 1px solid var(--oua-line);
  border-radius: var(--top100-card-radius);
  transition: border-color .18s ease, box-shadow .3s ease;
}
.top100-artwork-card:hover .top100-artwork-card__inner {
  border-color: var(--oua-ink);
  box-shadow: 0 22px 44px -26px rgba(0,0,0,0.5);
}
.top100-artwork-card__photo {
  border: 1px solid var(--oua-line);
  filter: none;
  transition: filter .3s ease-out, transform 1s ease-out;
}
.top100-artwork-card__tilt:hover .top100-artwork-card__photo {
  filter: grayscale(100%);
  transform: scale(1.02);
}
/* framed variant — gallery white mat + thin ink edge */
.top100-artwork-card__photo--framed {
  border: 6px solid var(--oua-bg);
  box-shadow: 0 0 0 1px var(--oua-line), 0 18px 30px -18px rgba(0,0,0,0.4);
}
.top100-artwork-card__meta {
  font-family: var(--font-body);
  color: var(--oua-ink);
}
.top100-artwork-card__artist {
  color: var(--oua-muted);
}
.top100-artwork-card__year {
  color: var(--oua-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.top100-artwork-card__title {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--oua-ink);
}
/* ===== / search_by_color ===== */

/* ===== orders/art_consultation.html — step image offset shadow ===== */
/* OriginalUniqueArt: muted taupe wash of the brand accent (#575248). */
.step .step-image { --step-image-shadow: rgba(87, 82, 72, 0.14); }

/* ===== orders/art_consultation.html — OriginalUniqueArt brand colours ===== */
/* Minimalist warm-grey: charcoal accent · off-white surfaces */


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

/* ===== start_selling_* step-image shadow tint — OUA · warm-gray wash ===== */


/* ===== viewcart — cart state tokens (OUA) ===== */
:root {
  --cart-placeholder-bg: var(--oua-band, #f7f7f7);
  --cart-placeholder-border: var(--oua-line, #e6e6e6);
  --cart-placeholder-icon: var(--oua-faint, #a9a9a9);
  --cart-alert-warning-text: #6b5a2b;
  --cart-alert-warning-bg: #faf3e0;
  --cart-alert-warning-border: #e6d9b3;
  --cart-alert-warning-accent: #b8902f;
  --cart-surface: #F7F2E1;
  --cart-surface-border: #DCD3BF;
  --cart-inset: #F3EFE6;
  --cart-icon-bg: #E2DAC4;
  --cart-summary-ink: var(--oua-ink, #2a2a2a);
  --cart-summary-ink-2: var(--oua-ink-2, #575757);
  --cart-summary-accent: var(--oua-accent, #8b6914);
  --cart-th-bg: #D3C9B2;
  --cart-th-color: var(--oua-ink, #2a2a2a);
}


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


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

/* ===== catalog left sidebars (filter / categories / group-by) — UI Kit alignment ===== */
/* Rail C (group-by): the active group card must read as accent-bordered + inset fill
   (UI Kit sbk-box.is-active). The legacy hover/active rule collapsed both states to a
   barely-visible line-2 border. Restore an accent-bordered, inset-filled active card,
   keep hover subtle. OUA tokens only. */


/* Rail C scope gap: title / description / Sidebar_tags inner rules were scoped only to
   artwork-/artist-groupby-page. The real group-by page also carries catalog-groupby-page
   (and museum/article variants) — extend so the same on-brand styling applies there. */


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


/* ===== wheel-of-affinities (similar artworks study plate) =====
   OUA identity: white atelier plate, warm-grey frames, terracotta accent
   on the centered work, Schibsted Grotesk. Structure in global-custom. */


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


/* hover/active icon recolour → OUA charcoal #45433f */


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


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

/* Artwork title link hover color */

/* ===== END OUA — artworksimilarslider ===== */

/* ===== error_404.html + error_general.html — OriginalUniqueArt ===== */
/*
   Tokens:  --oua-accent #575248 (warm taupe)  --oua-accent-ink #4d4844
            --oua-ink #333333  --oua-ink-2 #575757  --font-body Schibsted Grotesk sans
*/


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

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


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


/* ===== artwork_buy_ProductAuction — auction tokens ===== */
:root {
  --auction-accent:      var(--oua-accent, #575248);
  --auction-accent-dark: var(--oua-accent-ink, #4d4844);
  --auction-accent-text: #ffffff;
  --auction-ink:         var(--oua-ink, #333333);
  --auction-ink-mute:    var(--oua-ink-3, #848484);
}
/* ===== /artwork_buy_ProductAuction ===== */

/* =====================================================
   Dashboard feature spotlight — OriginalUniqueArt tokens
   (clean modern grotesk, muted taupe accent, 4px corners)
   ===================================================== */