@import "./styles/header.css";
@import "./styles/common.css";
@import "./styles/homepage.css";
@import "./styles/product-item.css";
@import "./styles/footer.css";
@import "./styles/product-page.css";
@import "./styles/quick-cart.css";
@import "./styles/listings.css";
@import "./styles/knowledge-base.css";

/*
Theme Name: Kiosko
Theme URI: https://wordpress.com/theme/kiosko/
Author: Automattic
Author URI: https://automattic.com/
Description: Kiosko is a store theme for WooCommerce.
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: 
Text Domain: kiosko
Tags: e-commerce, four-columns, wide-blocks, block-patterns, block-styles, featured-images, full-site-editing, rtl-language-support, sticky-post, template-editing, threaded-comments, translation-ready
*/

/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/issues/42794
 */
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-color: var(--wp--preset--color--primary);
	text-decoration-thickness: 0.5px !important;
	text-underline-offset: 0.05em;
}

/* Reset browser default margins for blockquote element */
.wp-block-pullquote blockquote {
	margin: 0;
}

/* Search button inside style */
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	padding: 4px;
}

/* Adjust font size for comment reply title */
.wp-block-post-comments-form .comment-reply-title {
	font-size: var(--wp--preset--font-size--large);
}

/* Remove the bottom margin from the button */
.wp-block-post-comments-form .form-submit {
	margin-bottom: 0;
}

/*
 * Responsive menu container padding.
 * This ensures the responsive container inherits the same
 * spacing defined above. This behavior may be built into
 * the Block Editor in the future.
 */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50);
}

/* Adjust the top padding for the submenu items */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	padding-top: var(--wp--preset--spacing--30);
}

/* Override the Gutenberg style to theme style */
.wp-block-post-author__byline,
.wp-block-post-author__bio {
	font-size: inherit;
}

/* Round the avatar and reset the vertical alignment */
.wp-block-post-author__avatar img {
	border-radius: 999px;
	line-height: 0;
}

/* Style tag cloud outline style  */
.wp-block-tag-cloud.is-style-outline a {
	border-color: var(--wp--preset--color--tertiary);
	border-radius: 999px;
	padding: 0 0.5rem;
}

.wp-block-tag-cloud.is-style-outline a:hover {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--primary);
}

/* Remove the default margin from author bio */
.wp-block-post-author__bio {
	margin: 0;
}

/* Remove the default margin from term description. */
.wp-block-term-description p:first-child {
	margin-top: 0;
}

.wp-block-term-description p:last-child {
	margin-bottom: 0;
}

/* Normalise font sizes for the latest comments and latest posts widgets */
.wp-block-latest-comments__comment-excerpt p,
.wp-block-latest-comments__comment-date,
.wp-block-latest-posts__post-author,
.wp-block-latest-posts__post-date {
	font-size: inherit;
}

/* Adjust font colour in the Calendar widget */
.wp-block-calendar table:where(:not(.has-text-color)) {
	color: var(--wp--preset--color--foreground);
}

/* Fix border radius setting for the avatar block */
.wp-block-avatar a,
.wp-block-avatar img {
	border-radius: inherit;
	vertical-align: middle;
}

/* Fix line height for various fields */
.wp-block-search__input,
.wp-block-post-comments-form .comment-form input:not([type=submit]):not([type=checkbox]),
.wp-block-post-comments-form .comment-form textarea {
	line-height: inherit;
}

/* Style  border colour for search and Jetpack subscription blocks */
.wp-block-search__input,
.wp-block-search__button-inside .wp-block-search__inside-wrapper,
.wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline form input[type="email"] {
	border-color: var(--wp--preset--color--tertiary);
}

/* Needed to style input field for various Jetpack blocks */
.wp-block-jetpack-contact-form input:not([type="submit"]):not([type="checkbox"]),
.wp-block-jetpack-contact-form select,
.wp-block-jetpack-contact-form textarea,
.wp-block-jetpack-mailchimp input:not([type="submit"]):not([type="checkbox"]),
.wp-block-jetpack-revue input:not([type="submit"]):not([type="checkbox"]) {
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--tertiary);
	font-size: inherit;
	line-height: inherit;
	padding: 0.5rem;
}

.wp-block-jetpack-contact-form.contact-form label {
	font-weight: 400;
}

.wp-block-jetpack-contact-form.contact-form label span {
	opacity: 0.7;
}

.wp-block-jetpack-contact-form.contact-form select {
	padding: 0.5rem;
}

.wp-block-jetpack-contact-form.contact-form textarea {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Style the feedback you get after submitting the contact form */
div[id^="contact-form-"] h4 {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: inherit;
	line-height: 1.555555556;
}

div[id^="contact-form-"] .contact-form-submission {
	margin: 0;
	padding: 0;
}

/* Adjust vertical margins in the mailchimp block */
.wp-block-jetpack-mailchimp .wp-block-jetpack-button,
.wp-block-jetpack-mailchimp p {
	margin: var(--wp--preset--spacing--40) 0;
}

/* Adjust the size of the consent text in mailchimp block */
#wp-block-jetpack-mailchimp_consent-text {
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 0;
}

/* Remove underline from the price after discounted */
ins {
	text-decoration: none;
}

/* Fix the hardcoded wide width value in the stylesheet for TT3 */
.woocommerce.woocommerce-page main {
	max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left));
}

.prod-open-details {
    color:#bca082;
    text-decoration: underline;
    cursor: pointer;
    padding:10px 0;
}

.woocommerce-custom-technical-data {
    display: flex;
    flex-wrap: wrap;
}

.woocommerce-custom-technical-data .technical-data, .woocommerce-custom-technical-data .technical-images {
    width: 50%;
    box-sizing: border-box;
    padding: 0 20px;

}

.woocommerce-custom-technical-data .technical-data-record {
    box-sizing: border-box;
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
    margin: 0;
}

h3 {
    text-transform: none;
}

.has-variations-product {
    .wp-block-post-title {
        font-style: normal;
        font-weight: 800;
        font-size: var(--wp--preset--font-size--large) !important;
    }

    .wp-block-woocommerce-product-price .wc-block-components-product-price {
        display: none;
    }

    div.product form.cart table.variations td select, div.product form.cart table.variations .label {
        display: none;
    }

    div.product form.cart table.variations .value {
        padding: 0;
    }
    
    div.product form.cart .variations th {
        vertical-align: top;
        line-height: 2.3em;
    }

    .woocommerce-Price-amount.amount {
        font-size: var(--wp--preset--font-size--x-large);
        font-weight: 700;
    }

    div.product form.cart .reset_variations, div.product p.stock {
        display: none !important;
    }

    .wp-block-woocommerce-product-summary {
        display: none;
    }

    figure img {
        width: 100%;
    }
}

body.has-variations-product .variations_form.cart .woocommerce-variation-description {
    display: none;
}

.custom-cross-sell-title {
    display: block;
    visibility: visible;
    text-transform: none;
    font-size: var(--wp--preset--font-size--medium);
    margin: 0 0 5px;
}

.custom-cross-sell-item {
    border: #bca082 2px solid;
    border-radius: 10px;
    max-width: 500px;
    margin: 0;
    padding: 5px 5px 0 5px;
    width: 100%;

    a {
        display: flex;
        align-items: center;
        text-decoration: none;

        img {
            width: auto;
            max-width: 30%;
            margin: 0;
            max-height: 100px;
            padding-right: 10px;
        }

        h2 {
            font-size: var(--wp--preset--font-size--medium);
            font-weight: 600;
            flex-grow: 3;
            max-width: 80% ;
        }
    }
}

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

.custom-values-title {
    font-weight: 700;
    margin-top: -5px;
    font-size: var(--wp--preset--font-size--medium);
    margin: 10px 0 5px;
}

.wp-block-add-to-cart-form {
    margin: 0;
}

.custom-variants-list-wrapper {
    .type-selector {
        border: #bca082 2px solid;
        border-radius: 10px;
        padding: 5px 10px;
        margin: 5px 0;
        cursor: pointer;
        position: relative;
        padding-left: 25px;
        max-width: 500px;
        align-content: center;

        .type-selector-price .woocommerce-Price-amount.amount {
            float: right;
            font-size: var(--wp--preset--font-size--small);
            font-weight: 700;
        }

        &:hover {
            background: #f0d0ae;
        }

        &::before {
            content: '';
            width: 10px;
            height: 10px;
            border: 2px solid #bca082;
            border-radius: 50%;
            position: absolute;
            left: 5px;
            top: 50%;
            transform: translateY(-50%);
            background: #fff;
            z-index: 5;
        }
        
        
        &.selected {
            background: #bca082;
            
            &::after {
                content: '';
                width: 6px;
                height: 6px;
                border-radius: 50%;
                position: absolute;
                left: 9px;
                top: 50%;
                transform: translateY(-50%);
                background: #bca082;
                z-index: 10;
            }
        }
    }
}

.custom-orders-form {
    margin: 0 auto;
    max-width: 720px;
    box-sizing: border-box;

    input, textarea {
        width: 100%;
        border-radius: 10px;
        border: 1px solid #ddd;
        padding: 5px 10px;
        box-sizing: border-box;
    }

    input[type="submit"] {
        font-size: 1rem;
        background: var(--wp--preset--color--accent-1);
        padding: 10px 20px;
        border: none;
        color: #fff;
        cursor: pointer;

        &:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
    }
}

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

.wp-block-woocommerce-product-gallery.wc-block-product-gallery.is-horizontal.is-nowrap {
    max-height: 450px;

    > .wc-block-product-gallery-thumbnails {
        width: 110px;
    }
}

.scroll-container-wrapper {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.custom-variant-picture-gallery .variant-picture-thumbnail {
    display: inline-block;
    margin-right: 5px;
    border: 1px solid #ddd;
    line-height: 0;
    overflow: hidden;
}

.custom-variant-picture-gallery {
    height: 70px; 
    margin-top: 5px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-x: scroll; 
    overflow-y: hidden;
    white-space: nowrap; 
    height: 70px;
    position: relative;
    mask-image: linear-gradient(
        to right,
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0) 5%,  
        rgba(0,0,0,1) 10%,  
        rgba(0,0,0,1) 90%, 
        rgba(0,0,0,0) 95%,  
        rgba(0,0,0,0) 100% 
    );
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 5%,
        rgba(0,0,0,1) 10%,
        rgba(0,0,0,1) 90%,
        rgba(0,0,0,0) 95%,
        rgba(0,0,0,0) 100%
    );
}

.custom-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 10;
    line-height: 1;
    font-size: 1.5em;
    height: 100%;
    background: none;

    svg {
        height: 50%;
    }
}

.scroll-arrow-left {
    left: 0;
}

.scroll-arrow-right {
    right: 0;
    transform: rotate(180deg) translateY(55%);
}

.custom-variant-picture-gallery::-webkit-scrollbar {
    display: none;
}

.variant-picture-thumbnail {
    width: 60px;
    height: 60px;
    display: inline-block; 
    margin-right: 5px;
    overflow: hidden; 
    border: 1px solid #ddd;
    box-sizing: border-box;
}


.variant-picture-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

.product-item > div {
    width: 100%;
}

@media (max-width: 720px) {
    .opis__sp {
        flex-wrap: wrap;

        figure, .opis__text {
            width: 100%;
            max-width: 100%;
        }
    }
}