/* =====================================================
   COMIC THEME CSS - FINAL
===================================================== */

/* -------------------------
   LOGO
------------------------- */
.logo-box {
    position: fixed;
    top: 20px;
    left: 20px;       /* top-left corner */
    z-index: 999;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.logo-box img {
    width: 90px;      /* small logo */
    height: auto;
    display: block;
    filter: drop-shadow(3px 3px 0px black);
}

/* =====================================================
   HOMEPAGE COMIC PANELS
===================================================== */
.comic-panel {
    display: inline-block;
    width: 45%;              /* desktop: 2 per row */
    margin: 2%;
    height: 300px;           /* gives visual weight */
    background-color: #ffe680;
    background-size: cover;   /* image fills panel */
    background-position: center;
    border: 8px solid black;
    box-shadow: 8px 8px 0 black;
    overflow: hidden;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    text-align: center;
}

.comic-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.1;
    z-index: 0;
}

.comic-panel:hover {
    transform: scale(1.05) rotate(-1deg);
    box-shadow: 10px 10px 0 black;
}

.comic-panel h2 {
    font-family: 'Bangers';
    font-size: 2rem;
    color: black;
    text-shadow: 3px 3px white;
    position: relative;
    z-index: 2;
    margin-top: 0;
    top: 40%; /* vertical centering */
}

/* Comic Grid Container */
.comic-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 20px 0;
    list-style: none;
    padding: 0;
}

/* Individual Comic Panel */
.comic-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    width: 200px;  /* consistent width */
    height: 250px; /* consistent height */
    border: 3px solid #000;
    background: #ffe680;
    text-decoration: none;
    color: #000;
    padding: 10px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.comic-panel:hover {
    transform: scale(1.05);
    box-shadow: 5px 5px 0 #000;
}

/* Panel Image */
.panel-image {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.panel-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* keeps image centered and scaled */
}

/* Panel Title */
.panel-title {
    margin-top: 10px;
    font-weight: bold;
    font-family: 'Comic Sans MS', cursive;
    font-size: 16px;
    line-height: 1.2;
}

/* =====================================================
   WOO COMIC PANELS
===================================================== */
.woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 -1%;
    padding: 0;
}

.woocommerce ul.products li.product {
    background: #ffe680;
    border: 6px solid black;
    box-shadow: 6px 6px 0 black;
    padding: 15px;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    box-sizing: border-box;
    margin: 1%;
    flex: 0 0 30%; /* desktop: 3 per row */
    cursor: pointer; /* indicate clickable panel */
}

.woocommerce ul.products li.product::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.1;
    z-index: 0;
}

.woocommerce ul.products li.product:hover {
    transform: scale(1.05) rotate(-1deg);
    box-shadow: 8px 8px 0 black;
}

.woocommerce ul.products li.product img {
    max-width: 100%;
    height: auto;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Bangers';
    font-size: 1.5rem;
    text-align: center;
    color: black;
    text-shadow: 2px 2px white;
    position: relative;
    z-index: 2;
}

.woocommerce ul.products li.product .price {
    font-family: 'Bangers';
    font-size: 1.2rem !important;
    color: #d90000 !important;
    padding-top: 8px;
    display: block;
    text-align: center;
}

.woocommerce span.onsale {
    background: yellow !important;
    color: black !important;
    border: 4px solid black !important;
    border-radius: 0 !important;
    padding: 10px 18px !important;
    font-family: 'Bangers';
    transform: rotate(-10deg);
    box-shadow: 4px 4px 0 black;
    z-index: 5;
}

/* =====================================================
   RESPONSIVE
===================================================== */
/* HOMEPAGE PANELS */
@media (max-width: 1024px) {
    .comic-panel {
        width: 48%;
        margin: 1%;
        height: 250px;
    }
}

@media (max-width: 768px) {
    .comic-panel {
        width: 95%;
        margin: 2.5% auto;
        height: 200px;
    }
}

/* WOO COMIC PANELS */
@media (max-width: 1024px) {
    .woocommerce ul.products li.product {
        flex: 0 0 47%; /* 2 per row */
        padding: 12px;
        border-width: 5px;
        box-shadow: 5px 5px 0 black;
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products li.product {
        flex: 0 0 95%; /* 1 per row */
        margin: 2.5% auto;
        padding: 10px;
        border-width: 4px;
        box-shadow: 4px 4px 0 black;
    }
}

/* =====================================================
   BAM / POW EFFECT
===================================================== */
.bam-effect {
    position: absolute;
    animation: pow .45s ease-out forwards;
    font-size: 3rem;
    color: red;
    text-shadow: 3px 3px yellow;
    z-index: 30;
}

@keyframes pow {
    0% { transform: scale(0.5) rotate(-15deg); opacity: 1; }
    50% { transform: scale(1.2) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 0; }
}

/* Make the entire product panel clickable */
li.type-product > a.woocommerce-LoopProduct-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Comic-style hover effect on product panel */
li.type-product > a.woocommerce-LoopProduct-link:hover {
    transform: scale(1.05);
    box-shadow: 5px 5px 0 #000;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Ensure inner elements (images/titles) fit nicely */
li.type-product img {
    display: block;
    max-width: 100%;
    height: auto;
}

li.type-product h2 {
    margin: 10px 0 0;
}

/* Remove bullets from all lists on the home page / WooCommerce grids */
ul.products, ul.products li, ul {
    list-style: none; /* removes bullets */
    margin: 0;
    padding: 0;
}

/* Keep your background styling intact */
li.product, li.product-category {
    background: #fff url('your-comic-background.png') no-repeat center center;
    background-size: cover; /* keeps the comic background */
}

/* Target WooCommerce subcategory items */
ul.products li.product-category {
    display: flex;
    flex-direction: column;       /* stack image and title */
    justify-content: center;      /* vertical centering */
    align-items: center;          /* horizontal centering */
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    height: auto;                 /* let container expand naturally */
}

/* Wrap the image in a container to control scaling */
ul.products li.product-category .woocommerce-loop-category__link img {
    display: block;
    max-width: 100%;              /* fit within container width */
    max-height: 200px;            /* optional: constrain height without clipping */
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;           /* preserves aspect ratio */
}