/*
Theme Name: Icebox
Theme URI: https://icebox.com
Author: Icebox
Description: Exact replica of Icebox.com using original CSS/JS files. Requires ACF Pro for content editing.
Version: 5.5.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: icebox
*/

/* ==========================================================================
   FIXES & OVERRIDES
   ========================================================================== */

/* Fix white padding at top */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

body.admin-bar {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.admin-bar .top-banner {
    margin-top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .top-banner {
        margin-top: 46px;
    }
}

/* Main content area */
#content,
main,
.site-main {
    margin: 0;
    padding: 0;
}

/* Fix potential conflicts */
.entry-content,
.page-content {
    margin: 0;
    padding: 0;
}

/* Fix WooCommerce */
.woocommerce-page .site-main {
    padding: 0;
}

/* ACF Hidden */
.acf-hidden {
    display: none !important;
}

/* ==========================================================================
   CATEGORY TABS - Exact match to screenshot (rounded squares, not circles)
   ========================================================================== */

.categories-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    padding: 50px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.categories-tabs a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease;
}

.categories-tabs a:hover {
    transform: translateY(-5px);
}

.categories-tabs .smart-picture {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 12px;
    overflow: hidden;
    background-color: #f5f5f5;
    margin-bottom: 15px;
}

.categories-tabs .smart-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.categories-tabs a:hover .smart-picture img {
    transform: scale(1.05);
}

.categories-tabs span {
    font-size: 15px;
    font-weight: 500;
    color: #181e22;
    text-align: center;
}

@media (max-width: 992px) {
    .categories-tabs {
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .categories-tabs {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .categories-tabs span {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .categories-tabs {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Product card images */
.product-card__media {
    background-color: #f8f8f8;
    aspect-ratio: 1/1;
    position: relative;
    overflow: hidden;
}

.product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Home spot banners */
.home-spot {
    position: relative;
    min-height: 450px;
}

.home-spot__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Diamonds row */
.diamonds-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 40px 0;
    flex-wrap: wrap;
}

.diamonds-row a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.diamonds-row img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.diamonds-row span {
    font-size: 13px;
    font-weight: 500;
}

/* Home locations */
.home-locations {
    padding: 60px 0;
}

.home-locations__heading {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 40px;
}

.home-locations__heading span {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: #909090;
    margin-top: 12px;
}

.home-location-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    overflow: hidden;
}

.home-location-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.home-location-item__details {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-location-item__city {
    font-size: 12px;
    color: #909090;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.home-location-item__name {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.home-location-item__summary {
    font-size: 14px;
    color: #909090;
    margin: 0 0 20px 0;
}

.home-location-item a {
    display: inline-block;
    border: 1px solid #181e22;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 500;
    color: #181e22;
    text-decoration: none;
    transition: all 0.25s ease;
}

.home-location-item a:hover {
    background: #181e22;
    color: #fff;
}

@media (max-width: 768px) {
    .home-location-item {
        grid-template-columns: 1fr;
    }
}

/* Product placeholder */
.home-row__body p {
    color: #909090;
}

/* ============================================================
   HIDE ROGUE SPLIDE ARROWS
   ============================================================ */

.home-splide > .splide__arrows,
.home-row__body > .splide__arrows,
.home-row__body .splide__arrow,
.home-splide .splide__arrow {
    display: none !important;
}

.home-row__body > .splide__arrow--prev,
.home-row__body > .splide__arrow--next {
    display: none !important;
}

.splide__track .splide__arrow,
.cards-holder .splide__arrow {
    display: none !important;
}

/* ==========================================================================
/* ==========================================================================
   SINGLE PRODUCT PAGE v12 overrides
   ========================================================================== */

body.single-product .is-layout-constrained,
body.single-product .is-layout-flow,
body.single-product .wp-site-blocks,
body.single-product .wp-block-group,
body.single-product .wp-block-post-content,
body.single-product .wp-block-template-part,
body.single-product .wp-block-woocommerce-legacy-template,
body.single-product .entry-content,
body.single-product .site-content,
body.single-product #primary,
body.single-product #page,
body.single-product .woocommerce {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.single-product .is-layout-constrained > *,
body.single-product .is-layout-flow > *,
body.single-product .wp-site-blocks > *,
body.single-product .wp-block-post-content > *,
body.single-product .wp-block-woocommerce-legacy-template > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#itemDetails { width: 100% !important; }
.toggle-row:not(.--active) > .toggle-row__body { display: none; }
.toggle-row.--active > .toggle-row__body { display: block; height: auto; }
.product__item-option:not(.--active):not(.--static) .product-option__body { display: none; }
 */

/* ==========================================================================
   ARCHIVE / SHOP PAGE STYLES
   ========================================================================== */

.results-page {
    padding: 40px 0 60px;
    background: #fff;
}

.results__header {
    text-align: center;
    margin-bottom: 40px;
}

.results__heading {
    font-size: 32px;
    font-weight: 600;
    color: #181e22;
    margin: 0 0 15px 0;
}

.results__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.results__count {
    font-size: 14px;
    color: #666;
}

.results__sorting select {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.results__pagination {
    margin-top: 40px;
    text-align: center;
}

.results__pagination .page-numbers {
    display: inline-flex;
    gap: 5px;
}

.results__pagination a,
.results__pagination span {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #181e22;
    font-size: 14px;
}

.results__pagination .current {
    background: #181e22;
    color: #fff;
    border-color: #181e22;
}

.results__empty {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

/* ==========================================================================
   GLOBAL CART BADGE — Teal circle badge (Header 2 style as default)
   ========================================================================== */
.cart-count,
.cart-counter {
    background: #2bb77a !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    min-width: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -4px !important;
    right: -8px !important;
    line-height: 1 !important;
    border: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    width: auto !important;
    padding: 0 3px !important;
}

@media screen and (max-width: 991px) {
    .cart-count,
    .cart-counter {
        font-size: 9px !important;
        height: 15px !important;
        min-width: 15px !important;
        right: -4px !important;
        top: -3px !important;
    }
}

/* ==========================================================================
   PRODUCT GRID — even last-row spread + responsive columns
   ========================================================================== */

/* Ghost filler cards produced by iceboxFillGrid() must be invisible but still
   occupy the same grid cell width as real product cards.                     */
.icebox-ghost-card {
    visibility: hidden !important;
    pointer-events: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Desktop 4-column (default from base.css already, but let's be explicit) */
.cards-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Compact / 2-column toggle */
.cards-grid.cards-grid--compact {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Large tablet → 3 columns */
@media screen and (max-width: 1200px) {
    .cards-grid:not(.cards-grid--compact) {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Tablet → 2 columns */
@media screen and (max-width: 768px) {
    .cards-grid,
    .cards-grid:not(.cards-grid--compact) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile → still 2 columns (keeps cards large enough to tap) */
@media screen and (max-width: 480px) {
    .cards-grid,
    .cards-grid:not(.cards-grid--compact) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2px !important;
    }
}

/* ==========================================================================
   PRODUCT CARD — image reveal fix
   Inline onload/onerror handlers (added in template-functions.php) call
   .classList.add('--loaded') on the wrapper, which base.css already uses to
   show the image and hide the spinner.  These rules just make sure the
   initial hidden state and the revealed state are always correct regardless
   of any CSS load-order issues.
   ========================================================================== */

/* Ensure the spinner is on top until --loaded is applied */
.product-card__media .card-loader {
    z-index: 2;
    pointer-events: none;
}

/* Once revealed, image is visible and spinner is gone */
.product-card__media.--loaded img.product-card__img {
    opacity: 1 !important;
    transition: opacity 0.25s ease !important;
}

.product-card__media.--loaded .card-loader {
    display: none !important;
}