/*
Theme Name: Frost Child
Theme URI: 
Author: e-products
Author URI: 
Description: tryout for e-products
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: frost
Text Domain: frost-child
Tags: 
*/

@media (max-width: 782px) {
    /* Target the columns container on category pages */
    .archive.tax-product_cat .wp-block-columns {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
}

.wc-block-product-filters__open-overlay
{
	background-color: #e5e5e5;
	font-size: 22px;
}

.woocommerce-price-suffix {  display: block;
	color: grey; }


.woocommerce img { border-radius: 20px; }

.wc-block-product-template__responsive {
    grid-gap: 0.5em;
    display: grid;
}

html {
  scroll-behavior: auto;
}

/* 1. Target the dialog container itself */
.wc-block-product-gallery-dialog {
    max-width: 800px !important; /* Adjust this to your preferred size */
    max-height: 80vh !important;
    width: 90% !important; /* Ensures it stays responsive on small screens */
    margin: auto !important;
    border: none !important;
    border-radius: 8px; /* Optional: adds a nice rounded corner */
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

/* 2. Target the image inside to make sure it scales */
.wc-block-product-gallery-dialog img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* 3. Handle the background backdrop (the dark overlay) */
.wc-block-product-gallery-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(4px); /* Optional: blurs the background for a premium look */
}

/*
.wp-block-group {
    box-sizing: border-box;
    margin-left: 10px;
    margin-right: 10px;
}
*/

/* --- CATEGORY LANDING CARDS --- */

.wc-block-product {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}


.wc-block-product-categories-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    list-style: none !important;
    padding: 0 !important;
}

.wc-block-product-categories-list-item {
    text-align: center;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 8px;
    transition: 0.3s ease;
}

.wc-block-product-categories-list-item:hover {
    border-color: #000;
    transform: translateY(-5px);
}

.wc-block-product-categories-list-item img {
    margin-bottom: 15px;
    border-radius: 4px;
}

.wc-block-product-categories-list-item__title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-decoration: none;
    color: #000;
}

/* Container for the individual product in the grid */
.wp-block-woocommerce-product-collection .wc-block-product {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 15px;
    border-radius: 8px; /* Matches your rounded image style */
    border: 1px solid #eee;
}

/* Hover State */
.wp-block-woocommerce-product-collection .wc-block-product:hover {
    transform: translateY(-5px); /* Lifts the card up */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); /* Soft shadow */
    border-color: #ddd;
    cursor: pointer;
}

/* Make the next/previous buttons semi-transparent by default */
.wc-block-next-previous-buttons__button {
    background-color: rgba(255, 255, 255, 0.3) !important; /* Very transparent white */
    opacity: 0.6; /* Dims the arrow icon as well */
    transition: all 0.3s ease; /* Smooth fade effect */
    border: none !important;
}

/* Make them fully visible on hover */
.wc-block-next-previous-buttons__button:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    opacity: 1;
    cursor: pointer;
}

/* Universal Responsive Image Utility */
.img-responsive {
    max-width: 100%;
    height: auto;
    display: block; /* Removes the small gap often found below images */
}

/* Optional: Enhanced Catalog Version (with subtle rounding) */
.catalog-img-fluid {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Ensures images fill their area without stretching */
    border-radius: 8px; /* Matches the clean look of your current product grid */
}	




/* Assign Color Tone directly to the Checkbox via the data-wp-key */

/* 2. Hover Effect - ONLY for Color Tone */
[data-wp-key^="attribute/color_tone"] .wc-block-product-filter-checkbox-list__input {
    border-color: #999 !important;
    border: 0.2px solid #000 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    position: relative;
    z-index: 5;
}

/* Black / Musta */
[data-wp-key*="-black"] .wc-block-product-filter-checkbox-list__input,
[data-wp-key*="-musta"] .wc-block-product-filter-checkbox-list__input { background-color: #000 !important; }

/* White / Valkoinen */
[data-wp-key*="-white"] .wc-block-product-filter-checkbox-list__input,
[data-wp-key*="-valkoinen"] .wc-block-product-filter-checkbox-list__input { background-color: #fff !important; }

/* Gray / Harmaa */
[data-wp-key*="-grey"] .wc-block-product-filter-checkbox-list__input,
[data-wp-key*="-harmaa"] .wc-block-product-filter-checkbox-list__input { background-color: #878787 !important; }

/* Red / Punainen */
[data-wp-key*="-red"] .wc-block-product-filter-checkbox-list__input,
[data-wp-key*="-punainen"] .wc-block-product-filter-checkbox-list__input { background-color: #ff0000 !important; }

/* Blue / Sininen */
[data-wp-key*="-blue"] .wc-block-product-filter-checkbox-list__input,
[data-wp-key*="-sininen"] .wc-block-product-filter-checkbox-list__input { background-color: #274AB3 !important; }

/* Brown / Ruskea */
[data-wp-key*="-brown"] .wc-block-product-filter-checkbox-list__input,
[data-wp-key*="-ruskea"] .wc-block-product-filter-checkbox-list__input { background-color: #5F4426 !important; }

/* Pink / Pinkki */
[data-wp-key*="-pink"] .wc-block-product-filter-checkbox-list__input,
[data-wp-key*="-pinkki"] .wc-block-product-filter-checkbox-list__input { background-color: #FF68CE !important; }

/* Yellow / Keltainen */
[data-wp-key*="-yellow"] .wc-block-product-filter-checkbox-list__input,
[data-wp-key*="-keltainen"] .wc-block-product-filter-checkbox-list__input { background-color: #FBEC5D !important; }

/* Green */
[data-wp-key*="-green"] .wc-block-product-filter-checkbox-list__input { background-color: #2e6f40 !important; }


/* Orang*/
[data-wp-key*="-orange"] .wc-block-product-filter-checkbox-list__input { background-color: #E86100 !important; }


/* Purple */
[data-wp-key*="-purple"] .wc-block-product-filter-checkbox-list__input { background-color: #6c3baa !important; }



/* 2. Hover Effect - ONLY for Color Tone */
[data-wp-key^="attribute/color_tone"] .wc-block-product-filter-checkbox-list__input:hover {
    transform: translateY(-1px);
    border-color: #999 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* 3. Selected (Checked) State - ONLY for Color Tone */
[data-wp-key^="attribute/color_tone"] .wc-block-product-filter-checkbox-list__input:checked {
    border: 0.1px solid #000 !important;
    transform: scale(0.6);
    translate: 15px;
}

/* Home page categories */
.woocommerce ul.products li.product-category {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center; /* Centers title and image */
}

.woocommerce ul.products li.product-category img {
    width: 100% !important;
    height: 250px !important; /* Adjust this height to your preference */
    object-fit: cover !important; /* This crops the image to fill the space without distortion */
    display: block !important;
}


/* Smoothly animate the changes */
.woocommerce ul.products li.product-category {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Lift the card and deepen the shadow on hover */
.woocommerce ul.products li.product-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
    border-color: #bbb; /* Slightly darkens the border */
}

/* Accordeon */

/* Center the wrapper and match standard page width */
.wc-accordion-wrapper {
    max-width: 1400px; /* Adjust this number to match your theme's width */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

/* Container Spacing */
.wc-accordion-container {
    margin: 20px 0;
    border-top: 1px solid #e5e5e5;
}

/* Individual Rows */
.wc-accordion-item {
    border-bottom: 1px solid #e5e5e5;
}

/* Header/Summary Styling */
.wc-accordion-title {
    padding: 15px 10px;
    font-weight: 700;
    font-size: 20px;
    cursor: pointer;
    list-style: none; /* Hide default browser arrow */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

/* Hide default Safari arrow */
.wc-accordion-title::-webkit-details-marker { display: none; }

/* Visual Hover Feedback */
.wc-accordion-title:hover {
    background-color: #fcfcfc;
}

/* Active State Color */
details[open] .wc-accordion-title {
    background-color: #f9f9f9;
}

/* Custom Arrow Icon */
.acc-icon::before {
    content: '\25BE'; /* Downward triangle icon */
    font-size: 1.2em;
    transition: transform 0.3s ease;
    display: inline-block;
}

/* Rotate Arrow when Open */
details[open] .acc-icon::before {
    transform: rotate(180deg);
}

/* Content Panel Padding */
.wc-accordion-content {
    padding: 10px 10px 30px;
    line-height: 1.6;
    color: #444;
}

/* Optional: Hide original tabs via CSS as a backup safety */
.woocommerce-tabs ul.tabs, 
.woocommerce-tabs .panel.entry-content {
    display: none !important;
}
.wc-accordion-container {
    display: block !important;
}

/**
 * HIDE STANDARD TABS EVERYWHERE (MOBILE & DESKTOP)
 * We target all common WooCommerce tab selectors to ensure they are gone.
 */
.woocommerce-tabs ul.tabs, 
.woocommerce-tabs .panel.entry-content,
.woocommerce-tabs .woocommerce-Tabs-panel,
.wc-tabs-wrapper .wc-tabs {
    display: none !important;
}

/**
 * ENSURE YOUR ACCORDION IS VISIBLE
 * This prevents the CSS above from accidentally hiding your new accordion.
 */
.wc-accordion-wrapper, 
.wc-accordion-container {
    display: block !important;
}

/* Frost-specific adjustment for mobile spacing */
@media (max-width: 782px) {
    .wc-accordion-wrapper.alignwide {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 20px;
    }
}

.wa-php-container {
    padding: 15px;
    background: #f9f9f9;
    border-radius: 12px;
    border: 1px solid #eee;
    max-width: 320px;
}

.wa-header {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #555;
}

.wa-btn {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    color: white !important;
}

/* WhatsApp Icon using a simple CSS circle if FontAwesome isn't loaded */
.wa-icon::before {
    content: "WA";
    background: rgba(255,255,255,0.2);
    padding: 5px;
    border-radius: 50%;
    margin-right: 12px;
    font-size: 10px;
    font-weight: bold;
}

.wa-local { background-color: #1660f5; }
.wa-intl { background-color: #0e1263; }

.wa-btn:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}

.wa-text { display: flex; flex-direction: column; }
.wa-label { font-weight: bold; font-size: 16px; line-height: 1.2; }
.wa-text small { font-size: 11px; opacity: 0.8; }

.pushbutton-wide {
	background-color: var(--wp--preset--color--primary);
    border-radius: 5px;
    border-width: 0;
    color: var(--wp--preset--color--base);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--x-small);
    font-style: inherit;
    font-weight: var(--wp--custom--font-weight--regular);
    letter-spacing: inherit;
    line-height: var(--wp--custom--line-height--medium);
    padding-top: 15px;
    padding-right: 30px;
    padding-bottom: 15px;
    padding-left: 30px;
    text-decoration: none;
    text-transform: inherit;
}