*/
width: 100%;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
/* optional: balance content between columns (or use 'auto' to fill sequentially) */
column-fill: balance;
hyphens: auto;
}
/* paragraphs inside the wrapper: smaller margins so columns don't get big gaps */
.dood-text > p {
margin: 0 0 1em;
/* allow paragraphs to break across columns (remove if you want paragraphs to stay whole) */
-webkit-column-break-inside: auto;
-moz-column-break-inside: auto;
column-break-inside: auto;
break-inside: auto;
}
/* responsive breakpoints */
@media (max-width: 1024px) {
.dood-text {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media (max-width: 767px) {
.dood-text {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
/* Creator Carousel Fade Stop */
/* Universal slide override — prevents any hover-dimming or filter changes */
.creator-content-page .dood-creator-carousel,
.creator-content-page .dood-creator-carousel * ,
.creator-content-page .swiper-slide,
.creator-content-page .swiper-slide * ,
.dood-creator-carousel .dood-creator-carousel-item,
.slick-slider .slick-slide,
.owl-carousel .owl-item,
.splide__slide {
opacity: 1 !important;
filter: none !important;
-webkit-filter: none !important;
visibility: visible !important;
transition: none !important;
-webkit-transition: none !important;
}
/* Cover common "hover sibling dim" .elementor-kit-10s explicitly */
.creator-content-page .dood-creator-carousel:hover .dood-creator-carousel-item:not(:hover),
.creator-content-page .swiper-container:hover .swiper-slide:not(:hover),
.slick-slider:hover .slick-slide:not(:hover),
.owl-carousel:hover .owl-item:not(:hover),
.splide:hover .splide__slide:not(:hover) {
opacity: 1 !important;
filter: none !important;
transition: none !important;
}
/* CREATOR PAGE - NO SLIDER - multi-row flow */
/* Ensure the main section can expand */
.dood-page-container section.artists-swiper {
width: calc(100% - 20px);
max-width: 1160px;
margin: 0 auto;
overflow: visible; /* let children expand parent */
display: block; /* normal block container */
}
/* UL wrapper: flex layout, allow wrapping */
.dood-page-container .artists-swiper-wrapper {
display: flex !important; /* use flex layout */
flex-wrap: wrap !important; /* allow wrapping */
justify-content: flex-start; /* align items to left */
align-items: flex-start; /* align top edges */
margin: 0;
padding: 0;
list-style: none;
height: auto !important; /* let container grow */
gap: 10px; /* optional spacing between items */
}
/* LI items: 4 per row, maintain square shape */
.dood-page-container .artists-swiper-wrapper li {
display: block !important; /* block inside flex wrapper */
flex: 0 0 calc((100% - 30px) / 4); /* 4 per row, minus gap */
aspect-ratio: 1 / 1 !important; /* maintain square */
margin: 0px;
background: tomato;
position: relative;
}
/* NEW: Make fill the */
align-items: center;
justify-content: center;
overflow: hidden; /* clip any overflowing image */
background-size: cover; /* cover the square completely */
background-position: center;
border-radius: inherit; /* match li rounding */
}
/* NEW: Make inner
fill the square and not distort */
.dood-page-container .artists-swiper-wrapper li .img img {
width: 100%;
height: 100%;
object-fit: cover; /* scale to fill square */
display: block; /* remove inline spacing */
}
/* If inside a slider track (Slick/Swiper), force natural flow */
.dood-page-container .artists-swiper-wrapper .slick-track,
.dood-page-container .artists-swiper-wrapper .swiper-wrapper {
display: block !important; /* override flex/nowrap */
height: auto !important; /* allow parent to expand */
}
/* removing margins to allow qty per row to work as expected */
.dood-page-container section ul.artists-swiper-wrapper li.artists-slide {
margin-left: 0px !important;
margin-right: 0px !important;
}
/* force the bg image to take full height */
.dood-page-container section ul.artists-swiper-wrapper li.artists-slide .img {
height: 100% !important;
}
/* Responsive adjustments */
/* Below 1024px: 3 per row */
@media (max-width: 1024px) {
.dood-page-container .artists-swiper-wrapper li {
flex: 0 0 calc((100% - 20px) / 3);
}
}
/* Below 767px: 2 per row */
@media (max-width: 767px) {
.dood-page-container .artists-swiper-wrapper li {
flex: 0 0 calc((100% - 14px) / 2);
}
}
/* Below 425px: 1 per row */
@media (max-width: 425px) {
.dood-page-container .artists-swiper-wrapper li {
flex: 0 0 100%;
}
/* Ensure no extra margins interfere */
.dood-page-container section ul.artists-swiper-wrapper li.artists-slide {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* Attempting to fix clipping and scroll when narrow */
/* Turn this specific Elementor container back into a normal block */
.elementor-element.dood-art-list.e-con {
display: block !important;
height: auto !important;
min-height: auto !important;
overflow: visible !important;
}
/* Also normalize the auto-generated inner wrapper */
.elementor-element.dood-art-list.e-con > .e-con-inner {
display: block !important;
height: auto !important;
min-height: auto !important;
overflow: visible !important;
}
/* Creator Page Ends */
/* DOODALL COMPOSER */
/* Wireframe Boxes - product builder */
.dood-inner-fade {
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
border: none !important;
}
/* Buttons */
.composerContainers input[type="submit"],
.dood-inner-fade .elementor-button,
.elementor-element-doodall-cart-003 input[type="submit"] {
background-color: #FE6220 !important; /* orange */
color: white;
border: none;
padding: 10px 20px !important;
border-radius: 50px !important;
font-size: 20px;
cursor: pointer;
transition: background-color 0.2s;
font-family: Roboto Condensed, Helvetica Neue, Arial, Noto Sans, sans-serif !important;
border: none !important;
}
.composerContainers input[type="submit"]:hover,
.dood-inner-fade .elementor-button:hover,
.elementor-element-doodall-cart-003 input[type="submit"]:hover {
background-color: #1AC2E6 !important; /* aqua */
}
.variations_form button {
background-color: #FE6220 !important; /* orange */
color: white;
border: none;
padding: 20px 30px !important;
border-radius: 50px !important;
font-size: 28px;
cursor: pointer;
transition: background-color 0.2s;
font-family: Roboto Condensed, Helvetica Neue, Arial, Noto Sans, sans-serif !important;
border: none !important;
}
.variations_form button:hover {
background-color: #1AC2E6 !important; /* aqua */
color:#fff !important;
}
/* Product Variations */
table.variations {
/*box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 20px !important;*/
padding: 20px;
background-color: none !important;
}
table tbody > tr:nth-child(2n+1) > th, table tbody > tr:nth-child(2n+1) > td {
background-color: hsla(0,0%,50%,.0) !important;
}
/* Composer layouts */
.elementor-element.elementor-element-doodall-cart-004,
.elementor-element.elementor-element-doodall-cart-001,
.elementor-element.elementor-element-doodall-cart-002 {
width: 100% !important; /* You've Selected Art... better mobile layout */
}
/* Product Gallery Image */
.woocommerce-product-gallery__wrapper {
border-radius: 25px !important;
}
/* My Account - New Art */
.dood-form-box h2,
.dood-form-box h3,
.dood-form-box h4,
.dood-form-box p {
font-family: Roboto Condensed, Helvetica Neue, Arial, Noto Sans, sans-serif !important;
margin: 0px !important;
}
.dood-form-box h2 br,
.dood-form-box h3 br,
.dood-form-box h4 br {
display: none !important;
}
.dood-form-box h2 {
font-size: 42px !important;
font-weight: 900 !important;
letter-spacing: normal !important;
color: #999 !important;
}
.dood-form-box h3 {
font-size: 28px !important;
font-weight: 700 !important;
letter-spacing: normal !important;
text-transform: uppercase;
margin-bottom: 5px !important;
color: #999 !important;
}
.dood-form-box h4 {
font-size: 18px !important;
font-weight: 700 !important;
letter-spacing: normal !important;
text-transform: uppercase;
margin-bottom: 5px !important;
color: #000 !important;
}
.dood-form-box p {
font-size: 16px !important;
font-weight: 400 !important;
letter-spacing: normal !important;
margin-bottom: 5px !important;
color: #000 !important;
}
.dood-form-box {
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
border: none !important;
border-radius: 20px;
padding: 20px 20px 20px 20px !important;
margin-bottom: 10px;
}
.dood-form-box p label, .dood-form-box p br {
display: none !important;
height: 0px !important;
line-height: 0px;
}
/* restore and style display for checkbox labels inside list items */
/* style the individual checkbox + label pairs */
.dood-form-box .wpcf7-list-item > label {
display: inline-flex !important;
align-items: center; /* centers checkbox vertically with label */
gap: 8px; /* space between checkbox and label */
margin: 6px 10px 6px 0; /* spacing between list items */
cursor: pointer;
font-size: 18px; /* label text size */
font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
font-weight: 400;
color: #000;
line-height: 2; /* controls vertical spacing when lines wrap */
}
/* style the checkbox itself */
.dood-form-box .wpcf7-list-item input[type="checkbox"] {
appearance: none; /* reset default browser appearance */
-webkit-appearance: none; /* reset default browser appearance */
width: 30px;
height: 30px;
accent-color: #FE6220; /* modern way to color checkbox */
cursor: pointer;
flex-shrink: 0; /* prevents checkbox from shrinking */
border: 2px solid #444;
border-radius: 4px;
position: relative;
}
.dood-form-box .wpcf7-list-item input[type="checkbox"]:checked { /* Setting the checked box fill colour */
background-color: #FE6220;
}
.dood-form-box .wpcf7-list-item input[type="checkbox"]:checked::after { /* making the check symbol bespoke */
content: "";
position: absolute;
left: 8px;
top: 0px;
width: 10px;
height: 20px;
border: solid #fff;
border-width: 0 3px 3px 0; /* making a 'check' using 2 sides of a box */
transform: rotate(45deg); /* rotating to look like a check */
}
/* ensure each list item has room to breathe */
.dood-form-box .wpcf7-list-item {
display: inline-block !important;
/* Why is it different on each page? */
width: auto !important; /* ignore parent width */
max-width: none !important; /* remove any inherited max-width */
vertical-align: middle; /* keeps alignment consistent */
/**/
margin-top: 15px !important; /* controls vertical gap between rows */
margin-bottom: 5px !important; /* controls vertical gap between rows */
margin-right: 10px !important;
}
.wpcf7-list-item {
margin-left: 0px !important;
}
.wpcf7-not-valid-tip {
margin-top: 10px !important;
}
/* ENDS - restore and style display for checkbox labels inside list items - ENDS */
.dood-form-box input[type="text"],
.dood-form-box select,
.dood-form-box input[type="number"],
.dood-form-box input[type="date"],
input[type="email"],
input[type="password"] {
margin-bottom: 10px;
border-radius: 25px;
border: 2px solid #444;
}
.dood-form-box textarea {
margin-bottom: 10px;
border-radius: 25px 25px 0px 25px;
border: 2px solid #444;
}
.dood-form-box [type="submit"] {
all: unset;
background-color: #FE6220;
color: #fff;
padding: 10px 20px;
border-radius: 50px;
font-size: 20px;
font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
font-weight: 900;
cursor: pointer;
text-transform: uppercase;
}
.dood-form-box [type="submit"]:hover {
background-color: #1AC2E6;
}
.dood-spacer-50 {
height: 50px !important;
}
/* Browse File Button */
/*Ref Solution - https://jsfiddle.net/4cwpLvae/ */
.dood-form-box p label.dood-custom-file-upload {
display: inline-block !important;
}
.dood-form-box input[type="file"] {
display: none;
}
.dood-custom-file-upload {
background-color: #FE6220 !important;
color: white !important;
height: 30px !important;
padding: 20px 20px !important;
border-radius: 50px !important;
font-size: 20px !important;
cursor: pointer !important;
font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif !important;
transition: background-color 0.2s;
cursor: pointer;
}
.dood-custom-file-upload:hover {
background-color: #1AC2E6 !important;
}
/* My Account - Menu */
/* Remove default list styling and indentation */
.woocommerce-MyAccount-navigation ul {
list-style: none; /* removes bullet dots */
padding: 0; /* removes left inset */
margin: 0; /* removes top/bottom gaps */
}
/* Optional: style each list item */
.woocommerce-MyAccount-navigation li {
margin-bottom: 10px; /* spacing between items */
}
/* Optional: style the links */
.woocommerce-MyAccount-navigation a {
display: block;
background-color: #FE6220;
color: #fff;
text-decoration: none;
padding: 10px 20px;
border-radius: 50px;
font-family: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
font-size: 18px;
font-weight: 700;
transition: background-color 0.3s ease;
}
.woocommerce-MyAccount-navigation a:hover {
background-color: #1AC2E6;
}
/* My Account - PAGE HEADER */
.page-header {
padding: 100px 30px 20px 30px !important;
margin-bottom: 20px !important;
margin-top: -80px !important;
border-radius: 25px;
background-color: #1AC2E6;
width: 100%;
}
.page-header .entry-title {
font-family: Roboto Condensed, Helvetica Neue, Arial, Noto Sans, sans-serif !important;
font-size: 42pt !important;
color: #fff !important;
text-shadow: 3px 0px #000;
}
/* My Account - CONTENT */
.woocommerce-account .woocommerce-MyAccount-content p a {
color: #FE6220;
}
.woocommerce-MyAccount-content {
font-family: Roboto Condensed, Helvetica Neue, Arial, Noto Sans, sans-serif !important;
}
.woocommerce-MyAccount-content .dood-form-box h3 {
/*
font-size: 42px !important;
font-weight: 900 !important;
letter-spacing: normal !important;
text-transform: uppercase;
color: #999 !important;*/
}
/* My Account - TABLE */
.woocommerce-MyAccount-content .table {
width: 100%;
border-collapse: collapse;
border-radius: 12px;
overflow: hidden; /* ensures the rounded corners apply */
box-shadow: inset 0 2px 8px rgba(0,0,0,0.08);
}
/* Make header look nice */
.woocommerce-MyAccount-content .table thead {
/*background: #f7f7f7;
font-weight: bold;*/
display: none;
}
/* remove table hover*/
.woocommerce-MyAccount-content table tbody tr:hover > td {
background: none !important;
background-color: transparent !important;
}
/**/
/* Tackle My Art Tables formatting */
.woocommerce-MyAccount-content .table tbody tr {
padding: 0px !important;
}
td.dood-my-art-td-title > h3, td.dood-my-art-td-title > h4 {
margin-block-start: 0rem !important;
margin-block-end: 0rem !important;
text-transform: uppercase;
}
td.dood-my-art-td-sales > h4, td.dood-my-art-td-products > h4 {
margin-block-start: 0rem !important;
margin-block-end: 0rem !important;
font-size: 18px !important;
}
.woocommerce-MyAccount-content .table tr.dood-my-art-tr-b {
border-bottom: 1px solid #ddd;
}
/**/
.woocommerce-MyAccount-content .table th,
.woocommerce-MyAccount-content .table td {
padding: 12px 16px;
text-align: left;
}
/* Products Bullets */
.dood-my-art-td-products ul.artist_artwork_products {
margin: 0; /* remove top/bottom margin */
padding-left: 1.2em; /* fine-tune bullet spacing — adjust as needed */
list-style-position: outside; /* keep bullets outside text block */
}
.dood-my-art-td-products ul.artist_artwork_products {
margin: 0;
padding-left: 0; /* removes all indent */
list-style-position: inside; /* keeps bullets inside the content box */
}
/* Edit Artwork Button */
.woocommerce-MyAccount-content a.artist_artwork_product_edit {
display: inline-block;
background-color: #FE6220; /* your accent colour */
color: #fff;
padding: 10px 24px;
border-radius: 50px; /* rounded pill shape */
text-decoration: none; /* remove underline */
font-weight: 600;
font-size: 18px;
text-align: center;
transition: all 0.2s ease;
border: none;
}
.woocommerce-MyAccount-content a.artist_artwork_product_edit:hover {
background-color: #1AC2E6; /* your accent colour */
}
/* Woo Commerce standard button */
.woocommerce-MyAccount-content .woocommerce-info a.woocommerce-Button.button,
.woocommerce-MyAccount-content .woocommerce-info a.button.wc-forward {
display: inline-block;
background-color: #FE6220; /* your accent orange */
color: #fff;
padding: 10px 24px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.2s ease;
border: none;
}
.woocommerce-MyAccount-content .woocommerce-info a.woocommerce-Button.button:hover,
.woocommerce-MyAccount-content .woocommerce-info a.button.wc-forward:hover {
background-color: #1AC2E6; /* your accent colour */
}
/* Woocommerce address titles */
header.woocommerce-Address-title.title > h2 {
font-size: 24px !important;
letter-spacing: 0px !important;
}
header.woocommerce-Address-title.title > a.edit {
display: inline-block;
background-color: #FE6220; /* your accent orange */
color: #fff;
padding: 10px 24px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.2s ease;
border: none;
margin-bottom: 15px !important;
}
header.woocommerce-Address-title.title > a.edit:hover {
background-color: #1AC2E6; /* your accent colour */
}
header.woocommerce-Address-title.title, .woocommerce-Address > address {
display: flex;
flex-direction: column;
align-items: center; /* centers horizontally */
text-align: center;
}
/* Account Details Form */
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="number"],
.woocommerce-MyAccount-content input[type="url"],
.woocommerce-MyAccount-content input[type="search"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
border-radius: 25px !important;
border: 2px solid #444 !important;
padding: 10px 15px !important;
width: 100%;
box-sizing: border-box;
}
/* --- Account Details Save Changes Button --- */
.woocommerce-MyAccount-content button.woocommerce-Button.button[name="save_account_details"] {
background-color: #FE6220; /* match your accent color */
color: #fff;
padding: 10px 24px;
border-radius: 50px; /* rounded pill */
font-weight: 600;
font-size: 16px;
border: none;
cursor: pointer;
text-align: center;
transition: all 0.2s ease;
display: inline-block;
margin-top: 20px !important;
}
.woocommerce-MyAccount-content button.woocommerce-Button.button[name="save_account_details"]:hover {
background-color: #1AC2E6; /* your accent colour */
}
/* --- Account Details - Password Change Fieldset --- */
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset {
border: 2px solid #444; /* match your input borders */
border-radius: 25px; /* rounded corners */
padding: 20px 24px; /* spacing inside */
margin-top: 20px; /* space from previous fields */
background-color: #fff; /* optional: subtle background */
}
/* Style the legend nicely */
.woocommerce-MyAccount-content form.woocommerce-EditAccountForm fieldset legend {
font-weight: 600;
font-size: 16px;
padding: 0 10px; /* avoid legend touching border */
color: #333;
}
/* User Login */
/* Account Login Form */
/* H2 title */
div.page-content div.woocommerce h2 {
font-size: 42px !important;
font-weight: 900 !important;
letter-spacing: normal !important;
color: #999 !important;
font-family: Roboto Condensed, Helvetica Neue, Arial, Noto Sans, sans-serif !important;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
border: none !important;
border-radius: 20px;
padding: 20px !important;
display: block;
}
/* Lost Password link */
.woocommerce .woocommerce-form-login p.woocommerce-LostPassword.lost_password a {
/* styles */
font-family: Roboto Condensed, Helvetica Neue, Arial, Noto Sans, sans-serif !important;
color: #FE6220;
}
/* Username + Password fields only */
.woocommerce-form-login .woocommerce-Input.input-text {
border-radius: 25px !important;
border: 2px solid #444 !important;
padding: 10px 15px !important;
width: 100%;
box-sizing: border-box;
}
.woocommerce .woocommerce-form-login label {
font-family: "Roboto Condensed", "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}
/* Button */
.woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
background-color: #FE6220 !important; /* match your accent color */
color: #fff !important;
padding: 10px 24px !important;
border-radius: 50px !important; /* rounded pill */
font-weight: 600;
font-size: 16px;
border: none !important;
cursor: pointer;
text-align: center;
transition: all 0.2s ease;
display: inline-block;
}
.woocommerce .woocommerce-form-login .woocommerce-form-login__submit:hover {
background-color: #1AC2E6 !important; /* your accent colour */
}
/* Form Border */
.woocommerce form.login {
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
border: none !important;
border-radius: 20px;
padding: 20px 20px 20px 20px !important;
margin-bottom: 30px;
}
/* Account Login Form Ends */
/* Shopping Cart */
/* Content fits header */
.wp-block-woocommerce-cart.alignwide {
margin-inline: 0 !important; /* was -80px on both margin-inline-start and margin-inline-end */
}
/* View Cart Button */
.elementor-button.elementor-size-md {
border-radius: 50px !important;
}
/* Page 1 */
div.wc-block-components-main.wc-block-cart__main.wp-block-woocommerce-cart-items-block,
div.wc-block-components-sidebar.wc-block-cart__sidebar.wp-block-woocommerce-cart-totals-block {
font-family: "Roboto Condensed", "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
border: none !important;
border-radius: 20px;
padding: 10px 5px !important;
margin: 0px 5px 30px 5px;
}
.is-large.wc-block-cart .wc-block-cart-items a {
color: #FE6220;
}
.is-large.wc-block-cart .wc-block-cart-items th {
font-size: 12px;
}
th.wc-block-cart-items__header-image,
th.wc-block-cart-items__header-product,
th.wc-block-cart-items__header-total {
border-top: none !important;
padding-top: 15px !important;
}
h2.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title {
padding-left: 15px !important;
}
/* Cart Product Image */
/* Cart Page Image */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
border-radius: 10px;
}
/* Cart Pop in Image */
img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
border-radius: 10px;
}
/* View Cart Page blocks layout */
/* Target the outer cart layout container */
.wc-block-components-sidebar-layout.wc-block-cart {
display: block !important; /* Kill the two-column flex layout */
}
/* Make both the main items area and the sidebar full width */
.wc-block-cart__main,
.wc-block-cart__sidebar {
width: 100% !important;
max-width: 100% !important;
display: block !important;
float: none !important;
margin: 0px 0px 10px 0px !important;
padding: 0 !important;
}
/* Cart Proceed to Checkout Button */
.wc-block-cart__submit-button {
border-radius: 50px !important;
background-color: #FE6220;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
margin: 0px 20px !important;
}
.wc-block-cart__submit-button:hover {
background-color: #1AC2E6;
color: #fff;
text-decoration: none;
}
.wc-block-components-button:not(.is-link) {
text-decoration: none;
}
.wc-block-cart__submit-button {
margin: 15px !important;
width: calc(100% - 30px) !important;
}
/* Checkout Page 2 */
/* Form Block Border */
form.wc-block-components-form.wc-block-checkout__form {
font-family: "Roboto Condensed", "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
border: none !important;
border-radius: 20px;
padding: 20px 20px !important;
margin: 0px 5px 30px 5px;
}
/* Input fields */
.wc-block-components-form .wc-block-components-text-input input {
border-radius: 30px !important;
border: 2px solid #444 !important;
padding: 25px 15px 10px 15px !important;
width: 100%;
box-sizing: border-box;
height: 20px;
}
/* Input field labels */
.wc-block-components-form .wc-block-components-text-input input:-webkit-autofill+label,
.wc-block-components-form .wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:-webkit-autofill+label,
.wc-block-components-text-input.is-active label,
.wc-blocks-components-select .wc-blocks-components-select__label
{
transform: translateY(6px) translateX(7px) scale(.75) !important;
}
/* Select Drop Down */
.wc-blocks-components-select .wc-blocks-components-select__select {
border-radius: 30px !important;
border: 2px solid #444 !important;
padding: 25px 15px 10px 15px !important;
width: 100%;
box-sizing: border-box;
height: 60px !important;
}
/* Radio Buttons */
.wc-block-components-radio-control--highlight-checked {
border-radius: 25px;
border: 2px solid #000;
box-shadow: none !important;
}
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
border-radius: none !important;
box-shadow: none !important;
}
/* check box */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] {
border: 2px solid #000 !important;
}
/* Text Area */
.wc-block-components-textarea {
border-radius: 25px !important;
border: 2px solid #000 !important;
}
/* Subtitles */
h2.wc-block-components-title.wc-block-components-checkout-step__title {
font-size: 18px !important;
font-weight: 700 !important;
letter-spacing: normal !important;
text-transform: uppercase;
margin-bottom: 5px !important;
color: #000 !important;
}
/* subtitle descriptions */
p.wc-block-components-checkout-step__description {
font-size: 16px !important;
font-weight: 400 !important;
letter-spacing: normal !important;
margin-bottom: 5px !important;
color: #000 !important;
}
/* Cart Place Order Button */
button.wc-block-components-checkout-place-order-button {
background: #FE6220;
color: #fff;
padding: 0.5em 1em !important;
border-radius: 50px;
font-size: 20px;
border: none !important;
}
button.wc-block-components-checkout-place-order-button:hover {
background: #1AC2E6;
}
button.wc-block-components-checkout-place-order-button
.wc-block-components-checkout-place-order-button__text {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
}
/* CART ORDER SUMMARY */
.wp-block-woocommerce-checkout-order-summary-block {
font-family: "Roboto Condensed", "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
border: none !important;
border-radius: 20px !important;
padding: 20px 20px !important;
/*margin: 0px 5px 30px 5px;*/
}
/* summary image */
.wc-block-components-order-summary .wc-block-components-order-summary-item__image>img {
border-radius: 10px !important;
}
/**/
/* Cart ORDER RECEIVED */
/* order header */
ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details {
font-family: "Roboto Condensed", "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
border: none !important;
border-radius: 20px !important;
padding: 20px 20px !important;
/*margin: 0px 5px 30px 5px;*/
}
/* order table */
/* 1. Remove all default borders from this specific table */
.woocommerce-table.woocommerce-table--order-details.shop_table.order_details,
.woocommerce-table--order-details.shop_table.order_details th,
.woocommerce-table--order-details.shop_table.order_details td,
.woocommerce-table--order-details.shop_table.order_details tr {
border: none;
/*box-shadow: none !important;*/
}
/* 2. Add bottom borders to all TR except the last */
th.woocommerce-table__product-name.product-name,
th.woocommerce-table__product-name.product-total,
.woocommerce-table--order-details.shop_table.order_details th,
.woocommerce-table.woocommerce-table--order-details.shop_table.order_details.shop_table.order_details tfoot tr td
{
border-bottom: 1px solid #ccc !important; /* adjust color if needed */
}
.woocommerce-table--order-details.shop_table.order_details tr:last-child {
border-bottom: none;
}
/* 3. Style the table container */
.woocommerce-table--order-details.shop_table.order_details {
font-family: "Roboto Condensed", "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1) !important;
border-radius: 20px !important;
padding: 20px !important;
width: 100%;
border-collapse: separate; /* required to preserve border-radius */
overflow: hidden; /* ensures rounded corners clip contents */
}
/* product hyperlink */
td.woocommerce-table__product-name.product-name a {
color:#FE6220;
}
/* Address */
section.woocommerce-customer-details address {
font-family: "Roboto Condensed", "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1) !important;
border-radius: 20px !important;
padding: 20px !important;
width: 100%;
}
/* messages paragraphs */
/*p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received,*/
div.woocommerce-order p
{
font-family: "Roboto Condensed", "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
/*font-size: 18px !important;
font-weight: 700 !important;
letter-spacing: normal !important;*/
text-transform: uppercase;
/*margin-bottom: 5px !important;
color: #000 !important;*/
}
/**/
/* MY ART DASHBOARD PAGE */
/* --- Make My Art rows responsive --- */
/* --- General table cleanup --- */
.dood-account-art-table {
border-collapse: collapse;
width: 100%;
}
.dood-account-art-table td {
border: none;
padding: 10px;
vertical-align: top;
}
/* --- Make only the middle row responsive --- */
.dood-account-art-table .dood-my-art-tr-b:nth-of-type(2) {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
gap: 10px;
align-items: start;
}
/* Cells inside middle row behave as grid items */
.dood-account-art-table .dood-my-art-tr-b:nth-of-type(2) > td {
display: block;
}
/* Keep images responsive */
.dood-account-art-table .dood-my-art-td-thumb img {
max-width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
/* --- Responsive stacking under 550px --- */
@media (max-width: 551px) {
.dood-account-art-table .dood-my-art-tr-b:nth-of-type(2) {
grid-template-columns: 1fr; /* stack vertically */
}
}
/* Composer Interface */
/* Borders and sections */
.dood-composer-wholesec {
border: 1px #EEE solid;
border-radius: 15px;
padding: 20px;
margin-bottom: 10px;
box-shadow: inset 0 10px 10px rgba(0, 0, 0, 0.1);
}
.dood-composer-subsec-top {
border: 1px #EEE solid;
border-radius: 15px 15px 0px 0px;
padding: 20px;
margin-bottom: 0px;
box-shadow: inset 0 10px 10px rgba(0, 0, 0, 0.1);
}
.dood-composer-subsec-bottom {
border-bottom: 2px #CCC solid;
border-top: none !important;
border-radius: 0px 0px 15px 15px;
padding: 20px;
margin-bottom: 10px;
background: #EEE;
background: linear-gradient(0deg,rgba(238, 238, 238, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
/* Title */
.dood-composer-title > h2 {
margin: 0px !important;
font-size: 36px;
font-weight: 700;
letter-spacing: normal;
color: #1AC2E6 !important;
}
/* Pop Out Sections */
summary {
cursor: pointer;
}
/* reset default marker wherever possible */
summary {
list-style: none; /* generic fallback */
-webkit-appearance: none; /* WebKit/Safari hint */
appearance: none;
}
summary {
font-family: "Roboto Condensed", Sans-serif;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
}
/* Chrome, Edge, Safari (Blink / WebKit) */
summary::-webkit-details-marker {
display: none;
}
/* Modern browsers using ::marker (incl. latest Firefox) */
summary::marker {
content: none;
display: none;
}
/* Older Firefox vendor pseudo-element (if present) */
summary::-moz-list-bullet {
display: none;
}
/* make the details button look like a button */
summary span.dood-change-icon {
font-family: Arial, Helvetica, sans-serif !important;
display: inline-block;
padding: 0px 5px 0px 5px;
margin-left: 10px;
background-color: #FE6220; /* WordPress-like blue */
color: #fff;
border: none;
border-radius: 50px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
user-select: none;
vertical-align: middle;
}
/* Hover and focus states */
summary span.dood-change-icon:hover {
background-color: #1AC2E6;
}
/**/
/* Select Product Section */
.dood-composer-product-selected {
display: flex;
flex-wrap: wrap; /* allow wrapping instead of overflowing */
justify-content: flex-start; /* keep them aligned left */
gap: 1rem; /* optional spacing */
}
.dood-selected-product-title {
font-family: "Roboto Condensed", Sans-serif;
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 0px;
}
.dood-composer-product-variations label {
font-family: "Roboto Condensed", Sans-serif;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
}
/* sit thumb and variations side by side */
.dood-composer-product-variations table.variations {
table-layout: fixed; /* forces fixed column widths */
width: 100%; /* helps the layout obey the fixed widths */
}
.dood-composer-product-variations table.variations th.label {
width: 100px !important; /* adjust as needed */
text-align: left; /* aligns the text inside */
white-space: nowrap; /* optional: prevents text wrapping */
vertical-align: middle !important; /* optional: keeps label aligned nicely with select */
}
.dood-composer-product-variations td.value select {
border-radius: 100px;
}
.dood-composer-product-thumb {
flex: 0 0 auto; /* keep the image its natural width */
}
.dood-composer-product-variations {
flex: 1; /* allow form to take up remaining space */
}
.dood-composer-product-variations table.variations {
margin-bottom: 0px !important;
}
/* Product Variations - Table */
/* Prevent the form/table from forcing full width */
.dood-composer-product-variations,
.dood-composer-product-variations form,
.dood-composer-product-variations table {
display: inline-block; /* shrink-wrap to content width */
width: auto;
max-width: 100%; /* stay within parent */
box-sizing: border-box;
}
/* Product Variations - Flow Splitter */
/* Flow splitters shrink to fit but never overflow */
.dood-flow-splitter {
flex: 0 0 auto; /* natural size, can shrink if needed */
max-width: 100%; /* prevent overflow of the parent */
box-sizing: border-box; /* keeps padding/border from breaking width */
}
/* Force inner content (like forms) to size to content, not full width */
.dood-flow-splitter > * {
width: auto;
max-width: 100%;
}
/* Stack vertically full width on smaller screens */
@media (max-width: 850px) {
.dood-flow-splitter {
flex: 1 1 100%;
}
.dood-composer-product-variations,
.dood-composer-product-variations form,
.dood-composer-product-variations table {
display: block; /* allow full width when stacked */
width: 100%;
}
}
/* Product cart thumbs */
.dood-product-combo {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
max-width: 100%;
}
/* Override the old rule so children can shrink */
.dood-product-combo > * {
flex: initial; /* or remove entirely — this stops blocking shrink */
}
/* Thumbs: shrink when needed, but never exceed 150px */
.dood-product-combo .dood-composer-product-thumb,
.dood-product-combo .dood-composer-art-thumb {
flex: 1 1 0;
min-width: 0; /* enables shrinking on iOS */
max-width: 150px; /* keeps normal size capped */
}
/* The + sign stays natural size */
.dood-product-combo .dood-composer-art-with {
flex: 0 0 auto;
font-size: clamp(1.4rem, 4vw, 2rem);
}
/* Images inside follow container size */
.dood-product-combo img {
width: 100%;
height: auto;
display: block;
max-width: none;
}
/* Tiny screens */
@media (max-width: 480px) {
.dood-product-combo {
gap: 4px;
}
}
/* Button */
.dood-composer-submit-button button, .dood-composer-submit-button input[type="submit"], .dood-composer-submit-button .elementor-button {
background-color: #FE6220 !important;
font-family: "Roboto", Sans-serif;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
font-style: normal;
text-decoration: none;
line-height: 1em;
letter-spacing: -0.2px;
word-spacing: 0px;
fill: #FFFFFF;
color: #FFFFFF;
border-style: solid;
border-width: 2px 2px 2px 2px;
border: none !important;
border-radius: 60px 60px 60px 60px;
padding: 15px 30px !important;
letter-spacing: normal !important;
white-space: normal; /* enable line wrapping */
}
.dood-composer-submit-button button:hover, .dood-composer-submit-button input[type="submit"]:hover, .dood-composer-submit-button .elementor-button:hover {
background-color: #1AC2E6 !important;
}
/* Select Art Buttons flow */
.dood-composer-wholesec .dood-composer-submit-button, .dood-composer-change-product .dood-composer-submit-button {
/* white-space: nowrap; prevent wrapping to multiple lines */
}
.dood-composer-wholesec .dood-composer-submit-button .elementor-button-wrapper, .dood-composer-change-product .dood-composer-submit-button .elementor-button-wrapper {
display: inline-block; /* sit side by side */
margin-right: 0.5rem; /* spacing between buttons */
vertical-align: middle; /* align vertically */
margin-top: 10px;
}
.dood-composer-wholesec .dood-composer-submit-button .elementor-button-wrapper:last-child, .dood-composer-change-product .dood-composer-submit-button .elementor-button-wrapper:last-child {
margin-right: 0; /* remove extra margin on last button */
}
/* Select Art Buttons Top Spacing */
.dood-composer-submit-button {
/* margin-top: 10px;*/
}
/* Product Thumb */
.dood-composer-product-thumb img, .dood-composer-art-thumb img {
border-radius: 25px;
}
/* Select Art */
.dood-composer-selected-art {
font-family: "Roboto Condensed", Sans-serif;
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 0px;
}
.dood-composer-selected-art-title, .dood-selected-product-price {
font-family: "Roboto Condensed", Sans-serif;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
}
.dood-composer-art-with {
font-family: "Roboto", Sans-serif;
font-size: 48px;
font-weight: 900;
text-transform: uppercase;
}
.dood-composer-order-qty .quantity input[type="number"] {
border-radius: 50px;
margin-bottom: 15px;
}
/* Genres List */
.dood-genre-list-card {
position: relative;
width: 300px; /* or 100% for responsive */
aspect-ratio: 1 / 1;
border-radius: 16px;
overflow: hidden;
}
.dood-genre-list-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dood-genre-list-card-overlay {
position: absolute;
bottom: 0;
width: 100%;
height: 60%; /* bottom half of image */
background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .9) 25%);
color: white;
padding: 1rem;
box-sizing: border-box; /* positioning the text manually */
display: flex;
align-items: flex-start; /* align to top of overlay */
justify-content: flex-start; /* align to left */
}
.dood-genre-list-card-overlay h3 {
font-family: Roboto Condensed, Helvetica Neue, Arial, Noto Sans, sans-serif;
margin: 0;
font-size: 24px;
font-weight: 700;
color: #444;
position: relative;
top: 20%; /* move it down within the overlay (tweak as needed) */
}
/**/
/* Artists List */
/* Note - currently vertical positioning of elements for responsive by % on height and padding, should use @media to get perfect */
.dood-artist-card {
position: relative;
width: 100%; /* 300px for fixed or 100% for responsive */
aspect-ratio: 1 / 1; /* keeps entire card square */
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
background-color: #eee; /* to be replaced by inline style for bg image per card */
}
.dood-artist-card > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dood-artist-card > a > img {
border: none;
border-radius: 0;
box-shadow: none;
width: 100%;
height: 100%;
overflow: hidden;
object-fit: cover; /* ensures proper cropping */
object-position: center;
display: block;
}
/* --- Avatar overlay (top half) --- */
.dood-artist-card-avatar-overlay {
position: absolute;
top: 0;
width: 100%;
height: 60%; /* top half area */
display: flex;
align-items: bottom; /* vertically align avatar - bottom doesn't work so added padding-top*/
justify-content: flex-start; /* shift avatar to the use flex-start to go left */
/*padding-top: 15%; /* optional: add breathing space from top edge */
padding-left: 1rem; /* optional: add breathing space from left edge */
pointer-events: none; /* let clicks pass through */
padding-bottom: 15px;
}
.dood-artist-card-avatar-overlay img {
/* stop flexbox from stretching the image to full height */
align-self: flex-end; /* or center / flex-start, as you prefer */
flex: 0 0 auto;
/* scale with card width (overlay is 100% of card width) */
width: clamp(50px, 30%, 100px); /* tweak 22% / px values to taste */
height: auto !important; /* keep intrinsic aspect ratio */
aspect-ratio: 1 / 1; /* encourage square, where supported */
/*
width: 90px;
height: 90px;
*/
border-radius: 50%;
border: 3px solid #fff;
object-fit: cover;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
background-color: #fff;
display: block;
}
/* --- Image overlay (bottom half) --- */
.dood-artist-card-image-overlay {
position: absolute;
bottom: 0;
width: 100%;
height: 40%;
background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .9) 65%);
color: white;
padding: 1rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.75rem;
}
.dood-artist-card-image-overlay h3 {
font-family: Roboto Condensed, Helvetica Neue, Arial, Noto Sans, sans-serif;
margin: 0;
font-size: 24px;
font-weight: 700;
color: #fff;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
/*font-size: 1.1rem;*/
position: relative;
top: 5%;
/* NEED TO SCALE FONT SIZE IN PROPORTION TO PARENT WIDTH */
}
/* Artist List Thumb Row */
.dood-artist-card-thumb-row {
position: relative;
width: 100%;
overflow: hidden;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 4px;
/* lock height by ratio, independent of parent */
aspect-ratio: 240 / 58;
flex-shrink: 0;
/* removing left gap by first item */
margin-left: -2px; /* visually recenters the group */
}
/* Hide the first link entirely */
/*
.dood-artist-card-thumb-row a:first-child {
display: none !important;
}*/
/* Position thumbnails absolutely inside the ratio box */
.dood-artist-card-thumb-row > a {
position: relative;
flex: 0 1 calc((100% - (3 * 4px)) / 4);
aspect-ratio: 1 / 1;
border-radius: 6px;
overflow: hidden;
display: block;
z-index: 1;
}
/* Create a ratio lock using ::before */
.dood-artist-card-thumb-row::before {
content: "";
display: block;
padding-top: calc(58 / 240 * 100%); /* ≈ 24.17% of width */
flex-shrink: 0;
}
/* images fill their square */
.dood-artist-card-thumb-row img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
transition: transform 0.2s ease;
}
.dood-artist-card-thumb-row a:hover img {
/*transform: scale(1.08);*/ /* optional hover zoom */
border:#FE6220 2px solid;
}
/**/
/* Genre Dropdown */
/* Scope to this specific form (for safety) */
#dood-artwork-genre-form, #dood-artwork-sort-form, #dood-artwork-artist-form, #dood-artwork-medium-form-medium, #dood-artwork-tag-form-tag {
text-align: center; /* optional: centers the dropdown horizontally */
margin: 0px 0;
}
/* Style only this dropdown */
#dood-artwork-genre-form-genre, #dood-artwork-sort-form-order, #dood-artwork-artist-form-artist, #dood-artwork-medium-form-medium, #dood-artwork-tag-form-tag {
appearance: none; /* removes default browser dropdown style */
-webkit-appearance: none;
-moz-appearance: none;
font-family: Roboto Condensed, Helvetica Neue, Arial, Noto Sans, sans-serif;
background-color: #FE6220;
color: #fff;
font-size: 20px;
padding: 10px 20px !important;
border: none;
border-radius: 50px;
cursor: pointer;
background-repeat: no-repeat;
background-position: right 0.8em center;
background-size: 12px 8px;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
/* Hover/focus styles */
#dood-artwork-genre-form-genre:hover, #dood-artwork-sort-form-order:hover, #dood-artwork-artist-form-artist:hover, #dood-artwork-medium-form-medium:hover, #dood-artwork-tag-form-tag:hover {
background-color: #1AC2E6;
}
#dood-artwork-genre-form-genre:focus, #dood-artwork-sort-form-order:focus, #dood-artwork-artist-form-artist:focus, #dood-artwork-medium-form-medium:focus, #dood-artwork-tag-form-tag:focus {
outline: none;
border-color: none;
box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.2);
}
#dood-artwork-genre-form select, #dood-artwork-sort-form select, #dood-artwork-artist-form select, #dood-artwork-medium-form-medium select, #dood-artwork-tag-form-tag select {
width: auto !important; /* Shrinks to fit content */
display: inline-block; /* Prevents block-level 100% width behavior */
flex: 0 0 auto; /* stops flex stretch */
min-width: fit-content; /* Ensures width respects content size */
max-width: none; /* Keeps it from overflowing parent */
/*box-sizing: border-box; /* Keeps padding/border inside the width */
align-self: flex-start !important;
margin-top: 5px !important;
margin-bottom: 5px !important;
}
/* Make the drop downs position behave */
.dood-dropdowns .elementor-shortcode {
display: flex;
justify-content: space-between; /* pushes forms to opposite ends */
align-items: center; /* vertically align */
flex-wrap: wrap; /* allows stacking when needed */
gap: 0.5em; /* optional spacing */
}
.dood-dropdowns .elementor-shortcode form {
flex: 0 0 auto; /* prevent stretching */
display: inline-block;
width: auto;
}
/* Natural width dropdowns */
.dood-dropdowns .elementor-shortcode select {
width: auto !important;
min-width: fit-content;
flex: 0 0 auto;
display: inline-block;
vertical-align: middle;
}
/* Stack vertically on narrow screens */
@media (max-width: 600px) {
.dood-dropdowns .elementor-shortcode {
flex-direction: column;
align-items: flex-start; /* left-align when stacked */
}
.dood-dropdowns .elementor-shortcode form {
width: auto; /* optional: make each dropdown full-width on mobile */
}
}
/**/
/* Doodall Media Load More Button */
#doodall-media-load-more {
display: block;
margin: 20px auto 50px; /* top/bottom spacing + centers horizontally */
background-color: #FE6220 !important; /* orange */
color: white;
border: none;
padding: 10px 20px !important;
border-radius: 50px !important;
font-size: 20px;
cursor: pointer;
transition: background-color 0.2s;
font-family: Roboto Condensed, Helvetica Neue, Arial, Noto Sans, sans-serif !important;
border: none !important;
}
#doodall-media-load-more:hover {
background-color: #1AC2E6 !important; /* aqua */
}
/**/
/* --- Fix: Artists Swiper - Keep Slides Square Without Breaking Slick --- */
.artists-swiper .artists-slide {
aspect-ratio: 1 / 1 !important; /* lock square shape */
height: auto !important; /* allow Slick’s width control */
overflow: hidden;
border-radius: 12px;
position: relative;
}
/* make sure the inner .img fills that square cleanly */
.artists-swiper .artists-slide .img {
position: relative;
width: 100%;
height: 100%;
aspect-ratio: 1 / 1; /* ensure true square */
background-size: cover;
background-position: center;
border-radius: inherit;
overflow: hidden;
}
/* the actual
tag inside .img */
.artists-swiper .artists-slide .img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
}
/* keep artworkCard below, not affecting the square area */
.artists-swiper .artists-slide .artworkCard {
position: relative;
background: #fff;
text-align: center;
padding: 0.5em;
box-sizing: border-box;
}
/* hide slider section no longer being used as pre-popup stage */
section ul.artists-swiper-wrapper li.artists-slide .artworkCard {
display: none !important; /* not being used right now */
}
/* optional visual spacing (non-breaking for slick) */
.artists-swiper .slick-track {
display: flex !important;
align-items: stretch !important;
}
/**/
/* --- Fix: Make fill the square li completely --- */
.artists-swiper .artists-slide > a {
position: absolute; /* overlay the whole li */
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1;
border-radius: inherit;
overflow: hidden;
}
/* make sure the li is a positioning context */
.artists-swiper .artists-slide {
position: relative; /* ensures absolute fill works correctly */
}
/* ensure the .img inside the link fills its parent */
.artists-swiper .artists-slide > a .img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
border-radius: inherit;
overflow: hidden;
display: block;
}
/* and ensure inner
fits exactly inside too */
.artists-swiper .artists-slide > a .img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/**/
/* --- Final Fix: Force .img to fill its parent exactly --- */
.artists-swiper .artists-slide > a .img {
position: relative;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: inherit;
overflow: hidden;
display: block;
box-sizing: border-box;
}
/* ensure any
inside fills .img properly */
.artists-swiper .artists-slide > a .img img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
border-radius: inherit;
position: absolute;
top: 0;
left: 0;
}
/* Fix on iOS */
/* iOS / Safari-only fix for THIS artists slider widget */
@supports (-webkit-touch-callout: none) {
.elementor-element.elementor-element-ae1069b.dood-mw-slider .artists-slide,
.elementor-element.elementor-element-ae1069b.dood-mw-slider .dood-artist-card {
aspect-ratio: auto !important;
height: auto !important;
}
.elementor-element.elementor-element-ae1069b.dood-mw-slider .artists-swiper-wrapper,
.elementor-element.elementor-element-ae1069b.dood-mw-slider .slick-list,
.elementor-element.elementor-element-ae1069b.dood-mw-slider .slick-track {
height: auto !important;
min-height: 0 !important;
}
.elementor-element.elementor-element-ae1069b.dood-mw-slider .dood-artist-card {
position: relative;
}
.elementor-element.elementor-element-ae1069b.dood-mw-slider .dood-artist-card::before {
content: "";
display: block;
padding-top: 100%; /* keeps the card perfectly square */
}
.elementor-element.elementor-element-ae1069b.dood-mw-slider .dood-artist-card > a {
position: absolute;
inset: 0;
display: block;
}
}
/* header content shift right fix */
/* iOS and MACOS fixes */
/**/
/* Fancybox button */
body .fancybox__content > .f-button.is-close-btn {
top: 10px !important;
right: 10px !important;
background: #FE6220 !important;
color: white !important;
border-radius: 50px !important;
width: 36px !important;
height: 36px !important;
opacity: 1 !important;
transition: background 0.2s;
}
body .fancybox__content > .f-button.is-close-btn:hover {
background: #1AC2E6 !important;
}/* End custom CSS */