/* ============================================================================
   CORE — brand-agnostic base styles for all 8 sites (2026-07-08 merge of
   global-style-V2.1.css + global-custom-V2.1.css, which loaded adjacently in
   this exact order with nothing between them — concatenation is
   cascade-identical by construction). global-responsive-V2.1.css stays a
   SEPARATE file: widgets-base.css loads between it and this file in
   base_master_all_sites.html, and at least one rule (.parent_slid_box
   padding-top) depends on that exact ordering — merging it in would flip a
   real cascade winner. See DOC_CSS_COMPONENT_MIGRATION_RUNBOOK.md §2.
   ============================================================================ */

/* ============================================================================
   SECTION 1 — from global-style-V2.1.css
   ============================================================================ */

/*
APS Project CSS File - Comprehensive Usage Documentation

This CSS file contains styles for the All Paintings Store (APS) Django project.
Each style rule has been documented with comments indicating:
- Which templates use the style
- The specific elements/components they style
- Usage context (header, navigation, search, forms, etc.)

Style Categories:
- Global/Layout: Basic page structure and reset styles
- Header/Navigation: Top bar, logo, search bar, navigation menu
- Search: Search results, filters, pagination
- Cards: Artwork/artist display cards with hover effects
- Forms: Contact forms, consultation forms, input styling
- Footer: Footer sections and copyright

Updated: 17 OCT 2025
*/


/* PLEASE DO NOT DO AGGRESSIVE RESET - Global reset styles - used across all pages and templates 

Over-aggressive reset: You wipe all styles, including useful defaults (e.g., form elements, accessibility outlines, link underlines).
Accessibility issues: Removing text-decoration globally makes links hard to identify for users relying on underlines.
Performance cost: * { ... } applies to every element, which can have a tiny performance hit on large pages.
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
	text-decoration: none;
}

*/


/* Body and main background color - used in base.html and all homepage templates */
body,
main {
	background: var(--site-bg, #EDE9DE);
}
p {
font-family: var(--font-body);
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0%;
}
.text-op-0 {
color:#3E342A;
}


.voice-search-microphone-button {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	color: currentColor;
	opacity: 0.65;
	flex: 0 0 auto;
	z-index: 2;
}

.voice-search-microphone-button:hover {
	opacity: 1;
}


 


/* Blur while a nav mega-menu is open. filter: blur(0) is set explicitly so the
   filter can interpolate (blur(5px) -> none does NOT animate); on close the
   background unblurs smoothly over 0.25s for every brand. */
main {
	filter: blur(0);
	transition: filter 0.25s ease-in-out, opacity 0.25s ease-in-out;
}

/* Option 2: Dark overlay approach */
main.blurred {
	filter: blur(5px);
	opacity: 0.75;
	transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

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


/* Logo container positioning - used in base_artsdot_header.html and base_allpaintingsstore_header.html */


/* Main content area - used in base.html and all homepage templates */
main {
	min-height: calc(100vh - 665px);
}


/* Search section container - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html, museums templates */
.search_sec {
	padding: 20px 160px;
}

/* Navigation list - used in various search and list templates */
ul.nav-list {
    display: flex;
    gap: 15px;
	position: relative;
z-index:9;
    align-items: center;
    padding: 0px;
    margin: 16px 0px 0px;
}

/* Navigation list items - used in various search and list templates */
ul.nav-list li {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0%;
	color: #3E342A;
}

/* Navigation list links - used in various search and list templates */
ul.nav-list a {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0%;
	color: #3E342A;
	text-decoration: none;
	opacity: 1;
	transition: color 0.25s ease, opacity 0.25s ease;
}

ul.nav-list a:hover {
	opacity: 0.65;
}

/* Search results header - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.search_results {
	padding: 30px 0px 20px;
	display: flex;
	justify-content: space-between;
}

/* Search results count text - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.Showing_text {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 20px;
	color: #3E342A;
}
.Showing_text .form-control {
    border: 1px solid #CCC3AE;
border-radius:0;
}
/* Empty / no-results state - center the message (core/fts_search.html) */
.search_results--empty {
	justify-content: center;
}
.Showing_text--empty {
	width: 100%;
	text-align: center;
}

/* Sorting content text - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.sorting_content {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	color: #3E342A;
}

.form-check {
	margin-bottom: 0.3rem;
}

.accordion-item {
	background-color: #E8E2CD;
	border-bottom: 1px solid var(--cart-surface-border, #DCD3BF);
}

button.accordion-button {
	background: #E8E2CD;
	border-radius: 0px;
	box-shadow: none;
}
/* I1 @layer reconciliation (2026-07-09): this flat `box-shadow:none` reset is
   unlayered, so it now unconditionally beats Bootstrap's `.accordion-button
   :not(.collapsed){box-shadow:inset ...}` bottom-divider (now layered) even
   though that Bootstrap rule used to win here on higher specificity when
   expanded. Restated at Bootstrap's own (higher, `:not(.collapsed)`)
   specificity — no layer trick needed since neither side is `!important`. */
button.accordion-button:not(.collapsed) {
	box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

/* corner radius repeated at first/last-of-type specificity to out-rank Bootstrap's
   rounded accordion corners (globals carry no !important) */
.accordion-item:first-of-type button.accordion-button,
.accordion-item:last-of-type button.accordion-button,
.accordion-item:first-of-type .accordion-header,
.accordion-item:last-of-type .accordion-header {
    border-radius: 0;
}
.accordion-header,
button.accordion-button {
	margin-bottom: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 2%;
	text-transform: uppercase;
	color: #3E342A;
	text-transform: uppercase;
}

.accordion-button:not(.collapsed) {
	color: #3E342A;
}

/*.accordion-button:not(.collapsed)::after {*/
/*	background-image: url("../img/carret2.svg");*/
/*}*/

/*.accordion-button::after {*/
/*	background-image: url("../img/carret.svg");*/
/*	background-size: auto;*/
/*}*/
.accordion-button::after {
    background-size: 74%;
    /*margin-top: 4px/*/
}
.accordion-button:not(.collapsed)::after {
    /*margin-right: 4px;*/
}

.accordion-body {
	padding: 0px 20px 20px;
}

.form-check input {
	width: 24px;
	height: 24px;
	border: 1px solid #877F76;
	background-color: #E8E2CD;
	outline: none;
padding:0;
	box-shadow: none;
}

.form-check input:checked {
	background-color: #3E342A;
	border-color: #3E342A;
}

.form-check input[type=checkbox] {
	border-radius: 0px;
}
.form-check input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E8E2CD'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
    background-size: 100%; 
}

.search_sec .form-check {
    margin-bottom: 16px;
    color: #3E342A;
    font-family: var(--font-body);
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 100%;
    display: flex;
    letter-spacing: 0%;
    align-items: center;
    gap: 12px;
}
.search_sec .form-check .form-check-input {
 flex-shrink:0;
}

.search_sec .form-check .form-check-label {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 30px;
	color: #3E342A;
	display: flex;
	justify-content: space-between;
}

.search_sec .form-check .form-check-label p {
	margin: 0px;
}

#dateSlider,
#priceSlider {
	margin-top: 20px;
}

/* doubled classes: must out-rank the vendor nouislider.css, which loads after this file on list pages */
.noUi-horizontal.noUi-horizontal {
	height: 5px;
}

.noUi-target.noUi-target {
	background: #CBC4AA;
	border-radius: 4px;
	border: none;
	box-shadow: none;
}

.noUi-connect.noUi-connect {
	background: #3E342A;
}

.noUi-horizontal .noUi-handle.noUi-handle {
	width: 18px;
	height: 18px;
	right: -4px;
	top: -7px;
	border-radius: 50%;
	background: #3E342A;
	box-shadow: none;
	border: none;
}
.noUi-handle.noUi-handle:after {
	display: none;
}

.noUi-handle.noUi-handle:before {
	height: 8px;
	width: 8px;
	background: #E8E7E6;
	left: 5px;
	top: 5px;
	border-radius: 50%;
}

.colors_list li.active,
.colorPlatte li.active{
	background-color: #E4DBBB;
	border: 1px solid #3E342A
}
/* .search_sec .col-md-4 {
	max-width: 23%;
} */

.search_sec .col-md-8 {
	flex: 0 0 auto;
} .user-menu-wrapper {
width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E4DDC7;
    border-radius: 50%;
}
/* Header auth: cookie-driven guest vs logged-in icon (do not rely on Bootstrap .d-none; Bootstrap may load async via preload) */
#aps-user-auth-widget .aps-header-auth--hidden {
	display: none;
}
#aps-user-auth-widget .aps-user-icon--auth:not(.aps-header-auth--hidden) {
	display: block;
}
#aps-user-auth-widget .aps-user-initial-overlay:not(.aps-header-auth--hidden) {
	display: block;
}


/* Add to cart button - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.addToCart,
.added {
	background: #875D2A;
	width: 200px;
	display: block;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	line-height: 20px;
	text-align: center;
	text-transform: uppercase;
	color: #EDE9DE;
	text-decoration: none;
	padding: 10px 35px;
}

.curator_section .container{
	width: auto;
	max-width: 100%;
	padding: 0px 160px;
}
  
     
  
  
  
   


  
  /* 🌫️ Visible slow zoom using transform scale to maintain aspect ratio */
  @keyframes slowZoomScale {
	0%   { transform: scale(1); }
	25%  { transform: scale(1.02); }
	50%  { transform: scale(1.04); }
	75%  { transform: scale(1.02); }
	100% { transform: scale(1); }
  }
  
  /* ✨ Visible shimmering motion */
  @keyframes goldenShimmer {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
  }
  


  
  
  
    
  


.consultation_container ul.nav-list li,
.consultation_container ul.nav-list li a {
	color: #EDE9DE;
}

.consultation_bottom {
	background: #2E2823;
	padding: 60px 160px;
	position: relative;
	z-index: 999;
}

.consultation_bottom .row {
	align-items: flex-start;
}

.consultation_bottom p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 25px;
	color: #E8E5DC;
}

p.consultation_text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0%;
	text-align: right;
	color: #EDE9DE;
	opacity: 0.7;
	margin: 0px 0 0 175px;
}

.process_section {
	padding: 100px 160px;
}

.process_section .col-md-1 {
	padding: 0px;
	width: 2.33%;
	position: relative;
}

span.line {
	display: block;
	width: 1px;
	height: 100%;
	background: #3E342A;
	margin: auto;
}

img.step_icon {
	position: absolute;
	left: 0px;
	top: 0;
	width: 100%;
}

.step-header {
	padding-left: 20px;
	margin-bottom: 80px;
}

.step-content p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 23px;
	color: #3E342A;
}

.step .step-image {
	width: 360px;
	height: 270px;
	/* object-fit: cover; */
	margin: auto;
	display: block;
	/* Offset accent shadow extracted from inline markup (orders/art_consultation.html).
	   Per-brand tint set via --step-image-shadow in each site-*-V2.0.css; legacy tan fallback. */
	box-shadow: -15px 15px 0px var(--step-image-shadow, #d5cbaf);
}

.step-content {
	padding-bottom: 80px;
	width: 600px;
}

.step-title {
	background: #3E342A;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 4%;
	text-transform: uppercase;
	color: #EDE9DE;
	width: 75px;
	height: 28px;
	z-index: 99999;
	position: relative;
	text-align: center;
	line-height: 28px;
}

.step-heading {
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 25px;
	line-height: 36px;
	color: #3E342A;
	margin: 20px 0px;
}

.step-number-box {
	background: #E4DDC7;
	border: 1px solid #CCC2AE;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	text-align: center;
	color: #875D2A;
	margin-right: 15px;
	display: block;
	min-width: 40px;
}

.list-inline-item {
	display: flex;
	margin-bottom: 10px;
}

.step li {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #3E342A;
	margin-bottom: 10px;
}

ul.step_list {
	/* list-style-type: disclosure-closed; */
	padding-left: 20px;
}

ul.step_list li {
	list-style-type: square;
	/* padding-left: 15px; */
}


.step-header small {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 26px;
	text-transform: uppercase;
	color: #875D2A;
	margin-bottom: 5px;
	display: block;
}

.step-header h4 {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 26px;
	line-height: 31px;
	color: #3E342A;
}

.step-content p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #3E342A;
}

.contactfull_width_hero_banner_with_background_image {
	padding: 0px 0px;
	background: #E4DDC7;
	position: relative;
}

.contactfull_width_hero_banner_with_background_image .row {
	padding: 0;
	width: 100%;
}

.consultant_right {
	padding: 0px 100px 0px 160px;
	height: 645px;
	background: url("/static/images/orders/background-dark-wall.0bda097aa6d0.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	display: flex;
	align-items: center;
	position: relative;
	flex-direction: column;
	justify-content: center;
}

.consultant_right .overlay_img {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #5049434d;
	top: 0;
	left: 0;
	opacity: 0.8;
}

.consultant_right h1 {
	position: relative;
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 55px;
	line-height: 60px;
	text-transform: capitalize;
	color: #EDE9DE;
	z-index: 9999;
}

.consultant_right p {
	position: relative;
	z-index: 9999;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 26px;
	color: #EDE9DE;
	margin: 25px 0px;
}

.consultant_content {
	display: flex;
	position: relative;
	z-index: 999;
	gap: 20px;
}

.consultant_content img {
	height: 20px;
}

.consultant_content h6 {
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 25px;
	line-height: 20px;
	color: #EDE9DE;
	margin-bottom: 5px;
}

.consultant_content span {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
	color: #EDE9DE;
	letter-spacing: 1px;
}

/* Contact form section container - used in orders/art_consultation.html */
.contactForm_sec {
	padding: 0px 60px 0 70px;
}

/* Form container heading - used in orders/art_consultation.html and users/profile_change_password.html */
.form-container h3 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 36px;
}
.contactForm_sec .image-preview {
    width: 100px;
    height: 100px;
}
.contactForm_sec .image-upload-box {
    width: 100px;
    height: 100px;
}


/* Form container paragraph - used in orders/art_consultation.html and users/profile_change_password.html */
.form-container p {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	line-height: 20px;
	text-transform: uppercase;
	color: #3E342A;
	opacity: 0.6;
	margin: 0px;
	margin-left: -13px;
}

/* Form container heading span - used in orders/art_consultation.html and users/profile_change_password.html */
.form-container h3 span {
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 17px;
	line-height: 20px;
	letter-spacing: 0%;
	text-transform: capitalize;
	color: #3E342A;
	opacity: 1;
	margin-right: 13px;
}

/* Form step container (hidden by default) - used in orders/art_consultation.html and users/profile_change_password.html */
.form-step {
	display: none;
}

/* Active form step container (visible) - used in orders/art_consultation.html and users/profile_change_password.html */
.form-step.active {
	display: block;
}


.step-light {
	color: #333;
}

/* .form-container .row .col-md-6 {
    padding-right: 10px;
} */

/* Form navigation buttons - used in orders/art_consultation.html and users/profile_change_password.html */
.btn-next,
.btn-prev {
	min-width: 100px;
}

/* Form floating label background - used in orders/art_consultation.html and users/profile_change_password.html */
.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 {
	position: absolute;
	inset: 1rem 0.375rem;
	z-index: -1;
	height: 1.5em;
	content: "";
	background-color: var(--cart-surface, #F7F2E1);
	border-radius: var(--bs-border-radius);
}

/* Form container input fields - used in orders/art_consultation.html and users/profile_change_password.html */
.form-container input {
	background: var(--cart-surface, #F7F2E1);
	border: none;
	border-radius: 0px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #3E342A;
	box-shadow: none;
}

/* Form floating labels - used in orders/art_consultation.html and users/profile_change_password.html */
.form-floating>label {
    color: #3E342A;
    text-transform: uppercase;
    font-size: 13px;
    left: -1px;
    top: -2px;
    font-weight: 500;
}
/* keep the brand ink on focused/filled floating labels — mirrors Bootstrap's own
   higher-specificity faded-label rule, which this colour used to beat via !important */
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-control-plaintext~label,
.form-floating>.form-select~label {
    color: #3E342A;
}

/* Previous button styling - used in orders/art_consultation.html and users/profile_change_password.html */
.btn-prev {
	width: 200px;
	height: 50px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	text-transform: uppercase;
}
/* doubled class: these three must out-rank the generic .btn rule in global-custom
   (they were previously !important) */
.btn-prev.btn-prev {
	background: transparent;
	color: #835e2c;
	border: 1px solid #835e2c;
}

.floating_footer {
	display: flex;
	justify-content: end;
	gap: 12px;
	margin-top: 42px;
	padding: 0px;
	position: absolute;
	width: 100%;
	right: 94px;
	bottom: 54px;
}

.upload_img_form label {
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 500;
	color: #3E342A;
	line-height: 20px;
	margin-bottom: 10px;
}


/******************* Small image upload Start Here ****************/
.image-upload-container {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

.image-preview {
	max-width: 300px;
	height: 180px;
	overflow: hidden;
	position: relative;
}

.image-preview img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.image-upload-box {
	text-align: center;
	width: 54px;
	height: 54px;
	background: #F7F1E0;
	border: 1px dashed #877F76;
	display: flex;
	justify-content: center;
	align-items: center;
/* 	margin-bottom: 12px; */
}

.image-preview-list-box {
	display: none;
}

#image-preview-list {
	display: flex;
	gap: 12px;
}

.upload_img_form span {
	color: #B23333;
}

.loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 56px;
	background: #0F1114B2;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.9;
}

.form-floating input {
	font-size: 13px;
	color: #3E342A;
	font-weight: 400;
}

.loader::after {
	content: "";
	border: 3px solid #ccc;
	border-top: 3px solid #333;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}


.proceed_box {
	margin-top: 14px;
}

.proceed_radio_box {
	position: relative;
	margin-bottom: 8px;
}

.proceed_box input[type="radio"] {
	height: 18px;
	width: 18px;
	position: absolute;
	top: -3px;
	left: -12px;
	appearance: none;
	background: #e3dec7;
	border-radius: 50%;
}

.proceed_box input[type="radio"]:after {
	background-color: #e7e3cd;
	border-radius: 25px;
	content: '';
	display: block;
	height: 18px;
	left: 0px;
	position: relative;
	top: 0px;
	width: 18px;
	border: 1px solid #877F76;
}

.proceed_box input[type="radio"]:checked:after {
	background-color: #3E342A;
	width: 12px;
	height: 12px;
	position: relative;
	top: 3px;
	left: 3px;
	outline: 1.5px solid #3E342A;
	outline-offset: 3px;
}

.proceed_radio_box label {
	margin-left: 29px;
	color: #3E342A;
	font-size: 16px;
}

.img_extention {
	color: #3E342A;
	font-size: 14px;
	font-weight: 400;
	font-style: italic;
	margin-bottom: 11px;
	display: none;
}

.calendar input[type="date"] {
	padding: 8px;
	font-size: 16px;
	margin-bottom: 20px;
}

.calendar {
	width: 92%;
}

.sloat-btn {
	display: flex;
	gap: 10px;
}

.time-btn {
	padding: 8px 14px;
	background: unset;
	border: 1px solid #3E342A4D;
	cursor: pointer;
	transition: all 0.3s ease;
	width: 92px;
	height: 36px;
	line-height: 19px;
	margin-bottom: 10px;
	color: #3E342A;
	font-size: 14px;
}
.time-btn:hover {
	background: #3E342A;
	color: #EDE9DE;
}
.card {
    border: 1px solid var(--cart-surface-border, #DCD3BF);
    border-radius: 0;
    background-color: #E8E2CD;
    padding: 20px;
}


.ui-widget.ui-widget-content {
	border: 0;
	margin-left: -4px;
}

.ui-widget-content {
	border: 0px;
	background: unset;
}


.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 0;
	background: unset;
	font-weight: 400;
	color: #3E342A;
	font-size: 14px;
}

.ui-widget-header {
	border: 0;
	background: unset;
}

a.ui-state-default {
	width: 32px;
	height: 32px;
	line-height: 26px;
}


.ui-icon-circle-triangle-w {
	background-position: unset;
	transform: rotate(-90deg);
}

.ui-icon-circle-triangle-e {
	background-position: unset;
	transform: rotate(90deg);
}
.custom_search .row .col-md-3,
.custom_search .row .col-md-4.col-12.col-lg-4.col-xl-3{
    border: 1px solid var(--cart-surface-border, #DCD3BF);
}
.sorting_content select.custom-select {
    background: url("/static/images/arrow-down.5a2ececd62b2.png") no-repeat right center;
    background-size: 12px;
}


 


.sidebar_box {
    background: #E8E2CD;
    border: 1px solid #00000000;
    margin-bottom: 10px;
    transition: all 0.4s;
}
.sidebar_box:hover, .sidebar_box.active {
    border: 1px solid #3E342A;
}


/* Slider card container — overflow:hidden clips zoom; position:relative anchors ::after veil on per-site hover effects */
.artist_slid_box {
    position: relative;
    overflow: hidden;
}
input[type=range] {
	-webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: #CCC2AE;
    border-radius: 0;
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    height: 6px;
    background: #CCC2AE;
    border-radius: 0;
}
input[type=range]::-moz-range-track {
    height: 6px;
    background: #CCC2AE;
    border-radius: 0;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #875D2A;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
    border: 0;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
input[type=range]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #875D2A;
    border-radius: 50%;
    cursor: pointer;
    border: 0;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
form.countrySearchForm i.fa.fa-search {
    position: absolute;
    top: 12px;
    left: 10px;
    color: #3E342A;
}

.steps_count {
margin-bottom:8px;
}
/**************GroupBy**************/


/* ===========================================
   MODAL POPUP STYLING CLASSES - JAVASCRIPT INTEGRATION
   ===========================================

   These CSS classes replace inline styles previously applied by JavaScript functions.
   Used by showNewsletterPopup(), showArtSuggestionsPopup(), closeSubscriptionPopup(),
   and closeArtSuggestionsPopup() functions to add/remove modal styling dynamically.

   Classes follow 5-7 word naming convention for optimal semantic clarity:
   - popup-overlay-full-screen-background-blur-effect-active-state: Full-screen overlay with blur effect in active state (7 words)
   - popup-content-modal-window-centered-positioning-active-state: Modal content with centered positioning in active state (7 words)
   - popup-header-modal-section-styled-layout-active-state: Modal header section with styled layout in active state (7 words)
   - popup-body-modal-content-area-styled-active-state: Modal body content area styled in active state (7 words)
   - popup-form-input-field-modal-styled-formatting-active-state: Form input field with modal styled formatting active (7 words)
   - popup-submit-button-modal-styled-primary-appearance-active-state: Submit button modal styled primary appearance active (6 words)
   - popup-overlay-background-hidden-inactive-state: Popup overlay with hidden background in inactive state (7 words)
   - body-scroll-prevention-active-state: Body element with scroll prevention in active state (6 words)

   All classes use to ensure they override existing styles when applied.
   ========================================== */

/* Full-screen popup overlay with background blur effect active */
.popup-overlay-full-screen-background-blur-effect-active-state {
    display: block;
    z-index: 999999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    /* Fade-in (on open) duration is 1s */
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease;
    pointer-events: auto;
}

/* Popup content modal window with centered positioning active */
.popup-content-modal-window-centered-positioning-active-state {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 0px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 100%;
/*     height: 618px; */
max-width:1117px;

    /* overflow-y: auto; */
    z-index: 1;
    padding: 0;
}


/* Popup header modal section with styled layout active */
.popup-header-modal-section-styled-layout-active-state {
    padding: 20px 25px 15px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Popup body modal content area styled active */
.popup-body-modal-content-area-styled-active-state {
}

/* Form input field modal styled formatting active state */
.popup-form-input-field-modal-styled-formatting-active-state {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

/* Submit button modal styled primary appearance active */
.popup-submit-button-modal-styled-primary-appearance-active-state {
    background-color: #E7C685;
    color: #30271D;
    border: 1px solid #E7C685;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

/* Popup overlay background hidden in inactive state */
.popup-overlay-background-hidden-inactive-state {
    /* Fade-out (on close) duration is 0.5s */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* Body element scroll prevention in active state */
.body-scroll-prevention-active-state {
    overflow: hidden;
} 


 


  

  .top_dropdown_item_button_clickable:hover,
  .top_dropdown_item_active_selected_style {
	background: #EDE9DE;
  }


/* =====================================================
   mouseover_effect_images — baseline hook for entity images
   Per-site CSS files define the actual visual effect.
   ===================================================== */
img.mouseover_effect_images {
    /* transition defined per-site */
}


.artwork-image-frame-fade-out {
	opacity: 0;
	}
.card:hover .artist-description-clamp {
    max-height: 500px; 
    -webkit-line-clamp: unset;
    white-space: normal;
}


                  
  
             
  
  
      
      


  


.utl-breadcrumb .nav-list{ margin:0; flex-wrap:wrap; }

/* ── Entrance animations ── */
@keyframes utl-riseIn{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }


#utl-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }


    @keyframes utl-pulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.7; }
  50%{ transform:translate(-50%,-50%) scale(1.5); opacity:1; }
}


@keyframes utl-hintPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

@keyframes utl-loadShimmer{ 0%,100%{ opacity:.45; } 50%{ opacity:.9; } }


@keyframes utl-flash{ 0%{ background:rgba(216,154,120,.25); } 100%{ background:var(--utl-gesso); } }

/* ── Responsive ── */
@media(max-width:1100px){
    }
@media(max-width:560px){
        }
@media(prefers-reduced-motion: reduce){
      }


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


#atlas-rotor { transform-box:view-box; transform-origin:460px 460px; transition:transform .95s cubic-bezier(.5,.05,.2,1); }


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

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


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


.gn-breadcrumb .nav-list {
  margin-top: 0;
}


@keyframes moomBreath {
  from { opacity:.82; transform:scale(1) }
  to   { opacity:1;   transform:scale(1.04) }
}


.moom-breadcrumb .nav-list { margin-top:0 }
.moom-breadcrumb .nav-list li,
.moom-breadcrumb .nav-list a {
  color:var(--ink-vapor);
}
.moom-breadcrumb .nav-list a:hover {
  color:var(--gold);
  opacity:1;
}


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

@keyframes moomFloat {
  from { transform:translateY(0) rotate(-.15deg) }
  to   { transform:translateY(-9px) rotate(.15deg) }
}


.moom-dock-inner { max-width:1380px;margin:0 auto }

/* ============ RESPONSIVE ============ */
@media(max-width:1100px) {
        }
@media(max-width:760px) {
                      }
@media(max-width:480px) {
          }
@media(prefers-reduced-motion:reduce) {
    }


@keyframes tlCardIn {
  to { opacity:1; transform:translateY(0); }
}


/* --- ARTIST SPECTRAL INDEX (spectral-page) --- */
/* ── Spectral Index custom properties ─────────────────────────────────────── */
/* Defined on :root so position:fixed children (#spec) can inherit them too  */
.spectral-page, #spec {
  --field:#0c1113;
  --field-2:#0a0e10;
  --grid-minor:rgba(120,150,160,0.055);
  --grid-major:rgba(150,180,190,0.13);
  --axis:rgba(190,215,220,0.32);
  --gold:#c9a24b;
  --gold-soft:#d9bd78;
  --gold-glow:rgba(201,162,75,0.55);
  --cyan:#7fb8c2;
  --cyan-soft:#a9d4db;
  --ink:#e8eef0;
  --ink-dim:#8fa1a6;
  --ink-faint:#566569;
  --panel:rgba(16,23,26,0.82);
  --panel-line:rgba(140,170,178,0.18);
  --metal:linear-gradient(145deg,#d8dde0,#7b868a 45%,#c2c9cc 70%,#5c656a);
  --chip-bg:rgba(255,255,255,0.07);
}


@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}


/* thumbnails */
.pt {
  position:absolute;cursor:pointer;z-index:6;
  transform:translate(-50%,-50%) scale(.4);opacity:0;
  transition:opacity .5s ease,filter .35s ease;
  will-change:left,top,transform;
}
.pt .frame {
  width:44px;height:44px;border-radius:50%;overflow:hidden;position:relative;
  border:1.5px solid rgba(200,205,208,.55);
  background:#1a2225;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 2px 8px -2px rgba(0,0,0,.8);
  transition:transform .3s cubic-bezier(.2,.9,.25,1),box-shadow .3s,border-color .3s,width .3s,height .3s;
}
.pt .frame::before {
  content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;
  background:var(--metal);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;pointer-events:none;
}
.pt img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92);border-radius:50%}
.pt.settled{opacity:.78}
.pt:hover{z-index:40}
.pt:hover .frame {
  transform:scale(2.85);border-color:var(--gold);
  box-shadow:0 0 0 1.5px var(--gold),0 0 22px -2px var(--gold-glow),0 8px 24px -6px rgba(0,0,0,.9);
}
.pt:hover img{filter:saturate(1.05)}
.pt.ghost{opacity:.12;filter:grayscale(1) brightness(.7)}
.pt.ghost:hover .frame{transform:scale(1.6)}
.pt.bright{opacity:1}
.pt.bright .frame{border-color:rgba(217,189,120,.7)}


@media(max-width:860px){
        .pt .frame{width:34px;height:34px;border-radius:50%}
}


/* ============================================================================
   SECTION 2 — from global-custom-V2.1.css
   ============================================================================ */

/*
 * custom-V2.0.css — Shared theme (all sites): typography, palette, layout, forms, cart, buy/info
 * structure. Viewport overrides: responsive-V2.0.css.
 *
 * Per-site identity (link hover on buy/info pages, WA corner-brackets, ADC red nav):
 *   static/css/wahooart-V2.0.css | artsdot-V2.0.css | … (see base.html load order)
 *   Doc: -Documentation Project/DOC_APS_THE_7_SITES.md → "Frontend CSS: text-link hover"
 *
 * Do NOT add WA vs ADC :hover text colors here — only shared transitions where noted.
 * Updated: 18 OCT 2025
 */

/* Site-wide base: font, list reset, section padding, links, design tokens, .btn */
body {
	font-family: var(--font-body);
/*     padding-left: 2em;
    padding-right: 2em; */
}  


/* Lists, links, vertical rhythm — shared across marketing and catalog pages */
ul {
	padding-left: 0px;
}

li {
	list-style-type: none;
}

a {
	text-decoration: none;
	color: var(--site-link, #3E342A);
}

section {
	padding: 47px 0px;

}

input:focus {
	outline: 0;
}

/* z-index scale (documented 2026-07-08, LIST doc §H6) — a small set of
   escalated values (9999/99999/999999) exist in a handful of files; new
   stacking needs should reference one of these tokens rather than escalate
   further. Existing escalated usages are NOT converted here (each needs a
   paired-render check — stacking-context regressions are easy to miss
   statically); tracked as future work. */
:root {
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-overlay: 1040;
	--z-modal: 1050;
	--z-toast: 1080;
}

:root {
	--btn-color: var(--site-btn, #875D2A);
	--btn-text-color: var(--site-btn-text, #EDE9DE);
}

.btn {
	background: var(--btn-color);
	color: var(--btn-text-color);
	line-height: 20px;
	border-radius: 0px;
	font-weight: 600;
	border: 1px solid var(--btn-color);
	padding: 9px;
}

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


.hero_swiper .swiper {
	width: 100%;
	height: 100%;
}

.hero_swiper .swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #444;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 643px;
}

.hero_swiper .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
    max-height: max-content;
}


/* Semi-transparent scrim over hero slides and thumbnail hovers */
.overlay_img {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #09050587;
	top: 0;
	left: 0;
}


.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
	bottom: 44px;
	left: 89px;
}

.hero_swiper .swiper-button-next,
.hero_swiper .swiper-button-prev {
	color: #E8E5DC;
	top: 91%;
	z-index: 99;
}

.hero_swiper .swiper-button-prev {
	left: 88%;
}

.hero_swiper .swiper-button-next {
	right: 6%;
}

/* Default section headings used under swipers and content bands (not hero-specific) */
.heading_text {
	text-align: center;
	font-size: 35px;
	color: #3E342A;
	font-family: var(--font-title);
	line-height: 34px;
	text-transform: capitalize;
}

.heading_paragrap {
	text-align: center;
	color: #3E342A;
	font-size: 13px;
	line-height: 22px;
}

/* Swiper defaults reused on inner carousels (not only the hero) */
.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
/*	background: #444;*/
	display: flex;
	justify-content: center;
	align-items: center;
}

.swiper-slide img {
	display: block;
	width: 100%;
    max-height: 30vh; 
	object-fit: cover;
}


.slider-nav {
	margin-bottom: 29px;
}


.black_back {
	background: #504943;
}

.black_back p {
	color: #E8E5DC;
}


button.btn img {
	margin-left: 8px;
}


.why_choose_right {
	padding: 70px;
	height: 600px;
}

.why_choose_right .heading_text {
	text-align: left;
	font-size: 45px;
	margin-bottom: 15px;
}

.why_choose_right .heading_paragrap {
	text-align: left;
}

.why_choose_box {
	margin-top: 44px;
	/* padding-right: 100px; */
}

.why_choose_box_inner {
	display: flex;
	gap: 20px;
	margin-bottom: 30px;
}

.why_choose_icon {
	margin-top: 6px;
}

.why_choose_icon img {
	background: #675F59;
	padding: 5px;
	outline: 1px solid gray;
	outline-offset: 2px;
	width: 36px;
	height: 36px;
}

.why_choose_info h5 {
	font-size: 16px;
	color: #3E342A;
}

.why_choose_info p {
	color: #3E342A;
	font-size: 14px;
	opacity: 0.8;
}

div#swiper_thumb {
	display: grid;
	gap: 32px;
	overflow-y: auto;
}

div#swiper_thumb .swiper-slide {
	height: 220px;
	width: 100%;
}

#swiper_thumb::-webkit-scrollbar {
	width: 4px;
	height: 3px;
}

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

/* “Meet the masters” / thumb carousel: play icon + label centered on slide */
.swiper_main_thumb {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 32px;
	height: 32px;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	gap: 11px;
}

.swiper_main_thumb span {
	color: #EDE9DE;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
}

/* Lower third overlay on homepage thumb swiper: title + short copy */
.swiper_bottom_content {
	position: absolute;
	bottom: 20px;
	left: 33px;
	right: 33px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.swiper_bottom_content .heading_text {
	text-align: left;
	font-size: 25px;
	color: #EDE9DE;
	line-height: 26px;
	width: 30%;
}

.swiper_bottom_content .heading_paragrap {
	text-align: right;
	color: #EDE9DE;
	width: 33%;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
	display: none;
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
	display: none;
}


/******************* New Css Start Here ***********************/
/* Forms, grids, and flows added after the original theme block. Prefer scoped selectors
   for admin-adjacent pages (see note below). */


/*
Scope your selectors
Bad idea to leave it global — it will interfere with debugging tools and admin pages.


*/

/* Checkout / account style inputs on primary flows and main-grid forms */
.primary-input , .main-grid-row input {
    background: var(--cart-surface, #F7F2E1);
    border: unset;
    border-radius: unset;
    width: 100%;
    color: #3E342A;
    font-size: 14px;
    font-weight: 500;
    height: clamp(46px , 2.917vw , 56px);
    text-transform: uppercase;
    padding: 12px 14px;
    outline: unset;
}
.primary-input , .main-grid-row input[type="checkbox"] {
	width: auto;
    height: auto;
}

/* Profile message / contact forms — compact spacing */
.text-center.sendmsg_textt {
    padding-top: 32px;
    padding-bottom: 32px;
}
.text-center.sendmsg_textt h1 {
    margin-bottom: 16px;
}
.text-center.sendmsg_textt p {
    margin-bottom: 20px;
}


@keyframes featSlideInNext {
    from { opacity: 0; transform: translateX(26px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes featSlideInPrev {
    from { opacity: 0; transform: translateX(-26px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes featIconPop {
    0%   { opacity: 0; transform: scale(.6) rotate(-8deg); }
    60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes featRise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes featProgress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
} .main-grid-row input
 {
    font-size: 16px;
    font-weight: 500;
    color: #3E342A;
    margin-bottom: 11px;
}

.form_produc h3 , .valuation_form_boxs h3 {
font-family: var(--font-title);
font-weight: 400;
font-style: Regular;
font-size: 48px;
leading-trim: NONE;
line-height: 56px;
letter-spacing: 0%;
text-align: center;

}
.black-hover {
    color: #B23333;
    font-family: var(--font-body);
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
}

.black-hover:hover {
    color: #D37575; /* #B23333 ka light version */
}
.form-check-inline .form-check-label {
    padding-top: 3px;
    padding-left: 9px;
}
.steps_count span {
	background: #3E342A;
	padding: 4px 11px;
	font-size: clamp(14px , 0.833vw , 16px);
	font-weight: 600;
	color: #EDE9DE;
	line-height: 20px;
	text-transform: uppercase;
}

.form_heading {
	text-align: center;
	font-size: 32px;
	color: #3E342A;
	font-family: var(--font-title);
	line-height: 33px;
	font-weight: 400;
	margin-top: 6px;
	margin-bottom: 16px;
}

.form_content {
	font-size: 13px;
	font-weight: 400;
	text-align: center;
	line-height: 20px;
	letter-spacing: 0;
	color: #3E342A;
}


.sum_chek_text {
	padding: 24px;
	border-bottom: 1px solid var(--cart-surface-border, #DCD3BF);
	font-family: var(--font-title);
	color: #3E342A;
	font-size: 28px;
	line-height: 30px;
	font-weight: 400;
}


.detail_img img {
/* 	width: 100%;
	height: 100%;
	object-fit: cover; */
}

.detail_content {
	display: flex;
	justify-content: space-between;
	width: 100%;
}


.detail_cont_shared h4 {
	color: #3E342A;
	font-family: var(--font-body);
font-weight: 500;
font-style: Medium;
font-size: 18px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0%;
	margin-bottom: 5px;
}

.detail_cont_shared p {
	font-size: 16px;
	font-weight: 400;
	line-height: 16px;
	color: #3E342A;
	margin-bottom: 0px;
}

.detail_cont_right {
	text-align: right;
}

.dtl_gap {
	margin-bottom: 12px;
}


select:focus {
	outline: unset;
}


select:focus>option:checked {
	background: #875D2A;
	color: #e7e3cd;
}

select option {
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: #3E342A;
}
.image-upload-container {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}


.checked_box {
	border: 1px solid #3E342A;
}


	/* Top 100 artworks — enforce a minimum image width in the zigzag gallery */
.top100-artwork-card .top100-artwork-card__inner img {
    min-width: 23vw;
}


.artistic_img {
	position: relative;
}

.artistic_img .overlay_img {
	background: #3E342ACC;
	display: none;
}
.artis_custome_img {
    height: 180px;
    text-align: center;
    border: 1px dashed #3E342A80;
    display: flex;
}
.artis_custome_img span.picture__image {
    width: 100%;
}
.artis_custome_img .picture {
    height: unset;
}
.artis_custome_img .picture__img {
    max-width: 100%;
    height: 180px;
    width: 100%;
}
.artistic_img.artis_custome_img p {
	margin-bottom: 0px;
	font-size: 14px;
}


/* ============================================================================
   Custom reproduction / photo-to-painting — extracted from the inline <style>
   and inline style="" attributes of buy_photo_to_painting_form.html (restyle8).
   Shared STRUCTURE + neutral defaults live here; per-brand COLOURS are set in
   site-{brand}-V2.0.css scoped to .production_form / .summery_checkout.
   Responsive overrides for these live in global-responsive-V2.0.css.
   ============================================================================ */

/* Read-more CTA default colour (brands override under .production_form scope) */
.yellow_cont a {
    color: #875D2A;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    width: fit-content;
}

/* Frame thumbnails / previews: blend white PNG backgrounds onto tinted panels */
.frame_dropdown .frame_box img,
.streched_dropdown .frame_box img,
.frame_details img,
#summary_frame_row .detail_img img {
    mix-blend-mode: multiply;
}


@keyframes button-spin {
    to { transform: rotate(360deg); }
}


#emailConfigButton {
    flex: 0 0 auto;
    width: 120px;
}
#addToCartButton {
    flex: 1;
    max-width: 250px;
}

/* Step 05 frame preview image height (was inline) */
#frame-image {
    height: 150px;
}


.accordion-item:last-of-type {
    border-radius: 0;
    /* border-bottom-right-radius: var(--bs-accordion-border-radius); */
    /* border-bottom-left-radius: var(--bs-accordion-border-radius); */
}
.optionalsecton input {
}

.imageInput {
	opacity: 0;
	width: 100%;
	height: 47px;
	position: absolute;
	z-index: 99;
	left: 0;
}

.preview-container {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.image-box {
	position: relative;
	width: 150px;
	height: 180px;
	border: 1px solid #ddd;
	border-radius: 0;
	overflow: hidden;
}

.image-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.overlay-loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #0F1114B2;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.delete-btn {
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: white;
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 3;
}

.rotate-btn {
	position: absolute;
	bottom: 10px;
	right: 50px;
	color: white;
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 3;
}

.img_after_load img {
	width: 36px;
	height: 26px;
}

.overlay-loader img {
	width: 36.63px;
	height: 40px
}

.img_load {
	-webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(359deg);
	}
}

.upload_new_img {
	width: 150px;
	height: 180px;
	background: var(--cart-surface, #F7F2E1);
	border: 1px dashed #9A9385;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	display: none;
	text-align: center;
	line-height: 180px;
}

.image-box {
	position: relative;
	display: inline-block;
}

.rotatable-image {
	transition: transform 0.3s ease;
	max-width: 200px;
	display: block;
}

.form-floating label span {
	color: #B23333;
}

/********image upload css **********/


/***************Re production page css *************/
.reproduction_main_page {
/* 	padding: 0px 160px 20px; */
}


.swiperrepro2 .swiper-button-prev {
	left: 21px;
	width: 56px;
	height: 56px;
}

.swiperrepro2 .swiper-button-prev img {
	width: 100%;
}

.swiperrepro2 .swiper-button-next {
	right: 21px;
	width: 56px;
	height: 56px;
}

.swiperrepro2 .swiper-button-next img {
	width: 100%;
}


.sorting_content select {
	border: none;
	background: unset;
	color: #3E342A;
	appearance: none;
	background-image: url('');
	background-position: right 0px center;
	background-repeat: no-repeat;
	width: 150px;
	padding: 5px;
}

.badge-filter img {
	cursor: pointer;
}

.form-floating input {
	padding-top: 40px;
	padding-left: 2px;
	font-size: 14px;
	text-transform: capitalize;
}
/* keep the 40px label clearance on floating inputs (empty, focused and filled states) —
   mirrors Bootstrap's own selectors, which this padding used to beat via !important */
.form-floating > .form-control,
.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
	padding-top: 40px;
	padding-left: 2px;
}

.form-floating input::placeholder {
	color: #7069698a;
}

.form-floating>.form-control-plaintext:focus,
.form-floating>.form-control-plaintext:not(:placeholder-shown),
.form-floating>.form-control:focus,
.form-floating>.form-control:not(:placeholder-shown) {
	padding-top: 1.2rem;
	padding-bottom: 8px;
}

 

.vincent_color {
	color: #B23333;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	margin-bottom: 11px;
}
.vincent_color a {
	color: #B23333;
}

.repro_heading,
.buy_sale_channel_heading {
	color: #3E342A;
	font-weight: 500;
	font-size: 28px;
	margin-bottom: 11px;
}


.buy_sale_channel_heading_container {
	padding-top: 14px;
}
.buy_sale_channel_heading {
	margin-top: 0.5em;
	margin-bottom: 0px;
}

.buy_sale_channel_short_description {
	color: #6E665C;
	font-size: 15px;
	line-height: 1.45;
	margin: 8px 0 12px 0;
	max-width: 42em;
}

/* When cross-channel links are embedded inline inside the description <p> */
p.buy_sale_channel_short_description .buy_sale_channel_cross_channel_links {
	display: inline;
	border-bottom: none;
	padding-bottom: 0;
	gap: 0;
	white-space: nowrap;
}
p.buy_sale_channel_short_description .buy_sale_channel_cross_channel_links a {
	display: inline;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: inherit;
	opacity: 1;
}
p.buy_sale_channel_short_description .buy_sale_channel_cross_channel_links a + a::before {
	content: ", ";
}
p.buy_sale_channel_short_description .buy_sale_channel_cross_channel_links a img {
	display: none;
}

.buy_sale_channel_heading_alternate_buy {
	border-bottom: 1px solid var(--cart-surface-border, #DCD3BF);
	padding-bottom: 18px;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.buy_sale_channel_heading_alternate_buy a {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-weight: 500;
	font-style: Medium;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0%;
	text-transform: capitalize;
	color: #875D2A;
	/* These are secondary "alternative" buy channels: dim icon + text together so
	   they read as a softer, secondary option vs the primary content. */
	opacity: 0.78;
	transition: opacity 0.15s ease, color 0.15s ease;
}
.buy_sale_channel_heading_alternate_buy a:hover,
.buy_sale_channel_heading_alternate_buy a:focus-visible {
	opacity: 1;
}
	/* Floating share-toast container spacing (was Bootstrap p-3; explicit class so the
   buy-page zeroing rule below can win on ID specificity without !important) */
.artwork-share-toast-floating-container {
   padding: 1rem;
}


.repruct_content_collapse button.accordion-button,
.repruct_content_collapse button.accordion-button:not(.collapsed) {
	background: transparent;
	padding: 12px 20px;
	color: #3E342A;
	text-transform: capitalize;
	font-size: 19px;
}

.repruct_content_collapse .accordion-body {
	padding: 0 20px 16px;
	color: #6E665C;
	font-size: 16px;
	font-weight: 400;
}

.repruct_content_collapse .accordion-item {
	background-color: transparent;
	border: 0;
    padding-bottom:30px;
}

.repruct_content_collapse {
	border-top: 1px solid var(--cart-surface-border, #DCD3BF);
	border-bottom: 1px solid var(--cart-surface-border, #DCD3BF);
}
.accordion-collapse {
}
.repruct_content_collapse .accordion-body span {
	color: #875D2A;
	margin-left: 3px;
	font-weight: 500;
	font-size: 14px;
	text-transform: capitalize;
	cursor: pointer;
}


#summary_checkout .detail_cont_left {

}


.gesso-not-available-msg {
    font-size: 11px;
    color: #999;
    font-style: italic;
    white-space: nowrap;
    flex-shrink: 0;
}


#size-dropdown-list {
    display: none; /* Default hide */
}

#size-dropdown-list.is-open {
    display: block; 
}


.reproduc_tabs .custom-dropdown.open .dropdown-list,
#size-dropdown-list.is-open {
	z-index: 21;
}


 


.art_heading {
	font-size: 28px;
	color: #3E342A;
	font-family: var(--font-title);
	line-height: 33px;
	font-weight: 400;
	margin-bottom: 30px;
}

.art_text {
	font-size: 16px;
	font-weight: 600;
	color: #3E342A;
	margin-top: 23px;
	margin-bottom: 11px;
}

.art_detail {
	color: #3E342A;
	font-size: 14px;
	font-weight: 400;
}

.art-point {
	padding-left: 9px;
	margin-top: 15px;
}

.art-point li {
	list-style-type: disc;
	list-style-position: inside;
}

.art-point li::marker {
	color: #875D2A;
	font-size: small;
}

.art-point li a {
	color: #875D2A;
	text-decoration: underline;
	font-size: 14px;
	font-weight: 400;
	font-style: italic;
}

.choose_color div {
	width: 11px;
	height: 11px;
	margin: 0px auto 6px;
	border-radius: 50%;
}
.profile-photo-section .profile-photo-upload .form-control {
    display: block;
    width: 100%;
    background-color: var(--up-profile-photo-input-bg, #ffffff);
    border-radius: var(--up-profile-photo-input-radius, 4px);
    padding: var(--up-profile-photo-input-padding, 10px);
    border: 1px solid var(--up-profile-photo-input-border, #d6d6d6);
    color: var(--up-profile-photo-input-ink, inherit);
    font-size: var(--up-profile-photo-input-font-size, 14px);
}


.collection_other_detail {
	padding: 60px 160px 83px;
}

.collection_other_detail .form_heading {
	font-size: 29px;
	font-family: inherit;
	text-transform: capitalize;
	font-weight: 500;
	margin-bottom: 12px;
}

.form_img_colum {
	padding: 32px 16px 11px;
}

.form_img_colum .row {
	justify-content: center;
}


.yellow_cont {
	margin-top: 0px;
    flex-shrink: 0;
	color: #875D2A;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
}
.yellow_cont a {
    display: flex;
	color: #875D2A;
    align-items: center;
    gap: 8px;
    transition: color 0.25s ease;
}

.yellow_cont img {
    width: 30px;
    height: 27px;
    margin-left: -2px;
    /* margin-top: 2px; */
}


/* ── Shared frame angle hover preview (see frame_angle_hover_preview-V2.1.js) ── */
#frame-angle-preview {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9999;
	width: 40vw;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	box-shadow: 0 8px 28px rgba(62, 52, 42, 0.22);
}

#frame-angle-preview.visible {
	opacity: 1;
	visibility: visible;
}

#frame-angle-preview img {
	width: 100%;
	height: auto;
	max-height: 85vh;
	object-fit: contain;
	display: block;
}


.commn_strache_frame .btn-check:checked+.btn,
.commn_strache_frame .btn.active,
.commn_strache_frame .btn.show,
.commn_strache_frame .btn:first-child:active,
:not(.btn-check)+.btn:active {
	color: #3E342A;
	background-color: var(--cart-surface, #F7F2E1);
	border-color: unset;
}


/*.manual_cstm__box .manuall_box input {*/
/*	width: 100%;*/
/*	opacity: 0.6;*/
/*	height: 44px;*/
/*}*/

/*.manual_cstm__box .manuall_box span {*/
/*	position: absolute;*/
/*	top: 30px;*/
/*	width: 100%;*/
/*	left: 13px;*/
	/* padding-bottom: 20px; */
/*	font-size: 13px;*/
/*	font-weight: 400;*/
/*}*/
.text-muted a {
color:#30271D;
}

.size_valueslct {
	display: block;
	margin-top: -7px;
	color: #3E342A;
	font-size: 13px;
	font-weight: 400;
}

.buy_partner_shipping .why_choose_icon img {
	background: var(--cart-icon-bg, #E2DAC4);
	padding: 8px;
	outline: unset;
	outline-offset: unset;
	width: unset;
	height: unset;
}


.buy_partner_shipping .why_choose_info h5 {
	margin-top: 8px;
}

.buy_partner_shipping .why_choose_box_inner {
	gap: 16px;
	margin-bottom: 0px;
}

.buy_partner_shipping .why_choose_info p {
	margin-bottom: 8px;
}


.value {
	width: 52px;
	height: 52px;
	line-height: 52px;
	text-align: center;
	font-size: 18px;
	color: #3E342A;
}

.painting_box {
	width: 20%;
	text-align: center;
}

.painting_box img {
	width: 90%;
	margin-bottom: 29px;
	border: 20px solid transparent;
	padding: 11px;
	/* border-image removed 2026-07-06: assets/images/borderFrame.jpg never existed (silent 404) */
}

.painting_box h5 {
	font-family: var(--font-title);
	font-size: 18px;
	font-weight: 400;
	color: #3E342A;
}
.painting_box h5 a {
	color: #3E342A;
}
.painting_box p {
	font-style: italic;
	font-size: 13px;
	font-weight: 400;
	color: #3E342A;
}
.painting_box p a {
	color: #3E342A;
}


.wrapper_see_more {
	position: relative;
	width: 100%;
	cursor: pointer;
	margin-bottom: 20px;
}


/* Gradient overlay for the last 0.5 line */
.wrapper_see_more::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 1.5em;
	width: 100%;
	pointer-events: none;
}


/* Remove gradient when expanded */
.wrapper_see_more.expanded_see_more::after {
	display: none;
}

.rolledframe_details {
	display: none;
}

.rolledframe_details img {
	margin: 11px 0px;
	width: 100%;
}

.rolledframe_details p {
	margin-bottom: 0px;
}

.rolledframe_details p span {
	color: #d71015;
}


.art_history_wrapper {
	text-align: center;
	padding-bottom: 35px;
}

.art_his_text {
	display: inline;
	background: #e4ddc7;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 14px;
	padding: 5px;
}

.art_history_wrapper .heading_text {
	line-height: 43px;
	font-weight: 400;
	margin: 20px 0px;
}

.taggart {
	font-size: 14px;
	font-weight: 400;
	font-style: italic;
	color: #776E62;
	margin-bottom: 29px;
}

.history_art_img img {
	width: 100%; 
}

/* Article detail hero: full-width image, natural aspect ratio (no fixed-height crop) */
.article-hero-image {
	margin: 0 0 29px;
}

.article-hero-image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.acadamic_inner_box {
	padding-top: 25px;
	/*display: flex;*/
	gap: 38px;
	padding-top: 25px;
}


/* .tableContent {
	width: 20%;
	max-width:320px;
	min-width: 200px;
}
 */
.historycle_overview {
	width: auto;
}

.historycle_overview .tab-content {
	margin: 0px auto;
}

.historicle_box {
	margin-bottom: 55px;
}

.historicle_box h2[id^="tablecontent"],
.historicle_box h3[id^="tablecontent"] {
	scroll-margin-top: 120px;
}

#artist-biography .historicle_box {
	padding-bottom: 1.5em;
}

.historicle_box .heading_text {
	font-size: 29px;
	text-align: left;
	line-height: 38px;
	margin-bottom: 32px;
	font-weight: 400;
}

/* DigitalImage & ArtistReproduction buy pages — article typography (extracted from inline <style>; structure here, colors per brand in site CSS) */
.adc-buy-page-section .historicle_box,
.reproduction_main_page .historicle_box {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5em;
	text-align: justify;
	list-style: none;
}

.adc-buy-page-section .historicle_box ul,
.reproduction_main_page .historicle_box ul {
	padding-left: 26px;
}

.adc-buy-page-section .historicle_box ul li,
.reproduction_main_page .historicle_box ul li {
	list-style-type: disc;
	line-height: normal;
}

.adc-buy-page-section .historicle_box ul li b,
.reproduction_main_page .historicle_box ul li b {
	font-weight: 600;
}

.adc-buy-page-section .historicle_box h1,
.adc-buy-page-section .historicle_box h2,
.adc-buy-page-section .historicle_box h3,
.reproduction_main_page .historicle_box h1,
.reproduction_main_page .historicle_box h2,
.reproduction_main_page .historicle_box h3 {
	clear: right;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	margin-top: 23px;
	margin-bottom: 11px;
}


.related_img_box {
}

.related_img_box img {
    width: 100%;
    object-fit: cover;
    height: 100%;
    object-position: center;
}

.related_aricle_box h4 {
	font-size: 20px;
	font-weight: 500;
	line-height: 130%;
	color: #3E342A;
	margin-top: 21px;
}

.related_aricle_box p {
	font-size: 16px;
	font-weight: 400;
	color: #3E342A;
	line-height: 21px;
}

.explore_techniques {
	font-size: 13px;
	font-weight: 500;
	line-height: 15px;
	text-transform: uppercase;
	color: #875D2A;
	cursor: pointer;
}

.related_aricle_box {
	padding: 0px 0px 20px;
	border-bottom: 1px solid #D3C8AF;
	margin-bottom: 27px;
}

.tableContent .nav-link {
	font-size: 16px;
	font-weight: 400;
	color: #3E342A;
	border-radius: unset;
}

.tableContent .nav-link:hover {
	text-decoration: none;
}

.tableContent li.nav-item {
	border-left: 2px solid #3E342A26;
}

.tableContent .nav-pills .nav-link.active,
.tableContent .nav-pills .show>.nav-link {
	color: unset;
    font-weight: 500;
	background-color: unset;
	border-left: 2px solid #3E342A;
}

.historicle_box ,.historicle_box p {
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	color: #3E342A;
}

.historicle_box p b {
	font-weight: 600;
}

span.text-red-span {
	color: #B23333;
}

.language-selector {
	position: relative;
	
}

.taggart a {
	color: #776E62;
	text-decoration: underline;
}
.quick_facts_section {
	background: #E8E2CD;
	padding: 20px;
	width: 100%;
}

.quick_facts_section h4 {
	font-size: 14px;
	font-weight: 500;
	line-height: 28px;
	color: #3E342A;
	text-transform: uppercase;
}

/* Artist/article sidebar: Browse, TOC, Quick Facts — uniform 32px gaps */
.tableContent > * + *,
.tableContent .artist_sidebar_links + .table_of_contents_section,
.tableContent .table_of_contents_section + .related_artworks_sidebar,
.tableContent #table-of-contents + .related_artworks_sidebar,
.tableContent .table_of_contents_section + .quick_facts_section,
.tableContent .artist_sidebar_links + .quick_facts_section{
	margin-top: 32px;
}

/* Sidebar Quick Facts card styling — see site-{brand}-V2.0.css (.tableContent .quick_facts_section) */

.tableContent .artist_sidebar_links .nav-link {
	font-size: 14px;
}


.qf-more-trigger {
    cursor: pointer;
    color: #875D2A;
    font-weight: 600;
    font-size: 13px;
    text-decoration: underline;
    list-style: none;
    margin-top: 6px;
    user-select: none;
}

.qf-more-trigger:hover {
    color: #3E342A;
}

.qf-more-content {
    display: none;
}

.qf-more-content.open {
    display: block;
}


.art_header h4 {
	font-family: var(--font-title);
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	color: #EDE9DE;
}

.art_header p {
	font-size: 12px;
	line-height: 18px;
	font-weight: 400;
	color: #EDE9DEB2;
}


.ques_heading {
	font-size: 14px;
	line-height: 23px;
	font-weight: 500;
	color: #875D2A;
	text-transform: uppercase;
}

.ques_text {
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	color: #EDE9DE;
	margin: 10px 0px;
}

.ques_box .repro_radio label {
	color: #EDE9DE;
}

.question_option .repro_radio input[type="radio"]:after {
	background-color: #3e342b;
	border: 1px solid #877F76;
}

.submit_quiz .add_tocart_btn button {
	font-size: 14px;
}

.submit_quiz .add_tocart_btn {
	padding: 0;
}

.listOf_artwork_section {
	text-align: center;
	background: #E8E2CD;
	padding: 51px 160px;
}

.listOf_artwork_section h4 {
	margin-bottom: 42px;
	font-size: 39px;
	line-height: 38px;
	font-weight: 400;
	font-family: var(--font-title);
	color: #3E342A;
	text-transform: capitalize;
}

.listOf_artwork_tabs ul {
	justify-content: center;
}

.listOf_artwork_tabs a.nav-link {
	font-weight: 500;
	font-size: 15px;
	line-height: 26px;
	color: #3E342A;
	text-transform: capitalize;
	border-bottom: 1px solid #3E342A1F;
	border-radius: 0px;
}

.listOf_artwork_tabs .nav-pills .nav-link.active,
.listOf_artwork_tabs .nav-pills .show>.nav-link {
	color: #875D2A;
	background-color: unset;
	font-weight: 700;
	border-color: #875D2A;
}

.listOf_artwork_tabs .nav-link:hover {
	color: #3E342AB8;
}

.tabPane_inner_box {
	margin: 43px 0px 18px;
}

.tabPane_inner_box .row {
	align-items: center;
}

.tabPane_inner_box .vincent_color {
    font-size: 12px;
    margin-bottom: 6px;
    margin-top: 43px;
}
.view_all_art {
	margin-top: 34px;
}

.view_all_art a {
	font-size: 14px;
	font-weight: 500;
	color: #875D2A;
	text-transform: uppercase;
	text-decoration-line: none;
	transition: color 0.25s ease;
}

.artOf_paneBox p {
	font-size: 14px;
	font-weight: 500;
	line-height: 26px;
	color: #3E342A;
}
.artOf_paneBox p a{
	color: #3E342A;
}


.aeraof_img1 {
	width: 85%;
	margin: 0px auto 0px;
}

.aeraof_img2 {
	width: 85%;
	margin: 0px auto 0px;
}

.aeraof_img3 {
	width: 85%;
	margin: 0px auto 0px;
}


.aeraof_img1 img {
    box-shadow: rgba(0, 0, 0, 0.15) -9px 11px 14px;
	width: 100%;
}

.aeraof_img2 img {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 11px 14px;
	width: 100%;
}

.aeraof_img3 img {
    box-shadow: rgba(0, 0, 0, 0.15) 9px 11px 14px;
	width: 100%;
}

.artOf_paneBox .vincent_color {
    margin-top: 43px;
}


/* Artist landing hero: background image + consultation swiper overlay */
.artist_by_section {
	background: url("../images/Vinci.jpg");
	height: 500px;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	padding: 0px;
}


.artist_by_section .swiper-caption2::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 265%;
	height: 165%;
	transform: translate(-50%, -50%);
	opacity: 1;
	z-index: -1;
}

/* Label for each painting tile in list_paint grids on artist pages */
.painting_text {
    color: #3E342A;
    font-family: var(--font-body);
    font-weight: 500;
    font-style: Medium;
    font-size: 18px;
    leading-trim: NONE;
    line-height: 26px;
    letter-spacing: 0%;
}

.artistPage_Slider_section {
	background: #E8E2CD;
	padding: 18px 120px;
	text-align: center;
}

.artistPage_Slider_section .swiper-slide {
	background: unset;
}


.parent_slid_box h4 {
	margin-bottom: 65px;
	font-size: 46px;
	line-height: 33px;
	font-weight: 400;
	font-family: var(--font-title);
	color: #3E342A;
	text-transform: capitalize;
}


.swp_btn {
	width: 49px;
	height: 49px;
}

.swp_btn img {
	width: 100%;
	opacity: 0.7;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.swp_btn:hover img {
	opacity: 1;
}

/* ADC/OUA/Wikioo/Artsdot buy sliders: arrow is a background SVG (no <img>) */
.swp_btn--adc {
	opacity: 0.7;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
	transition: opacity 0.2s ease, filter 0.2s ease, background-color 0.2s ease;
}

.swp_btn--adc:hover {
	opacity: 1;
}

.swiper-button-next.swp_btn.swiper-button-disabled,
.swiper-button-prev.swp_btn.swiper-button-disabled {
	opacity: 0;
}


.swiper-button-prev.swp_btn {
    transform: rotate(180deg);
}

.artist_slid_box .vincent_color {
	margin-top: 35px;
	margin-bottom: 4px;
}

.artist_slider {
	position: relative;
}

.artist_slider .swiper-button-next,
.artist_slider .swiper-button-prev {
	top: var(--swiper-navigation-top-offset, 44%);
}

.artist_slider .swiper-button-next,
.swiper-rtl .artist_slider .swiper-button-prev {
	right: var(--swiper-navigation-sides-offset, -11px);
}

.artist_slider .swiper-button-prev,
.swiper-rtl .artist_slider .swiper-button-next {
	left: var(--swiper-navigation-sides-offset, -11px);
	right: auto;
}

.artist_slid_box .painting_text {
	line-height: 17px;
}
.artist_slid_box .painting_text a{
    color: #3E342A;
}
.parent_slid_box {
	border-bottom: 1px solid var(--cart-surface-border, #DCD3BF);
	padding: 50px 0px;
}

.artistPage_Slider_section .parent_slid_box:last-child {
	border-bottom: 0px;
}

.appraisel_main_section {
    padding: 20px 160px 52px;
    background: #E8E2CD;
}

.apprisel_table_section {
    margin-top: 38px;
}

.apprisel_table_section .form_heading {
    text-align: left;
}

.table_box {
    margin-top: 40px;
}

tbody, td, tfoot, th, thead, tr {
    border-color: #CCC2AE;
    border-style: solid;
    border-width: 0;
}

/* I1 @layer reconciliation (2026-07-09): our own unlayered `a{color:...}`
   tag resets (here and in each base-<brand>.css) now unconditionally beat
   Bootstrap's `.alert-link{color:var(--bs-alert-link-color)}` (now layered)
   even though it used to win on higher specificity, flattening alert links
   back to plain link/inherited color instead of the alert's emphasis color.
   Restated as a normal (non-important) unlayered class rule at Bootstrap's
   own specificity — no layer trick needed since neither side is `!important`. */
.alert-link {
    color: var(--bs-alert-link-color);
}

.table>:not(caption)>*>* {
    padding: 12px 15px;
    background-color: var(--cart-surface, #F7F2E1);
}

table th {
    color: #875D2A;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 13px;
    text-align: center;
    vertical-align: middle;
}

table td {
    text-align: center;
    vertical-align: middle;
}

table td h4 {
    font-size: 16px;
    font-weight: 600;
    color: #3E342A;
    margin-bottom: 4px;
}

table td p {
    font-size: 14px;
    font-weight: 400;
    color: #3E342A;
    margin-bottom: 0px;
}


table th:first-child {
    text-align: left;
    /*min-width: 555px;
    width: 555px;*/
}

table td:first-child {
    text-align: left;
}

.interaction-card table th:first-child, 
.interaction-card table th {
    text-align: left;
    min-width: 150px;
    width: 25%;
}

.usd_heading {
    font-size: 14px;
    font-weight: 600;
    color: #3E342A;
}

.table_price_color {
    font-size: 13px;
    font-weight: 600;
    color: #A83320;
} 

table td b {
    color: #3E342A;
    font-size: 18px;
    font-weight: 600;
}

.valuation_request {
    width: 52%;
    margin: 54px auto 83px;
}

.valuation_request h4 {
    text-align: center;
    font-size: 38px;
    color: #3E342A;
    font-family: var(--font-title);
    line-height: 33px;
    font-weight: 400;
    margin-top: 6px;
    margin-bottom: 44px;
}


.fome_sec {
    margin-bottom: 20px;
}

.input_box {
    margin-bottom: 8px;
}

.input_box input {
    background: var(--cart-surface, #F7F2E1);
    border: unset;
    border-radius: unset;
    width: 100%;
    color: #3E342A;
    font-size: 14px;
    font-weight: 500;
    height: clamp(46px , 2.917vw , 56px);
    text-transform: uppercase;
    padding: 12px 14px;
    outline: unset;
}

.pr_input {
    padding-right: 4px;
}

.pl_input {
    padding-left: 4px;
}

.form-control:focus {
    color: #3E342A;
    background-color: #f7f2e2;
    box-shadow: unset;
}


.input_box textarea {
    background: var(--cart-surface, #F7F2E1);
    border: unset;
    border-radius: unset;
    color: #3E342A;
    font-size: 13px;
    font-weight: 500;
    height: 120px;
    text-transform: uppercase;
    padding: 12px 14px;
    outline: unset;
    resize: none;
}

.input_label_text {
    background: var(--cart-surface, #F7F2E1);
    border: unset;
    border-radius: unset;
    color: #3E342A;
    font-size: 13px;
    font-weight: 400;
    height: 50px;
    text-transform: uppercase;
    padding: 6px 14px;
    outline: unset;
}

.input_label_text input {
    padding: 0px;
    border: 0;
    background: transparent;
    text-transform: uppercase;
    font-size: 13px;
    color: #3E342A;
    opacity: 0.6;
    font-weight: 500;
}


/* Small italic help/hint text under form labels + the upload file-type hint.
   Was a hardcoded warm brown (#3E342A in global-style/global-custom) that
   leaked into every brand; tokenised here with the ADC-warm fallback so WA/ADC
   keep their look and each site-<brand>-V2.0.css overrides --appraisal-help-text. */
.art-appraisal-page .valuation_form_box p,
.art-appraisal-page .img_extention {
    color: var(--appraisal-help-text, #3E342A);
}


.art_info_img img {
	box-shadow: #00000040 2px 2px 10px 5px;
	max-height: 75vh;
    max-width: 80vw;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto; /* optional: center horizontally */
}
/* Right column on artwork PDP: price, options, tabs, add-to-cart */
.art_info_details {
    background: #E8E2CD;
    padding: 24px 30px 30px;
    border: 1px solid var(--cart-surface-border, #DCD3BF);
    box-shadow: #7D746E3D 4px 8px 20px 0px;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    /* Align the detail card's top edge with the image column's top edge */
    margin-top: 0;
    margin-bottom: 20px;
}
/* About-this-artwork infobox — same frame as .art_info_details; follows other sections */
.historicle_box.artwork-info-infobox {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    background: #E8E2CD;
    padding: 15px 30px 15px;
    border: 1px solid var(--cart-surface-border, #DCD3BF);
    box-shadow: #7D746E3D 4px 8px 20px 0px;
    box-sizing: border-box;
    position: relative;
}
.artinfo_top h4,
.historicle_box.artwork-info-infobox .art-info-page-title {
    color: #3E342A;
    font-size: 32px;
    font-weight: 400;
    line-height: 34px;
    font-family: var(--font-title);
    margin-top: 0;
    margin-bottom: 18px;
}
.historicle_box.artwork-info-infobox {
    text-align: left;
}
.historicle_box.artwork-info-infobox ul li {
    line-height: 1.5em;
    margin-bottom: 0.25em;
}
.historicle_box.artwork-info-infobox .artwork-infobox-label {
    font-weight: 400;
}
.historicle_box.artwork-info-infobox .artwork-info-infobox-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(120px, 200px);
    gap: 24px 16px;
    align-items: start;
}
.historicle_box.artwork-info-infobox .artwork-info-infobox-col {
    min-width: 0;
    background: transparent;
    /* Breathing room inside each of the 3 columns (About / Quick Facts / QR) */
    padding: 4px 14px;
}
.historicle_box.artwork-info-infobox .artwork-info-infobox-quick-facts ul,
.historicle_box.artwork-info-infobox .artwork-info-infobox-about ul {
    padding-left: 26px;
    margin: 0;
}
.historicle_box.artwork-info-infobox .artwork-info-infobox-quick-facts ul li {
    font-size: inherit;
    line-height: 1.5em;
}
/* Quick Facts column must read exactly like the About column — cancel the legacy
   .box_facts typography (13px / hard-coded brown) inside the infobox; both columns
   share the label-span + <b>value markup. */
.historicle_box.artwork-info-infobox .box_facts ul li {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: 1.5em;
    margin-bottom: 0.25em;
}
/* (0,2,3) — outranks the legacy .box_facts ul li b (0,1,3) for the QF column while
   still letting brand rules like WK's serif li b (0,3,2) win in BOTH columns. */
.historicle_box.artwork-info-infobox ul li b {
    font-weight: 600;
}
.historicle_box.artwork-info-infobox ul li b a,
.historicle_box.artwork-info-infobox .box_facts ul li a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}
/* Quick-facts labels come from lowercase JSON keys — sentence-case them to match
   the About column labels ("Medium:" like "Original dimensions:"). */
.historicle_box.artwork-info-infobox .box_facts .artwork-infobox-label {
    display: inline-block;
}
.historicle_box.artwork-info-infobox .box_facts .artwork-infobox-label::first-letter {
    text-transform: uppercase;
}
.historicle_box.artwork-info-infobox .artwork-info-infobox-qf-sublist {
    margin: 4px 0 0;
    padding-left: 18px;
}
.historicle_box.artwork-info-infobox .artwork-info-infobox-qr-col {
    text-align: center;
}
.historicle_box.artwork-info-infobox .artwork-info-infobox-qr {
    width: 100%;
    max-width: 180px;
    margin: 0 auto;
}
.historicle_box.artwork-info-infobox .artwork-info-infobox-qr img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 991.98px) {
    .historicle_box.artwork-info-infobox .artwork-info-infobox-layout {
        grid-template-columns: 1fr 1fr;
    }
    .historicle_box.artwork-info-infobox .artwork-info-infobox-about {
        grid-column: 1 / -1;
    }
}
@media (max-width: 767.98px) {
    .historicle_box.artwork-info-infobox .artwork-info-infobox-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .historicle_box.artwork-info-infobox .artwork-info-infobox-about {
        grid-column: auto;
    }
    .historicle_box.artwork-info-infobox .artwork-info-infobox-qr {
        max-width: 160px;
    }
}


/* Metadata list / famous-reference link color — overridden per-site */
.artwork-info-meta-link { color: #6E665C; transition: color 0.25s ease; }
.artwork-info-meta-link:hover { color: #3E342A; }

.artinfo_top p {
    font-size: 14px;
    color: #3E342A;
    font-weight: 400;
    margin-top: 18px;
}
.artinfo_top ul li {
    font-size: 14px;
    font-weight: 400;
}
.artinfo_top ul li b {
    font-weight: 600;
}
.art_info_inner {
    background: var(--cart-surface, #F7F2E1);
    padding: 20px 23px;
    margin-bottom: 20px;
    font-family: var(--font-title);
}
.art_info_inner p {
    font-size: 14px;
    color: #3E342A;
    font-weight: 400;
    margin-bottom: 0px;
}
.art_info_details ul {
    margin-bottom: 23px;
}
.art_info_inner h4 {
    color: #B23333;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
}
.art_info_details.landscape_det {
    display: flex;
    gap: 30px;
    margin-top: 60px;
}
.landscape_img {
    margin: auto; 
}
.profile_box {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}
.profile_img img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
}
.profile_name a{
    font-size: 14px;
    font-weight: 400;
    color: #3E342A;
}
.profile_year {
    font-size: 12px;
    font-weight: 400;
    color: #3E342A;
}

#picture__input {
  display: none;
}
/* Search / browse: filter sidebar panel next to results */
.search_sec .sidebar_box {
padding:20px;
}
/* Artwork cards in catalog grids (search, similar works): image + body column widths */
.custom_search .search_card .search_img, .custom_search .search_card .searchCard_body {
    width: 100%;
    height: auto;
}
/* File-drop / preview surface for custom upload fields (reproduction, profile) */
.picture {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3E342A;
    width: 100%;
    cursor: pointer;
    font-family: sans-serif;
    transition: color 300ms ease-in-out, background 300ms ease-in-out;
    outline: none;
    overflow: hidden;
    height: 400px;
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
}

.picture__img {
    max-width: 85%;
    height: 330px;
}
span.picture__image {
    text-align: center;
    width: 90%;
}
.float_drop_down label {
    color: #3E342A;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
    padding: 9px 11px 0px;
    position: relative;
    top: 7px;
}
.cus_float_heading {
    font-size: 14px;
    color: #3E342A;
    font-weight: 500;
    text-transform: capitalize;
    display: block;
}


.float_drop_down .arrow-icon{
    position: relative;
    top: -15px;
}
.float_drop_down span {
    max-width: 100%;
    text-transform: capitalize;
}
.preview_img {
    width: 75%;
    margin: 29px auto;
    position: relative;
}
.preview_img p {
    position: absolute;
    top: 52%;
    left: 52%;
    transform: translate(-50%, -50%);
    color: #FFF6DC;
    font-size: 21px;
    font-family: var(--font-title-accent);
    width: 76%;
    font-weight: 400;
    line-height: 29px;
    margin-bottom: 0px;
}
.preview_img img {
    width: 100%;
    height: 405px;
}
.cart_summary_box .why_choose_info h5 {
    font-size: 16px;
    line-height: 16px;
color:#3E342A;
    font-weight: 600;
}
.cart_summary_box .why_choose_box_inner {
    gap: 16px;
    margin-bottom: 6px;
}
.cart_summary_box .why_choose_info p {
    font-size: 16px;
}
.cart_summary_box .why_choose_icon img {
    width: 35px;
    height: 35px;
}
.table_in_dec .value {
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.cart_item_box .summery_checkout {
    margin-top: 0px;
    border: 0px;
    padding: 0px 24px;
}
.cart_item_box .sum_chek_text {
    padding: 24px 0px;
}
.cart_item_box .total_price_box {
    padding: 24px 0px;
}
.cart_item_box  .add_tocart_btn {
    padding: 0px 0px 14px;
}
.cart_table_box table th {
    color: #3E342A;
font-family: var(--font-body);
font-weight: 400;
font-style: Regular;
font-size: 18px;
leading-trim: NONE;
line-height: 28px;
letter-spacing: 0%;
text-transform: uppercase;
    text-align: left;
    border-top: 1px solid var(--cart-table-border, #CCC2AE);
    min-width: 125px;
}
.cart_table_box .table>:not(caption)>*>* {
    padding: 20px 0px;
    background-color: unset;
}
.p_cart_table_box .table>:not(caption)>*>* {
    padding: 20px;
    background-color: unset;
border-top: 1px solid var(--cart-table-border, #CCC2AE);
}
.cart_table_box table th:first-child {
    min-width: 32px;
    width: 32px;
}
.cart_table_box table td:first-child {
    width: 32px;
    max-width: 32px;
    min-width: 32px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}
.cart_table_box table th:last-child {
    text-align: right;
}
.cart_table_box table {
    width: 100%;
}
.cart_table_box .usd_text {
    font-size: 18px;
}
.usd_text {
    color: #3E342A;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}
.cart_table_box table td {
    border-bottom: 0px;
    padding: 38px 16px;
}
.item_data 
.item_data_img {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}
.item_data_img img {
    height: 120px;
}
.item_data_detail .vincent_color {
    margin-bottom: 0px;
}
.cart_table_box table td {
    vertical-align: top;
}


.cart_summary_box .detail_img {
    width: 68px;
    height: 48px;
}

.section-title span {
    width: 32px;
    height: 32px;
    background-color: #E8E2CD;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
}

.section-title {
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}


.result_show h2 {
    font-size: 24px;
    font-weight: 500;
}
.result_show {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.Artworks_ection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}


.meta {
    font-size: 12px;
    color: #777;
}

.see-all {
    display: block;
    text-align: center;
    padding: 11px;
    border: 1px solid #875D2A;
    font-size: 16px;
    text-transform: uppercase;
    color: #875D2A;
    text-decoration: none
}

.artist-card {
    border: 1px solid #d7b7a6;
    background-color: #f5f1e6;
    padding: 45px;
    border-radius: 5px;
    margin: 15px auto;
}
.artist-card .Artworks_ection {
    margin-top: 40px;
    align-items: center;
}
.artist-card .Artworks_ection h6{
    font-size: 14px;
    color: #B23333;
    margin-bottom: 0;
}
.artist-card .Artworks_ection .meta{
    font-size: 15px;
}
.articals-caed_ef{
    font-size: 16px;
    text-align: left;
    margin-top: 10px;
}

.artist-card img {
    width: 100%;
    height: auto;
}


.artist-location {
    font-size: 20px;
    color: #333;
    font-weight: 600;
    text-align: left;
    margin: 3px 0;
}

.artist-years {
    font-size: 13px;
    color: #666;
}

.artist-desc {
    font-size: 16px;
    color: #938b7c;
    margin: 35px 0;
    font-weight: 500;
    font-style: italic;
    line-height: 24px;
    text-align: left;
}


.btn-view {
    margin-top: 12px;
    background-color: #875D2A;
    color: #fff;
    display: block;
    width: 100%;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 13px 20px;
    border-radius: 0;
}
.btn-view:hover {
    background-color: #4a3523;
    color: #fff;
}
@media screen (min-width: 600px) and (max-width: 767px)  { 
.container, .container-sm {
    max-width: 600px;
}
}
@media screen and (min-width: 760px) and (max-width: 1024px) {
.text-center.sendmsg_textt {
padding:40px 0;
}
}

@media screen and (min-width: 1200px) and (max-width: 1699px) {
    .container {
        max-width: 95%;
    }
.text-center.sendmsg_textt {
padding:40px 0;
}
.text-center.sendmsg_textt img {
    padding-bottom: 8px;
}
}

@media screen and (min-width: 1780px) { 
.container{
        max-width: 1700px;
}
.why_choose_right {
	padding-right: 160px;
}
}
@media screen and (min-width: 1700px) {
 

    .artist-desc {
    font-size: 20px;
    line-height: 33px;
}
    
    .meta {
        font-size: 16px;
    }

    
    }


/* /// */
select.form-select.form-select-sm {
    background-color: transparent;
    color: white;
    border: none;
    width: 130px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    margin: 0 0 0 -58px;
}


   select option{
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 32px;
    font-weight: 500;
    color: #3E342A;
}
.form-select {  
 --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.art-cards {
border:0;
border-radius:0;
width:100%;
padding:0 ;
background-color:#E4DDC7;
}

.art-cards .art-main-img img
{
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center;
}
button.remove-btn {
    border-radius: 50%;
    background-color: #EDE9DEBF;
    height: 36px;
    width: 36px;
    display: flex
;
    border: 0;
    align-items: center;
    justify-content: center;
    padding: 8px;
    position: absolute;
    right: 8px;
    bottom: 8px;
}


/* suggestion color */

/* Input autofill (jab browser suggest kare) */
input.form-control:-webkit-autofill {
    background-color: #E4DDC7;   
    -webkit-box-shadow: 0 0 0px 1000px #E4DDC7 inset;
    -webkit-text-fill-color: #3E342A;  /* text color */
    caret-color: #3E342A;
}

input.form-control:-webkit-autofill:hover {
    background-color: #3E342A;
    -webkit-box-shadow: 0 0 0px 1000px #E4DDC7 inset;
    -webkit-text-fill-color: #3E342A;
}


.text-op-20 {
color:#875D2A;
}


/* Top 100 */
/* .top100_banner {
    padding: 60px 0;
    text-align: center;
    background: url("/static/images/top100.jpg") no-repeat;
    background-size: cover;
} */
.top100_banner h2 {
    font-family: var(--font-title-accent);
    font-weight: 400;
    font-size: 70px;
    line-height: 1;
    color: #E8E5DC;
    text-align: center;
position: relative;
    z-index: 9;
    margin: 0;
    padding-bottom: 25px;
}
/* ===== top_100_artworks (zigzag gallery) =====
   Structure is shared by all 8 sites and lives here. Per-site brand colours are
   supplied via the --top100-* tokens (or deeper overrides) inside each
   site-{brand}-V2.0.css. Fallbacks keep the page styled if a token is unset. */
.top100-artwork-list {
    width: 100%;
    padding: 170px 0 70px;
}
.top100-artwork-list__container {
    max-width: 1400px;
}
.top100-artwork-list__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.top100-artwork-list__col {
    position: relative;
    width: 50%;
    margin-top: -140px;
}
.top100-artwork-list__col:nth-child(1) {
    margin: 0;
}
.top100-artwork-list__col:nth-child(odd) {
    align-self: flex-start;
}
.top100-artwork-list__col:nth-child(even) {
    align-self: flex-end;
    display: flex;
    justify-content: center;
}
.top100-artwork-card__rank {
    position: absolute;
    top: -125px;
    font-size: 240px;
    font-family: var(--font-title);
    line-height: 165px;
    margin: 0;
    color: var(--top100-rank-color, #DFDBD0);
}
.top100-artwork-list__col:nth-child(odd) .top100-artwork-card__rank {
    right: -50px;
}
.top100-artwork-list__col:nth-child(even) .top100-artwork-card__rank {
    left: -50px;
}
.top100-artwork-card {
    width: max-content;
    position: relative;
}
.top100-artwork-card__inner {
    padding: 30px;
    position: relative;
    transition: all 0.4s;
    border: 1px solid transparent;
    z-index: 99;
}
.top100-artwork-card:hover .top100-artwork-card__inner {
    border: 1px solid var(--top100-card-border, #DCD3BF);
    background: var(--top100-card-bg, #E8E2CD);
}
.top100-artwork-card__tilt {
    display: block;
    perspective: 1000px;
    transition: transform 0.2s ease;
}
.top100-artwork-card__photo {
    display: block;
    width: 100%;
    border-radius: 8px;
    transform: scale(1);
    transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.4, 1), filter 0.3s ease;
    will-change: transform, filter;
}
.top100-artwork-card__photo--framed {
    width: auto;
    border: 2vw solid transparent;
    border-image-slice: 500;
    border-image-repeat: round;
}
.top100-artwork-card__details {
    margin-top: 40px;
    transition: all 0.4s;
    opacity: 0;
}
.top100-artwork-card:hover .top100-artwork-card__details {
    opacity: 1;
}
.top100-artwork-card__meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;
}
.top100-artwork-card__meta p {
    margin: 0;
    color: var(--top100-ink, #3E342A);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}
.top100-artwork-card__artist a {
    font-size: 14px;
    color: var(--top100-accent, #B23333);
    text-transform: uppercase;
}
.top100-artwork-card__year {
    opacity: 0.5;
}
.top100-artwork-card__title {
    font-size: clamp(20px , 1.4vw , 28px );
    line-height: 120%;
    font-weight: 500;
    color: var(--top100-ink, #3E342A);
    display: -webkit-box;
    width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.top100-artwork-card__title a {
    color: inherit;
}

/* ===== top_100_artists (portrait card grid) =====
   Structure shared by all 8 sites; per-site brand colours come from the
   --top100-* tokens (or deeper overrides) in each site-{brand}-V2.0.css. */
.top100-artist-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: stretch;
}
.top100-artist-grid__item {
    display: flex;
}
.top100-artist-card {
    width: 250px;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1.25rem;
    background: var(--top100-card-bg, #ffffff);
    border: 1px solid var(--top100-card-border, #eeeeee);
    border-radius: var(--top100-card-radius, 0);
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.top100-artist-card__media {
    display: block;
    margin: 0 auto 1rem;
}
.top100-artist-card__photo {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--top100-card-border, #eeeeee);
    margin: 0 auto;
}
.top100-artist-card__name {
    margin-bottom: 1rem;
    font-weight: 700;
}
.top100-artist-card__name a {
    text-decoration: none;
    color: var(--top100-ink, #212529);
}
.top100-artist-card__desc {
    flex-grow: 1;
    margin: 0;
    color: var(--top100-muted, #6c757d);
    font-size: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 768px) {
.text-center.sendmsg_textt {
padding:24px 0;
}
.preferences .e_card_section label, .e_card_form label, .e_card_form .form-group label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0.6;
    color: #3E342A;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 500;
    padding: 1rem .75rem;
    pointer-events: none;
    transform-origin: 0 0;
    transition: transform .15s ease-in-out, font-size .15s ease-in-out;
}
.preferences .e_card_form .form-control {
    padding: 17px 13px;
}
.fav-icon-artwork,
.buy_sale_channel_heading_alternate_buy {
    border-bottom: 1px solid var(--cart-surface-border, #DCD3BF);
    padding-bottom: 14px;
    margin-bottom: 14px;
    margin-top: 24px;
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    justify-content: space-between;
}
.fav-icon-artwork > a,
.fav-icon-artwork > .artwork-share-wrapper,
.buy_sale_channel_heading_alternate_buy > a {
    margin: 0 10px 8px 0;
}
.repruct_content_collapse .accordion-item {
    padding-bottom:16px;
}

.fav-icon-artwork a,
.buy_sale_channel_heading_alternate_buy a {
    gap: 4px;
    font-size: 14px;
}
}

@media (max-width: 992px) {
	.top100-artwork-list__col {
    width: 100%;
    align-self: flex-start;
    margin: 0;
    display: flex;
    justify-content: center;
}
.top100-artwork-card {
    width: 100%;
}
.top100-artwork-card__rank {
    right: auto;
    left: auto;
    top: -150px;
}
.top100_banner h2 {
    font-size: 50px;
}
}
/* top100  */
/* Quiz */
.repro_radio.mark_right_answer, .repro_radio.mark_wrong_answer {
    position: relative;
    border-radius: 4px;
    align-items: center;
    padding: 8px 40px 8px 10px;
    margin-bottom: 10px;
}
.repro_radio.mark_wrong_answer {
    border: 1px solid #D7352C;
}
.repro_radio.mark_right_answer {
    border: 1px solid #76C92B;
}
.repro_radio.mark_right_answer.mark_right_answer2 {
    border: 0;
}
.repro_radio.mark_right_answer:after, .repro_radio.mark_wrong_answer:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}
.repro_radio.mark_wrong_answer:after {
    background: url(https://dev.allpaintingsstore.com/static/images/cross.png);
    background-size: 100%;
}
.repro_radio.mark_right_answer:after {
    background: url("https://dev.allpaintingsstore.com/static/images/checkCirrcle.png");
    background-size: 100%;
}
.quiz_result_text {
    padding: 20px;
    border: 2px solid #63AF1F;
    color: #EDE9DE;
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
}

#id_newsletter_subscription {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding-left: 30px;
  position: relative;
  font-family: Arial, sans-serif;
  color: #333;
}

#id_newsletter_subscription::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  /* Dimensions aur Color */
  width: 24px;
  height: 24px;
  border: 1px solid #3E342A;
  border-radius: 4px;
}
.col-md-6 .card {
    border: 1px solid var(--cart-surface-border, #DCD3BF);
    padding: 20px;
    border-radius: 0;
    background-color: #E8E2CD;
    margin-bottom: 24px;
    height: -webkit-fill-available;
}

.col-md-6 .card .card-title {
   font-family: var(--font-title);
font-weight: 400;
font-style: Regular;
font-size: 40px;
leading-trim: NONE;
line-height: 40px;
letter-spacing: 0%;
text-align: center;
color:#3E342A;
margin-bottom:16px;
}
.col-md-6 .card-content.text-center img{
display:none;
}

 
.success_card .success_actions .btn {
	width: 100%;
	height: 50px;
	background: #875D2A;
	font-family: var(--font-body);
	font-weight: 500;
    border-radius:0;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	text-transform: uppercase;
	color: #EDE9DE;
	border: 1px solid #835e2c;
}

.success_card .success_actions .btn {
    padding: 12px 24px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}
@media (max-width: 768px) {
        .success_card .success_actions .btn {
        max-width: 250px;
    }
}

.row.mt-30 .col-md-12 .card {
background: #E8E2CD;
    border: 1px solid var(--cart-surface-border, #DCD3BF);
    padding: 18px ;
border-radius:0;
max-width:610px;
margin:auto;
}

.row.mt-30 .col-md-12 .card h3 {
    font-family: var(--font-title);
    font-weight: 400;
    font-style: Regular;
    font-size: 40px;
    leading-trim: NONE;
    line-height: 40px;
    letter-spacing: 0%;
    color: #3E342A;
}

.row.mt-30 .col-md-12 .card label {
    font-size: 16px;
    font-weight: 500;
    color: #3E342A;
    margin-bottom: 11px;
}


.row.mt-30 .col-md-12 .card input {
    background: var(--cart-surface, #F7F2E1);
    border: unset;
    border-radius: unset;
    width: 100%;
    color: #3E342A;
    font-size: 14px;
    font-weight: 500;
    height: clamp(46px, 2.917vw, 56px);
    text-transform: uppercase;
    padding: 12px 14px;
    outline: unset;
}

/* 
.item_data_img .cart_order_image_item {
	float: left;
	width: 5vw;
	height: auto;
	max-height:5vh;
	object-fit: cover;
	object-position: center;
	margin: 0.1vw;
}
 */


/* 1. search_card ko relative position dein */
.search_card {
    position: relative; 
}
.same-space-card .search_img {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Catalog / FTS grid: keep thumbnails anchored to the top of the image cell. */
.custom_search .search_img {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.custom_search .search_img > a {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

/* Size image cell to the thumbnail; text sits directly underneath. */
/* Show full artwork uncropped (no fixed height / cover clipping) with a 10px breathing margin. */
.custom_search .search_img img {
    width: calc(100% - 20px);
    height: auto;
    object-fit: contain;
    object-position: top center;
    margin: 10px;
}

/* BEM catalog card image fills the media box (which sets padding:0 / overflow:hidden),
   so it uses width:100%. The legacy .custom_search .search_img img rule above adds
   margin:10px, which — combined with the 100% width — pushes the right edge past the
   media box and clips the frame border on the right. Zero the margin here so the framed
   (box-sizing:border-box) image fits exactly inside its container. */
.custom_search .artwork-catalog-card .artwork-catalog-card__image {
    margin: 0;
}

.custom_search .search_card .searchCard_body {
    margin-top: 12px;
}


.stretched-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1; 
}


#id_profile_photo {
    padding: 45px 14px 50px;
}
#id_email {
    padding: 41px 10px 15px;
}


.custom_search .search_card {
    cursor: default;
}


/* 

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

 */


.alert-info {
    color: #504943;
    background-color: #f7f3e7;
    border-color: #c9c9c9;
    border-radius: 0px;
}


.full_width_hero_banner_with_background_image ul.nav-list li a , .full_width_hero_banner_with_background_image ul.nav-list li {
	color:#E8E5DC;
}


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


.search_sec.catalog-groupby-page .search_filters {
	margin-bottom: 1rem;
}


/* Total-price label (was inline opacity:0.8) */
.total_price_box .total_price-label { opacity: 0.8; }


/* Cart summary sidebar — parchment panel + benefit icons (tokens in site-*.css) */
:root {
	--cart-surface: #F7F2E1;
	--cart-surface-border: #DCD3BF;
	--cart-inset: #F3EFE6;
	--cart-icon-bg: #E2DAC4;
	/* table rule defaults to the brand surface border so the line-item table
	   on the left matches the summary panel on the right per brand */
	--cart-table-border: var(--cart-surface-border, #CCC2AE);
	--cart-summary-ink: #3E342A;
	--cart-summary-ink-2: #3E342A;
	--cart-summary-accent: #57920A;
	/* Checkout CTA — brand accent fill with light text (was hardcoded #875D2A) */
	--cart-checkout-bg: var(--cart-summary-accent, #875D2A);
	--cart-checkout-text: #ffffff;
	/* table header strip — each site-*.css overrides these two tokens */
	--cart-th-bg: var(--cart-surface-border, #CCC2AE);
	--cart-th-color: var(--cart-summary-ink, #3E342A);
}

/* ===== start_selling_* — step image flat offset shadow =====
   Structure shared by the 8 brands (extracted from former inline style on
   .step-image in start_selling_private/artist/business). Each site sets its
   own --step-image-shadow tint in site-<brand>-V2.0.css. Neutral fallback
   keeps the legacy warm-cream look if a brand does not override the token. */
.start-selling-steps .step .step-image {
    box-shadow: -15px 15px 0px var(--step-image-shadow, #d5cbaf);
}


/* Frame detail preview image (#frame-image-1, toggled by JS) */
#frame-image-1 {
    display: block;
    height: 150px;
    mix-blend-mode: multiply;
}


/* ============================================================================
   restyle8 — residual inline-style extractions (system-check template sweep)
   ============================================================================ */

/* Artwork-list active-filter & sidebar colour swatches.
   Only the dynamic background-color stays inline; structure/border move here.
   NB: `.color-search-page .color-dot` is themed separately in each site CSS
   (higher specificity), so those pages are unaffected. Brands may theme the
   border on other pages via --color-dot-border. */
.color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--color-dot-border, #ccc);
    vertical-align: middle;
}
.color-dot--summary { margin: 0 4px 2px; }
.color-dot--inline  { margin-right: 4px; }
.color-dot--lg      { width: 18px; height: 18px; margin-right: 8px; }

body.collectible-edit-page .status-badge {
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 0.9em;
}


/* --- account/email_confirm.html: verification status alerts --- */
.email-confirm-alert {
    padding: 15px;
    border-radius: 5px;
}
.email-confirm-alert p { margin: 0; }
.email-confirm-alert .email-confirm-alert-sub {
    margin: 10px 0 0;
    font-size: 0.9em;
}
.email-confirm-alert i { margin-right: 8px; }
.email-confirm-alert.alert-success {
    background-color: var(--alert-success-bg, #d4edda);
    border-color: var(--alert-success-border, #c3e6cb);
    color: var(--alert-success-ink, #155724);
}
.email-confirm-alert.alert-warning {
    background-color: var(--alert-warning-bg, #fff3cd);
    border-color: var(--alert-warning-border, #ffeeba);
    color: var(--alert-warning-ink, #856404);
}
.email-confirm-alert.alert-danger {
    background-color: var(--alert-danger-bg, #f8d7da);
    border-color: var(--alert-danger-border, #f5c6cb);
    color: var(--alert-danger-ink, #721c24);
}


/* --- includes/artwork_similar_slider_section.html --- */
.artworksimilarslider ~ .swiper-button-next.swp_btn.swiper-button-disabled,
.artworksimilarslider ~ .swiper-button-prev.swp_btn.swiper-button-disabled {
    opacity: 0.3;
}

/* artworksimilarslider — Clip any image scale overflow; prevent hover bleed onto text */
.artworksimilarslider .artist_slid_box {
    overflow: hidden;
}

/* artworksimilarslider — Image link: confine hover to image pixels.
   position:relative makes the <a> the containing block for any ::after
   veil pseudo-element placed here by site-specific CSS. */
.artworksimilarslider .artist_slid_box > a {
    display: block;
    overflow: hidden;
    line-height: 0;
    position: relative;
}
.artworksimilarslider .artist_slid_box > a img.mouseover_effect_images {
    display: block;
    width: 100%;
}

.artworksimilarslider .view_all_art .vincent_color {
    margin-top: 0;
    margin-bottom: 6px;
    text-align: center;
    transition: opacity 0.2s ease;
}
.artworksimilarslider .view_all_art .vincent_color:hover {
    opacity: 0.65;
}
.artworksimilarslider .view_all_art a.vincent_color {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* artworksimilarslider — Text: artwork title link hover underline reveal */
.artworksimilarslider .view_all_art > a:not(.vincent_color) {
    display: inline-block;
    transition: color 0.15s ease, text-decoration-color 0.2s ease;
    text-decoration: underline;
    text-decoration-color: transparent;
}
.artworksimilarslider .view_all_art > a:not(.vincent_color):hover {
    text-decoration-color: currentColor;
}


@keyframes wheel-of-affinities-intro-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}


@keyframes wheel-of-affinities-work-enter {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}


/* ===== error_404.html + error_general.html — shared structure (colours in site-*.css) ===== */

/* Photo background on the general error page (500/403/400) */
body.error-general-page main {
    background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
                      url("/static/images/errors/error-404.c6ba2dc19708.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* Icon circles (replaces inline style="width/height") */
.error-general__icon    { width: 50px; height: 50px; flex-shrink: 0; }
.error-general__icon--sm { width: 40px; height: 40px; flex-shrink: 0; }

/* Home-button padding fix (replaces style="padding:14px") */
.error-general__btn--home { padding: 13px 24px; }

/* 404 CTA button group */
.error-404 .action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}


/* Contact paragraph */
.error-404 .contact-info    { border-top: 1px solid var(--mist, #e0e0e0); }
@keyframes aprir-shimmer {
    0% { background-position: 180% 0; }
    100% { background-position: -20% 0; }
}
.artwork-preview-in-interior-room-arrow,
.artwork-preview-in-interior-room-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--aprir-panel, #ffffff);
    color: var(--aprir-ink, #2b2b2b);
    border: 1px solid var(--aprir-line, #d8d6d2);
    border-radius: var(--aprir-radius, 6px);
    font-size: 0.9rem;
    height: 2.5rem;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.artwork-preview-in-interior-room-arrow:focus-visible,
.artwork-preview-in-interior-room-select:focus-visible,
.artwork-preview-in-interior-room-buy:focus-visible {
    outline: none;
    border-color: var(--aprir-accent, #2b2b2b);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aprir-accent, #2b2b2b) 28%, transparent);
}
/* Bid modal */
#auctionBidModal .modal-title { color: var(--auction-ink, #161310); }
/* ===== /artwork_buy_ProductAuction ===== */