/* =====================================================
   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)
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;450;500;600;700&display=swap');


: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 chrome tokens — gallery-minimal, available site-wide
   (used by header/footer which live outside .adc-v2)
   ===================================================== */
.wa-topbar,
.footer-container-bottom,
.adc-footer {
  --oua-bg:           #ffffff;
  --oua-ink:          #333333;
  --oua-ink-2:        #575757;
  --oua-ink-3:        #848484;
  --oua-muted:        #848484;
  --oua-faint:        #a9a9a9;
  --oua-line:         #e6e6e6;
  --oua-line-soft:    #f2f2f2;
  --oua-band:         #f7f7f7;
  --oua-slot:         #ececec;
  --oua-accent:       #575248;
  --oua-accent-ink:   #4d4844;
  --oua-accent-wash:  rgba(87,82,72,0.07);
  --oua-on-accent:    #ffffff;
  --oua-display:      'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --oua-body:         'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --oua-logo:         #848484;
  --oua-radius:       4px;
  --oua-util-gap:     18px;
  --oua-util-row:     18px;
}

/* =====================================================
   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,
img.mouseover_image_effect {
	-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,
a:hover img.mouseover_image_effect,
img.mouseover_image_effect: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;
}

/* @media (min-width: 768px){ */
/* NOTE: `header` removed from this rule — the ADC header uses internal
   .adc-utility padding (--oua-pad) and must not have extra vw padding. */
.wa-topbar,
#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 */
}

@media (max-width: 576px) {
	
	.wa-topbar-left,
	.wa-topbar-right {
		gap: 0 !important;
	}
}

/* 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 !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--oua-ink, #232323) !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  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 #dddddd;
}

.colorPlatte li,
.compatibility_list 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: #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 #888;
  -webkit-text-fill-color: #222 !important;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  box-shadow: 0 0 0px 1000px #fff inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}





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

a {
	color: #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 !important; }
.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: #4A4A4A;
}

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













.black_back {
	background: #5A5A5A;
}

.black_back p {
	color: #E5E5E5;
}









.why_choose_info h5,
.why_choose_info p {
	color: #4A4A4A;
}



.why_choose_icon img {
	background: #6B6B6B;
}

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

.thumb_overlay_cont .heading_text,
.thumb_overlay_cont .heading_paragrap {
	color: #E8E8E8;
}

.swiper_main_thumb span {
	color: #E8E8E8;
}

.swiper_bottom_content .heading_text,
.swiper_bottom_content .heading_paragrap {
	color: #E8E8E8;
}







.meet_info li::marker {
	color: #B8B8B8;
}

.meet_info .overlay_img {
	background: #5A5A5Ae3;
}

.book_call {
	color: #E8E8E8;
}



.primary-label,
.page_navigation_menu a,
.form_heading,
.form_content,
.dtl_con h4,
.dtl_con p,
select option {
	color: #4A4A4A;
}



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


.steps_count span {
	background: #4A4A4A;
	color: #E8E8E8;
}



.sum_chek_text {
	border-bottom: 1px solid #D0D0D0;
	color: #4A4A4A;
}









select:focus>option:checked {
	background: #6B6B6B;
	color: #E0E0E0;
}

.manuall_box input {
	background: #F0F0F0;
	color: #4A4A4A;
}









.checked_box {
	border: 1px solid #4A4A4A !IMPORTANT;
}







.artistic_img .overlay_img,
.overlay_content,
.elevated_img_title,
.swiper-button-prev,
.collection_other_detail {
	color: #4A4A4A;
}















.form-floating>label {
	color: #4A4A4A !important;
	border-bottom: none !important;
}



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

body,
main {
	background: #E8E8E8;
}

.text-op-80,
.text-op-0 {
	color: #4A4A4A;
}

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




















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















/* .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: #4A4A4A;
}

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









.tag-btn {
	background-color: #D8D8D8;
}

.accordion-item {
	background-color: #E0E0E0;
	border-bottom: 1px solid #D0D0D0;
}

button.accordion-button,
.accordion-button:not(.collapsed) {
	background: #E0E0E0;
	color: #4A4A4A;
}

.artist_input {
	background: #E8E8E8 !important;
	border: 1px solid #D0D0D0 !important;
	color: #4A4A4A;
}

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

.form-check input {
	border: 1px solid #8B8B8B !important;
	background-color: #E0E0E0 !important;
}

.form-check input:checked {
	background-color: #4A4A4A !important;
	border-color: #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: #4A4A4A;
}

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

.noUi-connect {
	background: #4A4A4A !important;
}

.noUi-horizontal .noUi-handle {
	background: #4A4A4A;
}

.noUi-handle:before {
	background: #E5E5E5 !important;
}

.compatibility_list li {
	background: #E0E0E0;
	border: 1px solid #C0C0C0;
	color: #4A4A4A;
}

.colorPlatte li.active,
.compatibility_list li.active {
	background-color: #D8D8D8;
	border: 1px solid #4A4A4A;
}





.searchCard_sec .row {
	border-left: 1px solid #D0D0D0;
}







.showMOre,
.consultation_bottom,
.consultation_bottom p,
p.consultation_text,
.process_section,
span.line,
img.step_icon,
.step-header,
.step-content p,
.step .step-image,
.step-content,
.step-title,
.step-heading,
.step-number-box,
.list-inline-item,
.step li,
ul.step_list,
ul.step_list li,
.step-header small,
.step-header h4 {
	color: #4A4A4A;
}

.circle-icon {
	color: #4A4A4A;
	background-color: #dddddd;
}
/* .user-menu-wrapper background removed — ADC header uses plain line icon (no circle bg) */










.contactfull_width_hero_banner_with_background_image,
.contactForm_sec,
.form-container h3,
.contactForm_sec .image-preview,
.contactForm_sec .image-upload-box,
.form-container p,
.form-container h3 span,
.form-step,
.form-step.active,
.step-light,
.manuall.box.input {
	color: #4A4A4A;
}

.manuall.box.input:focus {
	background: #F0F0F0 !important;
}

.manuall.box.input:-webkit-autofill,
.manuall.box.input:-webkit-autofill:hover,
.manuall.box.input:-webkit-autofill:focus,
.manuall.box.input:-webkit-autofill:active {
	background: #F0F0F0 !important;
}



.btn-prev {
	color: #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: #4A4A4A;
}

.upload_img_form span {
	color: #6B6B6B;
}



.card-body-art ul.list-unstyled.card-body-art-content.mb-0 li.d-flex.align-items-center.mb-2 a img,
.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,
.response-method,
.response-method h3,
.response-method label,
.video-consultation,
.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,
.searchCard_sec .col-md-3 {
	color: #4A4A4A;
}

.time-btn:hover {
	background: #4A4A4A;
	color: #E8E8E8;
}

.card {
	color: #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;
}



/* FTS search card model badge — UI Kit .adc-badge / .adc-artcard__badges (#16) */


h3.search_subtitle a span {
	color: #4A4A4A;
	background: #d8d8d8 !important;
}

h3.search_subtitle,
h3.search_subtitle a,
.search_more,
p.Showing_text1,
p.Showing_text1 span {
	color: #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;
}

ul.sidebar-tags-chip-list li button.catalog-nav-btn {
	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 #4A4A4A;
}

ul.sidebar-tags-chip-list,
ul.sidebar-tags-chip-list a,
ul.sidebar-tags-chip-list li button.catalog-nav-btn {
	color: #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: #4A4A4A;
}



.steps_count,
.profile_picture_top_header_initiales {
	color: #4A4A4A;
}









page-link {
    color: #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;
}

/* Artwork info page — .art_info_box */


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

/* ═══════════════════════════════════════════════════════════════════
   ADC — Artisan Canvas — Design System
   Scoped to .homepage-artsdot-widgets
   ═══════════════════════════════════════════════════════════════════ */

/* ── CSS Design Tokens ─────────────────────────────────────────── */


/* ── Page container ─────────────────────────────────────────────── */


/* Row spacing between widget sections */



/* ── Typography overrides ───────────────────────────────────────── */





/* Kicker / eyebrow labels */


/* ── Links ──────────────────────────────────────────────────────── */



/* ── Generic card / border overrides ───────────────────────────── */




/* ══════════════════════════════════════════════════════════════════
   ARTIST SLIDER WIDGET (.widget-artist-slider)
   ══════════════════════════════════════════════════════════════════ */


/* Portrait image wrapper */


/* Artist name under portrait */


/* Artist bio paragraph */



/* Swiper slide — each artwork card */



/* Artist name kicker in slide */


/* Artwork title in slide */


/* Swiper nav arrows */




/* ══════════════════════════════════════════════════════════════════
   ARTIST SPOTLIGHT WIDGET (.widget-artist-spotlight)
   ══════════════════════════════════════════════════════════════════ */







/* ══════════════════════════════════════════════════════════════════
   MOST POPULAR LARGE WIDGET (.widget-mpl)
   ══════════════════════════════════════════════════════════════════ */













/* ══════════════════════════════════════════════════════════════════
   MOVEMENT-4 WIDGET (.widget-mov-4)
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   FEATURED ARTIST WITH FACT (.widget-featured-artist-with-fact)
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   READY TO SHIP / UNIQUE NFT / REIMAGINE WIDGETS
   Generic widget card override
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   ARTWORK IMAGE containers — always contain, never crop
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   SECTION LABEL / PERIOD HEADER above each artist slider
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   QUIZ / IDENTIFY MASTERPIECE widgets
   ══════════════════════════════════════════════════════════════════ */



/* ══════════════════════════════════════════════════════════════════
   ARTICLE / KEYWORD WIDGETS — neutralise accent colours
   ══════════════════════════════════════════════════════════════════ */




/* ══════════════════════════════════════════════════════════════════
   FACT BLOCK — border-left accent marker (from ADC reference)
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   SCROLLBAR — thin, neutral (ADC aesthetic)
   ══════════════════════════════════════════════════════════════════ */




/* --- block --- */


  
  

/* --- block --- */


  
  

/* --- block --- */


  
  

/* --- block --- */


  
  

/* --- block --- */


  
  

/* --- block --- */


  
  

/* --- block --- */


  
  

/* --- block --- */


  
  

/* --- block --- */


  
  
  
  
  

/* --- block --- */


  

/* --- block --- */


  
  
  
  
  
  

/* --- block --- */


  
  
  
  
  
  
  
  
  
  
  

/* --- block --- */


  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

/* --- block --- */


  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

/* --- block --- */


  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

/* --- block --- */


  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

/* --- block --- */


  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

/* --- block --- */


  
  
  

/* --- block --- */


  @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) {
    
  }
  /* Title: Baskervville SC only — title case, no faux italic */
  
  
  
  
  @media (min-width: 768px) {
    
  }
  
  @media (min-width: 768px) {
    
  }
  /* Body: DM Sans */
  
  
  /* CTA: DM Sans, all-caps (button only) */
  
  @media (min-width: 768px) {
    
  }
  
  
  
  

/* --- block --- */


  
  
  
  
  
  
  
  
  
  

/* --- block --- */


  
  
  
  
  

/* --- block --- */


  
  
  
  
  

/* --- block --- */


  
  
  
  
  
  
  
  
  
  

/* --- block --- */

/* .widget-faf__cell responsive dividers live in widgets-base.css */
  
  
  
  
  
  
  
  
  

/* --- block --- */


  
  
  
  
  
  
  
  
  

/* --- block --- */


  
  
  
  
  
  
  

/* --- block --- */


  
  
  
  
  

/* --- block --- */


  
  
  

/* --- block --- */


  
  
  
  
  
  

/* --- block --- */


  
  
  
  
  
  
  

/* === ARTS DOT hompagetest — modifier 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; }
}

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



/* ---- Hero / page header ---- */










/* ---- Section scaffolding ---- */







/* ---- Image frame (shared) ---- */




/* ---- Horizontal rail ---- */






/* Shop by Style: 6 movement cards in one row (no horizontal scroll). */

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

/* Most Popular Artists: 16 cards wrap onto two rows (no horizontal scroll). */

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





/* ---- Card grids ---- */








.adc-meta { display: block; color: var(--oua-faint); font-size: 12px; margin-top: 6px; }


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








/* ---- OUA artwork card · rise & fade hover reveal (UI Kit) ---- */












/* ---- ADC "Most Popular" mosaic (UI-Kit #25 Popular mediums) ---- */


/* Mosaic proportions match UI-Kit / WA widget-mpl (2:1 band, not 11:9). */











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

/* ---- Craft band ---- */






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




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






/* ---- Museum prestige ---- */












/* ---- Reviews ---- */
.adc-reviews { background: var(--oua-bg); padding: clamp(36px, 5vw, 72px) 0; }
.adc-review { margin: 0; background: var(--oua-paper); border: 1px solid var(--oua-line); border-radius: var(--oua-radius); padding: 28px 26px; }
.adc-stars { color: var(--oua-accent); letter-spacing: 2px; font-size: 15px; margin-bottom: 12px; }
.adc-review blockquote { font-family: var(--oua-serif); font-size: 19px; line-height: 1.4; margin: 0 0 16px; }
.adc-review figcaption { font-size: 13px; color: var(--oua-muted); font-weight: 600; }

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


.adc-mb { margin-bottom: 16px; }

/* ---- OUA Home UI Kit concept sections (OUA Home.html) ---- */


/* Scarcity hero band */












/* Section head (lifecycle, edition) */




/* Lifecycle timeline */













/* Edition-of-one comparison */












/* Closing CTA */





@media (max-width: 1080px) {
  
}
@media (max-width: 880px) {
  
}
@media (max-width: 860px) {
  
  
}
@media (max-width: 720px) {
  
  
}

/* ---- Artist spotlight (WA disposition: portrait · intro · 3-col works) ---- */











/* ---- Feature (movement masterclass) ---- */






.adc-rowlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.adc-rowlist a { display: flex; gap: 12px; align-items: center; }
.adc-rowlist__thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: var(--oua-soft); border: 1px solid var(--oua-line); }
.adc-rowlist__thumb img { width: 100%; height: 100%; object-fit: cover; }
.adc-rowlist__txt { display: flex; flex-direction: column; min-width: 0; }
.adc-rowlist__txt b { font-family: var(--oua-serif); font-size: 16px; font-weight: 500; }
.adc-rowlist__txt span { color: var(--oua-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adc-rowlist a:hover b { color: var(--oua-accent); }

/* Movement masterclass: smaller portrait + 6 works as 3 cols × 2 rows */







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

/* ---- Artist on this day (WA disposition, ADC styling) ---- */









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

/* ---- 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%); }
}
@media (prefers-reduced-motion: reduce) {
  
  
  
}

/* ---- Promo grid (article keyword) ---- */

.adc-promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }


/* ---- Ready-to-ship price ---- */
.adc-rts-price { display: block; margin-top: 6px; font-family: var(--oua-serif); font-weight: 600; font-size: 15px; color: var(--oua-ink); }

/* ---- Available now — ready to ship (prototype design) ---- */
















/* ---- Curation CTA ---- */


/* ---- Hero: Original & Exclusive Art (text left, image right) ---- */















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

/* ---- Responsive ---- */
@media (max-width: 992px) {
  
  
  
  
  
  
  
  
}
@media (max-width: 768px) {
  
  
  
  
  
  
}
@media (max-width: 600px) {
  
}
@media (max-width: 480px) {
  
  
  
}

/* ---- Curators' Edit (#curators): one row on desktop ---- */

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

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

/* =====================================================
   OUA chrome — header, search, nav, footer (UI Kit v1)
   ===================================================== */

/* ---- Header shell ---- */








/* ===== F1 brand logo (UI Kit §02) ===== */



/* ===== OUA logo lockup: Seal O mark + boxed wordmark (UI Kit §02 updated) ===== */







/* ===== Search — UI Kit pill (.search) ===== */








/* Sign-up pill */



/* ---- Utility row ---- */















/* Lang / currency selectors */














/* ---- Category nav (UI Kit .navbar links) ---- */



















/* ---- Mobile drawer ---- */















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

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




/* Ticker strip */




@keyframes oua-fxscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {  }

/* Ghost signature */


/* Footer dark-panel lockup: seal flips to white chip, wordmark stays white */




/* Footer bottom bar: logo + promise */






























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

/* Legacy footer_sec aliases (other templates) */







/* ---- Slim top strip ---- */
.wa-topbar {
  background: var(--oua-bg);
  color: var(--oua-muted);
  font-family: var(--oua-body);
  font-size: 12px;
  letter-spacing: 0.01em;
  padding: 8px var(--oua-pad);
  border-bottom: 1px solid var(--oua-line);
}
.wa-topbar a { color: var(--oua-muted); }
.wa-topbar a:hover { color: var(--oua-ink); }
.wa-topbar .wa-topbar-left { display: flex; align-items: center; gap: 22px; }
.wa-topbar .wa-topbar-item { display: inline-flex; align-items: center; gap: 7px; }
.wa-topbar .wa-topbar-item i { color: var(--oua-accent); font-size: 12px; }
.wa-topbar .wa-topbar-right { display: flex; align-items: center; gap: 14px; }

/* Shared chrome container + legacy search overrides (non-header pages) */
.adc-chrome-wrap { width: 100%; margin: 0 auto; padding-left: var(--oua-pad); padding-right: var(--oua-pad); }

/* 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 !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: #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_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(--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);
}
.button-dash {
    width: 100%;
    border: 1px solid var(--oua-accent, #45433f);
    border-radius: 0;
    padding: 11px 15px;
    color: var(--oua-accent, #45433f);
    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(--oua-line, #e6e6e6);
}




.main_gap {
    padding: 16px;
}
.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;
}
.purchase_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px 12px 18px;
    border-bottom: 1px solid var(--oua-line, #e6e6e6);
}
.date_amount h6 {
    color: var(--oua-ink, #333333);
    font-size: 14px;
    opacity: 0.6;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 0px;
}
.date_amount p {
    color: var(--oua-ink, #333333);
    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(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%);
    background: #ffffff;
}
.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(--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%;

}
.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:#ffffff;
}
    













/* 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(--oua-ink, #333333);
}
.text-center.suceesfulmsg_textt p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    font-family: var(--font-body);
    color: var(--oua-ink, #333333);
}

.suceesfulmsg_textt button
 {
    padding: 10px 120px;
    border: none;
    background: var(--oua-ink, #232323);
    font-size: 16px;
    line-height: 24px;
    font-family: var(--font-body);
    font-weight: 500;
    color: #EDEDED;
    text-transform: uppercase;
}
 

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


/* Toggle Button */
.sidebar-toggle {
    background: var(--oua-accent, #575248);
    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 */



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

/* Digital Image — « Included in Every Digital Image Order » benefits band */

















/* ADC buy academic — override global-custom cream band (#E8E2CD) and WA quiz panel (#3E342A) */






/* ═══════════════════════════════════════════════════════════════════
   ADC — Artist / article detail (.article_main_page)
   Sidebar sections, related articles, artwork sliders
   ═══════════════════════════════════════════════════════════════════ */

/* Sidebar — vertical rhythm between grouped sections (Browse / TOC / Quick Facts) */



/* Related artworks — left sidebar (below TOC); card + list artwork typography */











/* Headings inside card panels (title + body share one wrapper) */


/* Buy page story row — Quick Facts + Artwork Description share one heading box (beats global .art_heading) */




/* =====================================================
   ADC — Custom reproduction / photo-to-painting order
   (/orders/custom-reproduction/ and persona URLs)
   Scoped to .production_form + .summery_checkout (no .reproduction_main_page wrapper).
   ===================================================== */


/* Read more CTAs — terracotta text + icon (beats WA brown inline/global rules) */





/* Validation / notice icons — terracotta (not WA brown PNG) */


/* Step 01 upload zone — centered (profile-page rule uses row-reverse) */



/* Browse + Table of Contents — flat vertical nav (UI Kit .acct-nav pattern) */






/* Related articles — card copy + « Explore Article » CTA */













/* Artwork sliders below biography */

/* Track height — was 450px inline; −20% for denser corpus/popular carousels */












/* ═══════════════════════════════════════════════════════════════════
   ADC — Catalog list pages (/art/list, /artists/list, /museums/list, /articles/list)
   Scoped to .catalog-list-page (+ legacy hooks) — gallery-minimal tokens
   ═══════════════════════════════════════════════════════════════════ */





/* Filter sidebar — gallery-minimal tokens (match categories / similar lists) */


/* Filter panel header — align title, icon, and “Clear all” on one row */











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




















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


/* Page chrome — title row, sort */



/* Criteria sidebar */







/* Grid — catalog cards (list / categories / similar) */





/* Category hub: hover panel matches the card :hover surface (panel only shows on hover). */























/* On the catalog/artwork list + similar cards the BEM __fav-toggle (further
   down) draws the single pill — keep the .fav_group wrapper transparent so the
   two don't stack into a double ring. Scoped to the BEM __fav-group class, which
   only coexists with .fav_group on these cards (not on category cards). */


/* ═══════════════════════════════════════════════════════════════════
   ADC — Catalog categories browse (list_category on all apps)
   Scoped to .catalog-categories-page (+ legacy hooks) — gallery-minimal tokens
   ═══════════════════════════════════════════════════════════════════ */















/* ── Pagination — SITE-WIDE, overrides global brown #875D2A (every paginated
   template: list, categories, search, color search). Carbon ink on paper,
   hairline rule; active = inverted carbon pill. ── */





/* ═══════════════════════════════════════════════════════════════════
   ADC — Group-by browse (artworks, artists, museums, articles)
   Scoped to .catalog-groupby-page (+ legacy page hooks) — gallery-minimal tokens
   ═══════════════════════════════════════════════════════════════════ */





























/* Group heading — match sidebar_box_title */



/* See All — secondary action */












/* =====================================================
   ADC — Subject Atlas: neutral gray backgrounds
   Same relative luminance as museum sand / warm ADC bands.
   ===================================================== */










/* =====================================================
   ADC — Artist Atlas / Chronicle hero (.artist-hero)
   Overrides global museum tokens (sand/gold/Cormorant)
   on Subject Atlas + Chronicle pages.
   ===================================================== */


/* Atlas hero band: neutral grays (L matched to warm ADC tokens above) */










/* Period under portrait duplicates .artist-kicker — keep only the kicker line */
























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

/* =====================================================
   ADC — Atlas section typography only (.atlas-section)
   Fonts / weights / sizes / letter-spacing — colors unchanged.
   ===================================================== */
























/* SVG labels (fill colours unchanged — global rules keep museum gold/ivory) */


















/* =====================================================
   ADC — Chronicle section typography only (.chronicle-section)
   Fonts / weights / sizes / letter-spacing — colors unchanged.
   ===================================================== */
















/* ADC — Chronicle section: light gray band + ink text (header + guide cards) */






































/* =====================================================
   ADC — Chronicle lifeline ribbon (JS + CSS timeline colours)
   Chapter fills (--chr-ch-fill-*) consumed by inline JS; caption
   colours via .ch-label / .ch-context in .chronicle-section (tokens).
   --gold* remapped for axis, pins, connectors, movement bar accents.
   ===================================================== */




















/* =====================================================
   ADC — Artist timeline page (.tl-page) colour tokens
   ===================================================== */
















/* Plate ref (NO. 01) — UI Kit mono label */


/* Year chip on artwork frame — UI Kit .adc-badge */




/* Card copy — aligned with .adc-artcard meta (UI Kit #16) */












/* =====================================================
   ADC — Palette Genome header (.genome-wrap .gn-artist-head)
   ===================================================== */








































/* ── Wheel preview, facts & gallery (UI Kit / .adc-artcard meta) ── */








































/* =====================================================
   ADC — Mood Room (.moom-room) typography only
   Archivo + UI Kit scale; dark-room palette unchanged.
   ===================================================== */




















/* ── Gallery cards (plate, body, tags, placement) ── */






































/* ── Mood dock (label + mood pills) ── */
















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

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

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

@media (max-width: 1100px) {
  

  
}

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

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(--oua-accent);
  animation: adc-ais-draw-line 1.1s 1s cubic-bezier(.16, 1, .3, 1) forwards;
}

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

body:has(.ais-hero-banner) .feed-head .label {
  font-family: var(--oua-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--oua-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(--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);
}

/* =====================================================
   C) MUSEUMS + ARTICLES — listing reusing .search_card
   Scoped under .top100-listing so the bare .search_card
   rules (shared by 24 other pages) stay untouched.
   ===================================================== */







/* addToCart — OUA ink pill, gallery-minimal */


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

/* ===== fts_search — model type badge (OUA) ===== */



/* ===== artwork-catalog-card (catalog list grid card) =====
   OUA / OriginalUniqueArt — gallery-minimal identity.
   Pure-white surface · Schibsted Grotesk · neutral monochrome palette
   with the warm taupe accent (--oua-accent: #575248). 4px frame radius,
   ink pill buy button, uppercase letter-spaced artist name, rise-and-fade
   hover overlay. Scoped under .custom_search + long classes so these rules
   win the cascade over the older shared .search_card styling above. */




/* ---- media / image ---- */





/* ---- body : artist + title ---- */










/* ---- hover overlay (rise & fade snippet reveal) — 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 : cart + favorite ---- */



/* buy / price pill — OUA ink pill, gallery-minimal */




/* favorite toggle — pill outline, taupe accent on hover/active */






/* ===== OUA — Artists alphabet (group_by_alphabet / start_by_letter) ===== */
/*
 * All rules scoped under .art_info_section to avoid bleeding into
 * start_by_letter.html and the user-sidebar .profile_name.
 * Token source: :root in site-originaluniqueart-V2.0.css +:
 *   --oua-ink         #333333   (dark ink)
 *   --oua-ink-3       #848484   (mid-grey, used for letters)
 *   --oua-muted       #848484   (year / muted text)
 *   --oua-accent      #575248   (warm dark-grey accent)
 *   --oua-accent-ink  #4d4844   (slightly darker accent for text)
 *   --oua-line        #e6e6e6   (border colour)
 *   --oua-band        #f7f7f7   (hover fill)
 *   --oua-display / --oua-body  Schibsted Grotesk
 * Raw hex fallbacks mirror the token values; no colour is hardcoded
 * without a var() wrapper.
 */

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


/* Close the right edge on the last cell */


/* Inherit so the <a> tracks the cell state */


/* Hover: swap to band fill + ink text */


/* 2. Section letter headings (A, B, C …) */


/* 3. Artist profile card — image, name, year */








/* 4. "View more" link row */





/* ===== / OUA — Artists alphabet ===== */


/* ===== photo_to_restyled_masterpiece =====
   OUA brand skin for the AI photo→masterpiece page.
   Shared markup + structure live in global-custom-V2.1.css (neutral fallbacks);
   here we feed OUA tokens and align every component to the OUA UI Kit:
   pure-white surface, Schibsted Grotesk, neutral ink + warm-grey accent (#575248).
   All selectors scoped under body.custom-repro-page. */



/* --- Step 01: upload box — OUA band tile, thin line, brand radius ----- */




/* --- Step 02: edit-request textarea — OUA input (kit .input) ---------- */





/* --- Steps 02 & 03: pill chips (kit .chip / .tag) -------------------- */
/* OUA kit chip: white surface, thin line, ink-soft text, 100px radius;
   active/pressed = ink fill, white text. Beat legacy #c8c8c8 Sidebar_tags. */




/* --- Step 04: style cards (kit .card) -------------------------------- */







/* --- RIGHT column + left inner panels (global beige leak) ---------------- */










/* ===== / photo_to_restyled_masterpiece ===== */

/* ===== 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. */


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






















@media (max-width: 768px) {   }
/* ===== / 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)} }





/* ===== orders/checkout ===== */
/* OUA identity: pure-white cards, hairline ink borders, tight 4px radius,
   warm-gray accent (#575248). Header surfaces use the brand ink (#333),
   never raw Bootstrap black. All rules scoped under .checkout-page. */


















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

























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


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


/* 2. Intro band */



/* 3. Vertical connector */


/* 4. Step pill */


/* 5. Step text */



/* 6. Step image shadow */


/* 7. Table */







/* 8. Form */




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


/* Submit CTA — dark ink (was global warm-brown #875D2A) */



/* 9. Plan dropdown */




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

/* Page wrapper — light band background, generous vertical breathing room */


/* Two-column grid — let global Bootstrap col spacing handle gutter;
   align cards top so unequal-height cards don't stretch */


/* Shared card surface — white on the light band, crisp 1 px border, tight OUA radius.
   border-radius uses !important to override global-custom's `.col-md-6 .card { border-radius: 0 !important }` */


/* Intro card — centered text, a touch more top padding for the visual anchor */


/* Steps card — no special override needed; left-aligned by default */


/* Card body padding */


/* Card heading — (0,3,0) specificity beats global `.col-md-6 .card .card-title` (0,3,0)
   and wins by load order; size matches OUA h3 scale */


/* Intro card title — slightly larger for visual hierarchy */


/* Body copy */


/* Steps list — remove default bullets, reset spacing */


/* Each step item — counter-driven marker, subtle divider */





/* Numeric marker via ::before */


/* Reset counter on the list itself */


/* Contact strip — muted prompt below the grid */




/* Contact link — (0,2,0) beats `.text-muted a` (0,2,0) by load order;
   branded accent colour + underline on hover */




/* Responsive — stack to single column on mobile (cols handled by Bootstrap,
   but tighten page padding and card body padding) */
@media (max-width: 767px) {
  
  
  
  
}

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


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

/* Page wrapper — ensure tokens resolve even outside chrome selectors */


/* Breadcrumb nav list */










/* Card surface — OUA: white surface, tight 4px radius, light border */


/* Heading — Schibsted Grotesk, tight letter-spacing, near-black ink */


/* Body copy */




/* Primary CTA — warm taupe / near-charcoal fill (matches OUA --oua-accent) */




/* Secondary button — ghost style: transparent fill, muted border */




/* Responsive — tighten card padding on mobile */
@media (max-width: 767px) {
  

  
}

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

/* ===== 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)
   ===================================================== */