/* ================================================================
 * Hidplanet — Design Window 037 — Homepage Section Icon Variants
 * Scope: body.hp-iconv-a / body.hp-iconv-b / body.hp-iconv-c
 * Inert unless one of the three body classes is present.
 *
 * Target: .hp-cat-tile on the homepage "Выберите раздел" grid
 *   6 tiles: Диагностика, TPMS, Сервис, Ключи, Салон, Экстерьер
 * We identify each tile by its href — the anchor URL segment ("/diagnostics",
 * "/tpms", "/service", "/keys", "/interior", "/exterior") — via [href*="..."],
 * hide the inline SVG, and inject a neutral automotive/service icon via
 * background-image data-URI.
 *
 * IMPORTANT: no brand logos, trademarks, or protected marks. All icons
 * are generic diagnostic/tool/service pictograms.
 * ================================================================ */


/* -----------------------------------------------------------------
 * Shared — hide inline SVG when any variant active, ensure icon slot
 * is a positioned box for background-image + accent overlays.
 * ----------------------------------------------------------------- */
body.hp-iconv-a .hp-cat-tile__icon > svg,
body.hp-iconv-b .hp-cat-tile__icon > svg,
body.hp-iconv-c .hp-cat-tile__icon > svg { display: none !important; }

body.hp-iconv-a .hp-cat-tile__icon,
body.hp-iconv-b .hp-cat-tile__icon,
body.hp-iconv-c .hp-cat-tile__icon {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
}


/* =================================================================
 * VARIANT A — WARM LINE ICONS
 * Thin/medium warm-brown line pictograms sitting on a soft warm
 * capsule background. Elegant, not childish.
 * ================================================================= */

body.hp-iconv-a .hp-cat-tile {
    background: #fefbf4;
    border: 1px solid #ebe1cd;
}
body.hp-iconv-a .hp-cat-tile:hover {
    background: #fdf6e6;
    border-color: color-mix(in oklab, #c45619 50%, transparent);
}
body.hp-iconv-a .hp-cat-tile__icon {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 999px;
    background-color: #fbead0;
    background-size: 1.7rem 1.7rem;
    box-shadow: inset 0 0 0 1px rgba(196,86,25,0.10);
}
body.hp-iconv-a .hp-cat-tile:hover .hp-cat-tile__icon {
    background-color: #f8dcb2;
}

/* Diagnostics = OBD connector (16-pin, generic) */
body.hp-iconv-a .hp-cat-tile[href*="/diagnostics"] .hp-cat-tile__icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23a24a15' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 10 Q6 7 9 7 H23 Q26 7 26 10 V17 Q26 20 23 20 L20 20 L18 24 H14 L12 20 L9 20 Q6 20 6 17 Z'/><circle cx='11' cy='12' r='0.9' fill='%23a24a15'/><circle cx='14' cy='12' r='0.9' fill='%23a24a15'/><circle cx='17' cy='12' r='0.9' fill='%23a24a15'/><circle cx='20' cy='12' r='0.9' fill='%23a24a15'/><circle cx='12' cy='16' r='0.9' fill='%23a24a15'/><circle cx='15' cy='16' r='0.9' fill='%23a24a15'/><circle cx='18' cy='16' r='0.9' fill='%23a24a15'/></svg>");
}

/* TPMS = tire+pressure gauge */
body.hp-iconv-a .hp-cat-tile[href*="/tpms"] .hp-cat-tile__icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23a24a15' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='16' cy='16' r='10'/><circle cx='16' cy='16' r='4'/><path d='M16 6v3M16 23v3M6 16h3M23 16h3M9 9l2 2M21 21l2 2M9 23l2-2M21 11l2-2'/><path d='M20 20 L24 24' stroke-width='2'/></svg>");
}

/* Service = wrench+screwdriver crossed */
body.hp-iconv-a .hp-cat-tile[href*="/service"] .hp-cat-tile__icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23a24a15' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 8a4 4 0 0 0-4.5 5.5L6 23l3 3 9.5-9.5A4 4 0 0 0 24 12l-2.5 2.5-3-3L21 9a4 4 0 0 0-1-1z'/><path d='M8 24l-2 2' /><path d='M22 6l4 4'/></svg>");
}

/* Keys = key blade */
body.hp-iconv-a .hp-cat-tile[href*="/keys"] .hp-cat-tile__icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23a24a15' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='10' cy='18' r='5'/><path d='M14 15 L26 3'/><path d='M22 7 L26 11'/><path d='M18 11 L21 14'/></svg>");
}

/* Interior = seat+dashboard */
body.hp-iconv-a .hp-cat-tile[href*="/interior"] .hp-cat-tile__icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23a24a15' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 24 h20'/><path d='M9 24 v-8 a4 4 0 0 1 4-4 h4 a4 4 0 0 1 4 4 v8'/><path d='M9 16 h14'/><circle cx='13' cy='20' r='0.9' fill='%23a24a15'/><circle cx='19' cy='20' r='0.9' fill='%23a24a15'/></svg>");
}

/* Exterior = car body silhouette (neutral, no marks) */
body.hp-iconv-a .hp-cat-tile[href*="/exterior"] .hp-cat-tile__icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23a24a15' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20 L7 12 h18 l3 8 v3 H4 z'/><circle cx='10' cy='23' r='2'/><circle cx='22' cy='23' r='2'/><path d='M8 16 h16'/></svg>");
}


/* =================================================================
 * VARIANT B — SOFT 3D / LAYERED ICONS
 * Subtle layered card feel: deeper shadow, gradient chip, slight
 * rise on hover. Same icons as A but rendered with a shadow/gradient
 * plate so they read as small pictogram cards. Not cartoonish.
 * ================================================================= */

body.hp-iconv-b .hp-cat-tile {
    background: #fdf9ef;
    border: 1px solid #ebe0c8;
    box-shadow: 0 1px 2px rgba(45,36,22,0.04);
}
body.hp-iconv-b .hp-cat-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -14px rgba(196,86,25,0.28), 0 2px 6px rgba(45,36,22,0.05);
}

body.hp-iconv-b .hp-cat-tile__icon {
    width: 3.25rem !important;
    height: 3.25rem !important;
    border-radius: 14px;
    background-color: #f8e5c2;
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%),
        linear-gradient(180deg, #fbecc9 0%, #f2d5a1 100%);
    background-size: 100% 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    box-shadow:
        0 6px 14px -8px rgba(196,86,25,0.35),
        inset 0 1px 0 rgba(255,255,255,0.65),
        inset 0 -1px 0 rgba(0,0,0,0.06);
}
/* Overlay pictogram on top via ::after (layered look) */
body.hp-iconv-b .hp-cat-tile__icon::after {
    content: "";
    position: absolute;
    inset: 8px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 2px 3px rgba(122,58,19,0.28));
}

body.hp-iconv-b .hp-cat-tile[href*="/diagnostics"] .hp-cat-tile__icon::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%237c3a0f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 10 Q6 7 9 7 H23 Q26 7 26 10 V17 Q26 20 23 20 L20 20 L18 24 H14 L12 20 L9 20 Q6 20 6 17 Z' fill='%23fceecd'/><circle cx='11' cy='12' r='1.1' fill='%237c3a0f'/><circle cx='14' cy='12' r='1.1' fill='%237c3a0f'/><circle cx='17' cy='12' r='1.1' fill='%237c3a0f'/><circle cx='20' cy='12' r='1.1' fill='%237c3a0f'/><circle cx='12' cy='16' r='1.1' fill='%237c3a0f'/><circle cx='15' cy='16' r='1.1' fill='%237c3a0f'/><circle cx='18' cy='16' r='1.1' fill='%237c3a0f'/></svg>");
}
body.hp-iconv-b .hp-cat-tile[href*="/tpms"] .hp-cat-tile__icon::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%237c3a0f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='16' cy='16' r='9' fill='%23fceecd'/><circle cx='16' cy='16' r='3.5'/><path d='M16 7v3M16 22v3M7 16h3M22 16h3'/><path d='M20 20 L24 24' stroke-width='2.5'/></svg>");
}
body.hp-iconv-b .hp-cat-tile[href*="/service"] .hp-cat-tile__icon::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%237c3a0f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 7a4 4 0 0 0-4.5 5.5L5 23l4 4 10.5-10.5A4 4 0 0 0 25 11l-2.5 2.5-3-3L22 8a4 4 0 0 0-2-1z' fill='%23fceecd'/></svg>");
}
body.hp-iconv-b .hp-cat-tile[href*="/keys"] .hp-cat-tile__icon::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%237c3a0f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='10' cy='19' r='5' fill='%23fceecd'/><path d='M14 16 L26 4'/><path d='M22 8 L26 12'/><path d='M18 12 L21 15'/></svg>");
}
body.hp-iconv-b .hp-cat-tile[href*="/interior"] .hp-cat-tile__icon::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%237c3a0f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 25 h20' /><path d='M9 25 v-8 a4 4 0 0 1 4-4 h4 a4 4 0 0 1 4 4 v8' fill='%23fceecd'/><path d='M9 17 h14'/><circle cx='13' cy='21' r='1' fill='%237c3a0f'/><circle cx='19' cy='21' r='1' fill='%237c3a0f'/></svg>");
}
body.hp-iconv-b .hp-cat-tile[href*="/exterior"] .hp-cat-tile__icon::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%237c3a0f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 20 L7 11 h18 l4 9 v4 H3 z' fill='%23fceecd'/><circle cx='10' cy='24' r='2.2' fill='%237c3a0f'/><circle cx='22' cy='24' r='2.2' fill='%237c3a0f'/><path d='M8 16 h16'/></svg>");
}


/* =================================================================
 * VARIANT C — TECHNICAL PICTOGRAM ICONS
 * Sharper, professional diagnostic/tool look. Slate/graphite pictogram
 * on a soft charcoal chip; small warm accent line. Still matches
 * the warm site because the chip is a very desaturated warm-grey.
 * ================================================================= */

body.hp-iconv-c .hp-cat-tile {
    background: #fbf6ea;
    border: 1px solid #e7dcc6;
    border-radius: 12px;
}
body.hp-iconv-c .hp-cat-tile:hover {
    border-color: #c45619;
    background: #fdf4e0;
}
body.hp-iconv-c .hp-cat-tile__icon {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 10px;
    background-color: #2b2620;
    background-size: 1.85rem 1.85rem;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 -1px 0 rgba(0,0,0,0.35);
    position: relative;
}
/* Warm accent bar bottom of chip */
body.hp-iconv-c .hp-cat-tile__icon::before {
    content: "";
    position: absolute;
    left: 0.5rem; right: 0.5rem; bottom: 0.35rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #c45619 0%, #e0a35a 100%);
    opacity: 0.9;
}

/* Slate/off-white pictograms so they read against dark chip */
body.hp-iconv-c .hp-cat-tile[href*="/diagnostics"] .hp-cat-tile__icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23f2ead9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='6' width='24' height='16' rx='2.5'/><line x1='10' y1='24' x2='22' y2='24'/><line x1='16' y1='22' x2='16' y2='26'/><line x1='8' y1='12' x2='24' y2='12' stroke='%23e0a35a'/><line x1='8' y1='16' x2='20' y2='16'/><line x1='8' y1='19' x2='16' y2='19'/></svg>");
}
body.hp-iconv-c .hp-cat-tile[href*="/tpms"] .hp-cat-tile__icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23f2ead9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='14' cy='16' r='9'/><path d='M14 10v6l4 2' stroke='%23e0a35a'/><path d='M23 8 L28 3'/><path d='M25 5 L28 8'/></svg>");
}
body.hp-iconv-c .hp-cat-tile[href*="/service"] .hp-cat-tile__icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23f2ead9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 26 L16 16'/><path d='M4 28 L6 26'/><path d='M14 14 A5 5 0 1 1 20 20 L26 26 L28 24 L22 18 A5 5 0 0 1 16 12' stroke='%23e0a35a'/><path d='M10 8 h6 v2 h-6 z M13 10 v6'/></svg>");
}
body.hp-iconv-c .hp-cat-tile[href*="/keys"] .hp-cat-tile__icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23f2ead9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='19' r='5'/><path d='M13 15 L27 1'/><path d='M22 6 L27 11' stroke='%23e0a35a'/><path d='M18 10 L22 14'/></svg>");
}
body.hp-iconv-c .hp-cat-tile[href*="/interior"] .hp-cat-tile__icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23f2ead9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8 h24 v10 a4 4 0 0 1 -4 4 H8 a4 4 0 0 1 -4 -4 z'/><path d='M4 14 h24' stroke='%23e0a35a'/><circle cx='10' cy='18' r='1.2' fill='%23f2ead9'/><circle cx='22' cy='18' r='1.2' fill='%23f2ead9'/><path d='M2 26 L30 26'/></svg>");
}
body.hp-iconv-c .hp-cat-tile[href*="/exterior"] .hp-cat-tile__icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23f2ead9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 20 L6 10 h20 l4 10 v3 H2 z'/><circle cx='9' cy='24' r='2.2'/><circle cx='23' cy='24' r='2.2'/><path d='M8 15 h16' stroke='%23e0a35a'/><path d='M6 20 h20'/></svg>");
}

/* -----------------------------------------------------------------
 * Reduce inline SVG default sizing rule so it doesn't fight our bg-image.
 * (only inert when a variant class is set; baseline unchanged)
 * ----------------------------------------------------------------- */
body.hp-iconv-a .hp-cat-tile__icon svg,
body.hp-iconv-b .hp-cat-tile__icon svg,
body.hp-iconv-c .hp-cat-tile__icon svg { width: 0; height: 0; }

/* Mobile touch-up */
@media (max-width: 640px) {
    body.hp-iconv-a .hp-cat-tile__icon,
    body.hp-iconv-b .hp-cat-tile__icon,
    body.hp-iconv-c .hp-cat-tile__icon { width: 2.5rem !important; height: 2.5rem !important; background-size: 1.4rem 1.4rem; }
    body.hp-iconv-b .hp-cat-tile__icon::after { inset: 6px; }
    body.hp-iconv-c .hp-cat-tile__icon::before { left: 0.4rem; right: 0.4rem; bottom: 0.3rem; }
}

/* END icon-variants.css */