/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 06 2025 | 09:24:23 */
/*
Theme Name: Candy Shop
Theme URI: https://askka.qodeinteractive.com
Description: A child theme of Askka
Author: Christos S. Varkas
Author URI: https://cvarkas.com
Version: 1.0
Text Domain: askka
Template: askka
*/


/* Space under the page title */
/* Spacing for the block above #qodef-page-inner */
.qodef-woo-subcats-before-inner {
    margin-top: 16px;
    margin-bottom: 28px;
}

.qodef-woo-subcats-before-inner {
    padding-left: 150px !important;
    padding-right: 150px !important;
}

.woocommerce-loop-category__title{
    font-size: 12px;
}

/* Grid for Base Categories (Option A: 8/6/4/3/2 columns) */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 16px; /* spacing between tiles */
    list-style: none;
    padding: 0;
    margin: 0;
    justify-items: center; /* center each tile content */
}

/* Neutralize Woo/Theme item widths in this block so CSS Grid controls layout */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category {
    width: auto !important;
    float: none !important;
    margin: 0; /* gaps handled by grid */
}

/* Make images behave nicely */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive fallbacks (tweak as you like) */
@media (max-width: 1600px) {
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .qodef-woo-subcats-before-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 1280px) {
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .qodef-woo-subcats-before-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
@media (max-width: 1024px) {
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .qodef-woo-subcats-before-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
@media (max-width: 768px) {
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .qodef-woo-subcats-before-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
@media (max-width: 560px) {
    .qodef-woo-subcats-before-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.product-category img{
    border-radius: 300px !important;
    border:2px solid #2F696D;
}

.qodef-subcats-title{
    text-align: center;
}

/* Hover effect on image only + link color change */
/* Smooth transition on the image */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a img {
    transition: box-shadow .3s ease;
}

/* Apply teal overlay only over the image (clipped to the circle) */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category:hover a img,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category:focus-within a img,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category:hover img {
    /* big inset shadow creates an overlay confined to the image shape */
    box-shadow: inset 0 0 0 9999px rgba(47, 105, 109, 0.6) !important;
}

/* Link/title color change on hover/focus */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a {
    color: inherit; /* keep current color by default */
}
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category:hover a,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category:focus-within a {
    color: #2F696D;
}
/* Increase specificity for common title element just in case theme overrides */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category:hover a .woocommerce-loop-category__title,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category:focus-within a .woocommerce-loop-category__title {
    color: #2F696D;
}


/* Generic hover overlay for all WooCommerce category tiles (outside custom subcats block) */
.woocommerce ul.products li.product-category a img {
    transition: box-shadow .3s ease;
}

.woocommerce ul.products li.product-category:hover a img,
.woocommerce ul.products li.product-category:focus-within a img,
.woocommerce ul.products li.product-category:hover img {
    /* image-only teal overlay using #2F696D at ~70% */
    box-shadow: inset 0 0 0 9999px rgba(47, 105, 109, 0.7) !important;
}

/* Optional: change category title/link color on hover/focus */
.woocommerce ul.products li.product-category:hover a,
.woocommerce ul.products li.product-category:focus-within a {
    color: #2F696D;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product-category a img,
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a img {
        transition: none;
    }
}


/* Stronger matching for hover on the anchor itself (some themes style the <a> instead of <li>) */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a:hover img,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a:focus-visible img,
.woocommerce ul.products li.product-category a:hover img,
.woocommerce ul.products li.product-category a:focus-visible img {
    box-shadow: inset 0 0 0 9999px rgba(47, 105, 109, 0.7) !important;
}


/* Robust overlay over image area using anchor ::after sized as a square (matches square category images) */
/* Works when the <a> wraps both <img> and the title */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a,
.woocommerce ul.products li.product-category a {
    position: relative;
    display: inline-block; /* ensure predictable box for the overlay */
}

/* Put overlay above the image */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a::after,
.woocommerce ul.products li.product-category a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    aspect-ratio: 1 / 1; /* assumes square category thumbnails */
    background: #2F696D; /* requested color */
    opacity: 0;
    transition: opacity .25s ease;
    border-radius: 300px; /* clip to circle like the image */
    pointer-events: none;
    z-index: 1;
}

/* Ensure the image sits below the overlay */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a img,
.woocommerce ul.products li.product-category a img {
    position: relative;
    z-index: 0;
}

/* Show the overlay when hovering/focusing the anchor */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a:hover::after,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a:focus-visible::after,
.woocommerce ul.products li.product-category a:hover::after,
.woocommerce ul.products li.product-category a:focus-visible::after {
    opacity: .6; /* intensity of the overlay */
}


/* Ensure generic category images are block-level and circular so overlays clip correctly */
.woocommerce ul.products li.product-category img {
    display: block;
    border-radius: 300px !important;
}

/* If the theme raises the image above overlays, force it below */
.woocommerce ul.products li.product-category a img {
    position: relative;
    z-index: 0 !important;
}

/* Extra robustness: show image overlay when hovering the anchor that contains an <img> */
.woocommerce ul.products li.product-category a:has(img):hover img,
.woocommerce ul.products li.product-category a:has(img):focus-visible img {
    box-shadow: inset 0 0 0 9999px rgba(47, 105, 109, 0.7) !important;
}


/* Remove anchor ::after overlay so sizing differences (e.g., .product.last) don't misalign; rely on image-only overlay */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a::after,
.woocommerce ul.products li.product-category a::after {
    content: none !important;
}

/* Ensure hover works regardless of tile size (including .product.last variations) */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a:hover img,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a:focus-visible img,
.woocommerce ul.products li.product-category a:hover img,
.woocommerce ul.products li.product-category a:focus-visible img,
.woocommerce ul.products li.product-category.product.last a:hover img,
.woocommerce ul.products li.product-category.product.last a:focus-visible img {
    box-shadow: inset 0 0 0 9999px rgba(47, 105, 109, 0.7) !important;
}


/* =============================
   Base Categories — Option A styling
   Uniform circular badges 150px with responsive sizes
   ============================= */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a {
    display: grid;
    justify-items: center;
    text-align: center;
}

/* Fixed, uniform badge size; override earlier width:100% */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a img {
    width: 150px;
    height: 150px;
    box-sizing: border-box; /* keep outer circle 150x150 while adding inner space */
    padding: 12%; /* more breathing room; ensures artwork never touches the border */
    object-fit: contain; /* show full icon without cropping */
    object-position: center; /* center the image within the circle */
    background-color: #fff; /* fill the circular badge behind transparent PNGs */
    background-clip: padding-box; /* keep the white fill inside the padding, crisp ring next to border */
    border-radius: 300px; /* keep circular */
    display: block;
    transition: box-shadow .25s ease; /* smooth overlay */
}

/* Image-only teal overlay using #2F696D at 55% for this block */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category:hover a img,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category:focus-within a img {
    box-shadow: inset 0 0 0 9999px rgba(47, 105, 109, 0.7) !important;
}

/* Title under the badge */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a .woocommerce-loop-category__title {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    max-width: 180px; /* align with visual width around the 150px badge */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive badge sizes */
@media (max-width: 1024px) {
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a img {
        width: 140px;
        height: 140px;
    }
}
@media (max-width: 768px) {
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a img {
        width: 120px;
        height: 120px;
    }
}
@media (max-width: 560px) {
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a img {
        width: 100px;
        height: 100px;
    }
}


/* =============================
   Final override — ensure image overlay on hover (Base Categories block)
   ============================= */
/* Keep smooth transition */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a img {
    transition: box-shadow .25s ease;
}

/* Enforce teal overlay exactly on the image on all relevant hover/focus states */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category:hover > a > img,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category:hover a img,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category:focus-within > a > img,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a:hover img,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a:focus-visible img {
    box-shadow: inset 0 0 0 9999px rgba(47, 105, 109, 0.7) !important; /* #2F696D @ 70% */
    border-radius: 300px !important; /* ensure clipping remains circular */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a img { transition: none; }
}

/* Feed Instagram Header display none */
.sbi_header_link {
    display: none;
}
/* Show only custom subcategory block on product category pages with Display type = Subcategories */
body.show-subcats-only #qodef-page-inner {
    display: none !important;
}

.woocommerce-loop-category__title {
    font-size: 14px !important; /* slightly larger for better readability */
    font-weight: 700 !important;
}


/* =============================
   Base Categories — circle container with centered, uncropped image (final override)
   ============================= */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a {
    position: relative;
    display: grid;
    justify-items: center;
    align-items: center; /* vertically center ::before circle and image in the grid cell */
    text-align: center;
    grid-auto-flow: row;
}
/* Create the circular badge as a container (not on the <img>) */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a::before {
    content: "";
    display: block;
    width: 150px;
    height: 150px;
    border: 2px solid #2F696D;
    border-radius: 300px;
    background: #fff;
    grid-area: 1 / 1; /* occupy the first grid cell */
}
/* Place the image centered inside the circle and keep it smaller so it never touches the rim */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a img {
    grid-area: 1 / 1; /* stack over the circle */
    width: auto;
    height: auto;
    max-width: 60%; /* adjust to taste: 70–82% */
    max-height: 60%;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important; /* prevent any clipping of the artwork */
    box-shadow: none !important; /* disable image-only overlay from previous rules */
}
/* Ensure the title sits below the circle */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a .woocommerce-loop-category__title {
    grid-row: 2;
    margin-top: 8px;
}
/* Teal overlay on the circle container (not on the image) */
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a::after {
    content: "";
    grid-area: 1 / 1;
    width: 150px;
    height: 150px;
    border-radius: 300px;
    background: #2F696D;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a:hover::after,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a:focus-visible::after {
    opacity: .6;
}
/* Responsive badge sizes (adjust the container, image scales by percentage) */
@media (max-width: 1024px) {
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a::before,
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a::after {
        width: 140px;
        height: 140px;
    }
}
@media (max-width: 768px) {
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a::before,
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a::after {
        width: 120px;
        height: 120px;
    }
}
@media (max-width: 560px) {
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a::before,
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a::after {
        width: 100px;
        height: 100px;
    }
}


/* =============================
   Responsive font sizes for category titles
   Applies to both generic WooCommerce category tiles and the Base Categories block
   ============================= */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a .woocommerce-loop-category__title {
    font-size: 14px !important; /* desktop default */
    line-height: 1.3; /* keep two-line titles compact and readable */
    font-weight: 700 !important; /* preserve strong emphasis */
}

@media (max-width: 1280px) {
    .woocommerce ul.products li.product-category .woocommerce-loop-category__title,
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a .woocommerce-loop-category__title {
        font-size: 14px !important;
    }
}
@media (max-width: 1024px) {
    .woocommerce ul.products li.product-category .woocommerce-loop-category__title,
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a .woocommerce-loop-category__title {
        font-size: 14px !important;
    }
}
@media (max-width: 768px) {
    .woocommerce ul.products li.product-category .woocommerce-loop-category__title,
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a .woocommerce-loop-category__title {
        font-size: 12px !important;
    }
}
@media (max-width: 560px) {
    .woocommerce ul.products li.product-category .woocommerce-loop-category__title,
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a .woocommerce-loop-category__title {
        font-size: 10px !important;
    }
}
@media (max-width: 400px) {
    .woocommerce ul.products li.product-category .woocommerce-loop-category__title,
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a .woocommerce-loop-category__title {
        font-size: 10px !important;
    }
}


/* =============================
   Category count — remove special styling on <mark class="count">(18)</mark>
   Applies to both generic WooCommerce grids and the Base Categories block
   ============================= */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark.count,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a .woocommerce-loop-category__title mark.count {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    font-weight: 400 !important; /* keep the number unbolded */
    color: inherit !important; /* follow text color without extra highlight */
    text-decoration: none !important;
}
/* Ensure hover/focus states don’t reapply styles from theme */
.woocommerce ul.products li.product-category:hover a .woocommerce-loop-category__title mark.count,
.woocommerce ul.products li.product-category:focus-within a .woocommerce-loop-category__title mark.count,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category:hover a .woocommerce-loop-category__title mark.count,
.qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category:focus-within a .woocommerce-loop-category__title mark.count {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    font-weight: 400 !important;
    color: inherit !important;
}

/* =============================
   Mobile: allow long words in category titles to break/wrap
   ============================= */
@media (max-width: 560px) {
    .woocommerce ul.products li.product-category .woocommerce-loop-category__title,
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a .woocommerce-loop-category__title {
        white-space: normal !important; /* ensure wrapping is allowed */
        overflow-wrap: anywhere; /* modern safe breaking of long words */
        word-break: break-word; /* legacy support */
        word-wrap: break-word; /* legacy alias */
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto; /* use hyphenation if dictionaries are available */
    }
}

@media (max-width: 400px) {
    .woocommerce ul.products li.product-category .woocommerce-loop-category__title,
    .qodef-woo-subcats-before-inner ul.products.qodef-woo-subcats-list li.product-category a .woocommerce-loop-category__title {
        max-width: 100% !important; /* avoid extra clipping on very small screens */
    }
}

:root .qodef-page-title{
	background-color:#2F696D !important
}



.checkbox {
  color: black;
}

#shipping_method_0_local_pickup2 {
  color: black;
}
label {
  color: black;
}