:root {
    --dt-ink: #101828;
    --dt-muted: #667085;
    --dt-line: #e7eaf0;
    --dt-soft: #f6f8fb;
    --dt-brand: #111827;
    --dt-accent: #2563eb;
    --dt-white: #fff;
}
.dt-home { background:#fff; color:var(--dt-ink); }
.dt-home * { box-sizing:border-box; }
.dt-shell { width:min(1180px, calc(100% - 36px)); margin-inline:auto; }
.dt-section { padding:76px 0; }
.dt-eyebrow { display:inline-block; margin-bottom:12px; font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--dt-accent); }
.dt-hero { background:linear-gradient(135deg,#f7f9fc 0%,#eef4ff 100%); padding:68px 0; overflow:hidden; }
.dt-hero__grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); gap:64px; align-items:center; }
.dt-hero h1 { max-width:720px; margin:0; font-size:clamp(44px,6vw,76px); line-height:.98; letter-spacing:-.055em; font-weight:800; color:#101828; }
.dt-hero__content > p { max-width:650px; margin:24px 0 0; font-size:18px; line-height:1.7; color:var(--dt-muted); }
.dt-hero__actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.dt-btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 23px; border-radius:8px; text-decoration:none!important; font-size:14px; font-weight:750; transition:.2s ease; }
.dt-btn--primary { background:var(--dt-brand); color:#fff!important; border:1px solid var(--dt-brand); }
.dt-btn--primary:hover { transform:translateY(-1px); background:#000; }
.dt-btn--ghost { background:#fff; color:var(--dt-ink)!important; border:1px solid #d5dae4; }
.dt-btn--ghost:hover { border-color:#9ba4b3; }
.dt-btn--light { background:#fff; color:#111827!important; }
.dt-hero__trust { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:30px; color:#475467; font-size:13px; font-weight:600; }
.dt-hero__visual { position:relative; min-height:480px; border-radius:24px; background:#fff; box-shadow:0 30px 80px rgba(16,24,40,.12); overflow:hidden; }
.dt-hero__visual > img { width:100%; height:100%; min-height:480px; object-fit:cover; display:block; }
.dt-hero__product-label { position:absolute; left:20px; right:20px; bottom:20px; padding:16px 18px; border-radius:12px; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); color:var(--dt-ink)!important; text-decoration:none!important; box-shadow:0 8px 30px rgba(16,24,40,.1); }
.dt-hero__product-label small { display:block; color:var(--dt-muted); margin-bottom:4px; }
.dt-hero__product-label strong { display:block; font-size:15px; }
.dt-hero__placeholder { min-height:480px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 30% 20%,#dbeafe,#f8fafc 45%,#e2e8f0); letter-spacing:.2em; }
.dt-hero__placeholder span { font-size:28px; color:#64748b; }
.dt-hero__placeholder strong { font-size:52px; letter-spacing:.08em; }
.dt-section__head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:30px; }
.dt-section__head h2 { margin:0!important; font-size:clamp(32px,4vw,46px)!important; line-height:1.08!important; letter-spacing:-.035em; color:var(--dt-ink)!important; }
.dt-section__head p { margin:10px 0 0; color:var(--dt-muted); }
.dt-section__head > a { flex:0 0 auto; color:var(--dt-ink); font-weight:700; text-decoration:none; }
.dt-section__head--center { justify-content:center; text-align:center; }
.dt-category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.dt-category-card { display:block; overflow:hidden; border:1px solid var(--dt-line); border-radius:14px; background:#fff; color:var(--dt-ink)!important; text-decoration:none!important; transition:.2s ease; }
.dt-category-card:hover { transform:translateY(-3px); box-shadow:0 16px 38px rgba(16,24,40,.09); }
.dt-category-card__media { display: flex !important; align-items: center; justify-content: center; aspect-ratio: 3 / 3; width: 100%; background: #f4faf8; border-bottom: 1px solid #e4e9ee; overflow: hidden; padding: 18px; box-sizing: border-box; }
.dt-category-card__media img { object-fit: contain !important; display: block; margin: 0 !important; border-radius: 0 !important; image-rendering: auto; }
.dt-category-card:hover img { transform:scale(1.035); }
.dt-category-card__fallback { width:100%; height:100%; display:grid; place-items:center; font-size:64px; font-weight:800; color:#c7d2e0; background:linear-gradient(135deg,#f8fafc,#edf2f7); }
.dt-category-card__info { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:16px 18px; }
.dt-category-card__info strong { font-size:15px; }
.dt-category-card__info small { color:var(--dt-muted); }
.dt-products { background:var(--dt-soft); }
.dt-product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.dt-product-card { display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid #e8ebf1; border-radius:14px; overflow:hidden; transition:.2s ease; }
.dt-product-card:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(16,24,40,.09); }
.dt-product-card__image { position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:#f5f6f8; }
.dt-product-card__image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.dt-product-card:hover .dt-product-card__image img { transform:scale(1.035); }
.dt-product-card__placeholder { width:100%; height:100%; display:grid; place-items:center; font-size:42px; font-weight:800; color:#b7c0cd; }
.dt-product-card__badge { position:absolute; top:12px; left:12px; z-index:2; padding:6px 9px; background:#dc2626; color:#fff; border-radius:6px; font-size:11px; font-weight:800; text-transform:uppercase; }
.dt-product-card__badge--muted { background:#475467; }
.dt-product-card__body { display:flex; flex-direction:column; flex:1; padding:16px; }
.dt-product-card__title { color:var(--dt-ink)!important; text-decoration:none!important; font-size:15px; font-weight:700; line-height:1.45; min-height:43px; }
.dt-product-card__price { margin:10px 0 14px; font-size:16px; font-weight:800; color:#111827; }
.dt-product-card__price del { color:#98a2b3; font-weight:500; margin-right:6px; }
.dt-product-card__price ins { text-decoration:none; }
.dt-product-card__button { margin-top:auto!important; display:flex!important; align-items:center!important; justify-content:center!important; min-height:42px!important; width:100%!important; border-radius:7px!important; border:1px solid var(--dt-brand)!important; background:var(--dt-brand)!important; color:#fff!important; text-decoration:none!important; font-size:13px!important; font-weight:750!important; padding:9px 12px!important; }
.dt-empty-products { padding:30px; border:1px dashed #cbd5e1; border-radius:12px; background:#fff; }
.dt-empty-products h3 { margin-top:0; }
.dt-promo { padding:0 0 76px; background:var(--dt-soft); }
.dt-promo__inner { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:42px 46px; border-radius:18px; background:#111827; color:#fff; }
.dt-promo .dt-eyebrow { color:#93c5fd; }
.dt-promo h2 { margin:0!important; max-width:730px; font-size:clamp(30px,4vw,46px)!important; color:#fff!important; letter-spacing:-.035em; }
.dt-promo p { max-width:760px; margin:12px 0 0; color:#cbd5e1; }
.dt-benefit-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.dt-benefit-grid article { padding:24px; border:1px solid var(--dt-line); border-radius:14px; }
.dt-benefit-grid article > span { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#eff6ff; color:var(--dt-accent); font-size:11px; font-weight:800; }
.dt-benefit-grid h3 { margin:18px 0 8px!important; font-size:18px!important; color:var(--dt-ink)!important; }
.dt-benefit-grid p { margin:0; color:var(--dt-muted); line-height:1.65; font-size:14px; }
.dt-about { border-top:1px solid var(--dt-line); }
.dt-about__grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; }
.dt-about h2 { margin:0!important; font-size:clamp(30px,4vw,46px)!important; letter-spacing:-.035em; color:var(--dt-ink)!important; }
.dt-about p { margin:0 0 16px; color:var(--dt-muted); line-height:1.8; font-size:16px; }
@media (max-width: 960px) {
    .dt-hero__grid { grid-template-columns:1fr; gap:34px; }
    .dt-hero__visual, .dt-hero__visual > img, .dt-hero__placeholder { min-height:420px; }
    .dt-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dt-benefit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dt-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .dt-shell { width:min(100% - 24px,1180px); }
    .dt-section { padding:54px 0; }
    .dt-hero { padding:46px 0; }
    .dt-hero h1 { font-size:44px; }
    .dt-hero__content > p { font-size:16px; }
    .dt-hero__visual, .dt-hero__visual > img, .dt-hero__placeholder { min-height:330px; }
    .dt-section__head { display:block; }
    .dt-section__head > a { display:inline-block; margin-top:14px; }
    .dt-category-grid { grid-template-columns:1fr; }
    .dt-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .dt-product-card__body { padding:12px; }
    .dt-product-card__title { font-size:13px; }
    .dt-promo__inner { display:block; padding:30px 24px; }
    .dt-promo__inner .dt-btn { margin-top:22px; }
    .dt-benefit-grid { grid-template-columns:1fr; }
    .dt-about__grid { grid-template-columns:1fr; gap:26px; }
}
<?php
/**
 * =============================================================================
 *  DIGITAL TIENDA  ·  HOMEPAGE CATEGORY CARD FIX
 *  v1.0.0
 * =============================================================================
 * THE PROBLEM
 *   The homepage "Shop by Category" cards render their icons blurry and
 *   massively enlarged, while the SAME images look crisp on /shop/.
 *
 *   Cause: two different modules with different class names, and only one of
 *   them sizes the image sensibly.
 *
 *     /shop/     .dt-shop__category-media img   → object-fit:contain, max 80px
 *                (digitaltienda-shop-hero.php — correct)
 *
 *     homepage   .dt-category-card__media img   → stretched to fill the card
 *                (assets/css/digitaltienda-home.css — wrong)
 *
 *   The source files (bethemestore-home-icon4/6.webp) are small flat icons,
 *   roughly 500x360. Scaling those up to a ~380px-wide card and cropping to
 *   fill is what produces the pixelated result. They are icons, not
 *   photographs — they must be contained and centred, never cover-cropped.
 *
 * THE FIX
 *   Override the media box for .dt-category-card__media to match the shop
 *   treatment: fixed aspect ratio, pale background, icon contained at a sane
 *   max size. Enqueued after digitaltienda-home.css so it wins.
 *
 * ⚠ WHY NOT EDIT digitaltienda-home.css DIRECTLY
 *   You can, and it is the tidier long-term fix — the rules below are written
 *   so they can be pasted straight in. This module exists so the fix survives
 *   a theme update, since digitaltienda-home.css is a theme file.
 *
 * ⚠ HOMEPAGE SHOWS FEWER CATEGORIES THAN /shop/
 *   The homepage lists 2 categories (Accessories, TV/Audio); /shop/ lists 3
 *   (those plus Mixed). Different queries in different modules. Not a bug this
 *   file can fix — if you want them consistent, the homepage category query
 *   lives in the template that outputs .dt-categories.
 *
 * DEPENDENCIES
 *   DEP:CSS  loads after 'digitaltienda-home' handle
 *   SELF-SUFFICIENT: YES
 *
 * INSTALL
 *   require_once get_stylesheet_directory() . '/digitaltienda-home-fix.php';
 * -----------------------------------------------------------------------------
 */

if ( ! defined( 'ABSPATH' ) ) exit;

if ( ! defined( 'DT_HOME_FIX_VERSION' ) ) {
    define( 'DT_HOME_FIX_VERSION', '1.0.0' );
}

add_action( 'wp_enqueue_scripts', 'dt_home_category_fix', 30 );

function dt_home_category_fix() {

    // Only the front page carries the .dt-categories section.
    if ( ! is_front_page() && ! is_home() ) {
        return;
    }

    /* Attach to the theme's own homepage handle when it exists, so this always
       loads after it and wins on source order at equal specificity. Falls back
       to a standalone handle if the theme ever renames it. */
    $handle = wp_style_is( 'digitaltienda-home', 'enqueued' ) ? 'digitaltienda-home' : 'dt-home-fix';

    if ( 'dt-home-fix' === $handle ) {
        wp_register_style( 'dt-home-fix', false, array(), DT_HOME_FIX_VERSION );
        wp_enqueue_style( 'dt-home-fix' );
    }

    wp_add_inline_style( $handle, dt_home_category_css() );
}

function dt_home_category_css() {
    return <<<CSS
/* ═══════════════════════════════════════════════════════════
   HOMEPAGE CATEGORY CARDS
   Match the /shop/ treatment. These are ICONS — contain and centre them.
   cover-cropping a 500x360 flat icon into a ~380px card is what produced the
   blurry, cut-off result.
   ═══════════════════════════════════════════════════════════ */
.dt-category-card{
    display:flex!important;flex-direction:column;
    background:#fff;border:1px solid #e4e9ee;border-radius:10px;overflow:hidden;
    text-decoration:none!important;color:#16202b!important;
    transition:box-shadow .2s,transform .2s,border-color .2s;
}
.dt-category-card:hover{
    border-color:#12866f;box-shadow:0 6px 22px rgba(18,134,111,.12);transform:translateY(-2px);
}

.dt-category-card__media{
    display:flex!important;align-items:center;justify-content:center;
    aspect-ratio:4/3;width:100%;
    background:#f4faf8;
    border-bottom:1px solid #e4e9ee;
    overflow:hidden;padding:18px;
    box-sizing:border-box;
}
.dt-category-card__media img{
    max-width:96px!important;
    max-height:96px!important;
    width:auto!important;
    height:auto!important;
    object-fit:contain!important;
    display:block;
    margin:0!important;
    border-radius:0!important;
    image-rendering:auto;
}

.dt-category-card__info{
    display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    padding:14px 16px;
}
.dt-category-card__info strong{
    font-size:14.5px;font-weight:700;color:#16202b;line-height:1.3;
}
.dt-category-card__info small{
    font-size:12.5px;color:#6b7885;white-space:nowrap;flex-shrink:0;
}

/* Grid: keep cards from stretching to half the viewport when only two exist. */
.dt-category-grid{
    display:grid!important;
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:20px;
}

@media(max-width:600px){
    .dt-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .dt-category-card__media{padding:14px}
    .dt-category-card__media img{max-width:64px!important;max-height:64px!important}
    .dt-category-card__info{flex-direction:column;align-items:flex-start;gap:2px}
}

@media(prefers-reduced-motion:reduce){
    .dt-category-card{transition:none}
    .dt-category-card:hover{transform:none}
}
CSS;
}