.agd-home-intro-lite .slajd-img,
    .agd-home-intro-lite .hero-section,
    .agd-home-intro-lite .hero-section *,
    .agd-home-intro-lite .agd-intro-gold-sheen,
    .agd-home-intro-lite .agd-intro-logo-mark,
    .agd-home-intro-lite .agd-intro-logo-word,
    .agd-home-intro-lite .agd-intro-logo-wrap,
    .agd-home-intro-lite .agd-intro-wordmark{
      animation: none !important;
      transition-duration: .14s !important;
    }

    /* HERO */
    .hero-section {
      background:
        radial-gradient(circle at 18% 12%, rgba(255,177,0,.18), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(86,184,255,.12), transparent 30%),
        linear-gradient(120deg,#151720 0%,#1d202b 54%,#101218 100%);
      color: #fff;
      padding: clamp(58px, 8vw, 96px) 0 clamp(42px, 6vw, 72px);
      border-bottom: 0;
      text-shadow: 0 2px 24px #000a;
      overflow: hidden;
    }
    .home-hero-inner{
      position:relative;
      z-index:1;
      max-width:980px;
      margin:0 auto;
    }
    .home-hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#ffcf66;
      background:rgba(255,177,0,.10);
      border:1px solid rgba(255,177,0,.22);
      border-radius:999px;
      padding:7px 12px;
      font-size:.78rem;
      font-weight:850;
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-bottom:14px;
    }
    .home-hero-title{
      max-width:920px;
      margin:0 auto 16px;
      font-size:clamp(2.25rem, 6.4vw, 5rem);
      line-height:.98;
      font-weight:900;
      letter-spacing:0;
    }
    .home-hero-title span{ color:#ffb100; }
    .home-hero-copy{
      max-width:720px;
      margin:0 auto 22px;
      color:#d6dce8;
      font-size:clamp(1rem, 2.1vw, 1.25rem);
      line-height:1.55;
    }
    .home-hero-actions{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:14px;
    }
    .hero-section .btn {
      position:relative;
      overflow:hidden;
      clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
      border-radius:0;
      font-weight:850;
      letter-spacing:.02em;
      transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
    }
    .hero-section .btn::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 48%, transparent 66%);
      transform:translateX(-130%);
      transition:transform .55s ease;
      pointer-events:none;
    }
    .hero-section .btn:hover::after{ transform:translateX(130%); }
    .hero-section .btn-primary {
      background:linear-gradient(180deg, rgba(255,177,0,.96), rgba(218,147,0,.96));
      color:#111318;
      border:1px solid rgba(255,207,102,.72);
      box-shadow:0 12px 28px rgba(255,177,0,.20), inset 0 1px 0 rgba(255,255,255,.30);
    }
    .hero-section .btn-primary:hover { transform:translateY(-2px); color:#111318; border-color:#ffe29a; }
    .hero-section .btn-outline-light {
      border-color:rgba(255,255,255,.18);
      color:#f2f5fb;
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
      box-shadow:0 12px 28px rgba(0,0,0,.18);
    }
    .hero-section .btn-outline-light:hover {
      transform:translateY(-2px);
      background:linear-gradient(180deg, rgba(47,51,66,.96), rgba(32,35,46,.96));
      color:#fff;
      border-color:rgba(255,177,0,.50);
    }
    .hero-section .lead { color: #ccc; font-weight: 400; }
    .home-hero-trust{
      display:flex;
      justify-content:center;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      margin:0;
      padding:0;
      list-style:none;
    }
    .home-hero-trust li{
      display:inline-flex;
      align-items:center;
      gap:7px;
      min-height:34px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.09);
      color:#dfe6f3;
      font-size:.84rem;
      font-weight:750;
    }
    .home-hero-trust i{ color:#ffb100; }
    @media (max-width: 576px){
      .home-hero-actions .btn{
        width:min(100%, 320px);
        margin-right:0 !important;
      }
      .home-hero-trust{
        justify-content:flex-start;
        max-width:320px;
        margin:0 auto;
      }
      .home-hero-trust li{
        width:100%;
        justify-content:center;
      }
    }


    /* --- AGD Product Card --- */
    .card.product-card {
      background:
        radial-gradient(circle at 18% 0%, rgba(255,177,0,.12), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
        #171a21;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 8px;
      box-shadow: 0 18px 46px rgba(0,0,0,.28);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, border-color .22s ease;
      height: 100%;
      max-width: 100%;
      position: relative;
    }
    .card.product-card::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      pointer-events:none;
      background:linear-gradient(115deg, transparent 36%, rgba(255,255,255,.12) 50%, transparent 64%);
      transform:translateX(-130%);
      opacity:.8;
      transition:transform .58s ease;
    }

    .card.product-card:hover {
      transform: translateY(-7px);
      border-color:rgba(255,177,0,.36);
      box-shadow: 0 26px 64px rgba(0,0,0,0.52), 0 0 0 1px rgba(255,177,0,0.18);
    }
    .card.product-card:hover::after{ transform:translateX(130%); }

    .card.product-card .badge-top {
      position: absolute;
      top: 18px;
      right: -44px;
      left: auto;
      width: 158px;
      text-align:center;
      background: linear-gradient(135deg, #ffb100, #fff0a8 52%, #ff8f2f);
      color: #111318;
      font-weight: 950;
      font-size: .78rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      padding: 7px 0 6px;
      border-radius: 0;
      z-index: 5;
      box-shadow: 0 10px 26px rgba(255,177,0,.34), 0 0 0 1px rgba(255,255,255,.22) inset;
      overflow:hidden;
      transform:rotate(42deg);
      transform-origin:center;
      pointer-events:none;
    }
    .card.product-card .badge-top::after,
    .mobile-product-card .badge-top::after{
      content:"";
      position:absolute;
      inset:-40% -80%;
      background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.65) 50%, transparent 62%);
      animation: newBadgeShine 2.7s ease-in-out infinite;
    }
    .product-card.is-new-product,
    .mobile-product-card.is-new-product{
      border-color:rgba(255,177,0,.34);
      box-shadow:0 22px 58px rgba(0,0,0,.38), 0 0 0 1px rgba(255,177,0,.16);
    }
    .mobile-product-card .badge-top{
      position:absolute;
      top:18px;
      right:-44px;
      width:158px;
      text-align:center;
      background:linear-gradient(135deg, #ffb100, #fff0a8 52%, #ff8f2f);
      color:#111318;
      font-weight:950;
      font-size:.78rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      padding:7px 0 6px;
      z-index:5;
      box-shadow:0 10px 26px rgba(255,177,0,.34), 0 0 0 1px rgba(255,255,255,.22) inset;
      overflow:hidden;
      transform:rotate(42deg);
      pointer-events:none;
    }
    .product-card.is-new-product .product-image-area::after,
    .mobile-product-card.is-new-product .mobile-product-image-area::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:radial-gradient(circle at 18% 8%, rgba(255,177,0,.18), transparent 32%);
    }
    @keyframes newBadgeShine{
      0%, 38%{ transform:translateX(-55%) rotate(8deg); opacity:0; }
      48%{ opacity:.9; }
      68%, 100%{ transform:translateX(55%) rotate(8deg); opacity:0; }
    }

    .product-wrapper {
      max-width: 100%; /* full width */
      padding: 0 24px;
    }

    /* --- IMAGE FULL TOP --- */
    .card.product-card .product-image-area{
      width: 100%;
      height: clamp(300px, 30vw, 440px);
      background:
        radial-gradient(circle at center, rgba(255,255,255,.09), transparent 52%),
        #20232c;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 8px 8px 0 0;
      padding: 0;
    }

    .home-product-picture{
      display:block;
      width:100%;
      height:100%;
    }

    .card.product-card .card-img-top{
      width: 100%;
      height: 100%;
      object-fit: contain;   /* show the whole bottle */
      background: transparent;  /* keep the dark card behind PNGs */
      max-width: none;       /* IMPORTANT: let height, not width, drive the size */
      transition:transform .24s ease;
    }

    .card.product-card:hover .card-img-top {
      transform: scale(1.035);
    }

    @media (min-width: 1200px) {
      .card.product-card .product-image-area {
        height: clamp(340px, 30vw, 480px);
      }
    }
    /* --- BOTTOM CONTENT FILLS --- */
    .card.product-card .card-body {
      padding: 20px 14px 16px 14px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      background: transparent;
    }



    /* --- TEXT STYLES --- */
    .card.product-card .card-title {
      font-size: clamp(1.08rem, 1.25vw, 1.3rem);
      font-weight: 800;
      color: #fff;
      text-align: center;
      min-height: 2.55em;
      display:flex;
      align-items:center;
      justify-content:center;
      line-height:1.25;
    }

    .card.product-card .card-desc {
      font-size: 1rem;
      color: #bdbdbd;
      text-align: center;
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .card.product-card .price-tag {
      font-size: clamp(1.25rem, 1.7vw, 1.55rem);
      font-weight: 800;
      color: #ffb100;
      text-align: center;
      margin-top:auto;
    }
    .home-product-meta{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      flex-wrap:wrap;
      margin:0 0 9px;
      min-height:26px;
    }
    .home-product-brand,
    .home-product-stock{
      display:inline-flex;
      align-items:center;
      gap:5px;
      border-radius:999px;
      padding:4px 8px;
      font-size:.72rem;
      font-weight:800;
      letter-spacing:.02em;
      text-transform:uppercase;
    }
    .home-product-brand{
      background:rgba(255,255,255,.06);
      color:#dfe6f3;
      border:1px solid rgba(255,255,255,.08);
    }
    .home-product-stock.is-in{
      background:rgba(127,240,190,.10);
      color:#8ff4c3;
      border:1px solid rgba(127,240,190,.25);
    }
    .home-product-stock.is-out{
      background:rgba(255,82,82,.10);
      color:#ffb0b0;
      border:1px solid rgba(255,82,82,.22);
    }
    .home-product-actions{
      display:flex;
      gap:8px;
      justify-content:center;
      align-items:center;
      margin-top:12px;
      width:100%;
    }
    .home-product-actions > a{ flex:1; }
    .home-product-actions form{ flex:1; }
    .home-product-action{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      min-height:48px;
      clip-path:polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
      border-radius:0;
      padding:11px 14px;
      font-size:.92rem;
      font-weight:800;
      text-decoration:none;
      border:1px solid rgba(255,255,255,.14);
      color:#e9ecf2;
      background:linear-gradient(180deg, rgba(47,51,66,.96), rgba(31,34,45,.96));
      box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
      white-space:nowrap;
      width:100%;
      position:relative;
      overflow:hidden;
      transition:transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
    }
    .home-product-action::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.14) 50%, transparent 68%);
      transform:translateX(-125%);
      transition:transform .48s ease;
      pointer-events:none;
    }
    .home-product-action:hover{
      color:#fff;
      border-color:rgba(255,177,0,.48);
      transform:translateY(-1px);
      box-shadow:0 14px 28px rgba(0,0,0,.24), 0 0 0 1px rgba(255,177,0,.08);
    }
    .home-product-action:hover::after{ transform:translateX(125%); }
    .home-product-action.is-primary{
      background:linear-gradient(180deg, rgba(255,190,40,.96), rgba(221,150,0,.96));
      border-color:rgba(255,207,102,.70);
      color:#111318;
      box-shadow:0 14px 30px rgba(255,177,0,.18), inset 0 1px 0 rgba(255,255,255,.24);
    }
    .home-product-action.is-primary:hover{ color:#111318; filter:brightness(1.04); }

    /* === PRODUCT ROW - Full-width, space-around cards === */
    .product-row {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: stretch;
      gap: 18px;
    }

    /* === Individual Card Container === */
    .product-card-container {
      flex:1 1 0;
      min-width:0;
      display: flex;
      justify-content: center;
    }
    .home-products-desktop{ display:block; }
    .home-products-mobile{ display:none !important; }
    @media (max-width: 1399.98px) and (min-width: 1100px){
      .product-row{
        gap:14px;
      }
      .card.product-card .product-image-area{
        height:clamp(220px, 22vw, 300px);
      }
      .card.product-card .card-body{
        padding:16px 10px 14px;
      }
      .card.product-card .card-title{
        font-size:clamp(.92rem, 1.05vw, 1.08rem);
      }
      .card.product-card .card-desc{
        font-size:.86rem;
        -webkit-line-clamp:2;
      }
      .home-product-action{
        min-height:42px;
        padding:9px 8px;
        font-size:.8rem;
      }
      .home-product-brand,
      .home-product-stock{
        font-size:.64rem;
        padding:3px 6px;
      }
    }
    @media (max-width: 1199.98px) and (min-width: 992px){
      .product-row{
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:18px;
      }
      .card.product-card .product-image-area{
        height:clamp(240px, 28vw, 330px);
      }
      .card.product-card .card-title{
        font-size:clamp(1rem, 1.45vw, 1.22rem);
      }
      .card.product-card .card-desc{
        font-size:.9rem;
      }
    }
    @media (max-width: 991.98px) and (min-width: 768px){
      .product-row{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:18px;
      }
      .card.product-card .product-image-area{
        height:clamp(260px, 42vw, 380px);
      }
      .card.product-card .card-title{
        font-size:clamp(1rem, 2vw, 1.25rem);
      }
      .card.product-card .card-desc{
        font-size:.92rem;
      }
    }
    @media (max-width: 899.98px) and (min-width: 768px){
      .card.product-card .product-image-area{
        height:clamp(220px, 44vw, 320px);
      }
      .home-product-actions{
        flex-direction:column;
      }
      .home-product-actions > a,
      .home-product-actions form{
        width:100%;
      }
    }
    @media (max-width: 767.98px){
      .home-products-desktop{ display:none !important; }
      .home-products-mobile{ display:flex !important; }
    }
    .featured-products-section{
      background:
        linear-gradient(180deg, #151820 0%, #111318 100%) !important;
      border-top:1px solid #2a2d3a !important;
    }
    .featured-section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#ffcf66;
      background:rgba(255,177,0,.10);
      border:1px solid rgba(255,177,0,.22);
      border-radius:999px;
      padding:6px 10px;
      font-size:.74rem;
      font-weight:850;
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-bottom:8px;
    }
    .featured-section-tools{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
      align-items:center;
    }
    .featured-chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      min-height:34px;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.045);
      color:#dfe6f3;
      font-size:.78rem;
      font-weight:800;
      white-space:nowrap;
    }
    .featured-chip i{ color:#ffb100; }
    .product-filter-tabs{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:flex-end;
    }
    .product-filter-tab{
      display:inline-flex;
      align-items:center;
      gap:7px;
      min-height:48px;
      clip-path:polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
      border-radius:0;
      border:1px solid rgba(255,255,255,.13);
      background:linear-gradient(180deg, rgba(48,52,67,.86), rgba(31,34,45,.86));
      color:#dfe6f3;
      padding:11px 16px;
      font-size:.92rem;
      font-weight:850;
      white-space:nowrap;
      box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
      transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
    }
    .product-filter-tab:hover,
    .product-filter-tab.is-active{
      background:
        linear-gradient(90deg, rgba(255,177,0,.24), rgba(255,177,0,.06) 38%),
        linear-gradient(180deg, rgba(61,65,82,.96), rgba(38,42,55,.96));
      border-color:rgba(255,177,0,.55);
      color:#fff;
      transform:translateY(-2px);
      box-shadow:0 14px 30px rgba(0,0,0,.24), 0 0 0 1px rgba(255,177,0,.10);
    }
    .product-filter-tab:active{ transform:translateY(0) scale(.98); }
    .product-filter-tab i{ color:inherit; }
    .home-product-empty{
      display:none;
      max-width:620px;
      margin:28px auto 0;
      padding:18px;
      border-radius:8px;
      border:1px solid rgba(255,177,0,.22);
      background:rgba(255,177,0,.08);
      color:#e8edf7;
      text-align:center;
      font-weight:750;
    }
    .home-product-empty.is-visible{ display:block; }
    .is-product-hidden{ display:none !important; }
    @media (max-width: 991.98px){
      .featured-section-tools{
        justify-content:flex-start;
        width:100%;
      }
      .featured-section-tools .btn{
        width:100%;
      }
      .featured-chip{
        flex:1 1 150px;
        justify-content:center;
      }
      .product-filter-tabs{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        justify-content:stretch;
        width:100%;
        gap:10px;
        overflow:visible;
        padding-bottom:0;
      }
      .product-filter-tab{
        width:100%;
        min-height:54px;
        justify-content:center;
        font-size:.95rem;
        padding:12px 10px;
      }
    }
    @media (max-width: 390px){
      .product-filter-tabs{
        grid-template-columns:1fr;
      }
    }

    /* Shop by problem */
    .problem-section{
      width:100vw;
      margin-left:50%;
      transform:translateX(-50%);
      background:
        radial-gradient(circle at 14% 0%, rgba(255,177,0,.14), transparent 28%),
        linear-gradient(180deg, #101218 0%, #151820 100%);
      border-top:1px solid #2a2d3a;
      border-bottom:1px solid #2a2d3a;
      padding:clamp(42px, 6vw, 78px) 0;
    }
    .problem-grid{
      display:grid;
      grid-template-columns:repeat(5, minmax(0, 1fr));
      gap:18px;
      width:100%;
    }
    .problem-card{
      --mx: 50%;
      --my: 50%;
      position:relative;
      display:flex;
      flex-direction:column;
      min-height:clamp(320px, 30vw, 470px);
      padding:clamp(20px, 2vw, 32px);
      border-radius:8px;
      overflow:hidden;
      text-decoration:none;
      color:#fff;
      background:
        radial-gradient(circle at 18% 0%, rgba(255,177,0,.13), transparent 36%),
        linear-gradient(160deg, rgba(255,255,255,.105), rgba(255,255,255,.025)),
        #181b23;
      border:1px solid rgba(255,255,255,.11);
      box-shadow:0 18px 48px rgba(0,0,0,.28);
      transition:transform .22s cubic-bezier(.22,.61,.36,1), border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .problem-card[data-problem-kind="poliranje"]{ --problem-accent: rgba(255,177,0,.24); }
    .problem-card[data-problem-kind="zastita"]{ --problem-accent: rgba(128,231,255,.22); }
    .problem-card[data-problem-kind="priprema"]{ --problem-accent: rgba(255,159,47,.22); }
    .problem-card[data-problem-kind="odrzavanje"]{ --problem-accent: rgba(157,255,201,.20); }
    .problem-card[data-problem-kind="pribor"]{ --problem-accent: rgba(210,180,255,.18); }
    .problem-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at var(--mx) var(--my), var(--problem-accent, rgba(255,177,0,.22)), transparent 32%),
        linear-gradient(115deg, transparent 34%, rgba(255,255,255,.13) 48%, transparent 62%);
      transform:translateX(-135%);
      opacity:.9;
      transition:transform .65s ease, opacity .2s ease;
      pointer-events:none;
    }
    .problem-card::after{
      content:"";
      position:absolute;
      inset:auto -20% -35% 20%;
      height:110px;
      background:radial-gradient(circle, rgba(255,177,0,.18), transparent 68%);
      pointer-events:none;
    }
    .problem-card:hover{
      color:#fff;
      transform:translateY(-8px);
      border-color:rgba(255,177,0,.42);
      box-shadow:0 28px 72px rgba(0,0,0,.46), 0 0 0 1px rgba(255,177,0,.12);
    }
    .problem-card.is-current{
      border-color:rgba(255,177,0,.48);
      box-shadow:0 26px 66px rgba(0,0,0,.42), 0 0 0 1px rgba(255,177,0,.18);
    }
    .problem-card:hover::before{ transform:translateX(135%); }
    .problem-card:active{ transform:translateY(-2px) scale(.99); }
    .problem-icon{
      width:62px;
      height:62px;
      display:grid;
      place-items:center;
      border-radius:8px;
      background:rgba(255,177,0,.12);
      color:#ffb100;
      margin-bottom:14px;
      font-size:1.42rem;
      box-shadow:0 0 0 1px rgba(255,177,0,.22) inset, 0 14px 30px rgba(255,177,0,.10);
    }
    .problem-card-meta{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:18px;
      position:relative;
      z-index:1;
    }
    .problem-tag{
      display:inline-flex;
      align-items:center;
      min-height:30px;
      border-radius:999px;
      padding:6px 9px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.055);
      color:#dfe6f3;
      font-size:.74rem;
      font-weight:850;
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    .problem-tag.is-main{
      color:#16181f;
      background:#ffb100;
      border-color:#ffb100;
    }
    .problem-card h3{
      margin:0 0 10px;
      font-size:clamp(1.18rem, 1.65vw, 1.72rem);
      line-height:1.2;
      font-weight:900;
    }
    .problem-card p{
      margin:0 0 20px;
      color:#bfc7d6;
      font-size:clamp(.92rem, .95vw, 1rem);
      line-height:1.55;
      max-width:46ch;
    }
    .problem-card span{
      margin-top:auto;
      color:#ffcf66;
      font-size:.98rem;
      font-weight:850;
      position:relative;
      z-index:1;
    }
    @media (max-width: 1399.98px){
      .problem-grid{
        grid-template-columns:repeat(5, minmax(0, 1fr));
        gap:14px;
      }
      .problem-card{
        min-height:clamp(285px, 29vw, 390px);
      }
      .problem-card h3{
        font-size:clamp(1.08rem, 1.55vw, 1.45rem);
      }
      .problem-card p{
        font-size:.88rem;
      }
    }
    @media (max-width: 1199.98px) and (min-width: 992px){
      .problem-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:18px;
      }
      .problem-card{
        min-height:300px;
      }
      .problem-card h3{
        font-size:clamp(1.18rem, 1.8vw, 1.55rem);
      }
      .problem-card p{
        font-size:.92rem;
      }
    }
    @media (max-width: 991.98px) and (min-width: 768px){
      .problem-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:18px;
      }
      .problem-card{
        min-height:320px;
        padding:24px;
      }
      .problem-card h3{
        font-size:clamp(1.35rem, 3vw, 1.8rem);
      }
      .problem-card p{
        font-size:.96rem;
        max-width:42ch;
      }
    }
    @media (max-width: 899.98px) and (min-width: 768px){
      .problem-card{
        min-height:280px;
        padding:20px;
      }
      .problem-card h3{
        font-size:clamp(1.18rem, 3.2vw, 1.55rem);
      }
      .problem-icon{
        width:54px;
        height:54px;
      }
    }
    @media (max-width: 767.98px){
      .problem-grid{
        display:block;
        position:relative;
        overflow:hidden;
        min-height:430px;
        padding:0;
        margin-left:calc(50% - 50vw);
        margin-right:calc(50% - 50vw);
        width:100vw;
      }
      .problem-card{
        position:absolute;
        inset:0;
        width:100vw;
        max-width:100vw;
        min-height:430px;
        border-radius:0;
        border-left:0;
        border-right:0;
        padding:28px 22px 30px;
        opacity:0;
        visibility:visible;
        pointer-events:none;
        filter:none;
        transform:none;
        transition:
          opacity .9s ease-in-out,
          border-color .18s ease,
          box-shadow .18s ease;
      }
      .problem-card::after{
        transition:opacity .72s ease, transform .72s ease;
      }
      .problem-card.is-current{
        opacity:1;
        pointer-events:auto;
        filter:none;
        transform:none;
        z-index:2;
      }
      .problem-card.is-leaving{
        opacity:0;
        filter:none;
        transform:none;
        z-index:1;
      }
      .problem-card h3{
        font-size:clamp(1.65rem, 8vw, 2.35rem);
      }
      .problem-card p{
        font-size:1rem;
        max-width:34ch;
      }
    }

    .problem-slider-controls{
      display:none;
      align-items:center;
      justify-content:center;
      gap:10px;
      margin-top:14px;
    }
    .problem-slider-arrow{
      width:46px;
      height:46px;
      display:grid;
      place-items:center;
      clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
      border-radius:0;
      border:1px solid rgba(255,255,255,.14);
      background:linear-gradient(180deg, rgba(48,52,67,.88), rgba(31,34,45,.88));
      color:#fff;
      transition:transform .16s ease, border-color .16s ease, background .16s ease;
    }
    .problem-slider-arrow:hover{
      border-color:rgba(255,177,0,.48);
      background:linear-gradient(180deg, rgba(61,65,82,.96), rgba(38,42,55,.96));
      transform:translateY(-1px);
    }
    .problem-slider-arrow:active{ transform:scale(.96); }
    .problem-slider-dots{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:7px;
    }
    .problem-slider-dot{
      width:24px;
      height:4px;
      border:0;
      border-radius:999px;
      background:rgba(255,255,255,.24);
      padding:0;
    }
    .problem-slider-dot.is-active{ background:#ffb100; }
    @media (max-width: 767.98px){
      .problem-slider-controls{ display:flex; }
    }

    .mobile-price-tag {
      display: block;
      font-size: 1.35rem;
      font-weight: 800;
      color: #ffc107;           /* Gold (Bootstrap's gold) */
      background: transparent;
      margin-top: 1.2rem;
      margin-bottom: 0.6rem;
      text-align: center;
      letter-spacing: 0.01em;
      text-shadow: 0 2px 8px #0005;
    }

    .popular-carousel-dots {
      gap: 0.6em;
      margin-top: 0.6em;
      user-select: none;
    }
    .popular-carousel-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #555;
      opacity: 0.33;
      transition: background 0.2s, opacity 0.2s, transform 0.18s;
    }
    .popular-carousel-dot.active {
      background: #ffd900;
      opacity: 1;
      transform: scale(1.16);
    }
    .popular-slider-controls{
      display:none;
      align-items:center;
      justify-content:center;
      gap:12px;
      margin-top:14px;
    }
    .popular-slider-arrow{
      width:48px;
      height:48px;
      display:grid;
      place-items:center;
      clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
      border-radius:0;
      border:1px solid rgba(255,255,255,.14);
      background:linear-gradient(180deg, rgba(48,52,67,.88), rgba(31,34,45,.88));
      color:#fff;
      box-shadow:0 10px 26px rgba(0,0,0,.18);
      transition:transform .16s ease, border-color .16s ease, background .16s ease;
    }
    .popular-slider-arrow:hover{
      border-color:rgba(255,177,0,.48);
      background:linear-gradient(180deg, rgba(61,65,82,.96), rgba(38,42,55,.96));
      transform:translateY(-1px);
    }
    .popular-slider-arrow:active{ transform:scale(.96); }
    .popular-slider-state{
      min-width:min(58vw, 320px);
      text-align:center;
      color:#e9ecf2;
      font-weight:850;
      font-size:.9rem;
    }
    .popular-slider-state span{
      display:block;
      color:#ffcf66;
      font-size:.78rem;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-bottom:2px;
    }
    @media (max-width: 767.98px){
      .popular-slider-controls{ display:flex; }
      .popular-carousel-dots{
        margin-top:12px;
        gap:8px;
      }
      .popular-carousel-dot{
        width:28px;
        height:4px;
        border-radius:999px;
      }
    }

    .mobile-product-carousel-horizontal {
      display: flex;           /* CRUCIAL: makes children in a row */
      flex-wrap: nowrap;       /* CRUCIAL: prevents wrapping, causes overflow */
      overflow-x: auto !important;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-left: 0;
      margin-left: 0;
      scrollbar-width: none !important;      /* Firefox */
      -ms-overflow-style: none !important;   /* IE and Edge */
    }

    /* === PHONE: horizontal scroll === */
    @media (max-width: 767.98px) {
        .mobile-product-carousel-horizontal {
          display: flex;
          flex-wrap: nowrap;
          overflow-x: auto !important;
          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
          padding-left: 0;
          padding-right: 0;
          margin-left: calc(50% - 50vw);
          margin-right: calc(50% - 50vw);
          scrollbar-width: none !important;
          -ms-overflow-style: none !important;
        }

        .container-fluid {
          padding-left: 0 !important;
          padding-right: 0 !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
          width: 100vw !important;
          max-width: 100vw !important;
        }

        .mobile-product-carousel-horizontal {
          width: 100vw !important;
          max-width: 100vw !important;
        }

        .mobile-product-card {
          flex: 0 0 100vw;    /* Each card takes 100% of the viewport width */
          max-width: 100vw;   /* Never exceed viewport width */
          min-width: 100vw;
          border-radius: 0;
          box-shadow: 0 8px 32px #0003, 0 1.5px 10px #ffb10023;
          overflow: hidden;
          margin: 0;
          display: flex;
          flex-direction: column;
          scroll-snap-align: center;
          position: relative;
          background:
            radial-gradient(circle at 18% 0%, rgba(255,177,0,.10), transparent 34%),
            #191b20;
        }

        .mobile-product-image-area {
          width: 100vw;
          height: 100vw; /* Square aspect ratio on mobile! */
          max-width: 100vw;
          max-height: 100vw;
          position:relative;
          background-color:#222;
          border-bottom:2px solid #232327;
          overflow:hidden;
        }

        .mobile-product-image-area .home-product-picture{
          width:100%;
          height:100%;
        }

        .mobile-product-image-area .mobile-product-img{
          display:block;
          width:100%;
          height:100%;
          object-fit:contain;
          background:transparent;
        }

        .mobile-product-info {
          flex: 1 1 0%;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: center;
          padding: 1.2rem 1.2rem 1.8rem 1.2rem;
          box-sizing: border-box;
          min-height:260px;
        }

        .mobile-product-actions {
          display: flex;
          width: 100%;
          gap: 0.75rem;
          margin-top: 1rem;
        }

        .mobile-product-actions .btn {
          min-width: 48px;
          min-height: 48px;
          font-size: 1.35rem;
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 14px;
          box-shadow: 0 2px 8px #0002;
        }
        .mobile-product-actions .btn-warning {
          color: #191b20;
          background: linear-gradient(90deg, #ffd900 60%, #ffb100 100%);
          border: none;
        }
        .mobile-product-actions .btn-outline-light {
          border: 2px solid #ffd900;
          color: #ffd900;
          background: transparent;
        }
        .mobile-product-actions .fa-lg {
          font-size: 1.5em;
          line-height: 1;
        }

        .mobile-product-carousel-horizontal::-webkit-scrollbar {
          display: none !important;
          height: 0 !important;
          background: transparent !important;
        }
    }


    /* END FOR Popular products */


    /* BRAND SPOTLIGHT (full-width hero block) */
    .brand-spotlight-section{
      background: #0f1116;
      padding: 0;
      border-top: 1px solid #2a2d3a;
      border-bottom: 1px solid #2a2d3a;
      width: 100vw;
      margin-left: 50%;
      transform: translateX(-50%);
    }
    .brand-spotlight{
      position: relative;
      display: flex;
      border-radius: 0;
      overflow: hidden;
      color: #fff;
      text-decoration: none;
      background:
        radial-gradient(120% 90% at 10% 10%, rgba(255,177,0,0.12), transparent 55%),
        radial-gradient(120% 90% at 90% 15%, rgba(120,150,255,0.12), transparent 55%),
        linear-gradient(135deg, #191922 0%, #12141b 55%, #0f1116 100%);
      box-shadow: none;
      min-height: clamp(260px, 40vh, 420px);
      height: auto;
      transform: translateY(18px);
      opacity: 0;
      transition: opacity .7s ease, transform .7s ease, box-shadow .2s ease;
      align-items: center;
      justify-content: flex-end;
      text-align: right;
    }
    .brand-spotlight::before{
      content:"";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.08) 45%, transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45));
      opacity: .75;
      pointer-events: none;
    }
    .brand-spotlight::after{
      content:"";
      position: absolute;
      inset: -30% 10% auto auto;
      width: 220px;
      height: 220px;
      background: radial-gradient(circle, rgba(255,177,0,0.25), transparent 70%);
      opacity: .6;
      pointer-events: none;
    }
    .brand-spotlight.is-visible{
      transform: translateY(0);
      opacity: 1;
    }
    .brand-spotlight:hover{
      box-shadow: none;
    }
    .brand-spotlight-inner{
      position: relative;
      z-index: 2;
      padding: clamp(28px, 5vw, 64px) clamp(20px, 8vw, 120px);
      max-width: 760px;
      margin-left: auto;
    }
    .brand-spotlight-eyebrow{
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      font-size: .8rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #f5d99c;
      background: rgba(22,24,32,0.6);
      border: 1px solid rgba(255,177,0,0.3);
      padding: .28rem .7rem;
      border-radius: 999px;
      margin-bottom: 10px;
    }
    .brand-spotlight-title{
      font-size: clamp(1.7rem, 3.6vw, 2.7rem);
      font-weight: 800;
      line-height: 1.1;
      margin: 0 0 10px;
    }
    .brand-spotlight-title span{
      color: #f0c36a;
    }
    .brand-spotlight-copy{
      color: #cfd6e4;
      margin: 0 0 16px;
      max-width: 520px;
    }

    .mobile-product-carousel-horizontal.is-slide-changing .mobile-product-card{
      opacity:.42;
      transform:scale(.985);
    }
    .mobile-product-card,
    .problem-card{
      transition:
        opacity .24s ease,
        transform .24s cubic-bezier(.22,.61,.36,1),
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
    }
    .brand-spotlight-points{
      display:flex;
      justify-content:flex-end;
      gap:8px;
      flex-wrap:wrap;
      margin:0 0 18px;
    }
    .brand-spotlight-point{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:.42rem .7rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.045);
      color:#dfe6f3;
      font-size:.78rem;
      font-weight:800;
    }
    .brand-spotlight-point i{
      color:#ffb100;
      font-size:.76rem;
    }
    .brand-spotlight-actions{
      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .brand-spotlight-cta{
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding:.76rem 1.12rem;
      clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
      border-radius:0;
      background:linear-gradient(180deg, rgba(255,190,40,.96), rgba(221,150,0,.96));
      color:#111318;
      font-weight: 800;
      letter-spacing: .02em;
      border:1px solid rgba(255,207,102,.68);
      box-shadow:0 12px 26px rgba(255,177,0,.18), inset 0 1px 0 rgba(255,255,255,.24);
      text-decoration: none;
      transition:transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
    }
    .brand-spotlight-cta.is-secondary{
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
      color:#e9ecf2;
      border:1px solid rgba(255,255,255,.14);
      box-shadow:0 10px 24px rgba(0,0,0,.16);
    }
    .brand-spotlight-cta:hover{
      transform:translateY(-2px);
      color: #111;
    }
    .brand-spotlight-cta.is-secondary:hover{
      color:#fff;
      border-color:rgba(255,177,0,.45);
    }
    .brand-spotlight-rating{
      position: absolute;
      right: clamp(20px, 6vw, 80px);
      top: clamp(16px, 4vw, 32px);
      z-index: 2;
      background: rgba(20,22,30,0.7);
      border: 1px solid rgba(255,177,0,0.25);
      border-radius: 999px;
      padding: .35rem .75rem;
      color: #f5d99c;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      font-size: .85rem;
    }
    .brand-spotlight-rating i{ font-size: .8rem; color: #ffb100; }
    @media (max-width: 768px){
      .brand-spotlight{
        min-height: clamp(220px, 45vh, 360px);
        justify-content: center;
        text-align: center;
      }
      .brand-spotlight-points,
      .brand-spotlight-actions{
        justify-content:center;
      }
      .brand-spotlight-rating{
        position: static;
        margin: 12px 0 0;
        display: inline-flex;
      }
    }


    /* TRUST/INFO ICONS */
    .trust-section{
      background:
        radial-gradient(circle at 12% 0%, rgba(255,177,0,.12), transparent 26%),
        linear-gradient(180deg, #111318, #151820) !important;
    }
    .trust-item{
      height:100%;
      padding:20px 16px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.035);
      box-shadow:0 12px 32px rgba(0,0,0,.18);
    }
    .trust-icon {
      color: #ffb100;
      font-size: 1.7rem;
      margin-bottom: 8px;
      text-shadow: 0 2px 14px #ffb10033;
    }
    .trust-section h5 { font-weight: 800; letter-spacing: 0; }
    .trust-section p{ max-width:28ch; margin-left:auto; margin-right:auto; }
    main .hero-section,
    main .bg-black,
    main .bg-dark,
    main .bg-dark.border-top,
    main .bg-black.border-top {
      width: 100vw;
      min-width: 100vw;
      margin-left: 50%;
      transform: translateX(-50%);
      border-radius: 0 !important;
      box-sizing: border-box;
      position: relative;
    }

    /* Prevent unwanted horizontal scrollbars */
    body {
      overflow-x: hidden;
    }


    /* ==== PRODUCT MODAL CUSTOMIZATION ==== */
    /* ==== 1. RESET .bg-dark/.bg-black WIDTH INSIDE MODAL ==== */
    .modal .bg-dark,
    .modal .bg-black,
    .modal .bg-dark.border-top,
    .modal .bg-black.border-top {
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      margin-left: 0 !important;
      transform: none !important;
      position: static !important;
      border-radius: 18px !important;
      box-sizing: border-box !important;
    }

    /* ==== 2. SIZE AND CENTER THE MODAL ==== */
    .modal-dialog {
      max-width: 430px;
      width: 95vw;
      margin: 2rem auto;
      /* Prevent stretching */
    }

    @media (max-width: 576px) {
      .modal-dialog {
        max-width: 99vw;
        margin: 0.5rem auto;
      }
    }

    /* ==== 3. OPTIONAL: PRETTY IMAGE SIZING ==== */
    .modal-body img.img-fluid {
      max-width: 98%;
      max-height: 320px;
      object-fit: contain;
      margin: 0 auto 1rem auto;
      display: block;
      border-radius: 10px;
      background: #23232b;
    }

    /* ==== 4. Center modal on page ==== */
    .product-modal .modal-dialog {
      /* centers vertically using flex on the container */
      display: flex;
      align-items: center;
      min-height: calc(100vh - 4rem); /* nice breathing room */
      margin: 2rem auto;              /* horizontal centering */
    }

    /* Keep the SEARCH modal stuck to the top */
    #mobileSearchModal .modal-dialog {
      margin: 0.75rem auto 0; /* top-aligned */
      max-width: 520px;       /* you can tweak */
      width: 95vw;
    }
    @media (max-width: 576px) {
      #mobileSearchModal .modal-dialog {
        max-width: 98vw;
      }
    }

    @media (max-width: 780px) {
      .popular-carousel-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 10px;
        user-select: none;
      }

      .popular-carousel-dot {
        width: 22px;
        height: 4px;
        border-radius: 3px;
        background: #555;
        opacity: .35;
        transition: background .18s, opacity .18s, transform .18s;
      }

      .popular-carousel-dot.active {
        background: #ffb100;
        opacity: 1;
        transform: scale(1.06);
      }
    }

    .badge-top { pointer-events: none; }

    /* =======================================================
      AGD HERO - konzolidovana verzija (bez duplikata)
      ======================================================= */

    :root{
      --fade: 1400ms;                       /* trajanje fade-a slajda */
      --easing: cubic-bezier(.4,0,.2,1);    /* mekano ubrzanje/usporenje */
      --gold: #ffb100;                      /* akcent boja (dugme/dots) */
      --senka-tekst: 0 2px 10px rgba(0,0,0,.7);
    }

    /* Layout */
    .kategorije-sekcija{ position:relative; overflow:hidden; background:#000; }
    .kategorije-fullbleed{
      width: 100dvw;
      max-width: none;
      margin-left: calc(50% - 50dvw);
      margin-right: calc(50% - 50dvw);
    }
    @supports not (width: 100dvw){
      .kategorije-fullbleed{
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
      }
    }
    .slajder-kategorije{
      position:relative;
      width:100%;
      aspect-ratio:16/9;
      height:auto;
      min-height:clamp(620px, 48vw, 900px);
      max-height:calc(100svh - 16px);
      overflow:hidden;
    }
    @media (min-width: 1800px){
      .slajder-kategorije{
        min-height:min(56.25vw, 1080px);
        max-height:calc(100svh - 12px);
      }
    }
    @media (max-width: 1199.98px){
      .slajder-kategorije{
        min-height:clamp(540px, 58vw, 760px);
        max-height:calc(100svh - 12px);
      }
    }
    @media (max-width: 768px){
      .slajder-kategorije{
        aspect-ratio:4/5;
        height:auto;
        min-height:0;
        max-height:none;
      }
    }

    /* Slajdovi - jedinstvena definicija + fade */
    .slajd{
      position:absolute; inset:0; display:flex; justify-content:flex-end; align-items:center;
      opacity:0; visibility:hidden;
      transition: opacity var(--fade) var(--easing), visibility var(--fade) var(--easing);
      will-change: opacity;
      z-index:1;
      cursor:pointer;
      background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.08), transparent 30%),
        linear-gradient(135deg, #050609, #11141b 46%, #050609);
    }
    .slajd[data-pressing="true"] .slajd-img{ transform:scale(1.025); }
    .slajd:focus-within{ outline:none; }
    .slajd.aktivan{ opacity:1; visibility:visible; z-index:2; }
    .slajd.prev   { opacity:0; visibility:hidden; z-index:1; }

    /* Slika je pravi full-bleed background; fokus se kontrolise po kategoriji. */
    @keyframes kenburns{ 0%{ transform:scale(1.02) } 100%{ transform:scale(1.08) } }
    .slajd-picture{
      position:absolute;
      inset:0;
      display:block;
      z-index:0;
    }
    .slajd-img{
      position:absolute; inset:0; width:100%; height:100%;
      object-fit:cover;
      object-position:var(--slide-focus, center center);
      display:block;
      padding:0;
      filter:brightness(.9);
      transition: filter var(--fade) var(--easing);
      z-index:0;
    }
    .slajd.aktivan .slajd-img{
      filter:brightness(1);
      animation: kenburns 20s ease-in-out infinite alternate;
    }
    .slajd[data-category="priprema"]{ --slide-focus:center center; }
    .slajd[data-category="zastita"]{ --slide-focus:center center; }
    .slajd[data-category="odrzavanje"]{ --slide-focus:center center; }
    .slajd[data-category="poliranje"]{ --slide-focus:center center; }
    .slajd[data-category="pribor"]{ --slide-focus:center center; }
    @media (max-width: 768px){
      .slajd{ --slide-focus:center center; }
      .slajd[data-category="priprema"]{ --slide-focus:center center; }
      .slajd[data-category="zastita"]{ --slide-focus:center center; }
      .slajd[data-category="odrzavanje"]{ --slide-focus:center center; }
    }

    /* Overlays: readability + akcent glow */
    .slajd::before{
      content:""; position:absolute; inset:0; pointer-events:none;
      background:
        linear-gradient(to top left, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 42%, rgba(0,0,0,0) 80%),
        linear-gradient(90deg, rgba(0,0,0,.36), transparent 42%);
      z-index:1;
    }
    .slajd::after {
      box-shadow: inset 0 0 80px var(--accent-glow, rgba(255,177,0,.15));
      opacity: 0;
      transition: opacity .9s ease, box-shadow .9s ease;
    }
    .slajd.aktivan::after {
      opacity: 1;
      box-shadow: inset 0 0 90px var(--accent-glow, rgba(255,177,0,.25));
    }
    .slajd.aktivan::after{ opacity:1; }

    .slajd .overlay-accent {
      background: var(--accent-gradient, ...);
      mix-blend-mode: overlay;
      opacity: 0;
      transition: opacity .9s ease;
      z-index: 1;
    }
    .slajd.aktivan .overlay-accent { opacity: .8; } 

    /* Per-slajd akcenti (primeri) */
    #slajd-0{ --accent-gradient:linear-gradient(to top left, rgba(255,190,60,.4), rgba(0,0,0,.1) 60%, rgba(0,0,0,0)); --accent-glow:rgba(255,190,60,.18); }
    #slajd-1{ --accent-gradient:linear-gradient(to top left, rgba(58,178,255,.35), rgba(0,0,0,.1) 60%, rgba(0,0,0,0)); --accent-glow:rgba(58,178,255,.18); }
    #slajd-2{ --accent-gradient:linear-gradient(to top left, rgba(0,255,190,.35), rgba(0,0,0,.1) 60%, rgba(0,0,0,0)); --accent-glow:rgba(0,255,190,.18); }
    #slajd-3{ --accent-gradient:linear-gradient(to top left, rgba(255,80,80,.35), rgba(0,0,0,.1) 60%, rgba(0,0,0,0)); --accent-glow:rgba(255,80,80,.18); }
    #slajd-4{ --accent-gradient:linear-gradient(to top left, rgba(240,255,100,.35), rgba(0,0,0,.1) 60%, rgba(0,0,0,0)); --accent-glow:rgba(240,255,100,.18); }

    /* Category section heading (same visual language as "Popularni proizvodi") */
    .kategorije-header{
      padding: 20px 0 12px;
      background: linear-gradient(120deg,#191923 60%,#232332 100%);
      border-top: 0;
      border-bottom: 0;
      box-shadow: none;
    }
    .home-section-title{
      position: relative;
      display: block;
      margin: 0;
      color: #f1f3f6;
      font-weight: 600;
      letter-spacing: .01em;
      text-transform: none;
      text-align: center;
      font-size: clamp(1.45rem, 3.6vw, 1.95rem);
      line-height: 1.1;
      padding: 0;
    }

    .kategorije-sekcija.prikazano{
      animation: heroEntrance .9s ease-out both;
    }

    @keyframes heroEntrance{
      from{ transform:scale(1.02); opacity:0; }
      to{ transform:scale(1); opacity:1; }
    }

    /* Sadrzaj slajda (desno) */
    .slajd-sadrzaj{
      position:relative;
      z-index:3;
      color:#fff;
      text-align:right;
      width:min(720px,92%);
      margin-right:clamp(18px,7vw,120px);
      padding:0;
      border-radius:0;
      background:transparent;
      border:0;
      box-shadow:none;
      backdrop-filter:none;
    }
    .slajd-tekst h3{ margin:0 0 8px; font-weight:800; font-size:clamp(22px,4vw,42px); text-shadow:var(--senka-tekst); }
    .slajd-tekst p{ margin:0 0 14px; color:#d7dde7; font-size:clamp(13px,2.2vw,17px); line-height:1.35; text-shadow:0 1px 6px rgba(0,0,0,.5); }

    /* CTA - bez podvlacenja + iznad overlay-a */
    .kategorije-sekcija a{ text-decoration:none !important; }
    .slajd-dugme{
      position:relative; z-index:4;
      display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
      background:linear-gradient(180deg, rgba(47,51,66,.96), rgba(31,34,45,.96));
      color:#f4f6fb;
      border:1px solid rgba(255,255,255,.16);
      clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
      border-radius:0;
      line-height:1;
      font-size:clamp(14px,2.2vw,18px);
      padding:clamp(13px,2.2vw,16px) clamp(18px,3.2vw,28px);
      font-weight:800; letter-spacing:.2px;
      box-shadow:0 14px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
      transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, border-color .15s ease, background .15s ease;
    }
    .slajd-dugme:hover{
      transform:translateY(-2px);
      border-color:rgba(255,177,0,.52);
      background:
        linear-gradient(90deg, rgba(255,177,0,.20), rgba(255,177,0,.04) 42%),
        linear-gradient(180deg, rgba(59,63,80,.98), rgba(38,42,55,.98));
      box-shadow:0 18px 36px rgba(0,0,0,.30), 0 0 0 1px rgba(255,177,0,.10);
    }
    .slajd-dugme i{ font-size:.9em; }
    .slajd-dugme.is-priprema,
    .slajd-dugme.is-zastita,
    .slajd-dugme.is-odrzavanje{
      clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
      border-radius:0;
      min-height:54px;
      padding:14px 22px;
      color:#f4f6fb;
      border:1px solid rgba(255,255,255,.17);
      isolation:isolate;
      overflow:hidden;
    }
    .slajd-dugme.is-priprema::before,
    .slajd-dugme.is-zastita::before,
    .slajd-dugme.is-odrzavanje::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(115deg, transparent 28%, rgba(255,255,255,.26) 50%, transparent 70%);
      transform:translateX(-120%);
      transition:transform .45s ease;
      z-index:-1;
    }
    .slajd-dugme.is-priprema:hover::before,
    .slajd-dugme.is-zastita:hover::before,
    .slajd-dugme.is-odrzavanje:hover::before{ transform:translateX(120%); }
    .slajd-dugme.is-priprema{
      --agd-accent:255,159,47;
      background:linear-gradient(90deg, rgba(var(--agd-accent),.22), rgba(var(--agd-accent),.04) 46%), linear-gradient(180deg, rgba(47,51,66,.96), rgba(31,34,45,.96));
      box-shadow:0 16px 34px rgba(0,0,0,.26), 0 0 0 1px rgba(var(--agd-accent),.10);
    }
    .slajd-dugme.is-zastita{
      --agd-accent:128,231,255;
      background:linear-gradient(90deg, rgba(var(--agd-accent),.20), rgba(255,177,0,.05) 48%), linear-gradient(180deg, rgba(47,51,66,.96), rgba(31,34,45,.96));
      box-shadow:0 16px 34px rgba(0,0,0,.26), 0 0 0 1px rgba(var(--agd-accent),.10);
    }
    .slajd-dugme.is-odrzavanje{
      --agd-accent:157,255,201;
      background:linear-gradient(90deg, rgba(var(--agd-accent),.19), rgba(255,177,0,.05) 48%), linear-gradient(180deg, rgba(47,51,66,.96), rgba(31,34,45,.96));
      box-shadow:0 16px 34px rgba(0,0,0,.26), 0 0 0 1px rgba(var(--agd-accent),.10);
    }

    /* Stagger teksta */
    .slajd-tekst h3, .slajd-tekst p, .slajd-dugme{
      opacity:0; transform:translateY(20px);
      transition: opacity .8s var(--easing), transform .8s var(--easing);
    }
    .slajd.aktivan .slajd-tekst h3{ opacity:1; transform:none; transition-delay:.15s; }
    .slajd.aktivan .slajd-tekst p { opacity:1; transform:none; transition-delay:.35s; }
    .slajd.aktivan .slajd-dugme  { opacity:1; transform:none; transition-delay:.55s; }

    /* Strelice */
    .strelica{
      position:absolute; top:50%; transform:translateY(-50%);
      width:60px; height:60px; border-radius:8px;
      background:rgba(0,0,0,.42); backdrop-filter:blur(8px);
      border:1px solid rgba(255,255,255,.28);
      color:#fff; display:grid; place-items:center; cursor:pointer; user-select:none;
      pointer-events:auto;
      touch-action:manipulation;
      padding:0;
      appearance:none;
      -webkit-appearance:none;
      transition: background .2s ease, transform .15s ease, border-color .15s ease;
      z-index:10;
      font-size:1.35rem;
    }
    .strelica:hover{ background:rgba(255,177,0,.9); color:#12141a; border-color:#ffb100; transform:translateY(-50%) scale(1.04); }
    .strelica:active{ transform:translateY(-50%) scale(.98); }
    .strelica-levo{ left:22px; }
    .strelica-desno{ right:22px; }

    /* Category slide navigation */
    .tacke{
      position:absolute;
      left:50%;
      bottom:22px;
      display:flex;
      justify-content:center;
      gap:10px;
      z-index:9;
      width:min(92vw, 980px);
      transform:translateX(-50%);
      overflow-x:auto;
      padding:0 4px 4px;
      scrollbar-width:none;
    }
    .tacke::-webkit-scrollbar{ display:none; }
    .tacka{
      min-width:max-content;
      height:44px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(0,0,0,.46);
      color:#dfe6f3;
      cursor:pointer;
      padding:0 16px;
      font-size:.86rem;
      font-weight:800;
      letter-spacing:.02em;
      backdrop-filter:blur(6px);
      transition:transform .15s ease, background .15s ease, border-color .15s ease;
    }
    .tacka.aktivan{
      background:var(--gold);
      border-color:var(--gold);
      color:#16181f;
    }
    .tacka:hover{
      border-color:rgba(255,177,0,.55);
      color:#fff;
      transform:translateY(-2px);
    }
    .tacka.aktivan:hover{ color:#16181f; }

    @media (max-width:768px){
      .tacke{
        left:8px;
        right:8px;
        width:auto;
        transform:none;
        justify-content:flex-start;
        gap:8px;
        padding:0 8px 4px;
        scroll-padding-inline:8px;
        overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
      }
      .tacka{
        flex:0 0 auto;
        height:42px;
        padding:0 14px;
      }
    }

    /* Mobile prilagodavanja */
    @media (max-width:576px){
      .kategorije-header{
        padding: 14px 0 10px;
      }
      .home-section-title{
        font-size: clamp(1.35rem, 6.2vw, 1.7rem);
      }
      .slajd-sadrzaj{ margin-right:12px; width:min(86vw,520px); }
      .slajd-tekst h3{ font-size:clamp(18px,6.5vw,26px); }
      .slajd-tekst p{
        font-size:clamp(12px,3.5vw,14px);
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
      }
      .slajd-dugme{ font-size:clamp(12px,3.6vw,14px); padding:8px 14px; }
      .strelica{ width:40px; height:40px; }
    }
    @media (max-width:380px){
      .slajd-tekst p{ display:none; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .slajd-img{ animation:none; transition:none; }
      .slajd-tekst h3, .slajd-tekst p, .slajd-dugme{ transition:none; opacity:1; transform:none; }
    }

    .kategorije-sekcija .slajd-tekst { max-width: 760px; }
    .kategorije-sekcija .slajd-podnaslov{
      display:inline-block; letter-spacing:.08em; text-transform:uppercase;
      font-size:.82rem; font-weight:700; opacity:.9;
      background:rgba(255,177,0,.12); color:#ffb100;
      padding:.25rem .5rem; border-radius:.5rem; margin-bottom:.5rem;
    }
    .kategorije-sekcija .slajd-naslov{
      margin:.25rem 0 .4rem; font-size: clamp(1.3rem, 2.2vw, 2rem);
      font-weight:800; color:#e9ecf2;
    }
    .kategorije-sekcija .slajd-kopija{
      margin:0 0 1rem; color:#c9cfda; line-height:1.55; font-size:1rem;
    }
    .kategorije-sekcija .slajd-dugme{
      --agd-accent:#ffb100;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      font-weight:800;
      padding:.74rem 1.08rem;
      clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
      border-radius:0;
      background:
        linear-gradient(90deg, rgba(255,177,0,.18), rgba(255,177,0,.04) 44%),
        linear-gradient(180deg, rgba(47,51,66,.96), rgba(31,34,45,.96));
      color:#f4f6fb;
      border:1px solid rgba(255,255,255,.16);
      text-decoration:none !important;
      box-shadow:0 14px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
    }
    @media (max-width:576px){
      .kategorije-sekcija .slajd-dugme{
        padding:.48rem .68rem;
        font-size:.74rem;
        gap:.32rem;
        min-height:34px;
        clip-path:polygon(
          9px 0,
          100% 0,
          100% calc(100% - 9px),
          calc(100% - 9px) 100%,
          0 100%,
          0 9px
        );
      }

      .kategorije-sekcija .slajd-dugme i{
        font-size:.68rem;
      }
    }

    .kategorije-sekcija .slajd-dugme:hover{
      filter:none;
      transform:translateY(-2px);
      color:#fff;
      border-color:rgba(255,177,0,.52);
      box-shadow:0 18px 36px rgba(0,0,0,.30), 0 0 0 1px rgba(255,177,0,.10);
    }   
     
    /* Mobile trimming */
    @media (max-width: 576px){
      .slajd-kopija{
        display:block;
        max-height: calc(1.5em * 2);            /* ~2 lines */
        overflow:hidden;
        position:relative;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display:-webkit-box;
      }
      .slajd-kopija.is-otvoreno{                 /* expanded */
        max-height:none; -webkit-line-clamp:unset; display:block;
      }
      .slajd-toggle{
        display:inline-block; margin-top:.35rem; font-weight:700;
        font-size:.92rem; color:#ffb100; background:transparent; border:0; padding:0;
      }
    }

    /* --- Tipografija i raspored marketing teksta --- */
    .kategorije-sekcija .slajd-tekst{ max-width:760px; }
    .kategorije-sekcija .slajd-podnaslov{
      display:inline-block; letter-spacing:.08em; text-transform:uppercase;
      font-size:.82rem; font-weight:700; opacity:.95;
      background:rgba(255,177,0,.12); color:#ffb100;
      padding:.25rem .5rem; border-radius:.5rem; margin-bottom:.5rem;
    }
    .kategorije-sekcija .slajd-naslov{
      margin:.25rem 0 .4rem; font-size:clamp(1.3rem,2.2vw,2rem);
      font-weight:800; color:#e9ecf2;
    }
    .kategorije-sekcija .slajd-kopija{
      margin:0 0 1rem; color:#c9cfda; line-height:1.55; font-size:1rem;
    }

    /* CTA (zadrzava prethodne stilove; dodat mali polish) */
    .kategorije-sekcija .slajd-dugme{
      --agd-accent:#ffb100;
      display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
      font-weight:800; line-height:1;
      padding:.74rem 1.08rem;
      clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
      border-radius:0;
      background:
        linear-gradient(90deg, rgba(255,177,0,.18), rgba(255,177,0,.04) 44%),
        linear-gradient(180deg, rgba(47,51,66,.96), rgba(31,34,45,.96));
      color:#f4f6fb;
      border:1px solid rgba(255,255,255,.16);
      text-decoration:none !important;
      box-shadow:0 14px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
    }

    /* Utility: pokazi/sakrij po breakpointu */
    .samo-desktop{ display:inline; }
    .samo-mobilno{ display:none; }

    @media (max-width: 768px){
      .samo-desktop{ display:none !important; }
      .samo-mobilno{ display:inline !important; }
    }

    /* --- Mobile: clamp kopije na 2 linije + fade tail --- */
    /* ==========================================================
      MOBILE CLEANUP - show only title + button + category name
      ========================================================== */
    @media (max-width: 768px){
      /* Hide marketing text */
      .kategorije-sekcija .slajd-podnaslov,
      .kategorije-sekcija .slajd-kopija{ display:none !important; }

      /* Keep the category name smaller */
      .kategorije-sekcija .slajd-naslov{
        font-size:clamp(18px,6vw,24px);
        margin-bottom:.4rem;
      }

      /* CTA compact styling */
      .kategorije-sekcija .slajd-dugme{
        font-size:clamp(12px,3.6vw,14px);
        padding:8px 14px;
        clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
      }

      /* Hide navigation arrows (tap-to-change stays active) */
      .kategorije-sekcija .strelica{ display:none !important; }

      /* Optional: slightly lift content so button doesn't overlap bottom controls */
      .kategorije-sekcija .slajd-sadrzaj{
        margin-bottom:clamp(12px,4vw,20px);
      }
    }

    @media (max-width:380px){
      .kategorije-sekcija .slajd-kopija{ display:none; }  /* ultra-compact */
    }

    /* Soften or disable color haze on smaller screens */
    @media (max-width: 768px){
      /* Reduce glow */
      .slajd::after{
        box-shadow: inset 0 0 40px rgba(0,0,0,.25) !important; /* dim neutral shadow */
        opacity:.5 !important;
      }

      /* Soften or disable the tinted overlay */
      .slajd .overlay-accent{
        opacity:.35 !important;  /* lower intensity (was .8) */
        mix-blend-mode:normal !important; /* removes "color overlay" blend */
      }
    }

    @media (max-width: 480px){
      /* On very small screens you can even disable completely */
      .slajd::after,
      .slajd .overlay-accent{ opacity:0 !important; }
    }

    /* Intro overlay (home-only) */
    body.agd-intro-lock { overflow: hidden; }
    body.agd-intro-hide nav,
    body.agd-intro-hide .footer {
      opacity: 0 !important;
      visibility: hidden !important;
    }
    body.agd-intro-hide main > *:not(#agdIntro) {
      opacity: 0 !important;
      visibility: hidden !important;
    }
    body.agd-intro-fade nav,
    body.agd-intro-fade .footer,
    body.agd-intro-fade main > *:not(#agdIntro) {
      opacity: 1 !important;
      visibility: visible !important;
      transition: opacity 1800ms cubic-bezier(.2,.7,.1,1) 180ms;
    }
    .agd-intro {
      position: fixed;
      inset: 0;
      z-index: 3000;
      display: grid;
      place-items: center;
      background: radial-gradient(circle at 30% 20%, #1b1b28 0%, #0c0c12 55%, #050509 100%);
      color: #fff;
      overflow: hidden;
      opacity: 1;
      transition: opacity 2200ms ease 1800ms;
    }
    .agd-intro.reveal { opacity: 0; }
    @media (max-width: 768px) {
      #agdIntro { display: none !important; }
      body.agd-intro-lock { overflow-y: auto; }
      body.agd-intro-hide nav,
      body.agd-intro-hide .footer,
      body.agd-intro-hide main > *:not(#agdIntro) {
        opacity: 1 !important;
        visibility: visible !important;
      }
    }
    .agd-intro-mark {
      display: inline-block;
      font-weight: 800;
      font-size: clamp(2.6rem, 8vw, 5.2rem);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #0f3e8a;
      text-shadow: 0 1px 0 rgba(0,0,0,0.35);
      -webkit-text-stroke: 0.4px rgba(20, 70, 150, 0.75);
      position: relative;
    }
    .agd-intro-mark::before {
      content: "";
      position: absolute;
      inset: -15% -10%;
      background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 48%, transparent 66%);
      opacity: 0.25;
      transform: translateX(-120%);
      animation: agd-mark-polish 5.4s ease-in-out infinite;
      pointer-events: none;
    }
    .agd-intro-mark::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -0.6rem;
      width: clamp(140px, 30vw, 280px);
      height: 2px;
      transform: translateX(-50%);
      background: linear-gradient(90deg, transparent, rgba(255,177,0,0.75), transparent);
      opacity: 0.7;
      box-shadow: 0 0 10px rgba(255,177,0,0.35);
    }
    @keyframes agd-mark-polish {
      0% { transform: translateX(-120%); opacity: 0.05; }
      45% { opacity: 0.25; }
      60% { transform: translateX(120%); opacity: 0.18; }
      100% { transform: translateX(120%); opacity: 0.05; }
    }
    .agd-intro-content {
      position: relative;
      z-index: 2;
      text-align: center;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .agd-intro-sheen {
      position: absolute;
      inset: -55% -35%;
      background: linear-gradient(115deg, transparent 40%, rgba(255,200,90,0.18) 50%, transparent 60%);
      opacity: 0.42;
      transform: translateX(-55%) translateY(10%);
      animation: agd-sheen 4.6s ease-in-out infinite;
      z-index: 1;
      pointer-events: none;
    }
    .agd-intro-gold {
      position: absolute;
      inset: -20%;
      background:
        radial-gradient(circle at 70% 30%, rgba(255,177,0,0.14), transparent 45%),
        radial-gradient(circle at 20% 70%, rgba(255,177,0,0.1), transparent 50%);
      filter: blur(10px);
      z-index: 1;
      pointer-events: none;
    }
    .agd-intro-gold-sheen {
      position: absolute;
      inset: -45% -25%;
      background: linear-gradient(115deg, transparent 35%, rgba(255,177,0,0.22) 50%, transparent 65%);
      opacity: 0.28;
      transform: translateX(-35%) translateY(6%);
      animation: agd-gold 6.2s ease-in-out infinite;
      z-index: 1;
      pointer-events: none;
    }
    .agd-intro-tagline {
      margin-top: 0.6rem;
      font-size: clamp(0.75rem, 2vw, 1.1rem);
      color: #c8c9ce;
      opacity: 0.8;
      letter-spacing: 0.16em;
    }
    .agd-intro-glow {
      position: absolute;
      inset: -20%;
      background: radial-gradient(circle at center, rgba(10,18,30,0.18), rgba(6,14,30,0) 60%);
      filter: blur(16px);
      z-index: 1;
      pointer-events: none;
    }
    @keyframes agd-sheen {
      0% { transform: translateX(-55%) translateY(10%); opacity: 0.1; }
      45% { transform: translateX(8%) translateY(-4%); opacity: 0.45; }
      100% { transform: translateX(50%) translateY(-12%); opacity: 0.08; }
    }
    @keyframes agd-gold {
      0% { transform: translateX(-35%) translateY(6%); opacity: 0.12; }
      50% { transform: translateX(20%) translateY(-6%); opacity: 0.28; }
      100% { transform: translateX(55%) translateY(-14%); opacity: 0.1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .agd-intro,
      .agd-intro-sheen,
      .agd-intro-gold-sheen,
      body.agd-intro-fade nav,
      body.agd-intro-fade main,
      body.agd-intro-fade .footer { transition: none !important; }
      .agd-intro-sheen,
      .agd-intro-gold-sheen { animation: none !important; }
    }