/* Utilidad para escalar Sprites de 400x400 a 24x24 de forma segura */
.icon-24 {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
}
.icon-24 > [class*="sprite-"], .icon-24 > [class*="rrss-"], .icon-24 > [class*="catalog-"] {
    transform: scale(0.06); /* 400px * 0.06 = 24px */
    transform-origin: top left;
    position: absolute; top: 0; left: 0;
}

/* Utilidad para escalar Sprites a 60x60 (Categorías) */
.icon-60 {
    width: 60px; height: 60px;
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
}
.icon-60 > [class*="sprite-"], .icon-60 > [class*="rrss-"], .icon-60 > [class*="catalog-"] {
    transform: scale(0.15); /* 400px * 0.15 = 60px */
    transform-origin: top left;
    position: absolute; top: 0; left: 0;
}

/* --- CSS Sprites: RRSS --- */
.rrss-icon {
    width: 400px; height: 400px;
    background-image: url('https://cdn.ohqcc.com/CDN/Client/10_HB/10_CSS%20Sprites/40_RRSS/RRSS.png');
    background-repeat: no-repeat;
    display: inline-block;
}
.rrss-maps      { background-position: 0px 0px; }
.rrss-whatsapp  { background-position: -400px 0px; }
.rrss-instagram { background-position: 0px -400px; }
.rrss-facebook  { background-position: -400px -400px; }

/* --- CSS Sprites: Buy & Payment --- */
.sprite-icon {
    width: 400px; height: 400px;
    background-image: url('https://cdn.ohqcc.com/CDN/Client/10_HB/10_CSS%20Sprites/Buy_Payment.png');
    background-repeat: no-repeat;
    display: inline-block;
}
.sprite-add      { background-position: 0px 0px; }
.sprite-cart     { background-position: -400px 0px; }
.sprite-purchase { background-position: -800px 0px; }
.sprite-bank     { background-position: -1200px 0px; }
.sprite-cash     { background-position: 0px -400px; }
.sprite-btc      { background-position: -400px -400px; }
.sprite-usdc     { background-position: -800px -400px; }
.sprite-usdt     { background-position: -1200px -400px; }

/* --- CSS Sprites: Catalog --- */
.catalog-icon {
    width: 400px; height: 400px;
    background-image: url('https://cdn.ohqcc.com/CDN/Client/10_HB/10_CSS%20Sprites/20_Category/Catalog.png');
    background-repeat: no-repeat;
    display: inline-block;
}
.catalog-flowers   { background-position: 0px 0px; }
.catalog-scenarios { background-position: -400px 0px; }
.catalog-hair-clip { background-position: -800px 0px; }