/*
 * TechZone — /categories/ page: Ecomus category grid overrides
 * ─────────────────────────────────────────────────────────────
 * ALL rules are scoped to body.tz-page-categories so they cannot
 * affect the homepage, shop, product pages, or any other page.
 *
 * Problems fixed:
 *  1. SVG / PNG logos overflow outside card boundaries.
 *  2. Cards are too tall (default vertical 126% aspect ratio).
 *  3. No padding inside the card image area — logos touch the edges.
 *  4. ecomus-categories-grid__image wrapper div (custom-source mode)
 *     is unstyled, breaking the absolutely-positioned image inside it.
 */

/* ═══════════════════════════════════════════════════════════════════
   1. GRID LAYOUT — enforce columns so cards don't spread to 100% width
      when Elementor CSS variables are missing or not computed yet.
   ═══════════════════════════════════════════════════════════════════ */

.tz-page-categories .ecomus-categories-grid__items {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* override the flex + flex-wrap from the parent theme */
    flex-wrap: unset;
}

/* Each item fills its grid cell — override the flex calc() width */
.tz-page-categories .ecomus-categories-grid__item {
    width: 100% !important;
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   2. CARD ASPECT RATIO — square (100%) instead of tall portrait (126%)
      Smaller, more compact cards that show more items on screen.
   ═══════════════════════════════════════════════════════════════════ */

.tz-page-categories .ecomus-categories-grid {
    --em-ratio-percent: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════
   3. CARD LINK — must be the positioned ancestor for all absolute children
   ═══════════════════════════════════════════════════════════════════ */

.tz-page-categories .ecomus-categories-grid__item a {
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    background: #f5f5f5; /* neutral card background */
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   4. IMAGE WRAPPER (custom-source mode only)
      The PHP wraps the image in <div class="ecomus-categories-grid__image">
      which has NO styles. The absolutely-positioned img inside resolves
      its % dimensions against the <a> correctly IF the wrapper itself
      is also positioned — without this the wrapper is in normal flow
      (height: 0) and visually the image renders at its intrinsic SVG size.
   ═══════════════════════════════════════════════════════════════════ */

.tz-page-categories .ecomus-categories-grid__image {
    position: absolute !important;
    inset: 0 !important;      /* top:0; right:0; bottom:0; left:0 */
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════════════
   5. IMAGES — constrain SVGs and PNGs inside the card
      object-fit: contain  → logo fills as much space as possible
                              without cropping (correct for brand logos)
      padding              → breathing room so logo doesn't touch edges
      The !important values beat the parent theme's specificity.
   ═══════════════════════════════════════════════════════════════════ */

.tz-page-categories .ecomus-categories-grid__item a img,
.tz-page-categories .ecomus-categories-grid__image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;   /* contain = no crop, logo scales inside */
    object-position: center !important;
    padding: 22px !important;         /* breathing room around the logo */
    box-sizing: border-box !important;
    max-width: none !important;       /* prevent older SVG size caps */
    display: block !important;
    border-radius: 0 !important;      /* logo image itself needs no radius */
}

/* Hover scale: must combine translate (none here) + scale in one transform
   so we don't accidentally reset the absolutely-positioned layout */
.tz-page-categories .ecomus-eff-img-zoom:hover img {
    transform: scale(1.06) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   6. CATEGORY NAME LABEL — smaller, less padding, less bold button
   ═══════════════════════════════════════════════════════════════════ */

.tz-page-categories .ecomus-categories-grid__title {
    --em-button-padding-left:   18px;
    --em-button-padding-right:  18px;
    --em-button-padding-top:    9px;
    --em-button-padding-bottom: 9px;
    --em-button-font-size:      13px;
    --em-button-line-height:    1.1;
    bottom: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   7. RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════════ */

/* Tablet: 2 columns */
@media (max-width: 1024px) {
    .tz-page-categories .ecomus-categories-grid__items {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* Large mobile: still 2 columns but tighter gap */
@media (max-width: 600px) {
    .tz-page-categories .ecomus-categories-grid__items {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .tz-page-categories .ecomus-categories-grid__item a img,
    .tz-page-categories .ecomus-categories-grid__image img {
        padding: 14px !important;
    }
    .tz-page-categories .ecomus-categories-grid__title {
        --em-button-padding-left:  12px;
        --em-button-padding-right: 12px;
        --em-button-padding-top:   7px;
        --em-button-padding-bottom:7px;
        --em-button-font-size:     11px;
        bottom: 10px;
    }
}

/* Very small phones: 2 columns still, minimal gap */
@media (max-width: 400px) {
    .tz-page-categories .ecomus-categories-grid__items {
        gap: 8px;
    }
}

/* ─── Pagination: center-align ─────────────────────────────────────────── */
.tz-page-categories .ecomus-categories-grid .woocommerce-pagination {
    display: flex;
    justify-content: center;
}