/* ===================================================================
   SHS CATEGORY MOTIF - per-kategorija vizuelni karakter ($0, bez rastera).
   Svaka od 10 kategorija dobija: (1) svoj akcenat iz Velvet Dusk palete,
   (2) inline-SVG ikonu (CSS mask, currentColor - nema slika), (3) suptilan
   tonski potpis na hero eyebrow + catnav chip-u. NE dira accent per-product
   (shs_accent_style hover stays), NE dira scrub heroje/grid layout.

   Paleta (Velvet Dusk): teal #15B8A6 / #0F8C7E, bordo #7B2A3B, sampanj
   #E7C79B / #C9962E, brid #5C7C8A, terakota #B5654A, zelena-mat #6E8B6E.
   Akcenti su izvedeni iz palete (susedne nijanse) da ostanu na-brendu.
   =================================================================== */

/* --- 1) Per-kategorija akcenat (CSS var na body.shs-cat-<slug>) --- */
body.shs-cat-kuhinja            { --shs-cat: #B5654A; --shs-cat-soft: rgba(181,101,74,.12); }  /* terakota - toplina kuvanja */
body.shs-cat-elektronika        { --shs-cat: #2E6F8E; --shs-cat-soft: rgba(46,111,142,.12); }  /* duboki petrol-plavi - tech */
body.shs-cat-dom-i-dekor        { --shs-cat: #B08247; --shs-cat-soft: rgba(176,130,71,.12); }  /* topli oker - enterijer */
body.shs-cat-organizacija       { --shs-cat: #6E8B6E; --shs-cat-soft: rgba(110,139,110,.12); } /* zalfija-zelena - red/mir */
body.shs-cat-osvetljenje        { --shs-cat: #C9962E; --shs-cat-soft: rgba(201,150,46,.14); }  /* sampanj-zlato - svetlo */
body.shs-cat-lepota-i-nega      { --shs-cat: #A85C6E; --shs-cat-soft: rgba(168,92,110,.12); }  /* prigusena ruza - nega */
body.shs-cat-kucni-aparati      { --shs-cat: #5C7C8A; --shs-cat-soft: rgba(92,124,138,.12); }  /* celicno-plavi - uredjaji */
body.shs-cat-pametna-kuca       { --shs-cat: #15B8A6; --shs-cat-soft: rgba(21,184,166,.12); }  /* teal (brand core) - smart */
body.shs-cat-klima-i-grejanje   { --shs-cat: #7B9CB5; --shs-cat-soft: rgba(123,156,181,.12); } /* ledeno-plavi - klima */
body.shs-cat-sigurnost-i-nadzor { --shs-cat: #7B2A3B; --shs-cat-soft: rgba(123,42,59,.12); }   /* bordo (brand) - zastita */

/* --- 2) Hero eyebrow nosi akcenat kategorije (suptilno) --- */
body[class*="shs-cat-"] .als-shop-hero .als-eyebrow{
  color: var(--shs-cat, #0F8C7E) !important;
  display: inline-flex; align-items: center; gap: 9px;
}
/* CSS ikona pre eyebrow-a - mask iz inline-SVG (currentColor, nema raster slike) */
body[class*="shs-cat-"] .als-shop-hero .als-eyebrow::before{
  content: ""; width: 17px; height: 17px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--shs-cat-ico) center / contain no-repeat;
          mask: var(--shs-cat-ico) center / contain no-repeat;
}
/* tanka akcenat-linija ispod hero naslova (umesto generickog) */
body[class*="shs-cat-"] .als-shop-hero h1{ position: relative; }
body[class*="shs-cat-"] .als-shop-hero h1::after{
  content: ""; display: block; width: 56px; height: 3px; margin-top: 14px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--shs-cat, #15B8A6), transparent);
}

/* --- 3) catnav chip svake kategorije nosi svoj akcenat (na shop + na kategoriji) --- */
.shs-catchip[class*="shs-cat-"]{ position: relative; }
.shs-catchip[class*="shs-cat-"]::before{
  content: ""; width: 15px; height: 15px; flex: 0 0 auto; margin-right: 2px;
  background-color: var(--chip-cat, #8A7D70);
  -webkit-mask: var(--shs-cat-ico) center / contain no-repeat;
          mask: var(--shs-cat-ico) center / contain no-repeat;
  opacity: .85; transition: background-color .2s ease, opacity .2s ease;
}
.shs-catchip{ display: inline-flex; align-items: center; gap: 8px; }
.shs-catchip[class*="shs-cat-"]:hover{
  border-color: var(--chip-cat, #15B8A6) !important;
  box-shadow: 0 8px 22px var(--chip-cat-soft, rgba(21,184,166,.16)) !important;
}
.shs-catchip[class*="shs-cat-"]:hover::before{ opacity: 1; }
.shs-catchip.is-current[class*="shs-cat-"]{
  background: var(--chip-cat-soft, rgba(21,184,166,.12)) !important;
  border-color: var(--chip-cat, #15B8A6) !important;
}
.shs-catchip.is-current[class*="shs-cat-"] .shs-catchip-name{ color: var(--chip-cat, #0F8C7E) !important; }

/* Per-chip akcenat (chip ne zavisi od body klase - koristi sopstvene var-e) */
.shs-catchip.shs-cat-kuhinja            { --chip-cat:#B5654A; --chip-cat-soft:rgba(181,101,74,.16); }
.shs-catchip.shs-cat-elektronika        { --chip-cat:#2E6F8E; --chip-cat-soft:rgba(46,111,142,.16); }
.shs-catchip.shs-cat-dom-i-dekor        { --chip-cat:#B08247; --chip-cat-soft:rgba(176,130,71,.16); }
.shs-catchip.shs-cat-organizacija       { --chip-cat:#6E8B6E; --chip-cat-soft:rgba(110,139,110,.16); }
.shs-catchip.shs-cat-osvetljenje        { --chip-cat:#C9962E; --chip-cat-soft:rgba(201,150,46,.18); }
.shs-catchip.shs-cat-lepota-i-nega      { --chip-cat:#A85C6E; --chip-cat-soft:rgba(168,92,110,.16); }
.shs-catchip.shs-cat-kucni-aparati      { --chip-cat:#5C7C8A; --chip-cat-soft:rgba(92,124,138,.16); }
.shs-catchip.shs-cat-pametna-kuca       { --chip-cat:#15B8A6; --chip-cat-soft:rgba(21,184,166,.16); }
.shs-catchip.shs-cat-klima-i-grejanje   { --chip-cat:#7B9CB5; --chip-cat-soft:rgba(123,156,181,.16); }
.shs-catchip.shs-cat-sigurnost-i-nadzor { --chip-cat:#7B2A3B; --chip-cat-soft:rgba(123,42,59,.16); }

/* --- 4) Per-kategorija inline-SVG ikona (data-URI mask; bez rasterskih fajlova) --- */
/* Sve ikone su 24x24 stroke-line, line ostaje currentColor preko mask-a. */
body.shs-cat-kuhinja, .shs-catchip.shs-cat-kuhinja{
  --shs-cat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 3v6a3 3 0 0 0 6 0V3M8 3v18M19 3c-1.7 0-3 2.2-3 5s1.3 5 3 5v8'/%3E%3C/svg%3E");
}
body.shs-cat-elektronika, .shs-catchip.shs-cat-elektronika{
  --shs-cat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E");
}
body.shs-cat-dom-i-dekor, .shs-catchip.shs-cat-dom-i-dekor{
  --shs-cat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 3l9 8M5 9.5V21h14V9.5M9 21v-6h6v6'/%3E%3C/svg%3E");
}
body.shs-cat-organizacija, .shs-catchip.shs-cat-organizacija{
  --shs-cat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='8' height='8' rx='1.4'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1.4'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1.4'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1.4'/%3E%3C/svg%3E");
}
body.shs-cat-osvetljenje, .shs-catchip.shs-cat-osvetljenje{
  --shs-cat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 2a6 6 0 0 0-3.5 10.9c.6.4 1 1.1 1 1.8V15h5v-.3c0-.7.4-1.4 1-1.8A6 6 0 0 0 12 2z'/%3E%3C/svg%3E");
}
body.shs-cat-lepota-i-nega, .shs-catchip.shs-cat-lepota-i-nega{
  --shs-cat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.6-7 10-7 10z'/%3E%3C/svg%3E");
}
body.shs-cat-kucni-aparati, .shs-catchip.shs-cat-kucni-aparati{
  --shs-cat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Ccircle cx='12' cy='13' r='4.5'/%3E%3Cpath d='M8 6h8'/%3E%3C/svg%3E");
}
body.shs-cat-pametna-kuca, .shs-catchip.shs-cat-pametna-kuca{
  --shs-cat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7M6 9.5V20h12V9.5'/%3E%3Ccircle cx='12' cy='14' r='1.4'/%3E%3Cpath d='M9.8 11.8a3 3 0 0 1 4.4 0M8 10a5.4 5.4 0 0 1 8 0'/%3E%3C/svg%3E");
}
body.shs-cat-klima-i-grejanje, .shs-catchip.shs-cat-klima-i-grejanje{
  --shs-cat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M4.9 6.5 19.1 17.5M19.1 6.5 4.9 17.5M2.5 12h19'/%3E%3C/svg%3E");
}
body.shs-cat-sigurnost-i-nadzor, .shs-catchip.shs-cat-sigurnost-i-nadzor{
  --shs-cat-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 8.4 8 11 4.6-2.6 8-6 8-11V5l-8-3z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* --- 5) Suptilan pattern potpis na kategorija hero (samo na kategoriji, NE na scrub) ---
   Diagonalna tanka mreza u akcenat-tonu, vrlo niska alfa. Sedi iznad hero-bg
   gradijenta, ispod teksta (z-index 1). NE renderuje se ako nema body.shs-cat-*. */
body[class*="shs-cat-"] .als-shop-hero::before{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5; mix-blend-mode: soft-light;
  background-image:
    repeating-linear-gradient(135deg, var(--shs-cat, #15B8A6) 0 1px, transparent 1px 16px);
  -webkit-mask: linear-gradient(180deg, transparent, #000 60%, transparent);
          mask: linear-gradient(180deg, transparent, #000 60%, transparent);
}

@media (prefers-reduced-motion: reduce){
  body[class*="shs-cat-"] .als-shop-hero::before{ opacity: .3; }
}
@media (max-width: 600px){
  body[class*="shs-cat-"] .als-shop-hero h1::after{ width: 44px; }
}