/**
 * Odiz Product Browser
 * Modern, responsive hierarchical category/product browser.
 */

.odiz-pb {
    --pb-brand: #fff400;
    --pb-brand-dark: #d4cc00;
    --pb-accent: #2c5aa0;
    --pb-accent-dark: #1e3f73;
    --pb-ink: #1a1a1a;
    --pb-muted: #6c757d;
    --pb-bg: #f8f9fa;
    --pb-card: #ffffff;
    --pb-border: #e6e8eb;
    --pb-radius: 14px;
    --pb-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 6px 20px rgba(16, 24, 40, 0.06);
    --pb-shadow-hover: 0 10px 30px rgba(16, 24, 40, 0.14);
}

/*
 * Full-width layout.
 *
 * We add the `et_no_sidebar` body class (see body_class filter) so Divi's own
 * layout collapses #left-area to 100% and removes the sidebar + divider line.
 * Here we neutralise Divi's remaining width constraints (.container max-width
 * and side padding) so the gray band fills the whole content area edge-to-edge,
 * top and sides included.
 */
body.odiz-pb-page #main-content {
    padding-top: 0 !important;
}

body.odiz-pb-page #main-content .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.odiz-pb-page #content-area,
body.odiz-pb-page #left-area {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Divi draws a vertical sidebar divider via .container:before - kill it. */
body.odiz-pb-page #main-content .container:before {
    display: none !important;
}

/* The gray band now simply fills its (full-width) parent. */
.odiz-pb--full {
    width: 100%;
    background: var(--pb-bg);
    padding: 32px 32px 64px;
    box-sizing: border-box;
}

.odiz-pb__inner {
    max-width: 1280px;
    margin: 0 auto;
}

/* ---------- Breadcrumbs ---------- */
.odiz-pb-breadcrumbs {
    margin: 0 0 18px;
}

.odiz-pb-crumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 0.9rem;
}

.odiz-pb-crumb {
    display: inline-flex;
    align-items: center;
    color: var(--pb-muted);
}

.odiz-pb-crumb a {
    color: var(--pb-muted);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}

.odiz-pb-crumb a:hover {
    color: var(--pb-accent);
}

.odiz-pb-crumb .odiz-pb-sep {
    margin: 0 4px 0 8px;
    color: #c2c7cd;
}

.odiz-pb-crumb.is-current {
    color: var(--pb-ink);
    font-weight: 700;
}

/* ---------- Header ---------- */
.odiz-pb-header {
    margin: 0 0 28px;
    padding: 34px 30px;
    background: linear-gradient(135deg, var(--pb-brand) 0%, #fde047 100%);
    border: 1px solid #e7df00;
    border-radius: var(--pb-radius);
    box-shadow: var(--pb-shadow);
}

.odiz-pb-title {
    margin: 0;
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--pb-ink);
    line-height: 1.1;
}

.odiz-pb-description {
    margin-top: 10px;
    max-width: 720px;
    color: #333;
    font-size: 1.02rem;
    line-height: 1.6;
}

/* ---------- Sections ---------- */
.odiz-pb-section {
    margin-top: 8px;
}

.odiz-pb-section + .odiz-pb-section {
    margin-top: 44px;
}

.odiz-pb-subhead {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--pb-ink);
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--pb-border);
}

/* ---------- Category grid ---------- */
.odiz-pb-grid--cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.odiz-pb-card {
    display: flex;
    flex-direction: column;
    background: var(--pb-card);
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--pb-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    height: 100%;
}

.odiz-pb-card:hover,
.odiz-pb-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--pb-shadow-hover);
    border-color: var(--pb-brand-dark);
}

.odiz-pb-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.odiz-pb-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.odiz-pb-card:hover .odiz-pb-card__media img {
    transform: scale(1.05);
}

.odiz-pb-card__placeholder {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background:
        linear-gradient(135deg, var(--pb-brand) 0%, #fde047 100%);
    opacity: 0.65;
}

.odiz-pb-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px 18px;
    flex: 1 1 auto;
}

.odiz-pb-card__title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--pb-ink);
    line-height: 1.3;
}

.odiz-pb-card__count {
    font-size: 0.85rem;
    color: var(--pb-muted);
    font-weight: 600;
}

.odiz-pb-card__cta {
    margin-top: auto;
    padding-top: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--pb-accent);
    transition: color 0.15s ease;
}

.odiz-pb-card:hover .odiz-pb-card__cta {
    color: var(--pb-accent-dark);
}

/*
 * ---------- WooCommerce product loop within the browser ----------
 * Product cards are styled to MATCH the category cards (.odiz-pb-card): an
 * edge-to-edge media box at the top (4:3, object-fit:cover, gray backdrop,
 * hover zoom) with a padded body below for the title + price. WooCommerce's
 * loop markup on this site is:
 *   li.product > a.woocommerce-loop-product__link
 *       > span.onsale (optional)
 *       > span.et_shop_image > img + span.et_overlay   (Divi wrapper)
 *       > h2.woocommerce-loop-product__title
 *       > span.price
 * The child theme (category-archive.css) fights us with unscoped !important
 * rules (absolute images, padding-bottom:100% squares), so most declarations
 * here use !important and are also repeated in the mobile @media blocks below.
 */
.odiz-pb-products ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.odiz-pb-products ul.products::before,
.odiz-pb-products ul.products::after {
    display: none !important;
}

/* Card shell - mirrors .odiz-pb-card (no padding; media is edge-to-edge). */
.odiz-pb-products ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    background: var(--pb-card);
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius) !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-shadow: var(--pb-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    box-sizing: border-box;
}

.odiz-pb-products ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--pb-shadow-hover);
    border-color: var(--pb-brand-dark);
}

/* The product link is the flex column that lays out media + body. */
.odiz-pb-products ul.products li.product a.woocommerce-LoopProduct-link,
.odiz-pb-products ul.products li.product a.woocommerce-loop-product__link {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
    z-index: 1 !important;
    text-decoration: none !important;
    color: inherit !important;
    padding: 0 !important;
}

/*
 * Media box = Divi's span.et_shop_image (falls back to the link's first child
 * if the theme wrapper is absent). Mirrors .odiz-pb-card__media: fixed 4:3
 * ratio, gray backdrop, image cropped to fill (cover) edge-to-edge, no radius
 * on the image itself since the card clips with overflow:hidden.
 */
.odiz-pb-products ul.products li.product .et_shop_image,
.odiz-pb-products ul.products li.product .woocommerce-LoopProduct-link > *:first-child,
.odiz-pb-products ul.products li.product .woocommerce-loop-product__link > *:first-child {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    background: #f1f3f5 !important;
    border-radius: 0 !important;
    margin: 0 0 0 !important;
}

/* Sale flash sits on top of the media, matching WooCommerce placement. */
.odiz-pb-products ul.products li.product .onsale {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    margin: 0 !important;
    z-index: 3 !important;
}

/* The image fills the media box and crops to cover, like category cards. */
.odiz-pb-products ul.products li.product img,
.odiz-pb-products ul.products li.product .attachment-woocommerce_thumbnail,
.odiz-pb-products ul.products li.product .et_shop_image img,
.odiz-pb-products ul.products li.product .woocommerce-LoopProduct-link img,
.odiz-pb-products ul.products li.product .woocommerce-loop-product__link img,
.odiz-pb-products ul.products li.product a img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: cover !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: block !important;
    z-index: 1 !important;
    transition: transform 0.35s ease !important;
}

.odiz-pb-products ul.products li.product:hover img {
    transform: scale(1.05) !important;
}

/* Divi's hover overlay - keep it above the image but below the sale flash. */
.odiz-pb-products ul.products li.product .et_overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
}

/*
 * Body = the title + price, given the same padding as .odiz-pb-card__body.
 * They live directly inside the link, after the media box, in normal flow.
 */
.odiz-pb-products ul.products li.product .woocommerce-loop-product__title,
.odiz-pb-products ul.products li.product h2 {
    position: static !important;
    clear: both !important;
    margin: 0 !important;
    padding: 16px 18px 0 !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--pb-ink) !important;
}

.odiz-pb-products ul.products li.product .price {
    position: static !important;
    clear: both !important;
    margin: 0 !important;
    padding: 8px 18px 18px !important;
    margin-top: auto !important;
    font-weight: 700 !important;
    color: var(--pb-accent) !important;
}

/*
 * z-index safety: the theme forces the header to z-index:9999. Make sure
 * nothing inside our product cards can stack above it.
 */
.odiz-pb-products,
.odiz-pb-products ul.products,
.odiz-pb-products ul.products li.product {
    position: relative;
    z-index: 0 !important;
}

/*
 * ---------- Mobile media-box re-assertions ----------
 * The child theme's category-archive.css re-applies its own image rules INSIDE
 * @media blocks at 980px, 600px and 480px. A media-query rule always beats an
 * equal-specificity non-media rule, so our base media-box wrapper (the 4:3
 * aspect-ratio box) can lose on mobile. We therefore re-assert the media box
 * and the cover-fill image at each of those breakpoints so the product cards
 * keep matching the category cards on every screen size.
 */
@media (max-width: 980px) {
    .odiz-pb-products ul.products li.product .et_shop_image,
    .odiz-pb-products ul.products li.product .woocommerce-LoopProduct-link > *:first-child,
    .odiz-pb-products ul.products li.product .woocommerce-loop-product__link > *:first-child {
        position: relative !important;
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .odiz-pb-products ul.products li.product img,
    .odiz-pb-products ul.products li.product .attachment-woocommerce_thumbnail,
    .odiz-pb-products ul.products li.product .et_shop_image img,
    .odiz-pb-products ul.products li.product .woocommerce-LoopProduct-link img,
    .odiz-pb-products ul.products li.product .woocommerce-loop-product__link img,
    .odiz-pb-products ul.products li.product a img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        object-fit: cover !important;
        margin: 0 !important;
        display: block !important;
    }
}

@media (max-width: 600px) {
    .odiz-pb-products ul.products li.product .et_shop_image,
    .odiz-pb-products ul.products li.product .woocommerce-LoopProduct-link > *:first-child,
    .odiz-pb-products ul.products li.product .woocommerce-loop-product__link > *:first-child {
        position: relative !important;
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .odiz-pb-products ul.products li.product img,
    .odiz-pb-products ul.products li.product .attachment-woocommerce_thumbnail,
    .odiz-pb-products ul.products li.product .et_shop_image img,
    .odiz-pb-products ul.products li.product .woocommerce-LoopProduct-link img,
    .odiz-pb-products ul.products li.product .woocommerce-loop-product__link img,
    .odiz-pb-products ul.products li.product a img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        object-fit: cover !important;
        margin: 0 !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    .odiz-pb-products ul.products li.product .et_shop_image,
    .odiz-pb-products ul.products li.product .woocommerce-LoopProduct-link > *:first-child,
    .odiz-pb-products ul.products li.product .woocommerce-loop-product__link > *:first-child {
        position: relative !important;
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .odiz-pb-products ul.products li.product img,
    .odiz-pb-products ul.products li.product .attachment-woocommerce_thumbnail,
    .odiz-pb-products ul.products li.product .et_shop_image img,
    .odiz-pb-products ul.products li.product .woocommerce-LoopProduct-link img,
    .odiz-pb-products ul.products li.product .woocommerce-loop-product__link img,
    .odiz-pb-products ul.products li.product a img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        object-fit: cover !important;
        margin: 0 !important;
        display: block !important;
    }

    .odiz-pb-products ul.products li.product .woocommerce-loop-product__title,
    .odiz-pb-products ul.products li.product h2 {
        padding: 12px 12px 0 !important;
        font-size: 0.98rem !important;
    }

    .odiz-pb-products ul.products li.product .price {
        padding: 6px 12px 12px !important;
    }
}

/* ---------- Empty state ---------- */
.odiz-pb-empty {
    background: var(--pb-card);
    border: 1px dashed var(--pb-border);
    border-radius: var(--pb-radius);
    padding: 48px 24px;
    text-align: center;
    color: var(--pb-muted);
    font-size: 1.05rem;
}

/*
 * ---------- Responsive ----------
 * We force an explicit column count on mobile instead of auto-fill/minmax so
 * the grid can't overflow, and re-assert float:none + box-sizing on the
 * product <li> at every mobile breakpoint the child theme touches (768/600/
 * 480px) so its media-query floats/margins can't push cards off-screen. With
 * display:grid the grid track defines each card's width, so the theme's
 * width:100% on li.product just fills its own track harmlessly.
 */
@media (max-width: 768px) {
    .odiz-pb--full {
        padding: 20px 16px 48px;
    }

    .odiz-pb-header {
        padding: 26px 20px;
    }

    .odiz-pb-grid--cats,
    .odiz-pb-products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px;
    }

    .odiz-pb-products ul.products li.product {
        float: none !important;
        clear: none !important;
        width: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
}

@media (max-width: 600px) {
    .odiz-pb-products ul.products li.product {
        float: none !important;
        clear: none !important;
        width: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .odiz-pb-grid--cats,
    .odiz-pb-products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .odiz-pb-products ul.products li.product {
        float: none !important;
        clear: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    .odiz-pb-card__body {
        padding: 12px 12px 14px;
    }

    .odiz-pb-card__title {
        font-size: 0.98rem;
    }

    .odiz-pb-crumbs {
        font-size: 0.82rem;
    }
}

/*
 * Belt-and-suspenders: never let anything inside the browser cause horizontal
 * overflow on small screens. The theme's absolute-positioned images and wide
 * fixed widths are the usual culprits; this clamps the whole container.
 */
@media (max-width: 768px) {
    .odiz-pb,
    .odiz-pb__inner,
    .odiz-pb-products,
    .odiz-pb-products ul.products {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}