/*
Theme Name: Pixtory
Theme URI: https://github.com/jaseppan/pixtory-theme.git
Author: Janne Seppänen, Atte Haataja
Author URI: https://janneseppanen.site
Description: Theme for pixtory site
Requires at least: 6.0
Tested up to: 6.4.3
Requires PHP: 5.7
Version: 1.3.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pixtory
Tags: e-commerce, full-site-editing, 
*/

body {
    font-family: "Jost", sans-serif !important;
	max-width: 100vw;
	overflow-x: hidden;
}

body.page {
	background-color: #000;
}

body.woocommerce-page {
	background-color: #fff;
}

body:not(.woocommerce) header:not(.woocommerce-Address-title) {
    position: fixed;
    z-index: 1000;
    transition: color 0.3s ease-in-out;
    width: 100%;
    margin: 0 !important;
    right: 0;
    top: 0px;
}

.admin-bar header {
	top: 30px !important;
}

.wc-block-components-product-details__kuvan-url,
.wc-block-components-product-details__kuvan-url-pieni,
.hidden {
    display: none !important;
}

.w-full {
	min-width: 100%;
}

.text-right {
	text-align: right;
}

.text-left {
	text-align: left !important;
}

.transparent {
	position: absolute !important;
	top: 0;
	left: 99999px;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.relative {
	position: relative;
	min-height: calc( 100vh - 250px);
}

.is-position-sticky {
	position:-webkit-sticky; 
	position:sticky; 
	top:0;
}

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;  /* 2 */
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            /* 3 */
}

/*
	Use in conjunction with .sr-only to only display content when it's focused.
	@note Useful for skip links 
	@see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
	@note Based on a HTML5 Boilerplate technique, included in Bootstrap
	@note Fixed a bug with position: static on iOS 10.0.2 + VoiceOver
		@author Sylvain Pigeard
		@see https://github.com/twbs/bootstrap/issues/20732
*/
.sr-only-focusable:focus,
.sr-only-focusable:active {
	clip: auto !important;
	-webkit-clip-path: none !important;
		clip-path: none !important;
	height: auto !important;
	margin: auto !important;
	overflow: visible !important;
	width: auto !important;
	white-space: normal !important;
}

.light-shadow {
    box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.3);
}

.product-card-header a {
    text-decoration: none;
}

footer {
	overflow: hidden;
	background-color: #fff;
}

footer a {
    color: var(--wp--preset--color--vivid-red);
    text-decoration: none;
}

button {
    backdrop-filter: blur(2px);
}

.bg-red {
	background-color: var(--wp--preset--color--vivid-red) !important;
}

.text-red {
	color: var(--wp--preset--color--vivid-red) !important;
}

.wp-element-button {
    position: relative;
	color: #FFF;
	text-align: center;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0.38px;
	border-radius: 5px;
}



.product-card-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
}

/* Button hover color (MI) */
.wp-block-button__link:hover {
    opacity: 0.85;
}

a:hover {
    text-decoration: none !important;
}

.entry-content {
    animation: fadeInAnimation ease 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Navigation */

.wp-container-core-columns-is-layout-1.wp-container-core-columns-is-layout-1 {
	gap: 0.8px !important;
}

.wp-block-navigation__responsive-container {
	margin-right: 40px;
}

/* WooCommerce */

.wp-block-woocommerce-add-to-cart-form form.cart {
	display: block;
}

button.single_add_to_cart_button.button.alt.wp-element-button {
    margin-top: 0 !important;
}

.woocommerce .wp-block-woocommerce-product-image-gallery span.onsale {
    left: -1rem;
    right: unset;
    z-index: 101;
}

svg.wc-block-customer-account__account-icon,
.wc-block-mini-cart__quantity-badge svg {
	opacity: 0;
}

span.wc-block-mini-cart__quantity-badge {
	background: url('/wp-content/themes/pixtory/assets/icons/cart.svg') no-repeat center center;
	background-size: cover;
}

.wp-block-woocommerce-customer-account a {
	background: url('/wp-content/themes/pixtory/assets/icons/user.svg') no-repeat center center;
	background-size: 28px 28px;
}

.wp-block-woocommerce-customer-account a:hover {
	opacity: 0.5;
}

.woocommerce-page table.shop_table {
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 5px;
}

.woocommerce table.shop_table td {
	vertical-align: top;
}

.cart_item p,
.cart_item ul {
	margin-top: 0;
} 

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
	border-radius: 5px;
	border: solid 1px #ccc;
}

.woocommerce form .form-row {
    padding: 0;
}

.woocommerce div.product form.cart .variations {
	margin-bottom: 0;
}

.woocommerce-input-wrapper .optional {
	display: none;
}

#order_review {
	overflow: auto;
}

#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
	border-radius: 5px;
	border: solid 1px #ccc;
	background: none;

}

#add_payment_method #payment div.payment_box, 
.woocommerce-cart #payment div.payment_box, 
.woocommerce-checkout #payment div.payment_box {
	background: none;
	padding: 0;
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce div.product div.images {
	margin-bottom: 0;
}

.cart-product {
	display: flex;
}

.cart_item .product-quantity {
    border: solid 1px #ccc;
    padding: 2px 10px;
    border-radius: 10px;
    position: absolute;
    margin-left: -26px;
    background: #fff;
    margin-top: -10px;
}

.wc-block-customer-account__account-icon {
	padding: 0 !important;
}

.read-more-about-materials {
	color: var(--wp--preset--color--vivid-red);
	font-size: 1em;
	font-weight: 600 !important;
	letter-spacing: 0.32px;
	margin-top: 10px;
}

.read-more-about-materials:hover {
	color: #000;
	text-decoration: none;
}

.reset_variations,
.variations th.label {
    display: none;
}

.input-text.qty.text {
    width: 50%;
	min-width: 80px;
    border: solid 2px #eaeaea;
    border-radius: 8px;
    margin-bottom: 30px;
}

.components-button,
.edit-your-image-button
.add-your-image-button {
	border-radius: 5px !important;
}

.wc-block-mini-cart__badge {
    background: var(--wp--preset--color--vivid-red);
}

.wp-block-woocommerce-mini-cart-contents {
    background: #fff;
}

.wc-block-mini-cart__footer-cart.outlined:hover {
	color: #fff !important;
}

/* For hiding ALV-text after price */
.woocommerce-price-suffix {
    display: none;
}

/**
 * My Account
 */

.wc-block-mini-cart__footer-checkout .wc-block-components-button__text {
	color: #fff !important;
}

.wc-block-mini-cart__footer-checkout .wc-block-components-button__text:hover {
	color: #000 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	list-style: none;
	padding: 5px 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a:before {
	opacity: 1;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	padding: 10px 0px;
	display: block;
	color: var(--wp--preset--color--vivid-red);
	text-decoration: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active {
	font-weight: 600;;
}

.woocommerce-MyAccount-content a:not(.button),
.lost_password a,
.woocommerce-info::before {
	color: var(--wp--preset--color--vivid-red);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:before {
	margin-right: 20px;
    opacity: .25;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover:before {
	opacity: 1;
}

.woocommerce-account .woocommerce-MyAccount-content h2 {
	font-size: 25px;
    text-align: center;
	font-weight: 600;
}

.woocommerce-account p.order-again {
    text-align: right;
}

.woocommerce-account .woocommerce-EditAccountForm input[type="submit"] {
    margin-top: 50px;
    float: right;
}

.woocommerce-info {
    border-top-color: var(--wp--preset--color--vivid-red);
}

/* My Account End */

form.variations_form.cart {
    margin: 0 2px 2em;
}

button.single_add_to_cart_button.button.alt.wp-element-button {
    width: 100%;
}

.single_add_to_cart_button {
    margin-top: 1em !important;
	grid-column: auto; /* or any specific value */
}


.wp-block-woocommerce-add-to-cart-form .variations_button,
.wp-block-woocommerce-add-to-cart-form form.cart {
    --whole-width-in-grid: 1; /* or set it to a specific value like `span 1` */
}


.single_variation_wrap .woocommerce-variation {
	display: grid;
}

.multiplied-price {
	font-weight: 600;
	margin-top: 1em;
	margin-left: 1px;
}


.too-small-crop-alert.alert.alert-danger.text-white.mb-2.text-center {
    position: absolute;
    z-index: 100;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.variation-combined-label {
	font-size: 22px;
	font-weight: 600;
	line-height: normal;
}

.woocommerce table.variations tbody {
	display: block;
}

.woocommerce table.variations tr {
    display: flex;
    margin-bottom: var(--wp--style--block-gap);
    flex-direction: column;
}

.woocommerce div.product form.cart table.variations td select {
    min-width: 100%;
}

a.reset_variations {
    display: none !important;
}

.wd-my-account-links .woo-wallet-link a:before {
	color:transparent;
	background-image:url("http://luly.store/wp-content/uploads/2022/07/wallet-with-card-sticking-out.png");
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center center;
	}
	.wd-my-account-links .woo-wallet-link:hover a:before {
	color:transparent;
}

.wc-block-cart-item__quantity {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.wc-block-components-totals-coupon-link,
.wc-block-components-totals-shipping__change-address__link,
.wc-block-cart-item__remove-link {
	color: var(--wp--preset--color--vivid-red) !important;
	text-decoration: none !important;
	font-weight: 700 !important;
}

.wp-block-woocommerce-mini-cart-checkout-button-block {
	color: #fff !important;
}

.wp-block-woocommerce-mini-cart-checkout-button-block,
.woocommerce-message a:hover {
	color: #000 !important;
}

.has-black-background-color a:hover {
	color: #fff !important;
}

/* Cart */

/* -- Layout customization -- */
.wc-block-components-sidebar-layout {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 16px;
    position: relative;
    flex-direction: column;
}

.wc-block-components-sidebar,
.wc-block-components-sidebar-layout .wc-block-components-main {
    padding: 0;
    width: 100%;
}

.wc-block-components-sidebar {
	justify-content: flex-end;
}

.wp-block-woocommerce-cart-order-summary-block {
    max-width: 300px;
    margin: 0 0 30px auto;
}

.wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-order-summary-coupon-form-block {
	border: none;
}

span.wp-block-woocommerce-cart-order-summary-heading-block.wc-block-cart__totals-title {
	display: none !important;
}

/* Hide shipping/pickup row on cart page; user picks delivery on checkout */
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-shipping-block {
	display: none !important;
}

.wc-block-cart__submit-container {
    text-align: center;
}

.wc-block-cart__submit-button {
	max-width: 300px;
	margin: auto;
}

.wc-block-formatted-money-amount {
    font-weight: 600;
}

.wc-block-cart-items td:last-child {
    padding-right: 0;
}

.wc-block-components-sidebar .wc-block-components-totals-item {
	padding: 0;
}

.wc-block-cart-item__total-price-and-sale-badge-wrapper {
    margin-bottom: 8px;
}

/* -- Layout customization end -- */

a.wc-block-components-product-name {
    color: #000;
    font-weight: 600;
    text-decoration: none;
    font-size: 18px;
}

/* Cropper */

.woocommerce-product-gallery__wrapper canvas,
.img-container img,
.cropper-container {
	min-height: 200px;
    max-width: 100%;
	max-height: 550px;
}

.woocommerce-product-gallery__image {
	height: 450px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image canvas {
	width: 100% !important;
	height: 400px !important;
	display: block;
	object-fit: contain;
}

.cropped-image-container {
	background-color: #000;
	display: grid;
}


.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper {
	position: relative;
}

.pixtory-header-dark {
	padding: 10px 19px;
}

.pixtory-header-white  {
	padding: 10px 15px;
	background-color: #fff;
}

/* Image list */

#image-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 10px;
	padding-top: 15px;
	flex-wrap: nowrap;
	overflow: auto;
}	

#image-list .image-container {
	position: relative;
    width: 164px;
    height: 164px;
	min-width: 164px;
	cursor: pointer;
}

#image-list .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	transition: opacity 2s ease-in-out;
  	opacity: 1;
	padding: 2px;
}

.image-container img.fade-out {
	opacity: 0;
}

.image-container.selected-image-container {
    border: 5px solid var(--wp--preset--color--vivid-red);
}

.image-container.in-cart {
    border: 5px solid var(--wp--preset--color--vivid-green-cyan);
}


.in-cart img::before,
.delete-image-button {
    display: none;
    position: absolute;
    top: -10px;
    right: -10px;
    height: 28px;
    width: 28px;
    background-size: 20px 20px;
}

.delete-image-button {
    cursor: pointer;
    background: url('/wp-content/themes/pixtory/assets/icons/delete-image-button.svg') no-repeat center center;
    background-color: var(--wp--preset--color--vivid-red);
}

.in-cart img::before {
    content: ''; /* Ensure the pseudo-element is displayed */
    display: block; /* Make sure the pseudo-element is visible */
    position: absolute;
    top: -10px;
    right: -10px;
    height: 28px;
    width: 28px;
    background: url('/wp-content/themes/pixtory/assets/icons/in-cart-indicator.svg') no-repeat center center;
    background-color: var(--wp--preset--color--vivid-green-cyan);
    background-size: 20px 20px;
    z-index: 1; /* Ensure it appears above the image */
}

.selected-image-container .delete-image-button {
	display: block;
}

.disabled {
    opacity: 0.5;
	cursor: not-allowed;
}

/* Image navigation*/

.image-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.nav-button {
    position: relative;
    width: 40px; /* Adjust width for better click area */
    height: 40px; /* Adjust height for better click area */
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.nav-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
}

#prev-image::before {
    border-width: 10px 15px 10px 0;
    border-color: transparent var(--wp--preset--color--vivid-red) transparent transparent;
}

#next-image::before {
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent var(--wp--preset--color--vivid-red);
}

.nav-button:hover::before {
    transform: translate(-50%, -50%) scale(1.1);
}

.nav-button:active::before {
    transform: translate(-50%, -50%) scale(1);
}

/* Snap scroll for cover blocks */
.home .cover-block-container {
	overflow-y: scroll;
	overflow-x: hidden;
	scroll-snap-type: y mandatory;
	-ms-overflow-style: none; /* IE 11 */
	scrollbar-width: none; /* Firefox 64 */
	scroll-behavior: smooth	;
	height: 100vh;
	margin: 0;
}

.wp-block-cover {
	scroll-snap-align: start;
}

/* Snap scroll end */

.wp-block-site-logo {
    height: 28px;
    overflow: hidden;
	z-index: 1000;
}

.pixtory-header-dark:not(.invert-colors) .wp-block-site-logo img {
	margin-top: -30px;
}

.pixtory-header-dark:not(.invert-colors) .icons-container {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

/* Add this to override the inversion for .wc-block-mini-cart__badge */
.pixtory-header-dark:not(.invert-colors) .icons-container .wc-block-mini-cart__badge {
    -webkit-filter: invert(100%);
    filter: invert(100%);
	color: #fff;
}

/* Adjust footer */
:where(.wp-site-blocks) > :last-child:last-child {
    margin-block-start: 0;
}


.spinner-border-container {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1000;
    top: 0;
    left: 0;
}

.pixtory-cover-content {
	padding-top: 80px;
    height: calc(100vh - 220px);
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between;
	max-width: 100vw;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
}

.pixtory-cover-content h2, 
.pixtory-cover-content p {
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.pixtory-cover-content p {
	margin-top: 10px !important;
}


details>summary {
	list-style: none;
	display: flex;
    justify-content: space-between;
	font-size: 22px;
}
summary::-webkit-details-marker {
	display: none
}
  
summary::after {
	content: ' ►';
}
details[open] summary:after {
	content: " ▼";
}

details>summary,
details[open] p {
	padding: 1em;
	border: 1px solid #333;
}

details p {
	margin: 0;
}

/* Contact Form */

.frm_style_formidable-style.with_frm_style .form-field {
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.frm_message p {
    margin: 0 !important;
}

.with_frm_style .frm_primary_label {
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-size: 14px;
	font-weight: 600px;
}

button.frm_button_submit {
    font-size: 19px !important;
    letter-spacing: 0.38px;
    font-weight: 600 !important;
    padding: 20px 70px !important;
}

/* Slider */

.swiper {
	margin-bottom: 50px;
}



.swiper-pagination-bullet-active {
	background-color: var(--wp--preset--color--vivid-red) !important;
}

.hide-on-desktop {
	display: none !important;
}

.pixtory-header-dark .wp-block-navigation__responsive-container-open {
	color: #fff;
}

header .wp-block-navigation__responsive-container-content {
	display: none;
}

.product-card h3 {
	text-align: left !important;
	line-height: 1 !important;
}

.wc-block-components-product-price.wc-block-grid__product-price.has-text-align-center.has-text-align-center {
	line-height: 1;
	text-align: right !important;
}

@media (max-width: 1150px) {
	.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
		grid-template-columns: 1fr;
	}

	.product-card .wp-block-buttons {
		flex-direction: column;
		gap: 15px;
	}

	.product-card .wp-block-button {
		width: 100% !important;
	}

	

}

@media (max-width: 781px) {

	.wc-block-components-product-price.wc-block-grid__product-price.has-text-align-center.has-text-align-center {
		font-size: 16px !important;
	}

	.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {
		background-color: inherit !important;
		color: inherit !important;
		display: none !important;
	}

	.wp-block-navigation__responsive-container-open {
		display: block !important;
	}

	.wc-block-cart-item__quantity {
		display: block;
	}

	.hide-on-mobile {
		display: none !important;
	}

	.hide-on-desktop {
		display: block !important;
	}

	.wp-block-woocommerce-cart-order-summary-block {
		max-width: 100%;
	}
	.sm-left {
		justify-content: start !important;
	}

	.wp-block-cover__inner-container {
		margin-left: 10px;
		margin-right: 10px;
		max-width: calc(100vw - 20px);
	}
	
	.wp-block-cover__inner-container h2 {
		font-size: 27px;
	}

	.wp-block-cover__inner-container .wp-element-button, 
	.wp-block-cover__inner-container p {
		font-size: 18px !important;
	}

	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container-content a.wp-block-navigation-item__content {
		color: #000 !important;
	}

	.cart-product {
		flex-direction: column;
	}

	ul.product_details {
		padding-left: 1.2em;
	}

	.woocommerce-checkout {
		font-size: 92%;
	}

	.pixtory-header {
		gap: 15px;
	}

	.pixtory-header-icons {
		z-index: 100000;
		order: 2;
		margin-left: auto !important; 
	}

	.pixtory-header-navigation {
		order: 3;
		margin-left: 0 !important;
	}

	a.wp-block-navigation-item__content {
		font-size: 24px;
		font-weight: 500;
	}
	.wp-block-navigation__responsive-container-content {
		padding-top: calc(2rem + 60px) !important;
		gap: 0;
	}

	ul.wp-block-navigation__container.is-responsive.items-justified-center.wp-block-navigation {
		width: 100%;
	}

	.wp-block-navigation .wp-block-navigation-item {
		align-self: flex-start;
		border-bottom: 1px solid #ededed;
		width: 100%;
		flex-direction: row !important;
		padding: 8px 0 10px !important;
	}

	.wp-block-navigation .wp-block-navigation-item:last-child {
		border-bottom: none;
	}

	form.variations_form.cart {
		max-height: unset !important;
	}

	#image-list .image-container {
        width: 120px;
        height: 120px;
        min-width: 120px;
    }

	.woocommerce-product-gallery__image {
		height: 300px;
	}

	.woocommerce-product-gallery__image img,
	.woocommerce-product-gallery__image canvas {
		height: 300px !important;
	}

}

@media (min-width: 1350px) {

	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper {
		border-left: 1px solid #eaeaea;
		padding-left: 1.5em;
	}
}

@media (max-height: 700px) {
	.pixtory-cover-content {
		padding-top: 20px;
		height: 100% !important;
		display: block !important;
	}
}

a.wp-block-navigation-item__content {
	padding: 2px 5px;
}

a.wp-block-navigation-item__content:hover {
	background-color: #000;
	opacity: 0.5;
	border-radius: 5px;
	color: #fff !important;
}

.wp-block-navigation__responsive-dialog {
	margin: 10px 0 !important;
}

/* Screen reader only class */
.sr-only-text {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}


/**
 * Media library customization
 */

.media-modal-content {
	border-radius: 5px;
	color: #fff !important;
}
.media-frame-title {
	background: var(--wp--preset--color--vivid-red);
	padding: 0;
	height: 0 !important;
}

.media-menu-item {
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-top-right-radius: 10px !important;
	border-top-left-radius: 10px !important;
	margin-top: 1px !important;
}

.media-menu-item:hover {
	color: #000 !important;
}

.media-menu-item.active {
	border: unset !important;
}

.wp-core-ui .attachment.details {
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px var(--wp--preset--color--vivid-red) !important;
}

.wp-core-ui .attachment.details .check {
	background-color: var(--wp--preset--color--vivid-red) !important;
}

.wp-core-ui .attachment .check .media-modal-icon {
	background-position: -21px 0 !important;
}

.attachment-details h2,
.attachment-details .edit-attachment,
.attachment-details .setting,
.attachment-details .description {
  display: none !important;
}

.attachments-browser .media-toolbar,
.attachments-browser .uploader-inline, .attachments-browser.has-load-more .attachments-wrapper, .attachments-browser:not(.has-load-more) .attachments {
  right: 0 !important;
}

.upload-error {
	color: #000;
}

.media-modal-close .media-modal-icon:before {
  color: #fff;
  padding: 12px;
}

.select-all-button {
	background-color: var(--wp--preset--color--vivid-red);
	color: #fff;
	border: none;
	padding: 8px 16px;
	cursor: pointer;
	font-size: 14px;
	border-radius: 3px;
  }
  .select-all-button:hover {
	background-color: #000;
  }

@media (max-width: 900px) {
	/* Fix attachments browser layout on mobile */
	.attachments-browser {
		display: flex !important;
		flex-direction: column !important;
	}

	/* Adjust attachments wrapper position for mobile */
	.attachments-browser.has-load-more .attachments-wrapper, 
	.attachments-browser:not(.has-load-more) .attachments {
		position: relative !important;
		top: 0 !important;
		right: 0 !important;
		left: 0 !important;
		margin-bottom: 20px !important;
		width: 100%;
	}

	/* Make sidebar appear below images on mobile */
	.media-sidebar {
		display: none;
	}

	/* Fix button positioning on mobile */
	.media-frame-content .toggle-select-media-items,
	.media-frame-content .remove-selected-media-items {
		position: static !important;
		margin: 10px 5px !important;
		display: inline-block !important;
	}

	/* Create a container for the buttons */
	.media-frame-content {
		padding-top: 10px !important;
	}
	.media-frame-title {
	height: 50px !important;
	}
	.form-table,
	.d-flex {
	display: block !important;
	}
	.form-table > div,
	#fc-image-loader-container,
	select,
	input[type=text] {
	max-width: 100%;
	min-width: 100%;
	}
	.fc-form-message {
	margin-top: 1rem;
	order: 3;
	}
}
.media-frame-router {
  top: 0 !important;
  padding-top: 5px;
  color: #fff;
  background-color: var(--wp--preset--color--vivid-red);
}

/* Title of the media modal */
.media-frame-title h1 {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.2rem !important;
  text-align: center;
  color: #fff !important;
}

/* Close button */
.media-modal-close {
  height: 39px !important;
}

/* Background overlay */
.media-modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
}

/* Buttons at the bottom of the modal */
.media-modal-content .button {
  background-color: var(--wp--preset--color--vivid-red) !important; /* Blue background */
  color: #ffffff !important; /* White text */
  border: none !important; /* Remove default border */
  border-radius: 50px !important; /* Slightly rounded corners */
  font-weight: bold; /* Bold text */
}

/* Hover effects for buttons */
.media-modal-content .button:hover {
  background-color: #770054; /* Darker hover */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Shadow effect on hover */
  color: #ffffff;
}

.media-menu-item {
  color: #ffffff;
}

.media-router .active, .media-router .media-menu-item.active:last-child {
  border-color: #444444;
  border-radius: 50px;
}

/* Update focus outline color for tab buttons in the media library */
.media-frame-router .media-menu-item:focus,
.media-frame-router .media-menu-item:active {
    outline: 2px solid white !important;
}

.media-frame-content {
    top: 41px !important;
}

.attachment.save-ready.selected .check {
    background-color: var(--wp--preset--color--vivid-red) !important;
	color: #fff !important;
}

.supports-drag-drop .uploader-inline .drop-instructions {
	color: #000;
}

.attachments-browser .media-toolbar {
	display: none;
}

.attachments-browser.has-load-more .attachments-wrapper, 
.attachments-browser:not(.has-load-more) .attachments {
    top: 10px !important;
    right: 300px !important; /* Add space for sidebar */
    left: 0 !important;
    position: absolute !important;
}

.media-sidebar {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 260px !important;
    margin: 0 !important;
    padding: 0 16px !important;
}

.product-image-canvas {
    position: relative;
}

.woocommerce-product-gallery__image,
.cropper-editor {
    transition: opacity 0.5s ease-in-out; /* Smooth transition */
	justify-content: center;
    text-align: center;
}

.woocommerce-product-gallery__image {
    z-index: 1; /* Ensure it is below the cropper-editor */
    opacity: 1; /* Start visible */
}

.cropper-editor {
    z-index: 2; /* Ensure it is above the gallery image */
    opacity: 0; /* Start hidden */
}

.spinner {
	border: 16px solid rgba(255, 255, 255, 0.25); /* Light grey */
	border-top: 16px solid var(--wp--preset--color--vivid-red); /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
}

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

.text-danger {
	color: var(--wp--preset--color--vivid-red);
}

.cart-product-name {
	min-width: 120px;
	max-width: 150px;
}

button.button.button-warn.button-black.remove-selected-media-items {
    background: black !important;
}

/* Piilotettaan Kuvan URL ja Alkuperäisen Kuvan URL tilausvahvistussivulta */
.wc-item-meta li:nth-of-type(3),
.wc-item-meta li:nth-of-type(5) { 
	display: none;
}

.woocommerce div.product form.cart div.quantity .qty {
	margin: 0;
}