/* ============================================================
   AGD PDP V2 — FINAL VISUAL AUTHORITY
   Phase V2.6A
   Approved mockup is the geometry/visual reference.
   Loaded AFTER the functional/base PDP stylesheet.
   ============================================================ */

#stranica-artikal{
  --agd-pdp-bg:#0d131c;
  --agd-pdp-bg-2:#111823;
  --agd-pdp-card:#18202b;
  --agd-pdp-card-2:#1c2430;
  --agd-pdp-line:rgba(148,166,192,.17);
  --agd-pdp-line-soft:rgba(255,255,255,.065);
  --agd-pdp-text:#f2f5f9;
  --agd-pdp-copy:#bac5d3;
  --agd-pdp-muted:#8e9aac;
  --agd-pdp-yellow:#ffb100;

  background:
    radial-gradient(
      circle at 4% 7%,
      rgba(20,66,108,.26),
      transparent 27%
    ),
    radial-gradient(
      circle at 96% 8%,
      rgba(17,54,91,.24),
      transparent 30%
    ),
    radial-gradient(
      circle at 75% 80%,
      rgba(19,45,73,.12),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #0c121a 0%,
      #101721 50%,
      #0e141c 100%
    ) !important;
}


/* ============================================================
   LARGE / NORMAL DESKTOP
   ============================================================ */

@media (min-width:1360px){

  /* ---------- HERO GRID ---------- */

  .pdpv2-hero.pdpv2-hero-v3{
    grid-template-columns:
      minmax(0,1.10fr)
      minmax(0,.94fr)
      minmax(300px,.74fr) !important;

    gap:22px !important;

    align-items:start !important;

    min-height:0 !important;

    margin-bottom:14px !important;
  }


  /* all three hero columns terminate together */

  .pdpv2-gallery-v4 .pdpv2-gallery-card,
  .pdpv2-main,
  .pdpv2-side{
    height:476px !important;
    min-height:476px !important;
    max-height:476px !important;
  }


  /* ==========================================================
     GALLERY
     ========================================================== */

  .pdpv2-gallery-v4 .pdpv2-gallery-card{
    padding:10px !important;

    overflow:hidden;

    border:
      1px solid
      var(--agd-pdp-line) !important;

    border-radius:13px !important;

    background:
      radial-gradient(
        circle at 51% 42%,
        rgba(77,106,150,.22),
        transparent 49%
      ),
      linear-gradient(
        145deg,
        #1b232e,
        #151c26
      ) !important;

    box-shadow:
      0 18px 44px rgba(0,0,0,.22),
      inset 0 1px rgba(255,255,255,.03) !important;
  }


  .pdpv2-stage-v4{
    flex:none !important;

    height:356px !important;
    min-height:356px !important;
    max-height:356px !important;

    overflow:hidden;

    border:
      1px solid
      rgba(255,255,255,.035);

    border-radius:10px !important;

    background:
      radial-gradient(
        ellipse at center,
        rgba(84,108,150,.17),
        transparent 50%
      ),
      linear-gradient(
        145deg,
        #1b222c,
        #171e27
      ) !important;
  }


  /*
   * Main images are normalized square canvases.
   * Make the image canvas taller than the stage so transparent
   * padding is clipped and the actual product becomes larger.
   */
  .pdpv2-stage-v4 #pp-image{
    width:400px !important;
    height:400px !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:contain !important;

    transform:none !important;
  }


  .pdpv2-gallery-v4 .pdpv2-zoom{
    top:12px !important;
    right:12px !important;

    width:39px !important;
    height:39px !important;

    border:
      1px solid
      rgba(255,255,255,.15) !important;

    background:
      rgba(7,11,17,.78) !important;

    box-shadow:
      0 7px 18px rgba(0,0,0,.24);
  }


  .pdpv2-media-counter{
    left:10px !important;
    bottom:9px !important;

    font-size:10px !important;
  }


  .pdpv2-thumb-navigation{
    grid-template-columns:
      34px
      minmax(0,1fr)
      34px !important;

    gap:7px !important;

    margin-top:7px !important;
  }


  .pdpv2-gallery-arrow{
    width:34px !important;
    height:34px !important;

    border-radius:8px !important;
  }


  .pdpv2-thumbs-v4{
    gap:7px !important;
  }


  .pdpv2-thumbs-v4 .pdpv2-thumb{
    flex:
      0
      0
      60px !important;

    width:60px !important;
    height:60px !important;

    border-radius:8px !important;
  }


  .pdpv2-gallery-v4 .pdpv2-gallery-help{
    margin-top:4px !important;

    color:#8995a6 !important;

    font-size:11px !important;
  }


  /* ==========================================================
     PURCHASE COLUMN
     ========================================================== */

  .pdpv2-main{
    display:flex !important;
    flex-direction:column !important;

    padding:
      5px
      0
      0 !important;

    overflow:visible;
  }


  .pdpv2-main .pdpv2-brand{
    margin-bottom:4px !important;

    color:#a3b0c1 !important;

    font-size:12px !important;
    font-weight:850 !important;

    letter-spacing:.12em !important;
  }


  .pdpv2-main .pdpv2-title{
    margin:
      0
      0
      3px !important;

    color:#f7f8fa !important;

    font-size:43px !important;
    line-height:.98 !important;

    letter-spacing:-.038em !important;
  }


  .pdpv2-main .pdpv2-subtitle{
    margin:
      3px
      0
      6px !important;

    color:#b2bdcc !important;

    font-size:15px !important;
    line-height:1.3 !important;
  }


  .pdpv2-main .pdpv2-price{
    margin:
      5px
      0
      10px !important;

    color:#ffb100 !important;

    font-size:32px !important;
    line-height:1 !important;

    letter-spacing:-.02em !important;
  }


  /*
   * The full product description already exists below.
   * The hero needs only a compact selling summary.
   */
  .pdpv2-main-copy{
    margin:0 !important;
  }


  .pdpv2-main-copy #pp-desc{
    display:-webkit-box !important;

    max-width:61ch !important;
    max-height:none !important;

    margin:
      0
      0
      9px !important;

    overflow:hidden !important;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:5;

    white-space:normal !important;

    color:#bac5d3 !important;

    font-size:14px !important;
    line-height:1.47 !important;
  }


  /* ---------- STOCK / POLICY ---------- */

  .pdpv2-main .pdpv2-stock{
    margin-top:0 !important;
  }


  .pdpv2-stock-row{
    display:flex !important;

    align-items:center !important;
    justify-content:flex-start !important;

    flex-wrap:wrap;

    gap:7px !important;

    margin-bottom:6px !important;
  }


  .pdpv2-stock-row #pp-stock-label,
  .pdpv2-order-policy{
    min-height:30px !important;

    display:inline-flex !important;
    align-items:center !important;

    padding:
      5px
      10px !important;

    border-radius:999px !important;

    font-size:11px !important;
    font-weight:800 !important;
  }


  .pdpv2-stock-row #pp-stock-label{
    border:
      1px solid
      rgba(255,255,255,.13) !important;

    background:
      rgba(255,255,255,.045) !important;
  }


  .pdpv2-order-policy{
    border:
      1px solid
      rgba(255,177,0,.22) !important;

    color:#d4dbe4 !important;

    background:
      rgba(255,177,0,.055) !important;
  }


  /* ---------- TAGS ---------- */

  .pdpv2-main .pdpv2-context{
    display:flex !important;

    flex-wrap:wrap;

    gap:5px !important;

    margin:
      0
      0
      8px !important;
  }


  .pdpv2-main .pdpv2-context a{
    min-height:27px !important;

    display:inline-flex !important;
    align-items:center !important;

    padding:
      4px
      9px !important;

    border:
      1px solid
      rgba(255,255,255,.09) !important;

    border-radius:999px !important;

    color:#aeb8c6 !important;

    background:
      rgba(255,255,255,.025) !important;

    font-size:11px !important;
    font-weight:750 !important;
  }


  /* ---------- VARIANT ---------- */

  .pdpv2-options{
    margin-bottom:8px !important;
  }


  .pdpv2-options-label,
  .pdpv2-quantity-block > label{
    margin-bottom:4px !important;

    color:#8f9bac !important;

    font-size:11px !important;
    font-weight:850 !important;

    letter-spacing:.075em !important;

    text-transform:uppercase;
  }


  .pdpv2-main .pp-variant-btn{
    min-width:72px !important;
    min-height:35px !important;

    padding:
      6px
      11px !important;

    border-radius:8px !important;

    font-size:12px !important;
  }


  /* ---------- QUANTITY ---------- */

  .pdpv2-quantity-block{
    margin:
      0
      0
      8px !important;
  }


  .pdpv2-quantity{
    width:126px !important;
    height:40px !important;

    grid-template-columns:
      38px
      1fr
      38px !important;

    border:
      1px solid
      rgba(255,255,255,.14) !important;

    border-radius:8px !important;

    background:#141b24 !important;
  }


  .pdpv2-quantity input{
    color:#fff !important;

    font-size:13px !important;
  }


  .pdpv2-quantity-btn{
    width:38px !important;
    height:39px !important;

    color:#c7d0dc !important;

    font-size:13px !important;
  }


  .pdpv2-quantity-note{
    margin-top:3px !important;

    font-size:11px !important;
  }


  /* ---------- ACTIONS ---------- */

  .pdpv2-actions.pdpv2-actions-v3{
    display:grid !important;

    grid-template-columns:
      minmax(0,1.34fr)
      minmax(0,1fr)
      46px !important;

    gap:8px !important;

    margin-top:2px !important;
  }


  .pdpv2-actions-v3 .pdpv2-add,
  .pdpv2-actions-v3 .pdpv2-buy-now,
  .pdpv2-actions-v3 .pdpv2-wishlist{
    height:47px !important;

    border-radius:9px !important;

    font-size:12px !important;
    font-weight:900 !important;
  }


  .pdpv2-actions-v3 .pdpv2-add{
    color:#11151b !important;

    background:
      linear-gradient(
        135deg,
        #ffb100,
        #ffc42e
      ) !important;

    box-shadow:
      0 8px 22px
      rgba(255,177,0,.16) !important;
  }


  .pdpv2-actions-v3 .pdpv2-buy-now{
    border:
      1px solid
      rgba(255,255,255,.17) !important;

    color:#f5f7f9 !important;

    background:
      linear-gradient(
        180deg,
        #1a222d,
        #151c25
      ) !important;
  }


  .pdpv2-actions-v3 .pdpv2-wishlist{
    width:46px !important;

    border:
      1px solid
      rgba(255,255,255,.15) !important;

    background:#151c25 !important;
  }


  /* ---------- SERVICES ---------- */

  .pdpv2-service.pdpv2-service-v3{
    min-height:62px !important;

    margin-top:auto !important;

    padding:
      8px
      0
      2px !important;

    border-top:
      1px solid
      var(--agd-pdp-line-soft) !important;

    border-bottom:
      1px solid
      var(--agd-pdp-line-soft) !important;
  }


  .pdpv2-service-item{
    grid-template-columns:
      32px
      minmax(0,1fr) !important;

    gap:8px !important;

    padding:
      2px
      11px !important;
  }


  .pdpv2-service-item:first-child{
    padding-left:0 !important;
  }


  .pdpv2-service-item > i{
    width:32px !important;
    height:32px !important;

    border:
      1px solid
      rgba(255,177,0,.23) !important;

    border-radius:8px !important;

    color:#ffb100 !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,177,0,.16),
        rgba(255,177,0,.04)
      ) !important;

    font-size:13px !important;
  }


  .pdpv2-service-item strong{
    margin-bottom:1px !important;

    color:#f3f6f9 !important;

    font-size:12px !important;
  }


  .pdpv2-service-item span{
    color:#909cad !important;

    font-size:10px !important;
    line-height:1.2 !important;
  }


  /* ==========================================================
     RIGHT COLUMN
     ========================================================== */

  .pdpv2-side{
    display:flex !important;
    flex-direction:column !important;

    gap:10px !important;
  }


  .pdpv2-side-card{
    padding:
      14px
      15px !important;

    overflow:hidden;

    border:
      1px solid
      var(--agd-pdp-line) !important;

    border-radius:12px !important;

    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(32,72,116,.14),
        transparent 45%
      ),
      linear-gradient(
        145deg,
        #1a222d,
        #161d27
      ) !important;

    box-shadow:
      0 12px 30px rgba(0,0,0,.15),
      inset 0 1px rgba(255,255,255,.025) !important;
  }


  .pdpv2-side-card:first-child{
    flex:1.18;
  }


  .pdpv2-side-card.pdpv2-purpose{
    flex:.82;

    position:relative;

    background:
      radial-gradient(
        circle at 100% 100%,
        rgba(255,177,0,.11),
        transparent 39%
      ),
      radial-gradient(
        circle at 0% 0%,
        rgba(29,70,111,.14),
        transparent 44%
      ),
      linear-gradient(
        145deg,
        #1a222d,
        #161c25
      ) !important;
  }


  .pdpv2-side-card h2{
    margin-bottom:10px !important;

    color:#f5f7f9 !important;

    font-size:17px !important;
  }


  .pdpv2-quick-list > div{
    min-height:42px !important;

    grid-template-columns:
      minmax(150px,.94fr)
      minmax(0,1.06fr) !important;

    gap:8px !important;

    padding:
      5px
      0 !important;
  }


  .pdpv2-quick-list dt{
    gap:8px !important;

    color:#aab5c4 !important;

    font-size:12px !important;
  }


  .pdpv2-quick-list dt i{
    flex:
      0
      0
      31px !important;

    width:31px !important;
    height:31px !important;

    border:
      1px solid
      rgba(255,177,0,.23) !important;

    border-radius:8px !important;

    color:#ffb100 !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,177,0,.16),
        rgba(255,177,0,.04)
      ) !important;

    font-size:12px !important;
  }


  .pdpv2-quick-list dd{
    color:#e0e5ec !important;

    font-size:12px !important;
    line-height:1.3 !important;
  }


  .pdpv2-purpose h2{
    color:#ffb100 !important;
  }


  .pdpv2-purpose li{
    grid-template-columns:
      24px
      minmax(0,1fr) !important;

    gap:8px !important;

    color:#bdc7d4 !important;

    font-size:12px !important;
    line-height:1.35 !important;
  }


  .pdpv2-purpose li i{
    width:24px !important;
    height:24px !important;

    color:#ffb100 !important;

    background:
      rgba(255,177,0,.075) !important;

    font-size:10px !important;
  }

}


/* ============================================================
   TABS + FIRST CONTENT AREA
   ============================================================ */

@media (min-width:992px){

  .pdpv2-info{
    margin-top:0 !important;
  }


  .pdpv2-info-tabs{
    gap:4px !important;

    border-bottom:
      1px solid
      var(--agd-pdp-line) !important;
  }


  .pdpv2-info-tabs .nav-link{
    min-height:41px !important;

    padding:
      8px
      14px !important;

    color:#929eae !important;

    font-size:13px !important;
    font-weight:800 !important;
  }


  .pdpv2-info-tabs .nav-link.active{
    color:#fff !important;
  }


  .pdpv2-info-tabs .nav-link.active::after{
    height:3px !important;

    background:#ffb100 !important;
  }


  .pdpv2-info-content{
    padding-top:11px !important;
  }


  /*
   * Do not stretch every overview card to the technical table.
   * This is one of the major causes of empty dead space.
   */
  .pdpv2-overview-grid{
    align-items:start !important;

    gap:11px !important;
  }


  .pdpv2-info-card{
    min-height:0 !important;

    padding:
      15px
      16px !important;

    border:
      1px solid
      var(--agd-pdp-line) !important;

    border-radius:12px !important;

    background:
      radial-gradient(
        circle at 100% 0%,
        rgba(31,70,112,.13),
        transparent 45%
      ),
      linear-gradient(
        145deg,
        #1a222d,
        #161d27
      ) !important;

    box-shadow:
      0 10px 25px rgba(0,0,0,.12),
      inset 0 1px rgba(255,255,255,.025) !important;
  }


  .pdpv2-info-card h3{
    display:flex !important;

    align-items:center !important;

    gap:10px !important;

    margin-bottom:11px !important;

    color:#f4f6f9 !important;

    font-size:16px !important;
  }


  .pdpv2-card-heading-icon{
    flex:
      0
      0
      36px !important;

    width:36px !important;
    height:36px !important;

    border:
      1px solid
      rgba(255,177,0,.24) !important;

    border-radius:9px !important;

    color:#ffb100 !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,177,0,.17),
        rgba(255,177,0,.045)
      ) !important;
  }


  .pdpv2-card-heading-icon i{
    font-size:14px !important;
  }


  .pdpv2-about-text{
    color:#b9c4d2 !important;

    font-size:14px !important;
    line-height:1.55 !important;
  }


  .pdpv2-feature-list{
    gap:8px !important;
  }


  .pdpv2-feature-list li{
    grid-template-columns:
      23px
      minmax(0,1fr) !important;

    gap:8px !important;

    color:#bec8d5 !important;

    font-size:13px !important;
  }


  .pdpv2-feature-list li i{
    width:23px !important;
    height:23px !important;

    color:#ffb100 !important;

    font-size:13px !important;
  }


  .pdpv2-tech-list > div{
    min-height:34px !important;

    align-items:center !important;

    padding:
      4px
      0 !important;
  }


  .pdpv2-tech-list dt{
    color:#8d99aa !important;

    font-size:12px !important;
  }


  .pdpv2-tech-list dd{
    color:#e0e5ec !important;

    font-size:13px !important;
  }


  /* ==========================================================
     GUIDE CARDS
     ========================================================== */

  .pp-guidance.pp-guidance--reference{
    margin-top:12px !important;

    padding:0 !important;

    border:0 !important;

    background:none !important;

    box-shadow:none !important;
  }


  .pp-guidance--reference .pp-guidance-grid{
    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    gap:11px !important;
  }


  .pp-guidance--reference .pp-guidance-item{
    min-height:118px !important;

    grid-template-columns:
      44px
      minmax(0,1fr) !important;

    gap:11px !important;

    padding:14px !important;

    border:
      1px solid
      var(--agd-pdp-line) !important;

    border-radius:11px !important;

    background:
      radial-gradient(
        circle at 0% 0%,
        rgba(34,75,118,.16),
        transparent 54%
      ),
      linear-gradient(
        145deg,
        #1a222d,
        #161d27
      ) !important;

    box-shadow:
      0 10px 24px rgba(0,0,0,.12),
      inset 0 1px rgba(255,255,255,.025) !important;
  }


  .pp-guidance-icon{
    width:44px !important;
    height:44px !important;

    border:
      1px solid
      rgba(255,177,0,.27) !important;

    border-radius:10px !important;

    color:#ffb100 !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,177,0,.18),
        rgba(255,177,0,.05)
      ) !important;
  }


  .pp-guidance-icon i{
    font-size:18px !important;
  }


  .pp-guidance--reference
  .pp-guidance-item strong{
    margin:
      1px
      0
      5px !important;

    color:#f4f7fa !important;

    font-size:14px !important;
    line-height:1.2 !important;
  }


  .pp-guidance--reference
  .pp-guidance-item p{
    color:#aeb9c8 !important;

    font-size:13px !important;
    line-height:1.42 !important;
  }

}


/* ============================================================
   MEDIUM DESKTOP
   ============================================================ */

@media (min-width:1360px) and (max-width:1599.98px){

  .pdpv2-hero.pdpv2-hero-v3{
    gap:17px !important;
  }


  .pdpv2-gallery-v4 .pdpv2-gallery-card,
  .pdpv2-main,
  .pdpv2-side{
    height:462px !important;
    min-height:462px !important;
    max-height:462px !important;
  }


  .pdpv2-stage-v4{
    height:344px !important;
    min-height:344px !important;
    max-height:344px !important;
  }


  .pdpv2-stage-v4 #pp-image{
    width:385px !important;
    height:385px !important;
  }


  .pdpv2-main .pdpv2-title{
    font-size:39px !important;
  }


  .pdpv2-main .pdpv2-price{
    font-size:29px !important;
  }


  .pdpv2-main-copy #pp-desc{
    font-size:13px !important;

    -webkit-line-clamp:5;
  }


  .pdpv2-side-card h2{
    font-size:15px !important;
  }


  .pdpv2-quick-list dt,
  .pdpv2-quick-list dd,
  .pdpv2-purpose li{
    font-size:11px !important;
  }

}


/* ============================================================
   KEEP EXISTING TABLET / MOBILE STRUCTURE
   Only normalize typography and backgrounds lightly.
   ============================================================ */

@media (max-width:1359.98px){

  #stranica-artikal{
    background:
      radial-gradient(
        circle at 10% 4%,
        rgba(22,65,105,.20),
        transparent 27%
      ),
      linear-gradient(
        180deg,
        #0d141d,
        #111721
      ) !important;
  }

}


@media (max-width:767.98px){

  .pp-guidance--reference .pp-guidance-item p{
    font-size:13px !important;
  }

}


/* ============================================================
   PHASE V2.6B — REFERENCE PREGLED COMPOSITION
   ============================================================ */


/* old three-card Pregled remains in DOM temporarily for safety */
.pdpv2-overview-legacy{
  display:none !important;
}


/* old standalone guidance below the tabs */
#stranica-artikal
> .container
> .pp-guidance{
  display:none !important;
}


/* ============================================================
   NEW OVERVIEW
   ============================================================ */

.pdpv2-overview-reference{
  display:block;

  margin:0;

  padding:0;
}


/* ============================================================
   FOUR GUIDANCE CARDS
   ============================================================ */

.pdpv2-usage-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:10px;

  margin-bottom:12px;
}


.pdpv2-usage-card{
  min-width:0;
  min-height:108px;

  display:grid;

  grid-template-columns:
    42px
    minmax(0,1fr);

  gap:11px;

  align-items:start;

  padding:13px;

  border:
    1px solid
    var(--agd-pdp-line);

  border-radius:11px;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(35,79,124,.17),
      transparent 56%
    ),
    linear-gradient(
      145deg,
      #1a222d,
      #161d26
    );

  box-shadow:
    0 9px 22px
    rgba(0,0,0,.12),
    inset 0 1px
    rgba(255,255,255,.025);
}


.pdpv2-usage-icon{
  width:42px;
  height:42px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(255,177,0,.27);

  border-radius:10px;

  color:#ffb100;

  background:
    linear-gradient(
      145deg,
      rgba(255,177,0,.18),
      rgba(255,177,0,.045)
    );

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.045);
}


.pdpv2-usage-icon i{
  font-size:17px;
}


.pdpv2-usage-copy{
  min-width:0;
}


.pdpv2-usage-copy h3{
  margin:
    1px
    0
    5px;

  color:#f4f6f9;

  font-size:14px;

  font-weight:850;

  line-height:1.2;
}


.pdpv2-usage-copy p{
  margin:0;

  color:#aeb9c8;

  font-size:13px;

  line-height:1.42;
}


/* ============================================================
   CHARACTERISTICS + PROCESS
   ============================================================ */

.pdpv2-overview-lower{
  display:grid;

  grid-template-columns:
    minmax(280px,.31fr)
    minmax(0,.69fr);

  gap:11px;

  align-items:stretch;
}


/* ---------- CHARACTERISTICS ---------- */

.pdpv2-overview-specs{
  min-width:0;

  padding:14px;

  border:
    1px solid
    var(--agd-pdp-line);

  border-radius:11px;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(31,74,117,.14),
      transparent 50%
    ),
    linear-gradient(
      145deg,
      #1a222d,
      #161d26
    );

  box-shadow:
    0 10px 24px
    rgba(0,0,0,.12),
    inset 0 1px
    rgba(255,255,255,.025);
}


.pdpv2-overview-section-heading{
  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:10px;
}


.pdpv2-overview-heading-icon{
  flex:
    0
    0
    38px;

  width:38px;
  height:38px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(255,177,0,.24);

  border-radius:9px;

  color:#ffb100;

  background:
    linear-gradient(
      145deg,
      rgba(255,177,0,.17),
      rgba(255,177,0,.045)
    );
}


.pdpv2-overview-heading-icon i{
  font-size:15px;
}


.pdpv2-overview-kicker{
  display:block;

  margin-bottom:1px;

  color:#ffb100;

  font-size:10px;

  font-weight:900;

  letter-spacing:.09em;

  text-transform:uppercase;
}


.pdpv2-overview-section-heading h2{
  margin:0;

  color:#f4f6f9;

  font-size:17px;

  font-weight:850;

  line-height:1.1;
}


.pdpv2-overview-spec-list{
  margin:0;
}


.pdpv2-overview-spec-list > div{
  min-height:36px;

  display:grid;

  grid-template-columns:
    minmax(105px,.43fr)
    minmax(0,.57fr);

  gap:8px;

  align-items:center;

  padding:
    5px
    0;

  border-bottom:
    1px solid
    rgba(255,255,255,.065);
}


.pdpv2-overview-spec-list > div:last-child{
  border-bottom:0;
}


.pdpv2-overview-spec-list dt{
  margin:0;

  color:#8996a8;

  font-size:12px;

  font-weight:750;
}


.pdpv2-overview-spec-list dd{
  min-width:0;

  margin:0;

  color:#e0e5ec;

  font-size:13px;

  line-height:1.28;
}


/* ============================================================
   COMPACT COMPLETE PROCESS
   Existing complete_job logic, new presentation only.
   ============================================================ */

.pdpv2-overview-process{
  min-width:0;
}


#stranica-artikal
.pp-complete-job.pp-complete-job--compact{
  height:100% !important;

  margin:0 !important;

  padding:14px !important;

  border:
    1px solid
    var(--agd-pdp-line) !important;

  border-radius:11px !important;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(32,73,116,.14),
      transparent 47%
    ),
    linear-gradient(
      145deg,
      #1a222d,
      #161d26
    ) !important;

  box-shadow:
    0 10px 24px
    rgba(0,0,0,.12),
    inset 0 1px
    rgba(255,255,255,.025) !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-kicker{
  margin-bottom:3px !important;

  font-size:10px !important;

  letter-spacing:.09em !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-title{
  margin-bottom:3px !important;

  font-size:17px !important;

  line-height:1.15 !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-intro{
  margin-bottom:10px !important;

  color:#909cac !important;

  font-size:11px !important;

  line-height:1.35 !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-flow{
  display:grid !important;

  grid-template-columns:
    repeat(
      var(--pp-flow-count),
      minmax(0,1fr)
    ) !important;

  gap:9px !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-step{
  min-width:0 !important;
  min-height:188px !important;

  overflow:visible !important;

  border:
    1px solid
    rgba(255,255,255,.09) !important;

  border-radius:10px !important;

  background:
    linear-gradient(
      145deg,
      #1c2430,
      #181f29
    ) !important;

  box-shadow:none !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-media{
  height:74px !important;
  min-height:74px !important;

  padding:7px !important;

  border-radius:
    10px
    10px
    0
    0 !important;

  background:
    radial-gradient(
      circle at center,
      rgba(73,92,125,.22),
      transparent 60%
    ),
    #1c2430 !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-media img{
  width:100% !important;
  height:100% !important;

  object-fit:contain !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-copy{
  padding:
    8px
    9px
    9px !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-number{
  top:6px !important;
  left:6px !important;

  width:21px !important;
  height:21px !important;

  font-size:10px !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-role{
  margin-bottom:3px !important;

  font-size:9px !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-current{
  margin-bottom:4px !important;

  padding:
    3px
    5px !important;

  font-size:8px !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-product{
  font-size:12px !important;

  line-height:1.2 !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-price{
  margin-top:6px !important;

  color:#ffcf67 !important;

  font-size:11px !important;
}


/*
 * Reference process cards do not need explanatory paragraphs
 * or "view product" links inside every card.
 */
#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-note,
#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-link{
  display:none !important;
}


/* process arrows */

#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-flow
.pp-complete-job-step:not(:last-child)::after{
  top:82px !important;

  right:-8px !important;

  width:8px !important;

  color:
    rgba(255,177,0,.72) !important;

  font-size:12px !important;
}


/* aftercare remains available when workflow has it */

#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-aftercare{
  margin-top:10px !important;

  padding-top:10px !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1359.98px){

  .pdpv2-usage-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .pdpv2-overview-lower{
    grid-template-columns:1fr;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-flow{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-flow
  .pp-complete-job-step::after{
    display:none !important;
  }

}


@media (max-width:767.98px){

  .pdpv2-usage-grid{
    grid-template-columns:1fr;

    gap:8px;
  }


  .pdpv2-usage-card{
    min-height:auto;

    grid-template-columns:
      40px
      minmax(0,1fr);

    padding:12px;
  }


  .pdpv2-usage-icon{
    width:40px;
    height:40px;
  }


  .pdpv2-overview-spec-list > div{
    grid-template-columns:
      minmax(100px,.42fr)
      minmax(0,.58fr);
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-flow{
    display:block !important;
  }

}


/* ============================================================
   PHASE V2.6C — COMPACT COMMERCE RAILS
   ============================================================ */

.pdpv2-commerce{
  display:grid;

  grid-template-columns:1fr;

  gap:14px;

  margin-top:14px;

  padding-top:14px;

  border-top:
    1px solid
    var(--agd-pdp-line-soft);
}


/*
 * Only split into two columns once Recently Viewed actually
 * contains data and becomes visible.
 */
@media (min-width:1360px){

  .pdpv2-commerce:has(
    #agdRecentlyViewed:not([hidden])
  ){
    grid-template-columns:
      minmax(0,1.75fr)
      minmax(390px,.95fr);

    align-items:start;
  }

}


.pdpv2-commerce-panel,
.pdpv2-commerce-recent-slot{
  min-width:0;
}


.pdpv2-commerce-head{
  min-height:28px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-bottom:7px;
}


.pdpv2-commerce-head h2{
  margin:0;

  color:#f3f6f9;

  font-size:16px;

  font-weight:850;

  line-height:1.2;
}


/* ============================================================
   RAIL SHELL
   ============================================================ */

.pdpv2-commerce-rail-shell,
.agd-rv-track-shell{
  min-width:0;

  display:grid;

  grid-template-columns:
    30px
    minmax(0,1fr)
    30px;

  gap:7px;

  align-items:center;
}


.pdpv2-commerce-arrow{
  width:30px;
  height:30px;

  display:grid;

  place-items:center;

  padding:0;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:50%;

  color:#aeb8c6;

  background:
    #151c25;

  font-size:10px;

  transition:
    color .15s ease,
    border-color .15s ease,
    background .15s ease;
}


.pdpv2-commerce-arrow:hover:not(:disabled){
  color:#12161c;

  border-color:#ffb100;

  background:#ffb100;
}


.pdpv2-commerce-arrow:disabled{
  opacity:.22;

  cursor:default;
}


/* ============================================================
   SIMILAR TRACK
   ============================================================ */

.pdpv2-commerce-track{
  min-width:0;

  display:grid;

  grid-auto-flow:column;

  grid-auto-columns:
    minmax(
      185px,
      210px
    );

  gap:8px;

  overflow-x:auto;
  overflow-y:hidden;

  padding:1px;

  scroll-snap-type:
    x proximity;

  scroll-behavior:smooth;

  overscroll-behavior-inline:
    contain;

  scrollbar-width:none;
}


.pdpv2-commerce-track::-webkit-scrollbar{
  display:none;
}


/* ============================================================
   SIMILAR CARD
   ============================================================ */

.pdpv2-commerce-card{
  min-width:0;
  height:88px;

  display:grid;

  grid-template-columns:
    60px
    minmax(0,1fr)
    28px;

  gap:8px;

  align-items:center;

  padding:
    7px
    7px;

  overflow:hidden;

  scroll-snap-align:start;

  border:
    1px solid
    var(--agd-pdp-line);

  border-radius:9px;

  background:
    radial-gradient(
      circle at 0% 50%,
      rgba(32,73,116,.15),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      #1a222d,
      #161d26
    );

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.025);

  transition:
    transform .15s ease,
    border-color .15s ease;
}


.pdpv2-commerce-card:hover{
  transform:
    translateY(-1px);

  border-color:
    rgba(255,177,0,.27);
}


.pdpv2-commerce-media{
  width:60px;
  height:72px;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:5px;

  overflow:hidden;

  border-radius:7px;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(82,101,134,.24),
      transparent 58%
    ),
    #1c2430;
}


.pdpv2-commerce-media img{
  width:100%;
  height:100%;

  object-fit:contain;
}


.pdpv2-commerce-copy{
  min-width:0;

  display:flex;

  flex-direction:column;

  justify-content:center;
}


.pdpv2-commerce-brand{
  display:block;

  margin-bottom:2px;

  overflow:hidden;

  color:#8390a3;

  font-size:9px;

  font-weight:800;

  letter-spacing:.04em;

  text-overflow:ellipsis;

  text-transform:uppercase;

  white-space:nowrap;
}


.pdpv2-commerce-name{
  display:-webkit-box;

  margin-bottom:4px;

  overflow:hidden;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  color:#f1f4f7;

  font-size:11px;

  font-weight:800;

  line-height:1.22;

  text-decoration:none;
}


.pdpv2-commerce-name:hover{
  color:#ffc22d;
}


.pdpv2-commerce-price{
  color:#ffb100;

  font-size:10px;

  font-weight:900;

  line-height:1.1;
}


.pdpv2-commerce-action{
  width:28px;
  height:28px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(255,177,0,.22);

  border-radius:7px;

  color:#ffb100;

  background:
    rgba(255,177,0,.055);

  font-size:10px;

  text-decoration:none;
}


.pdpv2-commerce-action:hover{
  color:#111;

  background:#ffb100;
}


/* ============================================================
   RECENTLY VIEWED — PDP V2 COMPACT OVERRIDE
   Component keeps all of its existing localStorage/API logic.
   ============================================================ */

.pdpv2-commerce-recent-slot
#agdRecentlyViewed{
  margin:0 !important;

  padding:0 !important;

  border-top:0 !important;
}


.pdpv2-commerce-recent-slot
#agdRecentlyViewed[hidden]{
  display:none !important;
}


.pdpv2-commerce-recent-slot
.agd-rv-head{
  min-height:28px;

  display:flex !important;

  align-items:center !important;

  margin:
    0
    0
    7px !important;
}


.pdpv2-commerce-recent-slot
.agd-rv-kicker,
.pdpv2-commerce-recent-slot
.agd-rv-subtitle{
  display:none !important;
}


.pdpv2-commerce-recent-slot
.agd-rv-title{
  margin:0 !important;

  color:#f3f6f9 !important;

  font-size:16px !important;

  font-weight:850 !important;

  line-height:1.2 !important;
}


.pdpv2-commerce-recent-slot
.agd-rv-track{
  min-width:0;

  grid-auto-columns:
    minmax(
      160px,
      185px
    ) !important;

  gap:8px !important;

  padding:1px !important;

  overflow-x:auto !important;

  scrollbar-width:none !important;
}


.pdpv2-commerce-recent-slot
.agd-rv-track::-webkit-scrollbar{
  display:none !important;
}


/*
 * Existing Recently Viewed cards were designed as tall
 * portrait cards. Convert them to compact horizontal cards.
 */
.pdpv2-commerce-recent-slot
.agd-rv-card{
  height:88px !important;
  min-height:88px !important;

  display:grid !important;

  grid-template-columns:
    60px
    minmax(0,1fr) !important;

  align-items:center !important;

  overflow:hidden !important;

  border:
    1px solid
    var(--agd-pdp-line) !important;

  border-radius:9px !important;

  background:
    radial-gradient(
      circle at 0% 50%,
      rgba(32,73,116,.15),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      #1a222d,
      #161d26
    ) !important;

  box-shadow:none !important;
}


.pdpv2-commerce-recent-slot
.agd-rv-image{
  width:60px !important;
  height:72px !important;

  aspect-ratio:auto !important;

  margin-left:7px;

  padding:5px !important;

  border-radius:7px !important;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(82,101,134,.24),
      transparent 58%
    ),
    #1c2430 !important;
}


.pdpv2-commerce-recent-slot
.agd-rv-image img{
  width:100% !important;
  height:100% !important;

  object-fit:contain !important;
}


/*
 * Normalize whatever text/body wrappers the existing JS creates
 * without changing its markup or data behavior.
 */
.pdpv2-commerce-recent-slot
.agd-rv-card
> :not(.agd-rv-image){
  min-width:0;

  padding:
    7px
    8px !important;
}


.pdpv2-commerce-recent-slot
.agd-rv-card
a,
.pdpv2-commerce-recent-slot
.agd-rv-card
strong{
  max-width:100%;

  overflow:hidden;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1359.98px){

  .pdpv2-commerce{
    grid-template-columns:1fr !important;
  }


  .pdpv2-commerce-track{
    grid-auto-columns:
      minmax(
        180px,
        205px
      );
  }

}


@media (max-width:767.98px){

  .pdpv2-commerce{
    gap:12px;

    margin-top:12px;

    padding-top:12px;
  }


  .pdpv2-commerce-rail-shell,
  .agd-rv-track-shell{
    grid-template-columns:
      minmax(0,1fr);
  }


  .pdpv2-commerce-arrow{
    display:none;
  }


  .pdpv2-commerce-track,
  .pdpv2-commerce-recent-slot
  .agd-rv-track{
    grid-auto-columns:
      minmax(
        175px,
        78vw
      ) !important;
  }

}


/* ============================================================
   PHASE V2.7A — HERO FIDELITY / ART DIRECTION
   ============================================================ */


/* ---------- WHOLE HERO LIGHTING ---------- */

.pdpv2-hero{
  position:relative;

  isolation:isolate;
}


.pdpv2-hero::before{
  content:"";

  position:absolute;

  z-index:-2;

  top:-70px;
  right:-90px;

  width:620px;
  height:570px;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse at 65% 42%,
      rgba(33,80,128,.18),
      transparent 56%
    );

  filter:blur(4px);
}


.pdpv2-hero::after{
  content:"";

  position:absolute;

  z-index:-1;

  right:-30px;
  bottom:-20px;

  width:440px;
  height:420px;

  pointer-events:none;

  opacity:.34;

  background:
    radial-gradient(
      ellipse at 100% 50%,
      rgba(87,116,151,.12),
      transparent 54%
    );
}


/* ============================================================
   BREADCRUMB
   ============================================================ */

#stranica-artikal .breadcrumb{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:2px;

  min-height:31px;

  padding-bottom:8px !important;
}


#stranica-artikal .breadcrumb-item,
#stranica-artikal .breadcrumb-item a{
  color:#8796aa;

  font-size:12px !important;
}


#stranica-artikal
.breadcrumb-item
+
.breadcrumb-item::before{
  color:#536276;

  content:"›";
}


#stranica-artikal
.breadcrumb-item.active{
  color:#c0c9d5;
}


/* ============================================================
   SUBTITLE
   ============================================================ */

.pdpv2-subtitle-v7{
  max-width:56ch;

  margin:
    4px
    0
    5px !important;

  color:#aeb9c8 !important;

  font-size:15px !important;

  font-weight:500;

  line-height:1.32 !important;
}


/* ============================================================
   GALLERY DEPTH
   ============================================================ */

@media (min-width:1360px){

  .pdpv2-gallery-v4
  .pdpv2-gallery-card{
    position:relative;

    background:
      linear-gradient(
        120deg,
        rgba(255,255,255,.018),
        transparent 25%
      ),
      radial-gradient(
        ellipse at 50% 35%,
        rgba(83,111,154,.24),
        transparent 48%
      ),
      radial-gradient(
        ellipse at 50% 105%,
        rgba(0,0,0,.38),
        transparent 55%
      ),
      linear-gradient(
        145deg,
        #1b232e,
        #141b24
      ) !important;
  }


  .pdpv2-stage-v4::before{
    content:"";

    position:absolute;

    inset:
      auto
      12%
      10px;

    height:60px;

    pointer-events:none;

    background:
      radial-gradient(
        ellipse at center,
        rgba(0,0,0,.42),
        transparent 70%
      );

    filter:blur(10px);
  }


  .pdpv2-stage-v4 #pp-image{
    position:relative;

    z-index:1;

    filter:
      drop-shadow(
        0
        16px
        16px
        rgba(0,0,0,.30)
      )
      drop-shadow(
        0
        0
        15px
        rgba(255,255,255,.035)
      );
  }

}


/* ============================================================
   QUICK INFORMATION — TARGET ICON LANGUAGE
   ============================================================ */

@media (min-width:992px){

  .pdpv2-quick-list > div{
    min-height:45px !important;
  }


  .pdpv2-quick-list dt{
    font-size:13px !important;
  }


  .pdpv2-quick-list dd{
    font-size:13px !important;

    font-weight:600;
  }


  .pdpv2-quick-list dt i{
    flex:
      0
      0
      34px !important;

    width:34px !important;
    height:34px !important;

    border:
      1px solid
      rgba(205,219,237,.24) !important;

    border-radius:50% !important;

    color:#e5ebf2 !important;

    background:
      radial-gradient(
        circle,
        rgba(83,109,144,.16),
        rgba(23,31,42,.20)
      ) !important;

    box-shadow:
      inset 0 1px
      rgba(255,255,255,.045),
      0 5px 14px
      rgba(0,0,0,.12);

    font-size:13px !important;
  }

}


/* ============================================================
   WHY PRODUCT
   ============================================================ */

.pdpv2-purpose h2{
  display:flex !important;

  align-items:center !important;

  gap:10px !important;
}


.pdpv2-purpose h2::before{
  display:none !important;
}


.pdpv2-purpose-heading-icon{
  flex:
    0
    0
    38px;

  width:38px;
  height:38px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(255,177,0,.30);

  border-radius:9px;

  color:#ffb100;

  background:
    radial-gradient(
      circle,
      rgba(255,177,0,.14),
      rgba(255,177,0,.035)
    );

  box-shadow:
    0 7px 18px
    rgba(0,0,0,.16),
    inset 0 1px
    rgba(255,255,255,.04);
}


.pdpv2-purpose-heading-icon i{
  font-size:20px;
}


@media (min-width:1360px){

  .pdpv2-purpose li{
    min-height:30px;

    align-items:center !important;

    font-size:13px !important;
  }


  .pdpv2-purpose li i{
    width:27px !important;
    height:27px !important;

    font-size:11px !important;
  }

}


/* ============================================================
   SERVICE STRIP — LARGER REFERENCE ICONS
   ============================================================ */

@media (min-width:1360px){

  .pdpv2-service.pdpv2-service-v3{
    min-height:70px !important;
  }


  .pdpv2-service-item{
    grid-template-columns:
      39px
      minmax(0,1fr) !important;

    gap:9px !important;
  }


  .pdpv2-service-item > i{
    width:39px !important;
    height:39px !important;

    border:
      1px solid
      rgba(215,225,238,.19) !important;

    border-radius:10px !important;

    color:#edf2f7 !important;

    background:
      linear-gradient(
        145deg,
        rgba(54,75,103,.18),
        rgba(19,27,38,.22)
      ) !important;

    font-size:16px !important;

    box-shadow:
      inset 0 1px
      rgba(255,255,255,.04);
  }


  .pdpv2-service-item strong{
    font-size:13px !important;
  }


  .pdpv2-service-item span{
    font-size:11px !important;
  }

}


/* ============================================================
   PURCHASE AREA DEPTH
   ============================================================ */

.pdpv2-actions-v3
.pdpv2-add{
  box-shadow:
    0 12px 28px
    rgba(255,177,0,.18),
    inset 0 1px
    rgba(255,255,255,.30) !important;
}


.pdpv2-actions-v3
.pdpv2-buy-now{
  box-shadow:
    inset 0 1px
    rgba(255,255,255,.035),
    0 8px 20px
    rgba(0,0,0,.10);
}


/* ============================================================
   PROCESS — CURRENT PRODUCT EMPHASIS
   ============================================================ */

#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-step:has(
  .pp-complete-job-current
){
  border-color:
    rgba(255,177,0,.78) !important;

  box-shadow:
    0
    0
    0
    1px
    rgba(255,177,0,.16),
    0
    10px
    24px
    rgba(255,177,0,.07) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,177,0,.055),
      #181f29
    ) !important;
}


/* ============================================================
   COMMERCE RAIL TITLES
   ============================================================ */

.pdpv2-commerce-head h2,
.pdpv2-commerce-recent-slot
.agd-rv-title{
  font-size:17px !important;

  letter-spacing:-.015em;
}


/* ============================================================
   PHASE V2.8A — PREMIUM VISUAL FIDELITY
   Typography, icon scale, gallery treatment, lighting,
   process media and commerce rails.
   ============================================================ */

#stranica-artikal{
  --pdpv28-body:
    clamp(13px,.64vw,15px);

  --pdpv28-meta:
    clamp(12px,.55vw,13px);

  --pdpv28-heading:
    clamp(16px,.76vw,18px);

  --pdpv28-panel:
    rgba(24,32,43,.94);

  --pdpv28-panel-deep:
    rgba(17,24,34,.96);

  --pdpv28-border:
    rgba(154,178,211,.19);

  --pdpv28-highlight:
    rgba(223,235,249,.045);

  position:relative;

  isolation:isolate;

  background:
    radial-gradient(
      ellipse at 8% 2%,
      rgba(25,75,121,.28),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 95% 17%,
      rgba(22,66,106,.31),
      transparent 31%
    ),
    radial-gradient(
      ellipse at 70% 74%,
      rgba(16,47,79,.14),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #09111a 0%,
      #0c141e 27%,
      #0e1620 63%,
      #0b121a 100%
    ) !important;
}


/* decorative automotive-light style depth;
   stays INSIDE the page width, so it creates no overflow */

#stranica-artikal::before{
  content:"";

  position:absolute;

  z-index:-1;

  top:65px;
  right:0;

  width:min(34vw,680px);
  height:680px;

  pointer-events:none;

  opacity:.52;

  background:
    radial-gradient(
      ellipse at 100% 34%,
      rgba(84,126,171,.17),
      transparent 38%
    ),
    linear-gradient(
      136deg,
      transparent 42%,
      rgba(126,159,196,.045) 43%,
      rgba(126,159,196,.11) 43.5%,
      transparent 44.5%
    ),
    linear-gradient(
      158deg,
      transparent 54%,
      rgba(149,178,207,.08) 55%,
      transparent 56%
    );

  filter:blur(.2px);
}


#stranica-artikal
> .container,
#stranica-artikal
> .pp-crumbs{
  position:relative;

  z-index:1;
}


/* ============================================================
   COMMON PREMIUM PANEL LANGUAGE
   ============================================================ */

.pdpv2-gallery-card,
.pdpv2-side-card,
.pdpv2-usage-card,
.pdpv2-overview-specs,
#stranica-artikal
.pp-complete-job--compact,
.pdpv2-commerce-card,
.pdpv2-commerce-recent-slot
.agd-rv-card{
  border-color:
    var(--pdpv28-border) !important;

  box-shadow:
    inset 0 1px
    var(--pdpv28-highlight),
    0 14px 36px
    rgba(0,0,0,.16) !important;
}


/* ============================================================
   GALLERY — MAKE THE MEDIA COLLECTION FEEL DELIBERATE
   ============================================================ */

@media (min-width:992px){

  .pdpv2-gallery-v4
  .pdpv2-gallery-card{
    padding:11px !important;
  }


  .pdpv2-stage-v4{
    border:
      1px solid
      rgba(172,192,219,.10) !important;

    box-shadow:
      inset 0 1px
      rgba(255,255,255,.025),
      inset 0 -28px 55px
      rgba(0,0,0,.12);
  }


  .pdpv2-stage-v4 #pp-image{
    filter:
      drop-shadow(
        0
        22px
        21px
        rgba(0,0,0,.34)
      )
      drop-shadow(
        0
        0
        18px
        rgba(191,211,232,.045)
      ) !important;
  }


  /*
   * Much more distinct thumbnail collection.
   * As real gallery images are added, they automatically fill this rail.
   */

  .pdpv2-thumb-navigation{
    grid-template-columns:
      40px
      minmax(0,1fr)
      40px !important;

    gap:8px !important;

    margin-top:9px !important;
  }


  .pdpv2-gallery-arrow{
    width:40px !important;
    height:40px !important;

    border:
      1px solid
      rgba(164,187,216,.15) !important;

    border-radius:10px !important;

    color:#c0cbd9 !important;

    background:
      linear-gradient(
        145deg,
        #1a2430,
        #121923
      ) !important;

    box-shadow:
      inset 0 1px
      rgba(255,255,255,.035);
  }


  .pdpv2-thumbs-v4{
    gap:8px !important;

    padding:
      2px
      0 !important;
  }


  .pdpv2-thumbs-v4
  .pdpv2-thumb{
    flex:
      0
      0
      70px !important;

    width:70px !important;
    height:70px !important;

    padding:5px;

    border:
      1px solid
      rgba(160,181,208,.13) !important;

    border-radius:10px !important;

    background:
      radial-gradient(
        circle at 50% 44%,
        rgba(86,109,143,.20),
        transparent 60%
      ),
      #141c26 !important;

    box-shadow:
      inset 0 1px
      rgba(255,255,255,.025);
  }


  .pdpv2-thumbs-v4
  .pdpv2-thumb.is-active{
    border-color:
      #ffb100 !important;

    box-shadow:
      0
      0
      0
      1px
      rgba(255,177,0,.20),
      0
      6px
      18px
      rgba(255,177,0,.08) !important;

    background:
      radial-gradient(
        circle at 50% 44%,
        rgba(255,177,0,.08),
        transparent 60%
      ),
      #18212c !important;
  }


  .pdpv2-thumbs-v4
  .pdpv2-thumb img{
    width:100%;
    height:100%;

    object-fit:contain;
  }


  .pdpv2-gallery-v4
  .pdpv2-gallery-help{
    margin-top:5px !important;

    color:#98a6b8 !important;

    font-size:12px !important;
  }

}


/* ============================================================
   HERO TYPOGRAPHY
   ============================================================ */

@media (min-width:1360px){

  .pdpv2-main
  .pdpv2-brand{
    font-size:12px !important;
  }


  .pdpv2-main
  .pdpv2-title{
    font-size:
      clamp(
        40px,
        2vw,
        47px
      ) !important;
  }


  .pdpv2-main
  .pdpv2-price{
    font-size:
      clamp(
        30px,
        1.45vw,
        35px
      ) !important;
  }


  .pdpv2-main-copy
  #pp-desc{
    font-size:
      var(--pdpv28-body) !important;

    line-height:1.52 !important;
  }


  .pdpv2-subtitle-v7{
    font-size:
      clamp(
        14px,
        .68vw,
        16px
      ) !important;
  }


  .pdpv2-stock-row
  #pp-stock-label,
  .pdpv2-order-policy,
  .pdpv2-main
  .pdpv2-context a{
    font-size:
      12px !important;
  }


  .pdpv2-options-label,
  .pdpv2-quantity-block
  > label{
    font-size:
      12px !important;
  }

}


/* ============================================================
   QUICK INFORMATION
   ============================================================ */

@media (min-width:992px){

  .pdpv2-side-card h2{
    font-size:
      var(--pdpv28-heading) !important;
  }


  .pdpv2-quick-list
  > div{
    min-height:49px !important;

    padding:
      6px
      0 !important;
  }


  .pdpv2-quick-list dt{
    gap:10px !important;

    font-size:
      var(--pdpv28-meta) !important;
  }


  .pdpv2-quick-list dd{
    font-size:
      var(--pdpv28-meta) !important;

    font-weight:650;
  }


  .pdpv2-quick-list dt i{
    flex:
      0
      0
      38px !important;

    width:38px !important;
    height:38px !important;

    border:
      1px solid
      rgba(209,224,241,.24) !important;

    color:#edf3f9 !important;

    background:
      radial-gradient(
        circle,
        rgba(100,131,166,.17),
        rgba(20,29,40,.18)
      ) !important;

    font-size:15px !important;

    box-shadow:
      inset 0 1px
      rgba(255,255,255,.055),
      0 6px
      16px
      rgba(0,0,0,.14);
  }

}


/* ============================================================
   WHY PRODUCT
   ============================================================ */

.pdpv2-purpose-heading-icon{
  flex-basis:44px !important;

  width:44px !important;
  height:44px !important;

  border-radius:11px !important;

  box-shadow:
    0 8px 22px
    rgba(255,177,0,.08),
    inset 0 1px
    rgba(255,255,255,.055) !important;
}


.pdpv2-purpose-heading-icon i{
  font-size:23px !important;
}


@media (min-width:992px){

  .pdpv2-purpose li{
    grid-template-columns:
      30px
      minmax(0,1fr) !important;

    gap:9px !important;

    min-height:34px !important;

    font-size:
      var(--pdpv28-meta) !important;
  }


  .pdpv2-purpose li i{
    width:30px !important;
    height:30px !important;

    font-size:12px !important;

    box-shadow:
      inset 0 1px
      rgba(255,255,255,.035);
  }

}


/* ============================================================
   SERVICE STRIP
   ============================================================ */

@media (min-width:1360px){

  .pdpv2-service.pdpv2-service-v3{
    min-height:78px !important;

    padding-top:10px !important;
  }


  .pdpv2-service-item{
    grid-template-columns:
      46px
      minmax(0,1fr) !important;

    gap:10px !important;
  }


  .pdpv2-service-item > i{
    width:46px !important;
    height:46px !important;

    border-radius:11px !important;

    font-size:19px !important;

    color:#eef4fa !important;

    background:
      radial-gradient(
        circle at 40% 30%,
        rgba(93,126,163,.22),
        rgba(20,29,40,.24)
      ) !important;

    box-shadow:
      inset 0 1px
      rgba(255,255,255,.055),
      0 7px
      18px
      rgba(0,0,0,.14);
  }


  .pdpv2-service-item strong{
    font-size:
      13px !important;
  }


  .pdpv2-service-item span{
    font-size:
      11px !important;
  }

}


/* ============================================================
   FOUR GUIDE CARDS
   ============================================================ */

@media (min-width:992px){

  .pdpv2-usage-card{
    grid-template-columns:
      50px
      minmax(0,1fr) !important;

    gap:13px !important;

    min-height:126px !important;

    padding:
      15px !important;

    background:
      radial-gradient(
        circle at 0% 0%,
        rgba(39,86,135,.18),
        transparent 58%
      ),
      linear-gradient(
        145deg,
        #1a2330,
        #151d27
      ) !important;
  }


  .pdpv2-usage-icon{
    width:50px !important;
    height:50px !important;

    border-radius:12px !important;

    font-size:20px;

    box-shadow:
      0 7px
      19px
      rgba(255,177,0,.07),
      inset 0 1px
      rgba(255,255,255,.055);
  }


  .pdpv2-usage-icon i{
    font-size:20px !important;
  }


  .pdpv2-usage-copy h3{
    margin-bottom:6px !important;

    font-size:
      15px !important;

    line-height:1.2 !important;
  }


  .pdpv2-usage-copy p{
    color:#b5c0cf !important;

    font-size:
      14px !important;

    line-height:1.44 !important;
  }

}


/* ============================================================
   CHARACTERISTICS
   ============================================================ */

@media (min-width:992px){

  .pdpv2-overview-heading-icon{
    width:43px !important;
    height:43px !important;

    flex-basis:43px !important;

    border-radius:10px !important;
  }


  .pdpv2-overview-heading-icon i{
    font-size:17px !important;
  }


  .pdpv2-overview-section-heading h2{
    font-size:18px !important;
  }


  .pdpv2-overview-spec-list dt{
    font-size:13px !important;
  }


  .pdpv2-overview-spec-list dd{
    font-size:14px !important;
  }


  .pdpv2-overview-spec-list
  > div{
    min-height:40px !important;
  }

}


/* ============================================================
   RECOMMENDED PROCESS — THIS NEEDS TO BE EASY TO SEE
   ============================================================ */

@media (min-width:1360px){

  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-title{
    font-size:
      19px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-intro{
    font-size:
      12px !important;

    margin-bottom:11px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-flow{
    gap:11px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-step{
    min-height:222px !important;

    border-radius:11px !important;

    background:
      radial-gradient(
        circle at 50% 18%,
        rgba(73,96,131,.18),
        transparent 45%
      ),
      linear-gradient(
        145deg,
        #1c2531,
        #171f29
      ) !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-media{
    height:104px !important;
    min-height:104px !important;

    padding:9px !important;

    background:
      radial-gradient(
        ellipse at center,
        rgba(92,116,151,.25),
        transparent 60%
      ),
      #1b2430 !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-media img{
    max-width:100% !important;
    max-height:100% !important;

    object-fit:contain !important;

    filter:
      drop-shadow(
        0
        7px
        8px
        rgba(0,0,0,.25)
      );
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-copy{
    padding:
      10px
      11px
      11px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-number{
    width:25px !important;
    height:25px !important;

    font-size:11px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-role{
    margin-bottom:4px !important;

    font-size:10px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-product{
    font-size:
      13px !important;

    line-height:1.25 !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-price{
    margin-top:7px !important;

    font-size:
      12px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-current{
    font-size:9px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-flow
  .pp-complete-job-step:not(:last-child)::after{
    top:103px !important;

    right:-10px !important;

    font-size:15px !important;
  }

}


/* ============================================================
   COMMERCE RAILS — BOTH ON THE SAME VISUAL TIER
   ============================================================ */

@media (min-width:1360px){

  .pdpv2-commerce:has(
    #agdRecentlyViewed:not([hidden])
  ){
    grid-template-columns:
      minmax(0,1.62fr)
      minmax(440px,.92fr) !important;

    gap:18px !important;

    align-items:start;
  }


  .pdpv2-commerce-head,
  .pdpv2-commerce-recent-slot
  .agd-rv-head{
    min-height:34px !important;

    margin-bottom:9px !important;
  }


  .pdpv2-commerce-head h2,
  .pdpv2-commerce-recent-slot
  .agd-rv-title{
    font-size:
      18px !important;
  }


  .pdpv2-commerce-rail-shell,
  .agd-rv-track-shell{
    grid-template-columns:
      34px
      minmax(0,1fr)
      34px !important;

    gap:8px !important;
  }


  .pdpv2-commerce-arrow{
    width:34px !important;
    height:34px !important;
  }


  .pdpv2-commerce-track{
    grid-auto-columns:
      minmax(
        215px,
        235px
      ) !important;

    gap:9px !important;
  }


  .pdpv2-commerce-card{
    height:108px !important;

    grid-template-columns:
      76px
      minmax(0,1fr)
      30px !important;

    gap:9px !important;

    padding:8px !important;
  }


  .pdpv2-commerce-media{
    width:76px !important;
    height:90px !important;

    padding:6px !important;
  }


  .pdpv2-commerce-brand{
    font-size:10px !important;
  }


  .pdpv2-commerce-name{
    font-size:13px !important;
  }


  .pdpv2-commerce-price{
    font-size:12px !important;
  }


  .pdpv2-commerce-action{
    width:30px !important;
    height:30px !important;
  }


  /* recent cards match the same vertical size */

  .pdpv2-commerce-recent-slot
  .agd-rv-track{
    grid-auto-columns:
      minmax(
        195px,
        215px
      ) !important;

    gap:9px !important;
  }


  .pdpv2-commerce-recent-slot
  .agd-rv-card{
    height:108px !important;
    min-height:108px !important;

    grid-template-columns:
      76px
      minmax(0,1fr) !important;
  }


  .pdpv2-commerce-recent-slot
  .agd-rv-image{
    width:76px !important;
    height:90px !important;

    margin-left:8px;

    padding:6px !important;
  }

}


/* ============================================================
   TABS
   ============================================================ */

@media (min-width:992px){

  .pdpv2-info-tabs .nav-link{
    min-height:44px !important;

    padding:
      9px
      15px !important;

    font-size:
      14px !important;
  }

}


/* ============================================================
   PHASE V2.9A — RESPONSIVE HARDENING
   No fixed hero-column heights.
   No clipping / overlap.
   Detached media rail.
   Larger process media.
   Smart commerce controls.
   ============================================================ */


/* ============================================================
   HERO — CONTENT DETERMINES HEIGHT
   ============================================================ */

@media (min-width:1360px){

  .pdpv2-hero.pdpv2-hero-v3{
    align-items:stretch !important;

    grid-template-columns:
      minmax(0,1.08fr)
      minmax(0,.94fr)
      minmax(320px,.76fr) !important;

    gap:
      clamp(
        18px,
        1.25vw,
        25px
      ) !important;
  }


  /*
   * Critical correction:
   * older phases forced 462/476px and max-height.
   * That works only for short products.
   */
  .pdpv2-gallery,
  .pdpv2-main,
  .pdpv2-side,
  .pdpv2-gallery-v4 .pdpv2-gallery-card{
    height:auto !important;

    min-height:0 !important;

    max-height:none !important;
  }


  .pdpv2-gallery{
    align-self:stretch;
  }


  .pdpv2-main{
    align-self:stretch;

    overflow:visible !important;
  }


  .pdpv2-side{
    align-self:stretch;

    display:flex !important;

    flex-direction:column !important;

    gap:11px !important;

    overflow:visible !important;
  }


  /*
   * Quick information must always be allowed to display
   * every available row.
   */
  .pdpv2-side-card:first-child{
    flex:
      0
      0
      auto !important;
  }


  .pdpv2-side-card.pdpv2-purpose{
    flex:
      1
      1
      auto !important;

    min-height:150px;
  }


  .pdpv2-side-card{
    overflow:visible !important;
  }


  .pdpv2-quick-list{
    overflow:visible !important;
  }


  .pdpv2-quick-list dd{
    overflow-wrap:anywhere;
  }

}


/* ============================================================
   GALLERY — MAIN MEDIA AND COLLECTION ARE TWO VISUAL SURFACES
   ============================================================ */

@media (min-width:992px){

  /*
   * Outer wrapper itself is no longer the visible "card".
   * Main image and thumbnail collection become distinct.
   */
  .pdpv2-gallery-v4
  .pdpv2-gallery-card{
    display:grid !important;

    grid-template-rows:
      minmax(
        clamp(
          335px,
          20vw,
          405px
        ),
        1fr
      )
      auto
      auto !important;

    gap:8px !important;

    padding:0 !important;

    border:0 !important;

    border-radius:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    overflow:visible !important;
  }


  /* MAIN MEDIA SURFACE */

  .pdpv2-stage-v4{
    height:auto !important;

    min-height:
      clamp(
        335px,
        20vw,
        405px
      ) !important;

    max-height:none !important;

    border:
      1px solid
      rgba(156,181,213,.19) !important;

    border-radius:13px !important;

    overflow:hidden !important;

    background:
      linear-gradient(
        125deg,
        rgba(255,255,255,.018),
        transparent 28%
      ),
      radial-gradient(
        ellipse at 50% 40%,
        rgba(80,110,153,.24),
        transparent 49%
      ),
      radial-gradient(
        ellipse at 50% 108%,
        rgba(0,0,0,.32),
        transparent 56%
      ),
      linear-gradient(
        145deg,
        #1a2330,
        #141c26
      ) !important;

    box-shadow:
      inset 0 1px
      rgba(255,255,255,.035),
      0 18px 42px
      rgba(0,0,0,.19) !important;
  }


  .pdpv2-stage-v4 #pp-image{
    width:
      clamp(
        350px,
        19vw,
        425px
      ) !important;

    height:
      clamp(
        350px,
        19vw,
        425px
      ) !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:contain !important;
  }


  /* THUMBNAIL COLLECTION SURFACE */

  .pdpv2-thumb-navigation{
    margin:0 !important;

    padding:
      8px
      9px !important;

    border:
      1px solid
      rgba(156,181,213,.16);

    border-radius:11px;

    background:
      linear-gradient(
        145deg,
        rgba(29,39,52,.96),
        rgba(18,26,36,.97)
      );

    box-shadow:
      inset 0 1px
      rgba(255,255,255,.028),
      0 8px 22px
      rgba(0,0,0,.11);
  }


  .pdpv2-thumbs-v4
  .pdpv2-thumb{
    flex:
      0
      0
      72px !important;

    width:72px !important;
    height:72px !important;

    padding:5px !important;

    border-radius:9px !important;
  }


  .pdpv2-gallery-arrow{
    width:38px !important;
    height:38px !important;
  }


  .pdpv2-gallery-v4
  .pdpv2-gallery-help{
    margin:0 !important;

    padding-top:1px;

    color:#95a3b5 !important;

    font-size:11px !important;
  }

}


/* ============================================================
   SERVICE STRIP — NEVER OVERLAP FOLLOWING CONTENT
   ============================================================ */

.pdpv2-service.pdpv2-service-v3{
  flex:
    0
    0
    auto !important;

  margin-top:auto !important;
}


.pdpv2-actions{
  flex:
    0
    0
    auto;
}


.pdpv2-quantity-block{
  flex:
    0
    0
    auto;
}


/* ============================================================
   LARGE DESKTOP PROCESS CARDS
   PRODUCT MUST BE EASY TO RECOGNISE
   ============================================================ */

@media (min-width:1600px){

  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-step{
    min-height:
      252px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-media{
    height:
      126px !important;

    min-height:
      126px !important;

    padding:
      10px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-media img{
    width:100% !important;
    height:100% !important;

    object-fit:contain !important;

    filter:
      drop-shadow(
        0
        9px
        11px
        rgba(0,0,0,.28)
      ) !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-copy{
    padding:
      11px
      12px
      12px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-role{
    font-size:
      11px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-product{
    font-size:
      14px !important;

    line-height:
      1.25 !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-price{
    font-size:
      13px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-number{
    width:27px !important;
    height:27px !important;

    font-size:
      12px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-flow
  .pp-complete-job-step:not(:last-child)::after{
    top:
      119px !important;

    font-size:
      16px !important;
  }

}


/* ============================================================
   DESKTOP / SMALLER DESKTOP — SAFE TWO-COLUMN HERO
   ============================================================ */

@media
  (min-width:992px)
  and
  (max-width:1359.98px){

  .pdpv2-hero.pdpv2-hero-v3{
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr) !important;

    gap:18px !important;

    align-items:start !important;
  }


  .pdpv2-gallery,
  .pdpv2-main,
  .pdpv2-side,
  .pdpv2-gallery-v4
  .pdpv2-gallery-card{
    height:auto !important;

    min-height:0 !important;

    max-height:none !important;
  }


  .pdpv2-side{
    grid-column:
      1
      /
      -1;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);

    gap:12px !important;
  }


  .pdpv2-side-card:first-child,
  .pdpv2-side-card.pdpv2-purpose{
    min-height:100%;
  }


  .pdpv2-stage-v4{
    min-height:
      335px !important;
  }


  .pdpv2-stage-v4 #pp-image{
    width:
      350px !important;

    height:
      350px !important;
  }

}


/* ============================================================
   TABLET — SINGLE HERO FLOW, NO COMPRESSED COLLISIONS
   ============================================================ */

@media
  (min-width:768px)
  and
  (max-width:991.98px){

  .pdpv2-hero.pdpv2-hero-v3{
    grid-template-columns:
      1fr !important;

    gap:16px !important;
  }


  .pdpv2-gallery,
  .pdpv2-main,
  .pdpv2-side{
    width:100%;

    height:auto !important;

    min-height:0 !important;

    max-height:none !important;
  }


  .pdpv2-side{
    display:grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:12px !important;
  }

}


/* ============================================================
   MOBILE — ABSOLUTELY NO FIXED HERO HEIGHTS
   ============================================================ */

@media (max-width:767.98px){

  .pdpv2-hero.pdpv2-hero-v3{
    grid-template-columns:
      1fr !important;

    gap:14px !important;
  }


  .pdpv2-gallery,
  .pdpv2-main,
  .pdpv2-side,
  .pdpv2-gallery-v4
  .pdpv2-gallery-card,
  .pdpv2-stage-v4{
    height:auto !important;

    max-height:none !important;
  }


  .pdpv2-side{
    display:grid !important;

    grid-template-columns:
      1fr !important;

    gap:10px !important;
  }


  .pdpv2-stage-v4{
    min-height:
      285px !important;
  }

}


/* ============================================================
   COMMERCE ARROWS — ONLY EXIST WHEN SCROLLING IS ACTUALLY NEEDED
   ============================================================ */

.pdpv2-commerce-arrow:disabled{
  opacity:0 !important;

  visibility:hidden !important;

  pointer-events:none !important;
}


/*
 * If BOTH arrows are disabled, all products fit.
 * Collapse the two arrow columns completely.
 */
.pdpv2-commerce-rail-shell:
has(
  > .pdpv2-commerce-arrow:first-child:disabled
):
has(
  > .pdpv2-commerce-arrow:last-child:disabled
),
.agd-rv-track-shell:
has(
  > .pdpv2-commerce-arrow:first-child:disabled
):
has(
  > .pdpv2-commerce-arrow:last-child:disabled
){
  grid-template-columns:
    minmax(0,1fr) !important;
}


.pdpv2-commerce-rail-shell:
has(
  > .pdpv2-commerce-arrow:first-child:disabled
):
has(
  > .pdpv2-commerce-arrow:last-child:disabled
)
> .pdpv2-commerce-arrow,
.agd-rv-track-shell:
has(
  > .pdpv2-commerce-arrow:first-child:disabled
):
has(
  > .pdpv2-commerce-arrow:last-child:disabled
)
> .pdpv2-commerce-arrow{
  display:none !important;
}


/* ============================================================
   PHASE V2.9B — CALIBRATED DESKTOP SCALE
   Measurements, not guesswork.
   ============================================================ */


/* ============================================================
   NORMAL / LARGE DESKTOP
   ============================================================ */

@media (min-width:1360px){

  /* ----------------------------------------
     HERO TRACK
     No column should artificially stretch it.
     ---------------------------------------- */

  .pdpv2-hero.pdpv2-hero-v3{
    align-items:start !important;

    gap:
      clamp(
        18px,
        1.15vw,
        24px
      ) !important;

    min-height:0 !important;
  }


  .pdpv2-gallery,
  .pdpv2-main,
  .pdpv2-side{
    align-self:start !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }


  /* ----------------------------------------
     GALLERY
     Reference target ≈ 450–480px total.
     ---------------------------------------- */

  .pdpv2-gallery-v4
  .pdpv2-gallery-card{
    grid-template-rows:
      350px
      auto
      auto !important;

    gap:7px !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }


  .pdpv2-stage-v4{
    height:350px !important;
    min-height:350px !important;
    max-height:350px !important;
  }


  .pdpv2-stage-v4
  #pp-image{
    width:350px !important;
    height:350px !important;

    max-width:none !important;
    max-height:none !important;
  }


  .pdpv2-thumb-navigation{
    grid-template-columns:
      36px
      minmax(0,1fr)
      36px !important;

    gap:7px !important;

    padding:
      7px
      8px !important;
  }


  .pdpv2-gallery-arrow{
    width:36px !important;
    height:36px !important;
  }


  .pdpv2-thumbs-v4
  .pdpv2-thumb{
    flex:
      0
      0
      64px !important;

    width:64px !important;
    height:64px !important;
  }


  .pdpv2-gallery-v4
  .pdpv2-gallery-help{
    font-size:11px !important;
  }


  /* ==========================================================
     PRODUCT / PURCHASE
     ========================================================== */

  .pdpv2-main{
    overflow:visible !important;
  }


  .pdpv2-main
  .pdpv2-title{
    font-size:
      clamp(
        40px,
        1.9vw,
        46px
      ) !important;
  }


  .pdpv2-main
  .pdpv2-price{
    font-size:
      clamp(
        30px,
        1.4vw,
        34px
      ) !important;
  }


  /*
   * Full description exists in Detalji.
   * Hero is a commercial summary.
   */
  .pdpv2-main-copy
  #pp-desc{
    -webkit-line-clamp:4 !important;

    max-width:60ch !important;

    font-size:
      14px !important;

    line-height:
      1.48 !important;

    margin-bottom:
      8px !important;
  }


  .pdpv2-stock-row{
    margin-bottom:
      5px !important;
  }


  .pdpv2-main
  .pdpv2-context{
    margin-bottom:
      7px !important;
  }


  .pdpv2-options{
    margin-bottom:
      7px !important;
  }


  .pdpv2-quantity-block{
    margin-bottom:
      7px !important;
  }


  /* services remain readable but not giant */

  .pdpv2-service.pdpv2-service-v3{
    min-height:60px !important;

    margin-top:
      9px !important;

    padding:
      7px
      0
      2px !important;
  }


  .pdpv2-service-item{
    grid-template-columns:
      37px
      minmax(0,1fr) !important;

    gap:8px !important;
  }


  .pdpv2-service-item > i{
    width:37px !important;
    height:37px !important;

    font-size:15px !important;
  }


  .pdpv2-service-item strong{
    font-size:12px !important;
  }


  .pdpv2-service-item span{
    font-size:10px !important;
  }


  /* ==========================================================
     RIGHT COLUMN
     This was the actual 710px hero-height culprit.
     ========================================================== */

  .pdpv2-side{
    display:flex !important;

    flex-direction:column !important;

    gap:9px !important;

    overflow:visible !important;
  }


  /*
   * Automatic height, but contain decorative pseudo-elements.
   * We do NOT need overflow:visible on the cards themselves.
   */
  .pdpv2-side-card{
    flex:
      0
      0
      auto !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    padding:
      12px
      14px !important;

    overflow:hidden !important;
  }


  .pdpv2-side-card:first-child{
    flex:
      0
      0
      auto !important;
  }


  .pdpv2-side-card.pdpv2-purpose{
    flex:
      0
      0
      auto !important;

    min-height:0 !important;
  }


  .pdpv2-side-card h2{
    margin-bottom:
      7px !important;

    font-size:
      16px !important;
  }


  /*
   * Seven rows can now fit without producing a 415px card.
   * Text gets slightly larger while vertical padding is reduced.
   */
  .pdpv2-quick-list
  > div{
    min-height:36px !important;

    padding:
      3px
      0 !important;
  }


  .pdpv2-quick-list dt{
    gap:7px !important;

    font-size:
      13px !important;
  }


  .pdpv2-quick-list dd{
    font-size:
      13px !important;

    line-height:
      1.25 !important;
  }


  .pdpv2-quick-list dt i{
    flex:
      0
      0
      30px !important;

    width:30px !important;
    height:30px !important;

    font-size:
      12px !important;
  }


  /*
   * Why card gets readable content without becoming 285px+
   * simply because flex was filling remaining height.
   */
  .pdpv2-purpose ul{
    gap:
      4px !important;
  }


  .pdpv2-purpose li{
    grid-template-columns:
      25px
      minmax(0,1fr) !important;

    gap:7px !important;

    min-height:28px !important;

    font-size:
      13px !important;

    line-height:
      1.3 !important;
  }


  .pdpv2-purpose li i{
    width:25px !important;
    height:25px !important;

    font-size:
      10px !important;
  }


  .pdpv2-purpose-heading-icon{
    flex-basis:
      36px !important;

    width:36px !important;
    height:36px !important;
  }


  .pdpv2-purpose-heading-icon i{
    font-size:
      19px !important;
  }


  /*
   * Old decorative ring deliberately extends beyond its card.
   * Keep it contained so it doesn't inflate scrollWidth/scrollHeight.
   */
  .pdpv2-side-card.pdpv2-purpose::after{
    right:-36px !important;
    bottom:-54px !important;

    width:150px !important;
    height:150px !important;
  }

}


/* ============================================================
   GUIDE CARDS
   Compact, readable, stronger icons.
   ============================================================ */

@media (min-width:992px){

  .pdpv2-usage-card{
    min-height:108px !important;

    grid-template-columns:
      46px
      minmax(0,1fr) !important;

    gap:11px !important;

    padding:
      12px
      13px !important;
  }


  .pdpv2-usage-icon{
    width:46px !important;
    height:46px !important;

    font-size:18px !important;
  }


  .pdpv2-usage-icon i{
    font-size:18px !important;
  }


  .pdpv2-usage-copy h3{
    margin-bottom:
      4px !important;

    font-size:
      14px !important;
  }


  .pdpv2-usage-copy p{
    font-size:
      13px !important;

    line-height:
      1.4 !important;
  }

}


/* ============================================================
   RECOMMENDED PROCESS
   Compact CARD, larger MEDIA relative to the card.
   ============================================================ */

@media (min-width:1360px){

  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-flow{
    /*
     * Critical:
     * do not stretch four products across the whole process panel.
     */
    grid-template-columns:
      repeat(
        var(--pp-flow-count),
        minmax(
          155px,
          185px
        )
      ) !important;

    justify-content:start !important;

    gap:10px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-step{
    min-height:174px !important;
    height:174px !important;

    max-height:174px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-media{
    height:88px !important;
    min-height:88px !important;

    max-height:88px !important;

    padding:
      5px !important;

    overflow:hidden !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-media img{
    width:100% !important;
    height:100% !important;

    object-fit:contain !important;

    transform:
      scale(1.10);

    transform-origin:center;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-copy{
    min-height:0 !important;

    padding:
      7px
      8px
      8px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-number{
    width:23px !important;
    height:23px !important;

    font-size:
      10px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-role{
    margin-bottom:
      2px !important;

    font-size:
      9px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-product{
    font-size:
      13px !important;

    line-height:
      1.18 !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-price{
    margin-top:
      4px !important;

    font-size:
      12px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-current{
    margin-bottom:
      2px !important;

    font-size:
      8px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-flow
  .pp-complete-job-step:not(:last-child)::after{
    top:80px !important;

    right:-9px !important;

    font-size:
      14px !important;
  }

}


/* ============================================================
   COMMERCE RAILS
   Reference uses short compact cards.
   ============================================================ */

@media (min-width:1360px){

  .pdpv2-commerce-card{
    height:92px !important;

    grid-template-columns:
      64px
      minmax(0,1fr)
      28px !important;

    gap:8px !important;

    padding:
      7px !important;
  }


  .pdpv2-commerce-media{
    width:64px !important;
    height:76px !important;

    padding:
      5px !important;
  }


  .pdpv2-commerce-name{
    font-size:
      12px !important;
  }


  .pdpv2-commerce-price{
    font-size:
      11px !important;
  }


  .pdpv2-commerce-recent-slot
  .agd-rv-card{
    height:92px !important;
    min-height:92px !important;

    grid-template-columns:
      64px
      minmax(0,1fr) !important;
  }


  .pdpv2-commerce-recent-slot
  .agd-rv-image{
    width:64px !important;
    height:76px !important;
  }

}


/* ============================================================
   SMART RAIL CONTROLS
   Correct :has() syntax — no whitespace between : and has.
   ============================================================ */

.pdpv2-commerce-arrow:disabled{
  opacity:0 !important;

  visibility:hidden !important;

  pointer-events:none !important;
}


.pdpv2-commerce-rail-shell:has(> .pdpv2-commerce-arrow:first-child:disabled):has(> .pdpv2-commerce-arrow:last-child:disabled),
.agd-rv-track-shell:has(> .pdpv2-commerce-arrow:first-child:disabled):has(> .pdpv2-commerce-arrow:last-child:disabled){
  grid-template-columns:
    minmax(0,1fr) !important;
}


.pdpv2-commerce-rail-shell:has(> .pdpv2-commerce-arrow:first-child:disabled):has(> .pdpv2-commerce-arrow:last-child:disabled) > .pdpv2-commerce-arrow,
.agd-rv-track-shell:has(> .pdpv2-commerce-arrow:first-child:disabled):has(> .pdpv2-commerce-arrow:last-child:disabled) > .pdpv2-commerce-arrow{
  display:none !important;
}


/* ============================================================
   ULTRAWIDE
   The old 1840px cap is correct around ~1920–2100px,
   but not on a genuine 2560px+ CSS viewport.
   ============================================================ */

@media (min-width:2200px){

  #stranica-artikal
  > .container,
  #stranica-artikal
  > .pp-crumbs{
    width:
      min(
        90vw,
        2350px
      ) !important;

    max-width:
      2350px !important;
  }


  /*
   * Modest scaling — not browser-zoom compensation.
   * These rules are for real large CSS viewports.
   */
  .pdpv2-main
  .pdpv2-title{
    font-size:
      47px !important;
  }


  .pdpv2-main
  .pdpv2-price{
    font-size:
      35px !important;
  }


  .pdpv2-main-copy
  #pp-desc{
    font-size:
      15px !important;
  }


  .pdpv2-quick-list dt,
  .pdpv2-quick-list dd{
    font-size:
      14px !important;
  }


  .pdpv2-usage-copy h3{
    font-size:
      15px !important;
  }


  .pdpv2-usage-copy p{
    font-size:
      14px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-flow{
    grid-template-columns:
      repeat(
        var(--pp-flow-count),
        minmax(
          170px,
          205px
        )
      ) !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-product{
    font-size:
      14px !important;
  }


  .pdpv2-commerce-name{
    font-size:
      13px !important;
  }

}


/* ============================================================
   PHASE V2.8B — REAL REVIEWS / RATINGS
   ============================================================ */


/* ============================================================
   SHARED STARS
   ============================================================ */

.pdpv2-rating-stars{
  --pdp-rating-fill:0%;

  position:relative;

  display:inline-block;

  overflow:hidden;

  vertical-align:middle;

  font-size:14px;

  line-height:1;

  letter-spacing:1.5px;

  white-space:nowrap;
}


.pdpv2-rating-stars-base{
  color:
    rgba(255,255,255,.18);
}


.pdpv2-rating-stars-fill{
  position:absolute;

  top:0;
  left:0;

  width:
    var(--pdp-rating-fill);

  overflow:hidden;

  color:#ffb100;

  white-space:nowrap;
}


.pdpv2-review-static-stars{
  color:#ffb100;

  font-size:12px;

  letter-spacing:1px;

  white-space:nowrap;
}


/* ============================================================
   HERO RATING
   ============================================================ */

.pdpv2-hero-rating{
  min-height:23px;

  display:flex;

  align-items:center;

  margin:
    2px
    0
    7px;
}


.pdpv2-hero-rating a{
  display:inline-flex;

  align-items:center;

  gap:7px;

  color:#aeb9c7;

  font-size:12px;

  text-decoration:none;
}


.pdpv2-hero-rating a:hover{
  color:#f4f7fa;
}


.pdpv2-hero-rating strong{
  color:#f2f5f8;

  font-size:12px;
}


.pdpv2-rating-stars-empty{
  color:
    rgba(255,255,255,.28);

  font-size:14px;

  letter-spacing:1px;
}


/* ============================================================
   REVIEWS SIDEBAR
   ============================================================ */

.pdpv2-overview-reviews{
  min-width:0;
}


.pdpv2-reviews-panel{
  height:100%;

  min-width:0;

  padding:14px;

  border:
    1px solid
    var(--agd-pdp-line);

  border-radius:11px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(37,79,124,.15),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      #1a222d,
      #151c26
    );

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.025),
    0 10px 24px
    rgba(0,0,0,.12);
}


.pdpv2-reviews-heading{
  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:11px;
}


.pdpv2-reviews-heading-icon{
  flex:0 0 38px;

  width:38px;
  height:38px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(255,177,0,.25);

  border-radius:9px;

  color:#ffb100;

  background:
    rgba(255,177,0,.07);
}


.pdpv2-reviews-heading-icon i{
  font-size:15px;
}


.pdpv2-reviews-kicker{
  display:block;

  margin-bottom:1px;

  color:#ffb100;

  font-size:9px;

  font-weight:900;

  letter-spacing:.09em;

  text-transform:uppercase;
}


.pdpv2-reviews-heading h2{
  margin:0;

  color:#f4f6f9;

  font-size:17px;

  line-height:1.1;
}


/* ---------- score ---------- */

.pdpv2-review-score{
  display:grid;

  grid-template-columns:
    auto
    minmax(0,1fr);

  gap:11px;

  align-items:center;

  margin-bottom:11px;

  padding-bottom:11px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


.pdpv2-review-score
> strong{
  color:#f5f7fa;

  font-size:34px;

  line-height:1;

  letter-spacing:-.04em;
}


.pdpv2-review-count{
  display:block;

  margin-top:4px;

  color:#8f9cad;

  font-size:10px;
}


/* ---------- distribution ---------- */

.pdpv2-review-distribution{
  display:grid;

  gap:5px;
}


.pdpv2-review-distribution-row{
  display:grid;

  grid-template-columns:
    31px
    minmax(0,1fr)
    20px;

  gap:7px;

  align-items:center;
}


.pdpv2-review-distribution-row
> span{
  color:#aeb8c6;

  font-size:10px;
}


.pdpv2-review-distribution-row
> span i{
  color:#ffb100;

  font-size:8px;
}


.pdpv2-review-distribution-row
> strong{
  color:#8f9bad;

  font-size:10px;

  text-align:right;
}


.pdpv2-review-bar{
  height:5px;

  overflow:hidden;

  border-radius:999px;

  background:
    rgba(255,255,255,.09);
}


.pdpv2-review-bar
> span{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #ff9f00,
      #ffc132
    );
}


/* ---------- mini reviews ---------- */

.pdpv2-review-sidebar-list{
  display:grid;

  gap:8px;

  margin-top:11px;

  padding-top:11px;

  border-top:
    1px solid
    rgba(255,255,255,.07);
}


.pdpv2-review-mini{
  padding:
    9px
    10px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:8px;

  background:
    rgba(255,255,255,.025);
}


.pdpv2-review-mini-head{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:8px;
}


.pdpv2-review-mini-head
strong{
  color:#eef2f6;

  font-size:11px;
}


.pdpv2-review-mini p{
  margin:
    6px
    0
    0;

  color:#aab5c4;

  font-size:10px;

  line-height:1.42;
}


/* ============================================================
   VERIFIED BADGE
   ============================================================ */

.pdpv2-review-verified{
  display:inline-flex;

  align-items:center;

  gap:4px;

  margin-top:5px;

  color:#86d7a1;

  font-size:9px;

  font-weight:750;
}


/* ============================================================
   EMPTY REVIEW STATE
   ============================================================ */

.pdpv2-review-empty{
  min-height:150px;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  padding:18px;

  text-align:center;
}


.pdpv2-review-empty
> span{
  width:44px;
  height:44px;

  display:grid;

  place-items:center;

  margin-bottom:9px;

  border:
    1px solid
    rgba(255,177,0,.22);

  border-radius:50%;

  color:#ffb100;

  background:
    rgba(255,177,0,.055);
}


.pdpv2-review-empty
> strong{
  color:#f0f3f7;

  font-size:13px;
}


.pdpv2-review-empty
p{
  max-width:32ch;

  margin:
    6px
    0
    0;

  color:#8e9bac;

  font-size:11px;

  line-height:1.45;
}


/* ============================================================
   FULL REVIEWS TAB
   ============================================================ */

.pdpv2-reviews-tab{
  padding-top:2px;
}


.pdpv2-reviews-tab-summary{
  display:grid;

  grid-template-columns:
    minmax(240px,.42fr)
    minmax(280px,.58fr);

  gap:18px;

  margin-bottom:14px;

  padding:16px;

  border:
    1px solid
    var(--agd-pdp-line);

  border-radius:11px;

  background:
    linear-gradient(
      145deg,
      #1a222d,
      #151d27
    );
}


.pdpv2-reviews-tab-score{
  display:flex;

  align-items:center;

  gap:14px;
}


.pdpv2-reviews-tab-score
> strong{
  color:#f5f7fa;

  font-size:48px;

  line-height:1;
}


.pdpv2-reviews-tab-score
p{
  margin:
    5px
    0
    0;

  color:#8e9bad;

  font-size:11px;
}


.pdpv2-review-list{
  display:grid;

  gap:10px;
}


.pdpv2-review-card{
  padding:14px;

  border:
    1px solid
    var(--agd-pdp-line);

  border-radius:10px;

  background:
    linear-gradient(
      145deg,
      #19212c,
      #151c25
    );
}


.pdpv2-review-card
header{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:12px;
}


.pdpv2-review-card
header
> div{
  display:flex;

  align-items:center;

  gap:9px;
}


.pdpv2-review-card
header strong{
  color:#f3f6f8;

  font-size:13px;
}


.pdpv2-review-card
time{
  color:#7f8c9f;

  font-size:10px;
}


.pdpv2-review-card
p{
  margin:
    9px
    0
    0;

  color:#b4bfcc;

  font-size:13px;

  line-height:1.55;
}


.pdpv2-review-empty--large{
  min-height:240px;

  border:
    1px solid
    var(--agd-pdp-line);

  border-radius:11px;

  background:
    linear-gradient(
      145deg,
      #19212c,
      #151c25
    );
}


/* ============================================================
   TAB COUNT
   ============================================================ */

.pdpv2-tab-count{
  min-width:20px;

  display:inline-grid;

  place-items:center;

  margin-left:5px;

  padding:
    1px
    5px;

  border-radius:999px;

  color:#ffd16a;

  background:
    rgba(255,177,0,.10);

  font-size:9px;
}


/* ============================================================
   OVERVIEW 3-COLUMN TARGET
   ============================================================ */

@media (min-width:1360px){

  .pdpv2-overview-lower{
    grid-template-columns:
      minmax(245px,.25fr)
      minmax(620px,.52fr)
      minmax(260px,.23fr) !important;

    gap:11px !important;
  }


  /*
   * Process now lives in the centre column.
   * Let its product cards share the available width.
   */
  #stranica-artikal
  .pdpv2-overview-process
  .pp-complete-job--compact
  .pp-complete-job-flow{
    grid-template-columns:
      repeat(
        var(--pp-flow-count),
        minmax(120px,1fr)
      ) !important;
  }

}


@media (max-width:1359.98px){

  .pdpv2-overview-reviews{
    grid-column:
      1
      /
      -1;
  }

}


@media (max-width:767.98px){

  .pdpv2-reviews-tab-summary{
    grid-template-columns:1fr;
  }


  .pdpv2-review-card header{
    display:block;
  }


  .pdpv2-review-card time{
    display:block;

    margin-top:5px;
  }

}


/* ============================================================
   PHASE V2.9C — DISTINCT PDP MEDIA COLLECTION
   ============================================================ */

.pdpv2-media-collection{
  min-width:0;

  padding:
    9px
    10px
    10px;

  border:
    1px solid
    rgba(157,181,211,.18);

  border-radius:11px;

  background:
    radial-gradient(
      ellipse at 10% 0%,
      rgba(42,85,130,.13),
      transparent 54%
    ),
    linear-gradient(
      145deg,
      rgba(27,37,50,.98),
      rgba(17,25,35,.98)
    );

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.032),
    0 9px 24px
    rgba(0,0,0,.12);
}


.pdpv2-media-collection-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-bottom:8px;

  padding:
    0
    1px;
}


.pdpv2-media-collection-head
> div{
  min-width:0;
}


.pdpv2-media-collection-kicker{
  display:block;

  margin-bottom:1px;

  color:#ffb100;

  font-size:9px;

  font-weight:900;

  letter-spacing:.09em;

  text-transform:uppercase;
}


.pdpv2-media-collection-head
strong{
  display:block;

  color:#e9eef4;

  font-size:13px;

  font-weight:800;

  line-height:1.15;
}


.pdpv2-media-collection-count{
  flex:0 0 auto;

  display:inline-flex;

  align-items:center;

  gap:3px;

  padding:
    3px
    7px;

  border:
    1px solid
    rgba(255,255,255,.085);

  border-radius:999px;

  color:#9ca8b8;

  background:
    rgba(255,255,255,.025);

  font-size:10px;

  font-weight:700;
}


/*
 * Collection panel owns the visual shell now.
 * Thumbnail navigation itself is transparent.
 */
.pdpv2-media-collection
.pdpv2-thumb-navigation{
  margin:0 !important;

  padding:0 !important;

  border:0 !important;

  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;
}


.pdpv2-media-collection
.pdpv2-thumbs-v4{
  min-height:66px;

  align-items:center;
}


/* stronger selected-media indication */

.pdpv2-media-collection
.pdpv2-thumb{
  position:relative;
}


.pdpv2-media-collection
.pdpv2-thumb.is-active::after{
  content:"";

  position:absolute;

  right:6px;
  bottom:5px;

  width:6px;
  height:6px;

  border-radius:50%;

  background:#ffb100;

  box-shadow:
    0
    0
    0
    2px
    rgba(255,177,0,.12);
}


/*
 * No meaningless left/right controls for a one-image product.
 */
.pdpv2-thumb-navigation:has(> .pdpv2-gallery-arrow:first-child:disabled):has(> .pdpv2-gallery-arrow:last-child:disabled){
  grid-template-columns:
    minmax(0,1fr) !important;
}


.pdpv2-thumb-navigation:has(> .pdpv2-gallery-arrow:first-child:disabled):has(> .pdpv2-gallery-arrow:last-child:disabled)
> .pdpv2-gallery-arrow{
  display:none !important;
}


/* ---------- desktop ---------- */

@media (min-width:1360px){

  .pdpv2-media-collection{
    padding:
      9px
      11px
      10px;
  }


  .pdpv2-media-collection
  .pdpv2-thumb{
    flex:
      0
      0
      62px !important;

    width:62px !important;
    height:62px !important;
  }

}


/* ---------- ultra-wide ---------- */

@media (min-width:2200px){

  .pdpv2-media-collection-head
  strong{
    font-size:14px;
  }


  .pdpv2-media-collection
  .pdpv2-thumb{
    flex-basis:
      70px !important;

    width:70px !important;
    height:70px !important;
  }

}


/* ---------- mobile ---------- */

@media (max-width:767.98px){

  .pdpv2-media-collection{
    padding:
      8px;
  }


  .pdpv2-media-collection-head{
    margin-bottom:7px;
  }


  .pdpv2-media-collection
  .pdpv2-thumb{
    flex-basis:
      56px !important;

    width:56px !important;
    height:56px !important;
  }

}


/* ============================================================
   PHASE V2.10 — MEDIA EMPHASIS
   Real gallery media + stronger cross-sell imagery
   ============================================================ */


/* ============================================================
   1. PRIMARY PRODUCT MEDIA
   ============================================================ */

/*
 * The media itself should be the visual anchor.
 * The stage is a frame around the image, not a giant empty canvas.
 */
#stranica-artikal
.pdpv2-stage-v4{
  aspect-ratio:16 / 9;

  min-height:0 !important;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:10px !important;

  overflow:hidden;

  background:
    radial-gradient(
      ellipse at 50% 45%,
      rgba(56,76,101,.11),
      transparent 68%
    ),
    #141c26;
}


/*
 * Remove the old packshot-oriented size restrictions.
 *
 * object-fit:contain is intentional:
 * - landscape action photos become large;
 * - narrow packshots remain fully visible;
 * - portrait gallery images are never brutally cropped.
 */
#stranica-artikal
.pdpv2-stage-v4
#pp-image{
  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;

  object-fit:contain !important;
  object-position:center;

  border-radius:8px;
}


/* ============================================================
   2. REAL GALLERY SHOULD LOOK LIKE A GALLERY
   ============================================================ */

#stranica-artikal
.pdpv2-media-collection{
  padding:
    10px
    11px
    11px;

  border-color:
    rgba(157,181,211,.22);

  background:
    linear-gradient(
      145deg,
      rgba(29,40,54,.99),
      rgba(18,27,38,.99)
    );
}


#stranica-artikal
.pdpv2-media-collection-head{
  margin-bottom:9px;
}


#stranica-artikal
.pdpv2-media-collection-head strong{
  font-size:14px;
}


/*
 * Give the rail enough physical height for the photography
 * to be recognizable without opening it.
 */
#stranica-artikal
.pdpv2-media-collection
.pdpv2-thumbs-v4{
  min-height:78px !important;

  gap:8px !important;

  align-items:center;
}


/*
 * Base desktop thumbnail.
 * Five still fit in the gallery at normal desktop widths.
 */
#stranica-artikal
.pdpv2-media-collection
.pdpv2-thumb{
  flex:
    0
    0
    84px !important;

  width:84px !important;
  height:70px !important;

  padding:3px !important;

  border-radius:8px !important;

  background:
    rgba(7,12,18,.68);
}


#stranica-artikal
.pdpv2-media-collection
.pdpv2-thumb img{
  display:block;

  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;

  object-fit:contain !important;

  border-radius:5px;
}


/*
 * Make selection unmistakable.
 */
#stranica-artikal
.pdpv2-media-collection
.pdpv2-thumb.is-active{
  border-color:
    rgba(255,177,0,.92) !important;

  box-shadow:
    0 0 0 1px
    rgba(255,177,0,.18),
    0 5px 14px
    rgba(0,0,0,.22);
}


/*
 * Navigation should feel attached to the image strip rather
 * than taking as much visual weight as the thumbnails.
 */
#stranica-artikal
.pdpv2-media-collection
.pdpv2-gallery-arrow{
  width:34px !important;
  height:70px !important;

  border-radius:8px !important;
}


/* ============================================================
   3. COMPLETE JOB — TURN IT INTO COMMERCE, NOT DECORATION
   ============================================================ */

#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-step{
  min-height:214px !important;

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-step:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(255,177,0,.30);

  box-shadow:
    0 10px 24px
    rgba(0,0,0,.18);
}


/*
 * Product imagery needs to occupy the dominant upper half
 * of every process card.
 */
#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-media{
  height:116px !important;
  min-height:116px !important;

  padding:
    8px
    8px
    3px !important;

  overflow:hidden;
}


/*
 * Many catalogue packshots contain their own white/transparent
 * breathing room, so a small scale increase materially improves
 * recognisability without cropping them.
 */
#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-media img{
  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;

  object-fit:contain !important;

  transform:
    scale(1.12);

  transform-origin:center;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-copy{
  padding:
    8px
    9px
    10px !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-role{
  margin-bottom:4px !important;

  font-size:10px !important;

  line-height:1.2 !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-product{
  font-size:14px !important;

  line-height:1.22 !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-price{
  margin-top:7px !important;

  font-size:13px !important;

  line-height:1.15 !important;
}


/* ============================================================
   4. LARGE DESKTOP / ULTRAWIDE
   ============================================================ */

@media (min-width:1800px){

  #stranica-artikal
  .pdpv2-media-collection
  .pdpv2-thumbs-v4{
    min-height:88px !important;
  }


  #stranica-artikal
  .pdpv2-media-collection
  .pdpv2-thumb{
    flex-basis:
      100px !important;

    width:100px !important;
    height:80px !important;
  }


  #stranica-artikal
  .pdpv2-media-collection
  .pdpv2-gallery-arrow{
    height:80px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-step{
    min-height:228px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-media{
    height:128px !important;
    min-height:128px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-product{
    font-size:15px !important;
  }

}


/* ============================================================
   5. TABLET
   ============================================================ */

@media (max-width:1359.98px)
and (min-width:768px){

  #stranica-artikal
  .pdpv2-media-collection
  .pdpv2-thumb{
    flex-basis:
      78px !important;

    width:78px !important;
    height:64px !important;
  }


  #stranica-artikal
  .pdpv2-media-collection
  .pdpv2-gallery-arrow{
    height:64px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-media{
    height:108px !important;
    min-height:108px !important;
  }

}


/* ============================================================
   6. MOBILE
   ============================================================ */

@media (max-width:767.98px){

  #stranica-artikal
  .pdpv2-stage-v4{
    aspect-ratio:4 / 3;

    padding:7px !important;
  }


  #stranica-artikal
  .pdpv2-media-collection
  .pdpv2-thumb{
    flex-basis:
      72px !important;

    width:72px !important;
    height:58px !important;
  }


  #stranica-artikal
  .pdpv2-media-collection
  .pdpv2-gallery-arrow{
    height:58px !important;
  }

}


/* ============================================================
   PHASE V2.10.1 — PDP LAYOUT INTEGRITY
   ============================================================ */


/* ------------------------------------------------------------
   Tabs:
   keep horizontal swipe capability on narrow screens,
   but never create an internal vertical scrollbar.
   ------------------------------------------------------------ */

#stranica-artikal
.pdpv2-info-tabs{
  max-width:100%;

  overflow-x:auto !important;
  overflow-y:hidden !important;

  scrollbar-width:none;

  -ms-overflow-style:none;
}


#stranica-artikal
.pdpv2-info-tabs::-webkit-scrollbar{
  width:0;
  height:0;

  display:none;
}


/* ------------------------------------------------------------
   Gallery:
   stage and media rail must share the same physical width.
   ------------------------------------------------------------ */

#stranica-artikal
.pdpv2-gallery-v4
.pdpv2-gallery-card{
  width:100%;
}


#stranica-artikal
.pdpv2-gallery-v4
.pdpv2-stage-v4{
  width:100% !important;
  max-width:none !important;

  align-self:stretch;
}


/*
 * Preserve controlled desktop height rather than letting the
 * new full width make the stage disproportionately tall.
 */
@media (min-width:768px){

  #stranica-artikal
  .pdpv2-gallery-v4
  .pdpv2-stage-v4{
    height:
      clamp(
        320px,
        17vw,
        360px
      ) !important;

    aspect-ratio:auto !important;
  }

}


@media (max-width:767.98px){

  #stranica-artikal
  .pdpv2-gallery-v4
  .pdpv2-stage-v4{
    height:auto !important;

    aspect-ratio:4 / 3 !important;
  }

}


/* ============================================================
   PHASE V2.11A — PURE MEDIA STRIP
   Stage + thumbnails. Nothing else.
   ============================================================ */


/* ------------------------------------------------------------
   Remove explanatory UI that adds no customer value.
   ------------------------------------------------------------ */

#stranica-artikal
.pdpv2-media-collection-head,
#stranica-artikal
.pdpv2-gallery-arrow,
#stranica-artikal
.pdpv2-gallery-help,
#stranica-artikal
.pdpv2-media-counter{
  display:none !important;
}


/* ------------------------------------------------------------
   The media collection is no longer a card inside a card.
   It is simply the thumbnail rail below the main image.
   ------------------------------------------------------------ */

#stranica-artikal
.pdpv2-media-collection{
  width:100%;

  margin-top:7px;

  padding:0 !important;

  border:0 !important;

  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;
}


/* Remove arrow-era layout. */

#stranica-artikal
.pdpv2-media-collection
.pdpv2-thumb-navigation{
  display:block !important;

  width:100%;

  margin:0 !important;

  padding:0 !important;

  border:0 !important;

  background:transparent !important;
}


/* ------------------------------------------------------------
   Desktop thumbnail rail
   ------------------------------------------------------------ */

#stranica-artikal
.pdpv2-media-collection
.pdpv2-thumbs-v4{
  display:flex !important;

  width:100%;

  min-height:0 !important;

  gap:8px !important;

  margin:0;

  padding:
    0
    0
    2px;

  overflow-x:auto;
  overflow-y:hidden;

  scrollbar-width:none;

  scroll-snap-type:
    x proximity;

  overscroll-behavior-inline:
    contain;
}


#stranica-artikal
.pdpv2-media-collection
.pdpv2-thumbs-v4::-webkit-scrollbar{
  display:none;
}


/*
 * Five-image ClearCut gallery fills most of the width,
 * rather than producing five tiny icons in a 696px rail.
 */

#stranica-artikal
.pdpv2-media-collection
.pdpv2-thumb{
  flex:
    1
    1
    0 !important;

  min-width:92px !important;
  max-width:128px !important;

  width:auto !important;
  height:76px !important;

  margin:0 !important;

  padding:3px !important;

  scroll-snap-align:start;

  border:
    1px solid
    rgba(255,255,255,.10) !important;

  border-radius:8px !important;

  background:
    rgba(10,15,22,.72) !important;
}


#stranica-artikal
.pdpv2-media-collection
.pdpv2-thumb img{
  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;

  object-fit:contain !important;

  border-radius:5px;
}


#stranica-artikal
.pdpv2-media-collection
.pdpv2-thumb.is-active{
  border-color:
    #ffb100 !important;

  box-shadow:
    0 0 0 1px
    rgba(255,177,0,.20);
}


/*
 * The little selected dot was useful when thumbnails
 * were tiny. It is unnecessary now.
 */

#stranica-artikal
.pdpv2-media-collection
.pdpv2-thumb.is-active::after{
  display:none !important;
}


/* ------------------------------------------------------------
   Mobile / narrow screens:
   large enough to understand, swipe naturally.
   ------------------------------------------------------------ */

@media (max-width:767.98px){

  #stranica-artikal
  .pdpv2-media-collection{
    margin-top:6px;
  }


  #stranica-artikal
  .pdpv2-media-collection
  .pdpv2-thumbs-v4{
    gap:6px !important;
  }


  #stranica-artikal
  .pdpv2-media-collection
  .pdpv2-thumb{
    flex:
      0
      0
      82px !important;

    min-width:82px !important;
    max-width:82px !important;

    height:62px !important;
  }

}


/* ============================================================
   PHASE V2.11B — COMPACT PURCHASE COLUMN
   Preserve readability and CTA prominence; remove dead space.
   ============================================================ */


/* ------------------------------------------------------------
   ZERO REVIEWS:
   Do not spend hero height explaining that no reviews exist.
   Reviews still remain available in the Reviews tab/panel.
   ------------------------------------------------------------ */

#stranica-artikal
.pdpv2-hero-rating.is-empty{
  display:none !important;

  min-height:0 !important;

  margin:0 !important;
  padding:0 !important;
}


/* ============================================================
   DESKTOP HERO
   ============================================================ */

@media (min-width:1200px){


  /* ----------------------------------------------------------
     Heading rhythm
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-main
  .pdpv2-brand{
    margin-bottom:2px !important;
  }


  #stranica-artikal
  .pdpv2-main
  .pdpv2-title{
    margin-bottom:2px !important;
  }


  #stranica-artikal
  .pdpv2-subtitle-v7{
    margin-top:1px !important;
    margin-bottom:4px !important;
  }


  /* ----------------------------------------------------------
     Price:
     remain visually strong but consume less surrounding space.
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-main
  .pdpv2-price{
    margin:
      4px
      0
      2px !important;
  }


  /* ----------------------------------------------------------
     Description:
     this is summary copy, not the full product description.
     Full information already exists lower on the PDP.
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-main-copy{
    margin:0 !important;

    padding:0 !important;
  }


  #stranica-artikal
  .pdpv2-main-copy
  #pp-desc{
    display:-webkit-box !important;

    overflow:hidden !important;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3 !important;

    line-clamp:3;

    max-height:
      calc(
        1.45em
        *
        3
      ) !important;

    margin:0 !important;

    line-height:1.45 !important;
  }


  /* ----------------------------------------------------------
     Stock/policy row
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-stock-row{
    min-height:34px !important;

    margin:
      5px
      0
      3px !important;

    gap:6px !important;

    align-items:center;
  }


  #stranica-artikal
  .pdpv2-stock{
    margin:0 !important;
  }


  /* ----------------------------------------------------------
     Taxonomy/context chips:
     keep useful context, remove excess breathing room.
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-context{
    min-height:22px !important;

    margin:
      0
      0
      4px !important;

    gap:5px !important;
  }


  #stranica-artikal
  .pdpv2-context a,
  #stranica-artikal
  .pdpv2-context span{
    padding:
      3px
      7px !important;

    line-height:1.15 !important;
  }


  /* ----------------------------------------------------------
     Purchase form:
     use intentional compact rhythm rather than inherited margins.
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-buy-form{
    display:flex !important;

    flex-direction:column;

    gap:7px !important;

    margin:0 !important;
    padding:0 !important;
  }


  #stranica-artikal
  .pdpv2-buy-form
  > *{
    margin-top:0 !important;
    margin-bottom:0 !important;
  }


  /* ----------------------------------------------------------
     Primary CTAs:
     still the strongest controls in the column.
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-actions{
    min-height:48px !important;
    height:48px !important;

    margin:0 !important;

    gap:8px !important;
  }


  #stranica-artikal
  .pdpv2-actions
  > *{
    min-height:48px !important;
    height:48px !important;
  }


  /* ----------------------------------------------------------
     Delivery / payment / help:
     reassurance strip, not a second hero.
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-service-v3{
    min-height:48px !important;

    margin-top:7px !important;

    padding:0 !important;
  }


  #stranica-artikal
  .pdpv2-service-v3
  > *{
    min-height:48px !important;

    padding:
      5px
      8px !important;
  }

}


/* ============================================================
   TABLET
   Keep touchability, but avoid desktop-sized vertical gaps.
   ============================================================ */

@media (min-width:768px)
and (max-width:1199.98px){

  #stranica-artikal
  .pdpv2-main-copy
  #pp-desc{
    display:-webkit-box;

    overflow:hidden;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;

    line-clamp:4;
  }


  #stranica-artikal
  .pdpv2-stock-row{
    margin-bottom:5px !important;
  }


  #stranica-artikal
  .pdpv2-service-v3{
    margin-top:8px !important;
  }

}


/* ============================================================
   MOBILE
   Compact whitespace only.
   Preserve >=44px touch controls.
   ============================================================ */

@media (max-width:767.98px){

  #stranica-artikal
  .pdpv2-main-copy
  #pp-desc{
    display:-webkit-box;

    overflow:hidden;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;

    line-clamp:4;
  }


  #stranica-artikal
  .pdpv2-stock-row{
    margin:
      6px
      0
      5px !important;
  }


  #stranica-artikal
  .pdpv2-context{
    margin-bottom:6px !important;
  }


  #stranica-artikal
  .pdpv2-actions
  > *{
    min-height:46px;
  }

}


/* ============================================================
   PHASE V2.11C — COMPLETE JOB COMMERCE CARDS
   Product recognition first; less decorative noise.
   ============================================================ */


/* ============================================================
   DESKTOP FLOW
   ============================================================ */

#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-flow{
  gap:8px !important;

  align-items:stretch;
}


/*
 * Connector arrows add visual noise and reduce usable card width.
 * The numbered steps already communicate sequence.
 */
#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-step:not(:last-child)::after{
  display:none !important;
}


/* ------------------------------------------------------------
   CARD
   ------------------------------------------------------------ */

#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-step{
  position:relative;

  min-height:228px !important;
  height:228px !important;

  overflow:hidden !important;

  border:
    1px solid
    rgba(255,255,255,.085) !important;

  border-radius:10px !important;

  background:
    linear-gradient(
      180deg,
      rgba(27,36,47,.96),
      rgba(18,25,34,.98)
    ) !important;

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.025);

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-step:not(.is-current):hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(255,177,0,.30) !important;

  box-shadow:
    0 10px 22px
    rgba(0,0,0,.18);
}


/* ------------------------------------------------------------
   MEDIA
   Give the actual product most of the card.
   ------------------------------------------------------------ */

#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-media{
  width:100% !important;

  height:148px !important;
  min-height:148px !important;

  padding:
    7px
    8px
    3px !important;

  overflow:hidden !important;

  background:
    radial-gradient(
      ellipse at 50% 55%,
      rgba(255,177,0,.075),
      transparent 58%
    ),
    radial-gradient(
      ellipse at 50% 55%,
      rgba(104,139,177,.10),
      transparent 72%
    ) !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-media img{
  display:block;

  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;

  object-fit:contain !important;
  object-position:center;

  transform:
    scale(1.10) !important;

  transform-origin:center;

  filter:
    drop-shadow(
      0
      8px
      9px
      rgba(0,0,0,.28)
    );
}


/* ------------------------------------------------------------
   STEP NUMBER
   ------------------------------------------------------------ */

#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-number{
  top:5px !important;
  left:5px !important;

  width:20px !important;
  height:20px !important;

  font-size:9px !important;

  line-height:20px !important;
}


/* ------------------------------------------------------------
   COPY
   ------------------------------------------------------------ */

#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-copy{
  min-height:0 !important;

  padding:
    6px
    8px
    8px !important;

  gap:2px !important;
}


/*
 * Role still communicates the process, but should not compete
 * with the product name.
 */
#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-role{
  margin:0 0 2px !important;

  font-size:9px !important;

  line-height:1.1 !important;

  letter-spacing:.045em !important;

  opacity:.78;
}


/*
 * Product name is the primary cross-sell information.
 */
#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-product{
  display:-webkit-box !important;

  overflow:hidden;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  line-clamp:2;

  margin:0 !important;

  color:#f5f7fa !important;

  font-size:13px !important;
  font-weight:850 !important;

  line-height:1.15 !important;
}


/*
 * Current-product label: visible, but secondary.
 */
#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-current{
  width:max-content;

  margin:
    0
    0
    2px !important;

  padding:
    2px
    5px !important;

  font-size:8px !important;

  line-height:1.1 !important;
}


/*
 * Notes belong in the full recommendation component,
 * not this compact cross-sell strip.
 */
#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-note{
  display:none !important;
}


/*
 * Product name already links to the PDP.
 * A second "Pogledaj proizvod" link wastes vertical space.
 */
#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-link{
  display:none !important;
}


/*
 * Price should be easy to scan.
 */
#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-price{
  display:block;

  margin-top:auto !important;

  padding-top:4px;

  color:#fff0c2 !important;

  font-size:12px !important;
  font-weight:900 !important;

  line-height:1.1 !important;
}


/* ------------------------------------------------------------
   MAKE NON-CURRENT CARDS CLICKABLE THROUGH THEIR PRODUCT LINK
   without changing template markup.
   ------------------------------------------------------------ */

#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-step:not(.is-current)
.pp-complete-job-product::after{
  content:"";

  position:absolute;

  inset:0;

  z-index:4;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-step:not(.is-current){
  cursor:pointer;
}


/* Keep visible text above decorative layers. */

#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-number,
#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-copy{
  position:relative;

  z-index:2;
}


/* ============================================================
   TABLET + MOBILE
   Keep the component shallow: swipe horizontally.
   ============================================================ */

@media (max-width:1199.98px){

  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-flow{
    display:flex !important;

    grid-template-columns:none !important;

    gap:8px !important;

    width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    padding:
      0
      0
      3px;

    scroll-snap-type:
      x proximity;

    overscroll-behavior-inline:
      contain;

    scrollbar-width:none;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-flow::-webkit-scrollbar{
    display:none;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-step{
    flex:
      0
      0
      190px !important;

    width:190px !important;

    scroll-snap-align:start;
  }

}


/* ============================================================
   PHONE
   ============================================================ */

@media (max-width:575.98px){

  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-step{
    flex-basis:
      168px !important;

    width:168px !important;

    height:210px !important;
    min-height:210px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-media{
    height:132px !important;
    min-height:132px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-product{
    font-size:12px !important;
  }

}


/* ============================================================
   PHASE V2.11D — COMPACT OVERVIEW
   Specs + process + reviews without empty-panel waste.
   ============================================================ */


/* ------------------------------------------------------------
   LOWER OVERVIEW GRID
   ------------------------------------------------------------ */

#stranica-artikal
.pdpv2-overview-lower{
  display:grid;

  grid-template-columns:
    minmax(270px,.72fr)
    minmax(0,1.55fr)
    minmax(260px,.76fr);

  gap:10px !important;

  align-items:stretch;
}


/*
 * No actual reviews:
 * do not reserve a whole third column for an empty state.
 */
#stranica-artikal
.pdpv2-overview-lower--no-reviews{
  grid-template-columns:
    minmax(310px,.72fr)
    minmax(0,1.78fr);
}


/* ------------------------------------------------------------
   CHARACTERISTICS
   ------------------------------------------------------------ */

#stranica-artikal
.pdpv2-overview-specs{
  min-width:0;

  padding:
    12px !important;
}


#stranica-artikal
.pdpv2-overview-section-heading{
  margin-bottom:8px !important;
}


#stranica-artikal
.pdpv2-overview-spec-list{
  display:grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  column-gap:18px;

  margin:0 !important;
}


/*
 * Each characteristic becomes one compact key/value row.
 */
#stranica-artikal
.pdpv2-overview-spec-list
> div{
  display:grid !important;

  grid-template-columns:
    minmax(96px,.9fr)
    minmax(0,1.15fr);

  align-items:center;

  gap:8px;

  min-height:40px;

  margin:0 !important;

  padding:
    6px
    0 !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.065);
}


#stranica-artikal
.pdpv2-overview-spec-list
dt,
#stranica-artikal
.pdpv2-overview-spec-list
dd{
  margin:0 !important;

  min-width:0;
}


#stranica-artikal
.pdpv2-overview-spec-list
dt{
  color:#8996a8;

  font-size:11px;

  font-weight:750;

  line-height:1.2;
}


#stranica-artikal
.pdpv2-overview-spec-list
dd{
  color:#f0f3f6;

  font-size:12px;

  font-weight:700;

  line-height:1.25;
}


/* ------------------------------------------------------------
   PROCESS PANEL
   ------------------------------------------------------------ */

#stranica-artikal
.pdpv2-overview-process{
  min-width:0;
}


#stranica-artikal
.pdpv2-overview-process
.pp-complete-job--compact{
  height:100%;
}


/* ------------------------------------------------------------
   REAL REVIEWS ONLY
   ------------------------------------------------------------ */

#stranica-artikal
.pdpv2-overview-reviews{
  min-width:0;
}


#stranica-artikal
.pdpv2-overview-reviews
.pdpv2-reviews-panel{
  height:100%;

  padding:
    12px !important;
}


/* ------------------------------------------------------------
   EMPTY REVIEWS — ONE SHALLOW STRIP
   ------------------------------------------------------------ */

#stranica-artikal
.pdpv2-review-empty-strip{
  display:flex;

  align-items:center;

  gap:10px;

  min-height:50px;

  margin-top:9px;

  padding:
    8px
    12px;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius:9px;

  background:
    linear-gradient(
      100deg,
      rgba(255,177,0,.035),
      rgba(255,255,255,.015)
    );
}


#stranica-artikal
.pdpv2-review-empty-strip-icon{
  flex:
    0
    0
    32px;

  display:grid;

  place-items:center;

  width:32px;
  height:32px;

  border:
    1px solid
    rgba(255,177,0,.26);

  border-radius:8px;

  color:#ffb100;

  background:
    rgba(255,177,0,.055);
}


#stranica-artikal
.pdpv2-review-empty-strip
> div{
  min-width:0;

  display:flex;

  align-items:baseline;

  flex-wrap:wrap;

  gap:
    3px
    8px;
}


#stranica-artikal
.pdpv2-review-empty-strip
strong{
  color:#eef2f6;

  font-size:12px;

  line-height:1.2;
}


#stranica-artikal
.pdpv2-review-empty-strip
div
span{
  color:#8491a3;

  font-size:11px;

  line-height:1.3;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width:1199.98px){

  #stranica-artikal
  .pdpv2-overview-lower,
  #stranica-artikal
  .pdpv2-overview-lower--no-reviews{
    grid-template-columns:1fr !important;

    gap:9px !important;
  }


  #stranica-artikal
  .pdpv2-overview-spec-list{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:575.98px){

  #stranica-artikal
  .pdpv2-overview-spec-list{
    grid-template-columns:1fr !important;
  }


  #stranica-artikal
  .pdpv2-overview-spec-list
  > div{
    grid-template-columns:
      minmax(105px,.85fr)
      minmax(0,1.15fr);

    min-height:36px;
  }


  #stranica-artikal
  .pdpv2-review-empty-strip{
    align-items:flex-start;

    min-height:0;
  }


  #stranica-artikal
  .pdpv2-review-empty-strip
  > div{
    display:grid;

    gap:2px;
  }

}


/* ============================================================
   PHASE V2.12A — REFERENCE GRID + DARKER VISUAL LANGUAGE
   ============================================================ */


/* ============================================================
   REFERENCE COMPOSITION
   ============================================================ */

#stranica-artikal
.pdpv2-reference-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    clamp(310px,18vw,360px);

  gap:10px;

  align-items:stretch;

  min-width:0;
}


#stranica-artikal
.pdpv2-reference-main{
  display:grid;

  grid-template-rows:
    auto
    minmax(0,1fr);

  gap:10px;

  min-width:0;
}


/*
 * Specs + procedure are the second row of the left column.
 */

#stranica-artikal
.pdpv2-overview-lower,
#stranica-artikal
.pdpv2-overview-lower--no-reviews{
  display:grid !important;

  grid-template-columns:
    minmax(315px,.72fr)
    minmax(0,1.72fr)
    !important;

  gap:10px !important;

  align-items:stretch;

  min-width:0;
}


/*
 * Reviews span the height of BOTH left-hand rows.
 */

#stranica-artikal
.pdpv2-overview-reviews{
  min-width:0;

  height:100%;
}


#stranica-artikal
.pdpv2-overview-reviews
.pdpv2-reviews-panel{
  height:100%;

  min-height:100%;

  display:flex;

  flex-direction:column;
}


/*
 * V2.11D empty strip is no longer part of this composition.
 */

#stranica-artikal
.pdpv2-review-empty-strip{
  display:none !important;
}


/* ============================================================
   DARKER PANEL LANGUAGE
   ============================================================ */

#stranica-artikal
.pdpv2-usage-card,
#stranica-artikal
.pdpv2-overview-specs,
#stranica-artikal
.pdpv2-overview-process
.pp-complete-job--compact,
#stranica-artikal
.pdpv2-reviews-panel{
  border-color:
    rgba(126,151,178,.15) !important;

  background:
    linear-gradient(
      180deg,
      rgba(17,27,38,.99),
      rgba(9,17,26,.99)
    ) !important;

  box-shadow:
    inset
    0
    1px
    rgba(255,255,255,.018);
}


/* ============================================================
   ICON LANGUAGE
   Dark holder + restrained accent glyph.
   ============================================================ */

#stranica-artikal
.pdpv2-usage-icon,
#stranica-artikal
.pdpv2-overview-heading-icon,
#stranica-artikal
.pdpv2-reviews-heading-icon{
  border-color:
    rgba(130,156,184,.23) !important;

  background:
    rgba(6,14,23,.92) !important;

  box-shadow:none !important;
}


#stranica-artikal
.pdpv2-usage-icon{
  color:#ddb143 !important;
}


#stranica-artikal
.pdpv2-overview-heading-icon{
  color:#c0ccd8 !important;
}


#stranica-artikal
.pdpv2-reviews-heading-icon{
  color:#ddb143 !important;
}


/* ============================================================
   GUIDANCE
   ============================================================ */

#stranica-artikal
.pdpv2-usage-grid{
  gap:10px !important;

  margin:0 !important;
}


#stranica-artikal
.pdpv2-usage-card{
  min-height:88px !important;

  padding:
    10px
    11px !important;
}


#stranica-artikal
.pdpv2-usage-copy h3{
  margin-bottom:3px !important;

  color:#f1f4f7;
}


#stranica-artikal
.pdpv2-usage-copy p{
  color:#a3afbd !important;

  line-height:1.36 !important;
}


/* ============================================================
   SPECS
   ============================================================ */

#stranica-artikal
.pdpv2-overview-specs{
  height:100%;
}


/* ============================================================
   PROCEDURE MEDIA
   ============================================================ */

#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-step{
  border-color:
    rgba(121,146,174,.14) !important;

  background:
    linear-gradient(
      180deg,
      #101a25,
      #09131c
    ) !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-media{
  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(62,83,108,.09),
      transparent 64%
    ),
    #0a141d !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-media img{
  filter:
    brightness(.90)
    saturate(.91)
    drop-shadow(
      0
      8px
      9px
      rgba(0,0,0,.32)
    ) !important;
}


#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-step.is-current{
  border-color:
    rgba(255,177,0,.70) !important;

  background:
    linear-gradient(
      180deg,
      rgba(28,30,28,.99),
      rgba(13,18,22,.99)
    ) !important;
}


/* ============================================================
   EMPTY REVIEWS
   Same geometry as future populated reviews.
   ============================================================ */

#stranica-artikal
.pdpv2-reviews-panel
.pdpv2-review-empty{
  flex:1;

  min-height:0;

  display:grid;

  place-content:center;

  justify-items:center;

  padding:
    18px
    18px
    22px !important;

  text-align:center;
}


#stranica-artikal
.pdpv2-review-empty
> span{
  border-color:
    rgba(128,154,181,.23) !important;

  color:#d9ae44 !important;

  background:
    #09141e !important;
}


#stranica-artikal
.pdpv2-review-empty p{
  max-width:220px;

  color:#7d8a9b !important;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width:1199.98px){

  #stranica-artikal
  .pdpv2-reference-grid{
    grid-template-columns:1fr;

    gap:10px;
  }


  #stranica-artikal
  .pdpv2-overview-reviews{
    min-height:180px;
  }

}


@media (max-width:899.98px){

  #stranica-artikal
  .pdpv2-overview-lower{
    grid-template-columns:1fr !important;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:575.98px){

  #stranica-artikal
  .pdpv2-reference-main,
  #stranica-artikal
  .pdpv2-reference-grid{
    gap:8px;
  }


  #stranica-artikal
  .pdpv2-overview-reviews{
    min-height:160px;
  }

}


/* ============================================================
   PHASE V2.12B — COMMERCE RAILS
   Similar = commerce action
   Recently viewed = passive memory rail
   ============================================================ */


/* ============================================================
   SHARED RAIL RHYTHM
   ============================================================ */

#stranica-artikal
.pdpv2-commerce{
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr) !important;

  gap:28px !important;

  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  margin-top:20px !important;

  padding-top:18px !important;

  border-top:
    1px solid
    rgba(126,151,178,.12);
}


#stranica-artikal
.pdpv2-commerce-head{
  margin-bottom:12px !important;
}


#stranica-artikal
.pdpv2-commerce-head h2{
  margin:0 !important;

  color:#f3f6f8;

  font-size:
    clamp(
      18px,
      1.2vw,
      21px
    ) !important;

  font-weight:900 !important;

  line-height:1.15 !important;

  letter-spacing:-.02em;
}


/* ============================================================
   V2.16 SOURCE REBUILD — PRODUCT DISCOVERY
   ============================================================ */

#stranica-artikal
.pdpv2-commerce-panel,
#stranica-artikal
.pdpv2-commerce-recent-slot{
  grid-column:1 / -1 !important;

  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}


/*
 * Keep arrow columns physically stable.
 * Disabled state changes visibility only — never track width.
 */

#stranica-artikal
.pdpv2-commerce-rail-shell{
  display:grid !important;

  grid-template-columns:
    42px
    minmax(0,1fr)
    42px !important;

  gap:10px !important;

  align-items:center;

  width:100% !important;
  min-width:0 !important;
}


#stranica-artikal
.pdpv2-commerce-rail-shell
> .pdpv2-commerce-arrow{
  display:grid !important;

  visibility:visible;

  width:42px !important;
  height:42px !important;

  min-width:42px !important;
}


#stranica-artikal
.pdpv2-commerce-rail-shell
> .pdpv2-commerce-arrow:disabled{
  display:grid !important;

  visibility:hidden !important;

  pointer-events:none !important;
}


#stranica-artikal
.pdpv2-commerce-recent-slot
#agdRecentlyViewed{
  width:100% !important;
  min-width:0 !important;

  margin:0 !important;
  padding:0 !important;

  border-top:0 !important;
}


#stranica-artikal
.pdpv2-commerce-recent-slot
.agd-rv-head{
  margin:
    0
    0
    12px !important;
}


#stranica-artikal
.pdpv2-commerce-recent-slot
.agd-rv-kicker,
#stranica-artikal
.pdpv2-commerce-recent-slot
.agd-rv-subtitle{
  display:none !important;
}


#stranica-artikal
.pdpv2-commerce-recent-slot
.agd-rv-title{
  margin:0 !important;

  color:#f3f6f8 !important;

  font-size:
    clamp(
      18px,
      1.2vw,
      21px
    ) !important;

  font-weight:900 !important;

  line-height:1.15 !important;

  letter-spacing:-.02em;
}


/* ============================================================
   SIMILAR PRODUCTS
   ============================================================ */

#stranica-artikal
.pdpv2-commerce-similar
.pdpv2-commerce-track{
  display:grid !important;

  grid-auto-flow:column !important;

  grid-auto-columns:
    minmax(
      240px,
      280px
    ) !important;

  gap:14px !important;

  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  padding:
    2px
    2px
    10px !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;

  scroll-snap-type:
    x proximity;

  overscroll-behavior-inline:
    contain;
}


/*
 * Compact horizontal commerce card.
 */
#stranica-artikal
.pdpv2-commerce-similar
.pdpv2-commerce-card{
  position:relative;

  display:flex !important;

  flex-direction:column !important;

  align-items:stretch !important;

  gap:0 !important;

  min-width:0 !important;

  min-height:315px !important;
  height:auto !important;
  max-height:none !important;

  padding:0 !important;

  overflow:hidden;

  scroll-snap-align:start;

  border:
    1px solid
    rgba(126,151,178,.17) !important;

  border-radius:12px !important;

  background:
    linear-gradient(
      180deg,
      #111c27,
      #0a141e
    ) !important;

  box-shadow:
    inset
    0
    1px
    rgba(255,255,255,.025),
    0
    8px
    22px
    rgba(0,0,0,.12);
}


/* ------------------------------------------------------------
   IMAGE
   ------------------------------------------------------------ */

#stranica-artikal
.pdpv2-commerce-similar
.pdpv2-commerce-media{
  width:100% !important;
  height:185px !important;

  min-width:0 !important;
  min-height:185px !important;

  display:flex !important;

  align-items:center;
  justify-content:center;

  padding:
    15px !important;

  border:0 !important;

  border-bottom:
    1px solid
    rgba(126,151,178,.10) !important;

  border-radius:0 !important;

  overflow:hidden;

  background:
    radial-gradient(
      ellipse at 50% 45%,
      rgba(72,98,132,.22),
      transparent 60%
    ),
    #0d1721 !important;
}


#stranica-artikal
.pdpv2-commerce-similar
.pdpv2-commerce-media img{
  display:block;

  width:100% !important;
  height:100% !important;

  max-width:100% !important;
  max-height:100% !important;

  object-fit:contain !important;

  filter:
    brightness(.96)
    saturate(.96)
    drop-shadow(
      0
      7px
      10px
      rgba(0,0,0,.28)
    );
}


/* ------------------------------------------------------------
   COPY
   ------------------------------------------------------------ */

#stranica-artikal
.pdpv2-commerce-similar
.pdpv2-commerce-copy{
  flex:1 1 auto;

  min-width:0;

  display:flex;

  flex-direction:column;

  padding:
    13px
    58px
    14px
    14px !important;
}


#stranica-artikal
.pdpv2-commerce-similar
.pdpv2-commerce-brand{
  display:block;

  margin-bottom:5px !important;

  color:#78879a !important;

  font-size:9.5px !important;
  font-weight:850;

  line-height:1.1;

  letter-spacing:.075em;

  text-transform:uppercase;
}


#stranica-artikal
.pdpv2-commerce-similar
.pdpv2-commerce-name{
  display:-webkit-box;

  overflow:hidden;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  line-clamp:2;

  min-height:2.5em;

  margin:
    0
    0
    6px !important;

  color:#f1f4f7 !important;

  font-size:14.5px !important;
  font-weight:850 !important;

  line-height:1.25 !important;

  text-decoration:none;
}


#stranica-artikal
.pdpv2-commerce-similar
.pdpv2-commerce-price{
  display:block;

  margin-top:auto;

  padding-top:8px;

  color:#ffbf20 !important;

  font-size:13.5px !important;

  font-weight:950 !important;

  line-height:1.1;

  white-space:nowrap;
}


/* ------------------------------------------------------------
   REAL CART BUTTON
   ------------------------------------------------------------ */

#stranica-artikal
.pdpv2-commerce-cart-form{
  position:absolute;

  right:14px;
  bottom:14px;

  z-index:3;

  width:40px;
  height:40px;

  margin:0 !important;
  padding:0 !important;
}


#stranica-artikal
.pdpv2-commerce-similar
.pdpv2-commerce-action.pdpv2-commerce-cart{
  width:40px !important;
  height:40px !important;

  min-width:40px;

  display:grid !important;

  place-items:center;

  margin:0 !important;
  padding:0 !important;

  border:
    1px solid
    rgba(255,196,54,.78) !important;

  border-radius:8px !important;

  color:#111820 !important;

  background:
    linear-gradient(
      180deg,
      #ffc128,
      #f2a900
    ) !important;

  box-shadow:
    0
    6px
    14px
    rgba(0,0,0,.20);

  cursor:pointer;
}


#stranica-artikal
.pdpv2-commerce-similar
.pdpv2-commerce-cart:hover{
  transform:
    translateY(-1px);

  filter:
    brightness(1.055);
}


#stranica-artikal
.pdpv2-commerce-similar
.pdpv2-commerce-cart i{
  font-size:13px;
}


/* ============================================================
   RECENTLY VIEWED
   Image + name + price.
   ============================================================ */

#stranica-artikal
#agdRecentlyViewed
.agd-rv-track{
  display:grid !important;

  grid-auto-flow:column !important;

  grid-auto-columns:
    minmax(
      200px,
      225px
    ) !important;

  gap:14px !important;

  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;

  padding:
    2px
    2px
    10px !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;

  scroll-snap-type:
    x proximity;

  overscroll-behavior-inline:
    contain;
}


/*
 * Override the old vertical card.
 */
#stranica-artikal
#agdRecentlyViewed
.agd-rv-card{
  display:flex !important;

  flex-direction:column !important;

  align-items:stretch !important;

  gap:0 !important;

  min-width:0 !important;

  min-height:260px !important;
  height:auto !important;
  max-height:none !important;

  padding:0 !important;

  overflow:hidden;

  scroll-snap-align:start;

  border:
    1px solid
    rgba(126,151,178,.15) !important;

  border-radius:11px !important;

  color:inherit;

  background:
    linear-gradient(
      180deg,
      #101b26,
      #09131c
    ) !important;

  text-decoration:none;

  box-shadow:
    inset
    0
    1px
    rgba(255,255,255,.02);
}


#stranica-artikal
#agdRecentlyViewed
.agd-rv-card:hover{
  transform:
    translateY(-1px);

  border-color:
    rgba(134,160,188,.25) !important;

  background:
    linear-gradient(
      180deg,
      #121d28,
      #0a141e
    ) !important;
}


/* ------------------------------------------------------------
   RECENT IMAGE
   ------------------------------------------------------------ */

#stranica-artikal
#agdRecentlyViewed
.agd-rv-image{
  width:100% !important;
  height:150px !important;

  min-width:0 !important;
  min-height:150px !important;

  aspect-ratio:auto !important;

  display:flex !important;

  align-items:center;
  justify-content:center;

  padding:
    13px !important;

  border-radius:0;

  border-bottom:
    1px solid
    rgba(126,151,178,.09);

  background:
    radial-gradient(
      ellipse at 50% 45%,
      rgba(70,94,126,.18),
      transparent 60%
    ),
    #0c1620 !important;
}


#stranica-artikal
#agdRecentlyViewed
.agd-rv-image img{
  width:100% !important;
  height:100% !important;

  max-width:100% !important;
  max-height:100% !important;

  object-fit:contain !important;

  filter:
    brightness(.95)
    saturate(.94);
}


/* ------------------------------------------------------------
   RECENT COPY
   ------------------------------------------------------------ */

#stranica-artikal
#agdRecentlyViewed
.agd-rv-body{
  flex:1 1 auto;

  min-width:0;

  display:flex !important;

  flex-direction:column;

  padding:
    11px
    12px
    13px !important;
}


#stranica-artikal
#agdRecentlyViewed
.agd-rv-brand{
  display:none !important;
}


#stranica-artikal
#agdRecentlyViewed
.agd-rv-name{
  min-height:0 !important;

  display:-webkit-box !important;

  overflow:hidden;

  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  line-clamp:2;

  margin:
    0
    0
    4px;

  color:#eef2f5 !important;

  font-size:10.5px !important;
  font-weight:800 !important;

  line-height:1.17 !important;
}


#stranica-artikal
#agdRecentlyViewed
.agd-rv-meta{
  display:block !important;

  margin:0 !important;

  padding:0 !important;
}


#stranica-artikal
#agdRecentlyViewed
.agd-rv-price{
  color:#e7b740 !important;

  font-size:10px !important;

  font-weight:900 !important;

  line-height:1.1;
}


/*
 * Safety: even stale cached markup should never show stock here.
 */
#stranica-artikal
#agdRecentlyViewed
.agd-rv-stock{
  display:none !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:767.98px){

  #stranica-artikal
  .pdpv2-commerce-similar
  .pdpv2-commerce-track{
    grid-auto-columns:
      205px !important;
  }


  #stranica-artikal
  #agdRecentlyViewed
  .agd-rv-track{
    grid-auto-columns:
      160px !important;
  }

}


/* ============================================================
   PHASE V2.13 — FINAL RESPONSIVE + VISUAL LOCK
   Desktop → tablet → mobile
   ============================================================ */


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

#stranica-artikal{
  --pdp13-bg:#07111b;
  --pdp13-bg-2:#091520;

  --pdp13-panel:#101a24;
  --pdp13-panel-deep:#0a141e;
  --pdp13-panel-soft:#13202c;

  --pdp13-line:rgba(126,151,178,.15);
  --pdp13-line-strong:rgba(137,164,194,.23);

  --pdp13-text:#f1f4f7;
  --pdp13-muted:#8d9aaa;

  --pdp13-amber:#e5b43f;
  --pdp13-amber-strong:#ffb100;

  --pdp13-blue:#7fa6cc;
  --pdp13-green:#7fb69a;
  --pdp13-neutral:#9aa7b5;

  background:
    radial-gradient(
      ellipse at 92% 12%,
      rgba(20,76,123,.16),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      var(--pdp13-bg),
      #061019 58%,
      #070f17
    ) !important;
}


/* ============================================================
   GLOBAL PDP SHELL
   ============================================================ */

#stranica-artikal,
#stranica-artikal *{
  box-sizing:border-box;
}


#stranica-artikal
img{
  max-width:100%;
}


/*
 * Desktop:
 * wide, but not edge-to-edge.
 */

#stranica-artikal
> .container{
  width:
    min(
      92vw,
      1840px
    ) !important;

  max-width:none !important;

  margin-inline:auto !important;
}


@media (min-width:2200px){

  #stranica-artikal
  > .container{
    width:
      min(
        90vw,
        2350px
      ) !important;
  }

}


/*
 * Normal laptop / smaller desktop.
 */

@media (min-width:1200px)
and (max-width:1599.98px){

  #stranica-artikal
  > .container{
    width:
      calc(
        100%
        -
        32px
      ) !important;
  }

}


/*
 * Tablet:
 * almost full viewport.
 */

@media (min-width:768px)
and (max-width:1199.98px){

  #stranica-artikal
  > .container{
    width:
      calc(
        100%
        -
        20px
      ) !important;

    padding-inline:0 !important;
  }

}


/*
 * PHONE:
 * full width, only a small intentional gutter.
 */

@media (max-width:767.98px){

  #stranica-artikal{
    padding-top:
      8px !important;

    padding-bottom:
      18px !important;
  }


  #stranica-artikal
  > .container{
    width:100% !important;

    max-width:none !important;

    margin-inline:0 !important;

    padding-inline:
      8px !important;
  }


  #stranica-artikal
  .pp-crumbs{
    margin-bottom:
      8px !important;
  }

}


/* ============================================================
   STRUCTURAL WIDTH SAFETY
   ============================================================ */

#stranica-artikal
.pdpv2-hero,
#stranica-artikal
.pdpv2-gallery,
#stranica-artikal
.pdpv2-main,
#stranica-artikal
.pdpv2-side,
#stranica-artikal
.pdpv2-info,
#stranica-artikal
.pdpv2-overview-reference,
#stranica-artikal
.pdpv2-reference-grid,
#stranica-artikal
.pdpv2-reference-main,
#stranica-artikal
.pdpv2-overview-lower,
#stranica-artikal
.pdpv2-commerce,
#stranica-artikal
.pdpv2-commerce-panel,
#stranica-artikal
.pdpv2-commerce-recent-slot{
  min-width:0;

  max-width:100%;
}


/* ============================================================
   DARK PANEL SYSTEM
   ============================================================ */

#stranica-artikal
.pdpv2-gallery-card,
#stranica-artikal
.pdpv2-side-card,
#stranica-artikal
.pdpv2-usage-card,
#stranica-artikal
.pdpv2-overview-specs,
#stranica-artikal
.pdpv2-overview-process
.pp-complete-job--compact,
#stranica-artikal
.pdpv2-reviews-panel{
  border-color:
    var(--pdp13-line) !important;

  background:
    linear-gradient(
      180deg,
      rgba(16,26,36,.99),
      rgba(8,17,26,.995)
    ) !important;

  box-shadow:
    inset
    0
    1px
    rgba(255,255,255,.015);
}


/* ============================================================
   SEMANTIC ICON SYSTEM
   ============================================================ */

/*
 * No more mustard blocks everywhere.
 */

#stranica-artikal
.pdpv2-usage-icon,
#stranica-artikal
.pdpv2-overview-heading-icon,
#stranica-artikal
.pdpv2-reviews-heading-icon{
  border-color:
    rgba(128,155,183,.23) !important;

  background:
    rgba(5,13,21,.92) !important;

  box-shadow:none !important;
}


/* When to use — informational blue. */

#stranica-artikal
.pdpv2-usage-card:nth-child(1)
.pdpv2-usage-icon{
  color:
    var(--pdp13-blue) !important;

  border-color:
    rgba(93,145,193,.28) !important;
}


/* Before use — restrained amber. */

#stranica-artikal
.pdpv2-usage-card:nth-child(2)
.pdpv2-usage-icon{
  color:
    var(--pdp13-amber) !important;

  border-color:
    rgba(208,166,62,.25) !important;
}


/* After use — muted green. */

#stranica-artikal
.pdpv2-usage-card:nth-child(3)
.pdpv2-usage-icon{
  color:
    var(--pdp13-green) !important;

  border-color:
    rgba(92,154,119,.27) !important;
}


/* Mistake / neutral. */

#stranica-artikal
.pdpv2-usage-card:nth-child(4)
.pdpv2-usage-icon{
  color:
    var(--pdp13-neutral) !important;

  border-color:
    rgba(140,157,176,.22) !important;
}


/*
 * Quick-information icons:
 * technical, not promotional.
 */

#stranica-artikal
.pdpv2-quick-list
dt
i,
#stranica-artikal
.pdpv2-quick-list
dt
svg{
  color:
    #8faecb !important;
}


/*
 * Why-product remains amber, but softer.
 */

#stranica-artikal
.pdpv2-purpose
i{
  color:
    #dfb449;
}


/*
 * Service/reassurance icons.
 */

#stranica-artikal
.pdpv2-service-v3
i{
  color:
    #9ab5cf !important;
}


/* ============================================================
   DESKTOP HERO
   ============================================================ */

@media (min-width:1360px){

  #stranica-artikal
  .pdpv2-hero{
    gap:
      clamp(
        14px,
        1.1vw,
        22px
      ) !important;

    align-items:start !important;
  }

}


/* ============================================================
   1200–1359
   Two-column hero + side across full row.
   ============================================================ */

@media (min-width:1200px)
and (max-width:1359.98px){

  #stranica-artikal
  .pdpv2-hero{
    grid-template-columns:
      minmax(0,1.06fr)
      minmax(0,.94fr)
      !important;

    gap:12px !important;
  }


  #stranica-artikal
  .pdpv2-side{
    grid-column:
      1
      /
      -1;

    display:grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:10px !important;
  }

}


/* ============================================================
   TABLET / SMALL LAPTOP HERO
   ============================================================ */

@media (max-width:1199.98px){

  #stranica-artikal
  .pdpv2-hero{
    gap:
      10px !important;
  }


  #stranica-artikal
  .pdpv2-main,
  #stranica-artikal
  .pdpv2-gallery,
  #stranica-artikal
  .pdpv2-side{
    width:100% !important;

    max-width:none !important;
  }

}


/*
 * 768–991:
 * single content stack, but right cards stay side-by-side.
 */

@media (min-width:768px)
and (max-width:991.98px){

  #stranica-artikal
  .pdpv2-hero{
    grid-template-columns:
      minmax(0,1fr)
      !important;
  }


  #stranica-artikal
  .pdpv2-side{
    display:grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:10px;
  }

}


/* ============================================================
   MOBILE HERO
   ============================================================ */

@media (max-width:767.98px){

  #stranica-artikal
  .pdpv2-hero{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      !important;

    width:100% !important;

    gap:
      9px !important;
  }


  #stranica-artikal
  .pdpv2-gallery,
  #stranica-artikal
  .pdpv2-main,
  #stranica-artikal
  .pdpv2-side{
    grid-column:auto !important;

    width:100% !important;
  }


  /* Gallery stage */

  #stranica-artikal
  .pdpv2-stage-v4{
    width:100% !important;

    height:auto !important;

    aspect-ratio:
      4
      /
      3 !important;

    padding:
      6px !important;

    border-radius:
      8px !important;

    background:
      #09141e !important;
  }


  #stranica-artikal
  .pdpv2-stage-v4
  #pp-image{
    width:100% !important;
    height:100% !important;

    object-fit:
      contain !important;
  }


  /* Thumbnails */

  #stranica-artikal
  .pdpv2-media-collection{
    width:100% !important;

    margin-top:
      5px !important;
  }


  #stranica-artikal
  .pdpv2-media-collection
  .pdpv2-thumbs-v4{
    width:100% !important;

    gap:
      6px !important;

    margin:0 !important;

    padding:
      0
      0
      2px !important;

    overflow-x:auto;

    scroll-snap-type:
      x proximity;
  }


  #stranica-artikal
  .pdpv2-media-collection
  .pdpv2-thumb{
    flex:
      0
      0
      78px !important;

    min-width:
      78px !important;

    max-width:
      78px !important;

    height:
      58px !important;
  }


  /* Product typography */

  #stranica-artikal
  .pdpv2-main
  .pdpv2-title{
    font-size:
      clamp(
        28px,
        8vw,
        36px
      ) !important;

    line-height:
      1.02 !important;
  }


  #stranica-artikal
  .pdpv2-main
  .pdpv2-price{
    font-size:
      25px !important;

    line-height:
      1.05 !important;
  }


  #stranica-artikal
  .pdpv2-subtitle-v7{
    font-size:
      13px !important;
  }


  #stranica-artikal
  .pdpv2-main-copy
  #pp-desc{
    -webkit-line-clamp:
      4 !important;

    line-clamp:
      4 !important;

    font-size:
      13px !important;

    line-height:
      1.42 !important;
  }


  /* Stock / context */

  #stranica-artikal
  .pdpv2-stock-row,
  #stranica-artikal
  .pdpv2-context{
    width:100%;

    flex-wrap:wrap;
  }


  /* Right-side cards */

  #stranica-artikal
  .pdpv2-side{
    display:grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:
      8px !important;
  }


  #stranica-artikal
  .pdpv2-side-card{
    min-width:0;

    padding:
      10px !important;
  }


  #stranica-artikal
  .pdpv2-quick-list
  > div{
    min-height:
      34px !important;
  }

}


/*
 * Small phones:
 * right cards stack.
 */

@media (max-width:575.98px){

  #stranica-artikal
  .pdpv2-side{
    grid-template-columns:
      1fr !important;
  }

}


/* ============================================================
   MOBILE PURCHASE ACTIONS
   ============================================================ */

@media (max-width:575.98px){

  #stranica-artikal
  .pdpv2-buy-form{
    width:100%;

    gap:
      6px !important;
  }


  /*
   * Primary Add-to-cart gets its own full row.
   * Buy-now + wishlist share second row.
   */

  #stranica-artikal
  .pdpv2-actions{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      46px
      !important;

    height:auto !important;

    gap:
      6px !important;
  }


  #stranica-artikal
  .pdpv2-add{
    grid-column:
      1
      /
      -1;

    width:100% !important;
  }


  #stranica-artikal
  .pdpv2-buy-now{
    grid-column:1;

    width:100% !important;
  }


  #stranica-artikal
  .pdpv2-wishlist{
    grid-column:2;

    width:46px !important;
  }


  #stranica-artikal
  .pdpv2-actions
  > *{
    min-height:
      46px !important;

    height:
      46px !important;
  }


  /* reassurance strip */

  #stranica-artikal
  .pdpv2-service-v3{
    width:100%;

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;

    min-height:
      52px !important;
  }


  #stranica-artikal
  .pdpv2-service-v3
  > *{
    min-width:0;

    padding:
      5px
      4px !important;
  }

}


/* ============================================================
   TABS
   ============================================================ */

#stranica-artikal
.pdpv2-info-tabs{
  width:100%;

  max-width:100%;

  overflow-x:auto !important;
  overflow-y:hidden !important;

  scrollbar-width:none;

  -ms-overflow-style:none;

  white-space:nowrap;
}


#stranica-artikal
.pdpv2-info-tabs::-webkit-scrollbar{
  display:none;
}


@media (max-width:575.98px){

  #stranica-artikal
  .pdpv2-info-tabs{
    gap:
      2px !important;
  }


  #stranica-artikal
  .pdpv2-info-tabs
  .nav-link{
    padding:
      9px
      10px !important;

    font-size:
      12px !important;
  }

}


/* ============================================================
   GUIDANCE
   ============================================================ */

@media (max-width:767.98px){

  /*
   * One shallow horizontal rail instead of four stacked cards.
   */

  #stranica-artikal
  .pdpv2-usage-grid{
    display:grid !important;

    grid-auto-flow:column;

    grid-auto-columns:
      minmax(
        245px,
        82vw
      );

    grid-template-columns:none !important;

    gap:
      7px !important;

    width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    padding-bottom:
      2px;

    scroll-snap-type:
      x proximity;

    scrollbar-width:none;
  }


  #stranica-artikal
  .pdpv2-usage-grid::-webkit-scrollbar{
    display:none;
  }


  #stranica-artikal
  .pdpv2-usage-card{
    min-height:
      82px !important;

    scroll-snap-align:start;

    padding:
      9px
      10px !important;
  }

}


/* ============================================================
   REFERENCE OVERVIEW / REVIEWS
   ============================================================ */

@media (max-width:1199.98px){

  #stranica-artikal
  .pdpv2-reference-grid{
    grid-template-columns:
      1fr !important;

    width:100%;
  }

}


@media (max-width:899.98px){

  #stranica-artikal
  .pdpv2-overview-lower{
    grid-template-columns:
      1fr !important;
  }


  #stranica-artikal
  .pdpv2-overview-specs,
  #stranica-artikal
  .pdpv2-overview-process,
  #stranica-artikal
  .pdpv2-overview-reviews{
    width:100%;
  }

}


/* Specs */

@media (max-width:575.98px){

  #stranica-artikal
  .pdpv2-overview-spec-list{
    grid-template-columns:
      1fr !important;
  }


  #stranica-artikal
  .pdpv2-overview-spec-list
  > div{
    grid-template-columns:
      minmax(105px,.82fr)
      minmax(0,1.18fr);

    min-height:
      36px !important;
  }

}


/* Reviews */

@media (max-width:767.98px){

  #stranica-artikal
  .pdpv2-overview-reviews{
    min-height:
      150px !important;
  }


  #stranica-artikal
  .pdpv2-reviews-panel{
    min-height:
      150px !important;
  }

}


/* ============================================================
   COMPLETE PROCESS
   ============================================================ */

@media (max-width:1199.98px){

  /*
   * Already horizontal; ensure it truly occupies full viewport.
   */

  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-flow{
    width:100% !important;

    max-width:100%;

    margin:0 !important;

    overflow-x:auto;
    overflow-y:hidden;

    padding-bottom:
      3px;

    scroll-snap-type:
      x proximity;
  }

}


@media (max-width:575.98px){

  #stranica-artikal
  .pp-complete-job--compact{
    padding:
      10px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-step{
    flex:
      0
      0
      166px !important;

    width:
      166px !important;

    min-height:
      210px !important;

    height:
      210px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-media{
    height:
      130px !important;

    min-height:
      130px !important;
  }

}


/* ============================================================
   COMMERCE RAILS
   ============================================================ */

@media (max-width:991.98px){

  /*
   * Desktop can keep Similar + Recent side-by-side.
   * Smaller screens stack full-width.
   */

  #stranica-artikal
  .pdpv2-commerce{
    display:grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      14px !important;
  }


  #stranica-artikal
  .pdpv2-commerce-panel,
  #stranica-artikal
  .pdpv2-commerce-recent-slot{
    width:100% !important;

    max-width:none !important;
  }

}


@media (max-width:767.98px){

  #stranica-artikal
  .pdpv2-commerce{
    margin-top:
      12px !important;

    padding-top:
      10px !important;
  }


  /*
   * Swipe on mobile; arrows are unnecessary.
   */

  #stranica-artikal
  .pdpv2-commerce-arrow{
    display:none !important;
  }


  #stranica-artikal
  .pdpv2-commerce-rail-shell{
    display:block !important;

    width:100%;
  }


  #stranica-artikal
  .pdpv2-commerce-track,
  #stranica-artikal
  #agdRecentlyViewed
  .agd-rv-track{
    width:100% !important;

    max-width:none !important;

    margin:
      0 !important;

    padding:
      0
      0
      3px !important;

    overflow-x:auto !important;

    scroll-snap-type:
      x proximity;

    scrollbar-width:none;
  }


  #stranica-artikal
  .pdpv2-commerce-track::-webkit-scrollbar,
  #stranica-artikal
  #agdRecentlyViewed
  .agd-rv-track::-webkit-scrollbar{
    display:none;
  }


  #stranica-artikal
  .pdpv2-commerce-similar
  .pdpv2-commerce-track{
    grid-auto-columns:
      min(
        78vw,
        300px
      ) !important;

    gap:12px !important;
  }


  #stranica-artikal
  #agdRecentlyViewed
  .agd-rv-track{
    grid-auto-columns:
      min(
        64vw,
        240px
      ) !important;

    gap:12px !important;
  }

}


/* ============================================================
   VERY SMALL PHONES
   360–390px class
   ============================================================ */

@media (max-width:389.98px){

  #stranica-artikal
  > .container{
    padding-inline:
      6px !important;
  }


  #stranica-artikal
  .pdpv2-main
  .pdpv2-title{
    font-size:
      28px !important;
  }


  #stranica-artikal
  .pdpv2-main
  .pdpv2-price{
    font-size:
      23px !important;
  }


  #stranica-artikal
  .pdpv2-usage-grid{
    grid-auto-columns:
      86vw;
  }


  #stranica-artikal
  .pdpv2-media-collection
  .pdpv2-thumb{
    flex-basis:
      72px !important;

    min-width:
      72px !important;

    max-width:
      72px !important;

    height:
      54px !important;
  }


  #stranica-artikal
  .pdpv2-commerce-similar
  .pdpv2-commerce-track{
    grid-auto-columns:
      min(
        82vw,
        290px
      ) !important;
  }

}


/* ============================================================
   ACCESSIBILITY / MOTION
   ============================================================ */

@media (prefers-reduced-motion:reduce){

  #stranica-artikal
  *{
    scroll-behavior:auto !important;
  }

}


/* ============================================================
   PHASE V2.13.1 — CONTAIN DECORATIVE OVERFLOW
   ============================================================ */

/*
 * The decorative ring in the "Why this product?" card intentionally
 * extends beyond the card. On narrower viewports it was propagating
 * ~90px of scrollable overflow to the document.
 *
 * Contain the artwork inside its own visual component.
 * Do NOT hide overflow on body/html.
 */

#stranica-artikal
.pdpv2-purpose{
  position:relative;

  overflow:hidden !important;

  isolation:isolate;
}


/*
 * Keep decorative pseudo-elements behind actual content.
 */

#stranica-artikal
.pdpv2-purpose::before,
#stranica-artikal
.pdpv2-purpose::after{
  pointer-events:none;

  z-index:0;
}


#stranica-artikal
.pdpv2-purpose
> *{
  position:relative;

  z-index:1;
}


/* ============================================================
   HORIZONTAL RAIL CONTAINMENT
   These sections are allowed to scroll internally, never the page.
   ============================================================ */

#stranica-artikal
.pdpv2-usage-grid,
#stranica-artikal
.pp-complete-job--compact
.pp-complete-job-flow,
#stranica-artikal
.pdpv2-commerce-track,
#stranica-artikal
#agdRecentlyViewed
.agd-rv-track,
#stranica-artikal
.pdpv2-media-collection
.pdpv2-thumbs-v4,
#stranica-artikal
.pdpv2-info-tabs{
  max-width:100% !important;

  overscroll-behavior-inline:contain;
}


/*
 * These are rail shells, not width-producing layout elements.
 */

#stranica-artikal
.pdpv2-commerce-rail-shell,
#stranica-artikal
.pdpv2-media-collection{
  min-width:0;

  max-width:100%;

  overflow:visible;
}



/* ============================================================
   PHASE V2.13.2 — HERO DECORATION CONTAINMENT
   Exact owner of responsive document overflow.
   ============================================================ */

/*
 * Hero ::before / ::after are large atmospheric light shapes.
 *
 * Their negative right offsets are visual decoration only:
 *   ::before right:-90px
 *   ::after  right:-30px
 *
 * They must never participate in document width.
 *
 * `clip` is used at the owning component rather than hiding
 * horizontal overflow on html/body.
 */

#stranica-artikal
.pdpv2-hero.pdpv2-hero-v3{
  overflow-x:clip !important;
  overflow-y:visible !important;
}


/*
 * Modern Chrome/Safari/Firefox support overflow:clip.
 * This fallback is only for older implementations.
 */

@supports not (overflow-x:clip){

  #stranica-artikal
  .pdpv2-hero.pdpv2-hero-v3{
    overflow-x:hidden !important;
  }

}


/* ============================================================
   PHASE V2.14 — FINAL MOBILE DENSITY LOCK
   Preserve desktop. Compact <= 767px only.
   ============================================================ */

@media (max-width:767.98px){


  /* ----------------------------------------------------------
     GENERAL RHYTHM
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-hero{
    gap:7px !important;
  }


  #stranica-artikal
  .pdpv2-reference-grid,
  #stranica-artikal
  .pdpv2-reference-main,
  #stranica-artikal
  .pdpv2-overview-lower{
    gap:7px !important;
  }



  /* ----------------------------------------------------------
     GALLERY
     Reduce vertical cost while preserving useful media size.
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-gallery-card{
    padding:7px !important;
  }


  #stranica-artikal
  .pdpv2-stage-v4{
    aspect-ratio:3 / 2 !important;

    min-height:0 !important;

    border-radius:7px !important;
  }


  #stranica-artikal
  .pdpv2-media-collection{
    margin-top:5px !important;
  }


  #stranica-artikal
  .pdpv2-media-collection
  .pdpv2-thumbs-v4{
    gap:5px !important;
  }


  #stranica-artikal
  .pdpv2-media-collection
  .pdpv2-thumb{
    flex-basis:72px !important;

    min-width:72px !important;
    max-width:72px !important;

    height:52px !important;

    border-radius:6px !important;
  }



  /* ----------------------------------------------------------
     PURCHASE COLUMN
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-main{
    padding-top:2px !important;
  }


  #stranica-artikal
  .pdpv2-main
  .pdpv2-brand{
    margin-bottom:3px !important;
  }


  #stranica-artikal
  .pdpv2-main
  .pdpv2-title{
    margin-bottom:5px !important;

    font-size:
      clamp(
        27px,
        7.6vw,
        34px
      ) !important;

    line-height:1.02 !important;
  }


  #stranica-artikal
  .pdpv2-subtitle-v7{
    margin-bottom:5px !important;

    line-height:1.3 !important;
  }


  #stranica-artikal
  .pdpv2-main
  .pdpv2-price{
    margin-bottom:7px !important;

    font-size:24px !important;
  }


  #stranica-artikal
  .pdpv2-main-copy{
    margin-bottom:7px !important;
  }


  #stranica-artikal
  .pdpv2-main-copy
  #pp-desc{
    -webkit-line-clamp:3 !important;
    line-clamp:3 !important;

    font-size:12.5px !important;
    line-height:1.4 !important;
  }


  #stranica-artikal
  .pdpv2-stock,
  #stranica-artikal
  .pdpv2-context{
    margin-block:5px !important;
  }


  #stranica-artikal
  .pdpv2-options{
    margin-top:6px !important;
    margin-bottom:6px !important;
  }



  /* ----------------------------------------------------------
     QUICK INFORMATION
     Full-width card, but internal facts become 2-column.
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-side{
    grid-template-columns:
      minmax(0,1fr)
      !important;

    gap:7px !important;
  }


  #stranica-artikal
  .pdpv2-side-card{
    padding:9px 10px !important;

    border-radius:8px !important;
  }


  #stranica-artikal
  .pdpv2-side-card h2{
    margin-bottom:7px !important;

    font-size:13px !important;
    line-height:1.2 !important;
  }


  #stranica-artikal
  .pdpv2-quick-list{
    display:grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:
      5px
      8px !important;

    margin:0 !important;
  }


  #stranica-artikal
  .pdpv2-quick-list
  > div{
    display:block !important;

    min-height:0 !important;

    padding:
      5px
      6px !important;

    border:
      1px solid
      rgba(125,151,179,.10);

    border-radius:6px;

    background:
      rgba(5,13,21,.32);
  }


  #stranica-artikal
  .pdpv2-quick-list
  dt{
    margin-bottom:2px !important;

    font-size:9px !important;
    line-height:1.15 !important;
  }


  #stranica-artikal
  .pdpv2-quick-list
  dd{
    margin:0 !important;

    font-size:11px !important;
    line-height:1.2 !important;
  }



  /* ----------------------------------------------------------
     WHY PRODUCT
     Keep content, reduce dead vertical space.
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-purpose{
    min-height:0 !important;

    padding:
      9px
      10px !important;
  }


  #stranica-artikal
  .pdpv2-purpose
  ul{
    display:grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:
      5px
      10px;

    margin:
      6px
      0
      0 !important;

    padding:0 !important;

    list-style:none;
  }


  #stranica-artikal
  .pdpv2-purpose
  li{
    margin:0 !important;

    font-size:10.5px !important;
    line-height:1.25 !important;
  }



  /* ----------------------------------------------------------
     REASSURANCE STRIP
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-service-v3{
    min-height:44px !important;

    margin-top:6px !important;
  }


  #stranica-artikal
  .pdpv2-service-v3
  > *{
    min-height:44px !important;

    padding:
      4px
      3px !important;

    font-size:9px !important;
    line-height:1.15 !important;
  }



  /* ----------------------------------------------------------
     TABS
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-info-tabs{
    min-height:34px !important;
  }


  #stranica-artikal
  .pdpv2-info-tabs
  .nav-link{
    padding:
      8px
      10px !important;

    font-size:11.5px !important;
  }



  /* ----------------------------------------------------------
     GUIDANCE RAIL
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-usage-grid{
    grid-auto-columns:
      minmax(
        225px,
        76vw
      ) !important;

    gap:6px !important;
  }


  #stranica-artikal
  .pdpv2-usage-card{
    min-height:72px !important;

    padding:
      8px
      9px !important;
  }


  #stranica-artikal
  .pdpv2-usage-icon{
    width:30px !important;
    height:30px !important;

    min-width:30px !important;
  }


  #stranica-artikal
  .pdpv2-usage-copy
  strong{
    font-size:10.5px !important;
  }


  #stranica-artikal
  .pdpv2-usage-copy
  p{
    margin-top:2px !important;

    font-size:9.5px !important;
    line-height:1.25 !important;
  }



  /* ----------------------------------------------------------
     CHARACTERISTICS
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-overview-specs{
    padding:
      9px
      10px !important;
  }


  #stranica-artikal
  .pdpv2-overview-spec-list{
    gap:0 !important;
  }


  #stranica-artikal
  .pdpv2-overview-spec-list
  > div{
    min-height:31px !important;

    padding:
      5px
      0 !important;

    font-size:10.5px !important;
    line-height:1.2 !important;
  }



  /* ----------------------------------------------------------
     COMPLETE PROCEDURE
     ---------------------------------------------------------- */

  #stranica-artikal
  .pp-complete-job--compact{
    padding:
      9px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-flow{
    gap:
      6px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-step{
    flex:
      0
      0
      150px !important;

    width:
      150px !important;

    min-height:
      182px !important;

    height:
      182px !important;

    border-radius:
      7px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-media{
    min-height:
      102px !important;

    height:
      102px !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-product{
    font-size:
      9.5px !important;

    line-height:
      1.18 !important;
  }


  #stranica-artikal
  .pp-complete-job--compact
  .pp-complete-job-price{
    font-size:
      9.5px !important;
  }



  /* ----------------------------------------------------------
     REVIEWS
     Empty state should not consume half a phone viewport.
     Real review content may naturally expand past this.
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-overview-reviews,
  #stranica-artikal
  .pdpv2-reviews-panel{
    min-height:
      112px !important;
  }


  #stranica-artikal
  .pdpv2-reviews-panel{
    padding:
      9px
      10px !important;
  }



  /* ----------------------------------------------------------
     COMMERCE
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-commerce{
    gap:
      10px !important;
  }


  #stranica-artikal
  .pdpv2-commerce-head{
    margin-bottom:
      6px !important;
  }


  #stranica-artikal
  .pdpv2-commerce-head
  h2{
    font-size:
      14px !important;
  }

}



/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width:389.98px){

  #stranica-artikal
  .pdpv2-quick-list{
    grid-template-columns:
      1fr
      1fr;
  }


  #stranica-artikal
  .pdpv2-purpose
  ul{
    grid-template-columns:
      1fr;
  }


  #stranica-artikal
  .pdpv2-main
  .pdpv2-title{
    font-size:
      26px !important;
  }


  #stranica-artikal
  .pdpv2-usage-grid{
    grid-auto-columns:
      82vw !important;
  }

}


/* ============================================================
   PHASE V2.14.1 — FINAL MOBILE LOWER-SECTION LOCK
   ============================================================ */

@media (max-width:767.98px){


  /* ----------------------------------------------------------
     PROCESS
     Desktop geometry must not reserve ~315px on mobile.
     The cards themselves already form a horizontal swipe rail.
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-overview-process{
    min-height:0 !important;
    height:auto !important;

    align-self:start !important;
  }


  #stranica-artikal
  .pdpv2-overview-process
  .pp-complete-job--compact{
    min-height:0 !important;
    height:auto !important;

    padding:
      9px !important;
  }


  #stranica-artikal
  .pdpv2-overview-process
  .pp-complete-job-flow{
    min-height:0 !important;
    height:auto !important;
  }


  /*
   * Cards remain useful/tappable but should define the section's
   * height rather than inheriting desktop panel geometry.
   */

  #stranica-artikal
  .pdpv2-overview-process
  .pp-complete-job-step{
    min-height:182px !important;
    height:182px !important;
  }



  /* ----------------------------------------------------------
     EMPTY REVIEWS
     Desktop reserves substantial vertical space intentionally.
     Mobile should not do that when there is no review content.
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-overview-reviews.is-empty{
    min-height:0 !important;
    height:auto !important;

    align-self:start !important;
  }


  #stranica-artikal
  .pdpv2-overview-reviews.is-empty
  .pdpv2-reviews-panel{
    min-height:0 !important;
    height:auto !important;

    padding:
      9px
      10px !important;
  }



  /* ----------------------------------------------------------
     LOWER GRID
     Let content determine row height on the stacked layout.
     ---------------------------------------------------------- */

  #stranica-artikal
  .pdpv2-overview-lower{
    grid-auto-rows:auto !important;

    align-items:start !important;
  }


  #stranica-artikal
  .pdpv2-reference-main{
    grid-auto-rows:auto !important;

    align-content:start !important;
  }


  #stranica-artikal
  .pdpv2-reference-grid{
    align-items:start !important;
  }

}


/* ============================================================
   PHASE V2.14.2 — FINAL MOBILE LOWER DENSITY
   Exact fixes from measured component geometry.
   ============================================================ */

@media (max-width:767.98px){


  /* ==========================================================
     COMPLETE PROCEDURE HEADER
     Current measured header: ~84px + 16px margin.
     Cards/flow themselves are already correctly compact.
     ========================================================== */

  #stranica-artikal
  .pdpv2-overview-process
  .pp-complete-job-head{
    min-height:0 !important;
    height:auto !important;

    margin:
      0
      0
      7px !important;

    padding:0 !important;
  }


  /*
   * Desktop kicker is useful visually, but redundant on a phone
   * where this entire panel already sits inside the process section.
   */
  #stranica-artikal
  .pdpv2-overview-process
  .pp-complete-job-kicker{
    display:none !important;
  }


  #stranica-artikal
  .pdpv2-overview-process
  .pp-complete-job-title{
    margin:
      0
      0
      3px !important;

    font-size:
      13px !important;

    line-height:
      1.18 !important;
  }


  #stranica-artikal
  .pdpv2-overview-process
  .pp-complete-job-intro{
    display:-webkit-box;

    margin:0 !important;

    overflow:hidden;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;

    line-clamp:1;

    color:#7f8d9d !important;

    font-size:
      9.5px !important;

    line-height:
      1.25 !important;
  }


  /*
   * Remove the small residual bottom margin from process cards.
   * Horizontal rail spacing is controlled by gap instead.
   */
  #stranica-artikal
  .pdpv2-overview-process
  .pp-complete-job-step{
    margin-bottom:0 !important;
  }


  #stranica-artikal
  .pdpv2-overview-process
  .pp-complete-job-flow{
    padding-bottom:
      2px !important;
  }



  /* ==========================================================
     EMPTY REVIEWS
     Current empty block alone measures ~150px.
     Keep a polished state, but don't spend half a phone screen
     saying that there are no reviews yet.
     ========================================================== */

  #stranica-artikal
  .pdpv2-overview-reviews.is-empty
  .pdpv2-reviews-heading{
    min-height:0 !important;
    height:auto !important;

    margin:
      0
      0
      6px !important;
  }


  #stranica-artikal
  .pdpv2-overview-reviews.is-empty
  .pdpv2-review-empty{
    min-height:
      72px !important;

    height:
      72px !important;

    padding:
      8px
      10px !important;

    margin:0 !important;
  }


  /*
   * Empty-state icon/text should stay centered but compact.
   */
  #stranica-artikal
  .pdpv2-overview-reviews.is-empty
  .pdpv2-review-empty
  i{
    font-size:
      16px !important;

    margin-bottom:
      4px !important;
  }


  #stranica-artikal
  .pdpv2-overview-reviews.is-empty
  .pdpv2-review-empty
  p{
    margin:0 !important;

    font-size:
      9.5px !important;

    line-height:
      1.25 !important;
  }

}


/* ============================================================
   PDP V2.15 — GALLERY VIDEO
   Media layer only. Existing gallery geometry remains unchanged.
   ============================================================ */

#stranica-artikal
.pdpv2-stage-v4
.pdpv2-stage-video{
  position:absolute;

  inset:0;

  z-index:2;

  width:100%;
  height:100%;

  object-fit:contain;

  background:#090d13;
}


#stranica-artikal
.pdpv2-stage-v4
.pdpv2-stage-video[hidden],
#stranica-artikal
.pdpv2-stage-v4
#pp-image[hidden]{
  display:none !important;
}


#stranica-artikal
.pdpv2-stage-v4.is-video
.pdpv2-zoom{
  display:none !important;
}


#stranica-artikal
.pdpv2-thumb{
  position:relative;
  overflow:hidden;
}


#stranica-artikal
.pdpv2-thumb-play{
  position:absolute;

  top:50%;
  left:50%;

  z-index:3;

  display:grid;

  place-items:center;

  width:28px;
  height:28px;

  border:
    1px solid
    rgba(255,255,255,.24);

  border-radius:50%;

  color:#f7f9fc;

  background:
    rgba(6,10,15,.82);

  box-shadow:
    0 5px 14px
    rgba(0,0,0,.32);

  transform:
    translate(
      -50%,
      -50%
    );

  pointer-events:none;
}


#stranica-artikal
.pdpv2-thumb-play i{
  margin-left:2px;

  font-size:10px;
}


@media (max-width:767px){

  #stranica-artikal
  .pdpv2-thumb-play{
    width:25px;
    height:25px;
  }

}


/* ============================================================
   PDP V2.16.3 — RESPONSIVE CATALOGUE AUTHORITY
   Complete cards only. No partial-card peeking.
   ============================================================ */


/* ------------------------------------------------------------
   BASE SHELF BEHAVIOUR
   ------------------------------------------------------------ */

#stranica-artikal
#pdpv2SimilarTrack,
#stranica-artikal
#agdRecentlyViewedTrack{
  grid-auto-flow:column !important;

  gap:12px !important;

  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  margin:0 !important;

  padding:
    2px
    0
    9px !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;

  scroll-snap-type:
    x mandatory !important;

  scroll-padding-inline:
    0 !important;

  overscroll-behavior-inline:
    contain;
}


#stranica-artikal
#pdpv2SimilarTrack
> .pdpv2-commerce-card,
#stranica-artikal
#agdRecentlyViewedTrack
> .agd-rv-card{
  min-width:0 !important;
  max-width:none !important;

  scroll-snap-align:
    start !important;

  scroll-snap-stop:
    always;
}


/* No width-changing arrow behaviour. */

#stranica-artikal
#pdpv2CommerceRails
.pdpv2-commerce-rail-shell,
#stranica-artikal
#pdpv2CommerceRails
.agd-rv-track-shell{
  display:grid !important;

  grid-template-columns:
    42px
    minmax(0,1fr)
    42px !important;

  gap:10px !important;

  align-items:center;

  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}


#stranica-artikal
#pdpv2CommerceRails
.pdpv2-commerce-rail-shell
> .pdpv2-commerce-arrow,
#stranica-artikal
#pdpv2CommerceRails
.agd-rv-track-shell
> .pdpv2-commerce-arrow{
  display:grid !important;

  visibility:visible;

  width:42px !important;
  height:42px !important;

  min-width:42px !important;
}


#stranica-artikal
#pdpv2CommerceRails
.pdpv2-commerce-rail-shell
> .pdpv2-commerce-arrow:disabled,
#stranica-artikal
#pdpv2CommerceRails
.agd-rv-track-shell
> .pdpv2-commerce-arrow:disabled{
  display:grid !important;

  visibility:hidden !important;

  pointer-events:none !important;
}


/* ------------------------------------------------------------
   ULTRAWIDE / LARGE DESKTOP
   4 Similar + 3 Recent
   ------------------------------------------------------------ */

@media (min-width:1800px){

  #stranica-artikal
  #pdpv2CommerceRails{
    grid-template-columns:
      minmax(0,1.18fr)
      minmax(0,.82fr) !important;

    column-gap:24px !important;
    row-gap:0 !important;

    align-items:start;
  }


  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-commerce-panel,
  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-commerce-recent-slot{
    grid-column:auto !important;

    width:100% !important;
    min-width:0 !important;
  }


  #stranica-artikal
  #pdpv2SimilarTrack{
    grid-auto-columns:
      calc(
        (
          100%
          -
          36px
        )
        /
        4
      ) !important;
  }


  #stranica-artikal
  #agdRecentlyViewedTrack{
    grid-auto-columns:
      calc(
        (
          100%
          -
          24px
        )
        /
        3
      ) !important;
  }


  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-commerce-recent-slot:has(
    #agdRecentlyViewed[hidden]
  ){
    display:none !important;
  }


  #stranica-artikal
  #pdpv2CommerceRails:has(
    #agdRecentlyViewed[hidden]
  ){
    grid-template-columns:
      minmax(0,1fr) !important;
  }

}


/* ------------------------------------------------------------
   1280–1799
   One shelf per row.
   Similar = 4 exact
   Recent = 5 exact
   ------------------------------------------------------------ */

@media (min-width:1280px) and (max-width:1799.98px){

  #stranica-artikal
  #pdpv2CommerceRails{
    grid-template-columns:
      minmax(0,1fr) !important;

    gap:24px !important;
  }


  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-commerce-panel,
  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-commerce-recent-slot{
    grid-column:
      1 / -1 !important;
  }


  #stranica-artikal
  #pdpv2SimilarTrack{
    grid-auto-columns:
      calc(
        (
          100%
          -
          36px
        )
        /
        4
      ) !important;
  }


  #stranica-artikal
  #agdRecentlyViewedTrack{
    grid-auto-columns:
      calc(
        (
          100%
          -
          48px
        )
        /
        5
      ) !important;
  }

}


/* ------------------------------------------------------------
   992–1279
   Similar = 3 exact
   Recent = 4 exact
   ------------------------------------------------------------ */

@media (min-width:992px) and (max-width:1279.98px){

  #stranica-artikal
  #pdpv2CommerceRails{
    grid-template-columns:
      minmax(0,1fr) !important;

    gap:22px !important;
  }


  #stranica-artikal
  #pdpv2SimilarTrack{
    grid-auto-columns:
      calc(
        (
          100%
          -
          24px
        )
        /
        3
      ) !important;
  }


  #stranica-artikal
  #agdRecentlyViewedTrack{
    grid-auto-columns:
      calc(
        (
          100%
          -
          36px
        )
        /
        4
      ) !important;
  }

}


/* ------------------------------------------------------------
   768–991
   Similar = 2 exact
   Recent = 3 exact
   ------------------------------------------------------------ */

@media (min-width:768px) and (max-width:991.98px){

  #stranica-artikal
  #pdpv2CommerceRails{
    grid-template-columns:
      minmax(0,1fr) !important;

    gap:22px !important;
  }


  #stranica-artikal
  #pdpv2SimilarTrack{
    grid-auto-columns:
      calc(
        (
          100%
          -
          12px
        )
        /
        2
      ) !important;
  }


  #stranica-artikal
  #agdRecentlyViewedTrack{
    grid-auto-columns:
      calc(
        (
          100%
          -
          24px
        )
        /
        3
      ) !important;
  }

}


/* ------------------------------------------------------------
   576–767
   Two complete cards.
   Touch first, no arrows.
   ------------------------------------------------------------ */

@media (min-width:576px) and (max-width:767.98px){

  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-commerce-rail-shell,
  #stranica-artikal
  #pdpv2CommerceRails
  .agd-rv-track-shell{
    display:block !important;
  }


  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-commerce-arrow{
    display:none !important;
  }


  #stranica-artikal
  #pdpv2SimilarTrack,
  #stranica-artikal
  #agdRecentlyViewedTrack{
    grid-auto-columns:
      calc(
        (
          100%
          -
          12px
        )
        /
        2
      ) !important;
  }

}


/* ------------------------------------------------------------
   PHONE
   Exactly one complete product per swipe.
   ------------------------------------------------------------ */

@media (max-width:575.98px){

  #stranica-artikal
  #pdpv2CommerceRails{
    gap:20px !important;
  }


  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-commerce-rail-shell,
  #stranica-artikal
  #pdpv2CommerceRails
  .agd-rv-track-shell{
    display:block !important;
  }


  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-commerce-arrow{
    display:none !important;
  }


  #stranica-artikal
  #pdpv2SimilarTrack,
  #stranica-artikal
  #agdRecentlyViewedTrack{
    grid-auto-columns:
      100% !important;

    gap:10px !important;
  }


  /*
   * A full-width card should not become excessively tall
   * merely because its column is wider.
   */

  #stranica-artikal
  .pdpv2-commerce-similar
  .pdpv2-commerce-media{
    height:180px !important;

    min-height:180px !important;
  }


  #stranica-artikal
  #agdRecentlyViewed
  .agd-rv-image{
    height:145px !important;

    min-height:145px !important;
  }

}


/* ============================================================
   CHARACTERISTICS — RESPONSIVE CONTENT SAFETY
   ============================================================ */

#stranica-artikal
.pdpv2-overview-specs{
  min-width:0;

  container-type:
    inline-size;
}


#stranica-artikal
.pdpv2-overview-spec-list,
#stranica-artikal
.pdpv2-overview-spec-list
> div,
#stranica-artikal
.pdpv2-overview-spec-list
dt,
#stranica-artikal
.pdpv2-overview-spec-list
dd{
  min-width:0;
}


#stranica-artikal
.pdpv2-overview-spec-list
dd{
  overflow-wrap:
    anywhere;

  word-break:
    normal;
}


/*
 * The overall PDP may still be desktop-sized while the
 * characteristics card itself is narrow.
 */

@container (max-width:460px){

  #stranica-artikal
  .pdpv2-overview-spec-list{
    grid-template-columns:
      minmax(0,1fr) !important;
  }


  #stranica-artikal
  .pdpv2-overview-spec-list
  > div{
    grid-template-columns:
      minmax(105px,.82fr)
      minmax(0,1.18fr) !important;

    column-gap:10px;

    align-items:start;
  }

}


@container (max-width:320px){

  #stranica-artikal
  .pdpv2-overview-spec-list
  > div{
    grid-template-columns:
      minmax(0,1fr) !important;

    row-gap:2px;
  }

}


/*
 * Fallback + deliberate desktop/tablet policy:
 * at these viewport widths the specification panel is too
 * narrow for two side-by-side specification items even though
 * the entire PDP is still "desktop".
 */

@media (max-width:1599.98px){

  #stranica-artikal
  .pdpv2-overview-specs{
    height:auto !important;
  }


  #stranica-artikal
  .pdpv2-overview-spec-list{
    grid-template-columns:
      minmax(0,1fr) !important;
  }


  #stranica-artikal
  .pdpv2-overview-spec-list
  > div{
    min-height:auto !important;
  }

}


/* ============================================================
   PDP V2.16.4 — ULTRAWIDE DISCOVERY SHELF ALIGNMENT
   Similar and Recently Viewed share one visual catalogue band.
   ============================================================ */

@media (min-width:1800px){

  /* Both shelf columns start and finish on the same rhythm. */

  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-commerce-panel,
  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-commerce-recent-slot{
    display:flex !important;

    flex-direction:column !important;

    min-width:0 !important;
    min-height:0 !important;
  }


  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-commerce-head,
  #stranica-artikal
  #pdpv2CommerceRails
  .agd-rv-head{
    min-height:25px !important;

    margin-bottom:
      12px !important;
  }


  /* Tracks themselves align vertically. */

  #stranica-artikal
  #pdpv2SimilarTrack,
  #stranica-artikal
  #agdRecentlyViewedTrack{
    align-items:stretch !important;
  }


  /* Both product types use the same total card height. */

  #stranica-artikal
  #pdpv2SimilarTrack
  > .pdpv2-commerce-card,
  #stranica-artikal
  #agdRecentlyViewedTrack
  > .agd-rv-card{
    height:315px !important;

    min-height:315px !important;
    max-height:315px !important;

    box-sizing:border-box;
  }


  /* Same product-image stage height as well. */

  #stranica-artikal
  .pdpv2-commerce-similar
  .pdpv2-commerce-media,
  #stranica-artikal
  #agdRecentlyViewed
  .agd-rv-image{
    height:185px !important;

    min-height:185px !important;
    max-height:185px !important;
  }


  /*
   * Recent remains passive:
   * same merchandise presentation,
   * no cart CTA added.
   */

  #stranica-artikal
  #agdRecentlyViewed
  .agd-rv-body{
    min-height:129px !important;

    display:flex !important;

    flex-direction:column !important;
  }

}


/* ============================================================
   PDP V2.16.5 — DISCOVERY CONTROLS / CLICKABILITY
   ============================================================ */


/* Headings become catalogue toolbars. */

#stranica-artikal
#pdpv2CommerceRails
.pdpv2-commerce-head,
#stranica-artikal
#pdpv2CommerceRails
.agd-rv-head{
  min-height:38px !important;

  display:flex !important;

  align-items:center !important;
  justify-content:space-between !important;

  gap:12px !important;

  margin-bottom:
    10px !important;
}


/* Once arrows move into the header, rail shells no longer
   reserve left/right arrow columns. */

#stranica-artikal
#pdpv2CommerceRails
.pdpv2-commerce-rail-shell,
#stranica-artikal
#pdpv2CommerceRails
.agd-rv-track-shell{
  display:block !important;

  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;

  grid-template-columns:
    none !important;
}


/* Header navigation. */

#stranica-artikal
#pdpv2CommerceRails
.pdpv2-rail-controls{
  flex:
    0
    0
    auto;

  display:flex;

  align-items:center;

  gap:6px;

  margin-left:auto;
}


#stranica-artikal
#pdpv2CommerceRails
.pdpv2-rail-status{
  min-width:
    58px;

  display:block;

  color:#8d9aab;

  font-size:11px;
  font-weight:800;

  line-height:1;

  text-align:right;

  white-space:nowrap;
}


/* Override old mobile arrow hiding.
   These buttons now belong to the heading. */

#stranica-artikal
#pdpv2CommerceRails
.pdpv2-rail-controls
.pdpv2-commerce-arrow{
  width:34px !important;
  height:34px !important;

  min-width:34px !important;

  display:grid !important;

  place-items:center !important;

  visibility:visible !important;

  margin:0 !important;

  border:
    1px solid
    rgba(139,163,192,.19) !important;

  border-radius:
    9px !important;

  color:#d6dee8 !important;

  background:
    linear-gradient(
      145deg,
      #16212c,
      #0e1720
    ) !important;

  opacity:1 !important;
}


#stranica-artikal
#pdpv2CommerceRails
.pdpv2-rail-controls
.pdpv2-commerce-arrow:disabled{
  display:grid !important;

  visibility:visible !important;

  opacity:.30 !important;

  cursor:default !important;
}


#stranica-artikal
#pdpv2CommerceRails
.pdpv2-rail-controls
.pdpv2-commerce-arrow:not(:disabled):hover{
  border-color:
    rgba(255,183,31,.38) !important;

  color:#ffbd22 !important;
}


/* Complete merchandise cards are intentional click targets. */

#stranica-artikal
.is-card-link{
  cursor:pointer;
}


#stranica-artikal
.is-card-link:focus-visible{
  outline:
    2px solid
    rgba(255,183,31,.90);

  outline-offset:
    2px;
}


#stranica-artikal
.pdpv2-commerce-card.is-card-link:hover,
#stranica-artikal
.pp-complete-job-step.is-card-link:hover{
  border-color:
    rgba(255,183,31,.32) !important;
}


/* Phone toolbar:
   title remains readable; navigation clearly says more exists. */

@media (max-width:575.98px){

  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-commerce-head,
  #stranica-artikal
  #pdpv2CommerceRails
  .agd-rv-head{
    min-height:
      36px !important;

    gap:
      8px !important;
  }


  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-commerce-head h2,
  #stranica-artikal
  #pdpv2CommerceRails
  .agd-rv-title{
    min-width:0;

    font-size:
      17px !important;
  }


  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-rail-status{
    min-width:
      38px;

    font-size:
      10px;
  }


  #stranica-artikal
  #pdpv2CommerceRails
  .pdpv2-rail-controls
  .pdpv2-commerce-arrow{
    width:
      32px !important;

    height:
      32px !important;

    min-width:
      32px !important;
  }

}


/* ============================================================
   PDP V2.17 — PUBLIC REVIEW SUBMISSION
   ============================================================ */

.pdpv2-review-write-cta{
  width:100%;

  min-height:36px;

  display:flex;

  align-items:center;
  justify-content:center;

  gap:7px;

  margin-top:10px;

  border:
    1px solid
    rgba(139,163,192,.18);

  border-radius:9px;

  color:#dbe3ec;

  background:
    #111c27;

  font-size:11px;
  font-weight:850;
}


.pdpv2-review-write-cta:hover{
  border-color:
    rgba(255,183,31,.32);

  color:#ffbf20;
}


.pdpv2-review-submit-card{
  margin-top:18px;

  padding:18px;

  border:
    1px solid
    rgba(126,151,178,.16);

  border-radius:13px;

  background:
    linear-gradient(
      180deg,
      rgba(17,28,40,.98),
      rgba(9,18,27,.99)
    );
}


.pdpv2-review-submit-head{
  display:flex;

  align-items:flex-start;

  gap:12px;

  margin-bottom:18px;
}


.pdpv2-review-submit-icon{
  flex:0 0 38px;

  width:38px;
  height:38px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(255,183,31,.20);

  border-radius:10px;

  color:#ffbd22;

  background:
    rgba(255,183,31,.055);
}


.pdpv2-review-submit-kicker{
  display:block;

  margin-bottom:3px;

  color:#8190a3;

  font-size:9.5px;
  font-weight:900;

  letter-spacing:.08em;

  text-transform:uppercase;
}


.pdpv2-review-submit-head h3{
  margin:0;

  color:#f5f7fa;

  font-size:18px;
  font-weight:900;

  line-height:1.15;
}


.pdpv2-review-submit-head p{
  margin:
    5px
    0
    0;

  color:#8d9bad;

  font-size:11.5px;

  line-height:1.45;
}


.pdpv2-review-form{
  display:grid;

  gap:15px;
}


.pdpv2-review-rating-field{
  margin:0;
  padding:0;

  border:0;
}


.pdpv2-review-rating-field legend,
.pdpv2-review-field > span{
  display:block;

  margin-bottom:7px;

  color:#aab5c4;

  font-size:11px;
  font-weight:850;
}


.pdpv2-review-rating-input{
  display:flex;

  align-items:center;

  gap:3px;
}


.pdpv2-review-rating-input label{
  display:block;

  margin:0;

  color:#455365;

  font-size:28px;

  line-height:1;

  cursor:pointer;

  transition:
    color .12s ease,
    transform .12s ease;
}


.pdpv2-review-rating-input label:hover{
  transform:
    translateY(-1px);
}


.pdpv2-review-rating-input label.is-selected{
  color:#ffb71f;
}


.pdpv2-review-form-grid{
  display:grid;

  grid-template-columns:
    minmax(180px,.35fr)
    minmax(0,.65fr);

  gap:12px;
}


.pdpv2-review-field{
  display:block;

  margin:0;
}


.pdpv2-review-field input,
.pdpv2-review-field textarea{
  width:100%;

  border:
    1px solid
    rgba(139,163,192,.18);

  border-radius:9px;

  color:#eef3f8;

  background:#0c1620;

  font:inherit;

  outline:0;
}


.pdpv2-review-field input{
  height:42px;

  padding:
    0
    12px;
}


.pdpv2-review-field textarea{
  min-height:112px;

  resize:vertical;

  padding:
    11px
    12px;

  line-height:1.5;
}


.pdpv2-review-field input:focus,
.pdpv2-review-field textarea:focus{
  border-color:
    rgba(255,183,31,.48);

  box-shadow:
    0
    0
    0
    2px
    rgba(255,183,31,.07);
}


.pdpv2-review-honeypot{
  position:absolute !important;

  left:-10000px !important;

  width:1px !important;
  height:1px !important;

  overflow:hidden !important;
}


.pdpv2-review-form-footer{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:14px;
}


.pdpv2-review-form-footer p{
  margin:0;

  color:#758497;

  font-size:10.5px;

  line-height:1.4;
}


.pdpv2-review-submit-button{
  flex:0 0 auto;

  min-height:42px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:8px;

  padding:
    0
    16px;

  border:
    1px solid
    #ffc02b;

  border-radius:9px;

  color:#101720;

  background:
    linear-gradient(
      180deg,
      #ffc42c,
      #f2a900
    );

  font-size:12px;
  font-weight:950;
}


.pdpv2-review-submit-button:disabled{
  opacity:.55;

  cursor:wait;
}


.pdpv2-review-form-error{
  padding:
    10px
    12px;

  border:
    1px solid
    rgba(224,91,91,.28);

  border-radius:9px;

  color:#f0b2b2;

  background:
    rgba(164,42,42,.10);

  font-size:11.5px;
}


.pdpv2-review-submit-success{
  display:flex;

  align-items:flex-start;

  gap:10px;

  padding:
    15px;

  border:
    1px solid
    rgba(80,188,130,.25);

  border-radius:10px;

  color:#bde5cf;

  background:
    rgba(49,151,96,.09);
}


.pdpv2-review-submit-success[hidden],
.pdpv2-review-form-error[hidden],
.pdpv2-review-form[hidden]{
  display:none !important;
}


.pdpv2-review-submit-success strong{
  display:block;

  margin-bottom:3px;

  color:#d9f3e4;
}


.pdpv2-review-submit-success p{
  margin:0;

  color:#9ecab1;

  font-size:11.5px;
}


@media (max-width:767.98px){

  .pdpv2-review-submit-card{
    padding:14px;
  }


  .pdpv2-review-form-grid{
    grid-template-columns:
      minmax(0,1fr);
  }


  .pdpv2-review-form-footer{
    align-items:stretch;

    flex-direction:column;
  }


  .pdpv2-review-submit-button{
    width:100%;
  }

}


/* ============================================================
   PDP V2.17.1 — REVIEW MODAL
   ============================================================ */

.pdpv2-review-modal
.modal-dialog{
  width:
    min(
      calc(100% - 24px),
      620px
    );

  max-width:
    620px;

  margin-inline:
    auto;
}


.pdpv2-review-modal
.modal-content{
  overflow:hidden;

  border:
    1px solid
    rgba(139,163,192,.19);

  border-radius:
    16px;

  color:#eef3f8;

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(31,87,139,.13),
      transparent 35%
    ),
    linear-gradient(
      150deg,
      #121e2a,
      #09131c
    );

  box-shadow:
    0
    32px
    90px
    rgba(0,0,0,.55);
}


.pdpv2-review-modal
.modal-header{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:16px;

  padding:
    20px
    22px
    17px;

  border-bottom:
    1px solid
    rgba(137,159,187,.12);
}


.pdpv2-review-modal
.modal-body{
  padding:
    20px
    22px
    22px;
}


.pdpv2-review-modal-heading{
  min-width:0;
}


.pdpv2-review-modal-kicker{
  display:block;

  margin-bottom:4px;

  color:#ffb71f;

  font-size:9.5px;
  font-weight:900;

  letter-spacing:.09em;

  text-transform:uppercase;
}


.pdpv2-review-modal
.modal-title{
  margin:0;

  color:#f6f8fb;

  font-size:
    clamp(
      21px,
      3vw,
      27px
    );

  font-weight:950;

  letter-spacing:-.025em;

  line-height:1.1;
}


.pdpv2-review-modal-heading p{
  margin:
    6px
    0
    0;

  color:#8c9bad;

  font-size:12px;
  font-weight:700;
}


.pdpv2-review-modal-close{
  flex:0 0 38px;

  width:38px;
  height:38px;

  display:grid;

  place-items:center;

  margin:0;
  padding:0;

  border:
    1px solid
    rgba(141,163,190,.18);

  border-radius:10px;

  color:#aeb9c7;

  background:#111b25;
}


.pdpv2-review-modal-close:hover{
  color:#fff;

  border-color:
    rgba(207,219,232,.30);
}


.pdpv2-review-modal
.pdpv2-review-form{
  gap:17px;
}


.pdpv2-review-modal
.pdpv2-review-rating-field{
  padding:
    13px
    14px;

  border:
    1px solid
    rgba(137,160,189,.13);

  border-radius:10px;

  background:
    rgba(7,15,23,.32);
}


.pdpv2-review-modal
.pdpv2-review-rating-input{
  gap:5px;
}


.pdpv2-review-modal
.pdpv2-review-rating-input
label{
  font-size:32px;
}


.pdpv2-review-modal
.pdpv2-review-submit-button{
  width:100%;

  min-height:46px;

  margin-top:1px;
}


.pdpv2-review-form-note{
  display:flex;

  align-items:flex-start;

  gap:8px;

  color:#758497;

  font-size:10.5px;

  line-height:1.45;
}


.pdpv2-review-form-note i{
  margin-top:2px;

  color:#8b99aa;
}


.pdpv2-review-tab-action{
  display:flex;

  justify-content:flex-end;

  margin-top:16px;
}


.pdpv2-review-tab-action
.pdpv2-review-write-cta{
  width:auto;

  min-width:170px;

  margin:0;

  padding-inline:15px;
}


.pdpv2-review-submit-success{
  min-height:150px;

  align-items:center;

  justify-content:center;

  padding:
    24px;

  text-align:left;
}


.pdpv2-review-submit-success
> span{
  flex:0 0 44px;

  width:44px;
  height:44px;

  display:grid;

  place-items:center;

  border-radius:50%;

  color:#88dfaf;

  background:
    rgba(67,173,115,.12);

  font-size:18px;
}


@media (max-width:575.98px){

  .pdpv2-review-modal
  .modal-dialog{
    width:
      calc(100% - 16px);

    margin:
      8px
      auto;
  }


  .pdpv2-review-modal
  .modal-header{
    padding:
      17px
      16px
      14px;
  }


  .pdpv2-review-modal
  .modal-body{
    padding:
      16px;
  }


  .pdpv2-review-modal
  .pdpv2-review-rating-input
  label{
    font-size:30px;
  }


  .pdpv2-review-tab-action
  .pdpv2-review-write-cta{
    width:100%;
  }

}


/* ============================================================
   PDP V2 — LONG-FORM PRODUCT DETAILS
   The Detalji tab is the reading layer of the PDP.
   It deliberately differs from compact overview/spec cards.
   ============================================================ */

#sadrzaj-detalji .pdpv2-detail-panel{
  min-height:0;

  padding:
    clamp(
      1.4rem,
      2.4vw,
      2.2rem
    );

  border:
    1px solid
    rgba(255,255,255,.08);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.024),
      rgba(255,255,255,.008)
    ),
    #171b23;
}


#sadrzaj-detalji .pdpv2-detail-heading,
#sadrzaj-detalji .pdpv2-detail-text{
  max-width:920px;
}


#sadrzaj-detalji .pdpv2-detail-heading{
  margin-bottom:1.15rem;
}


#sadrzaj-detalji .pdpv2-detail-heading .pdpv2-eyebrow{
  display:block;

  margin-bottom:.4rem;
}


#sadrzaj-detalji .pdpv2-detail-heading h3{
  margin:0;

  font-size:
    clamp(
      1.15rem,
      1.8vw,
      1.45rem
    );

  line-height:1.3;
}


#sadrzaj-detalji .pdpv2-detail-text{
  color:#c5cfdb;

  font-size:1rem;

  line-height:1.78;

  white-space:pre-line;
}


/* Keep long product copy readable on phones as well. */
@media (max-width:767.98px){

  #sadrzaj-detalji .pdpv2-detail-panel{
    padding:
      1.15rem
      1.1rem;
  }


  #sadrzaj-detalji .pdpv2-detail-heading{
    margin-bottom:.9rem;
  }


  #sadrzaj-detalji .pdpv2-detail-heading h3{
    font-size:1.12rem;
  }


  #sadrzaj-detalji .pdpv2-detail-text{
    color:#c4ceda;

    font-size:.94rem;

    line-height:1.72;
  }

}


/* ============================================================
   PDP V2 — SUPPLEMENTAL PRODUCT INFORMATION
   Product-specific benefits/facts from legacy Uputstvo.sadrzaj.
   ============================================================ */

#sadrzaj-detalji .pdpv2-detail-key-info{
  max-width:920px;

  margin-top:1.7rem;
  padding-top:1.45rem;

  border-top:
    1px solid
    rgba(255,255,255,.08);
}


#sadrzaj-detalji .pdpv2-detail-key-info h4{
  margin:
    0
    0
    .95rem;

  color:#f2f5f8;

  font-size:.98rem;
  font-weight:800;
}


#sadrzaj-detalji .pdpv2-detail-key-info ul{
  display:grid;

  gap:.72rem;

  margin:0;
  padding:0;

  list-style:none;
}


#sadrzaj-detalji .pdpv2-detail-key-info li{
  display:grid;

  grid-template-columns:
    20px
    minmax(0,1fr);

  gap:.55rem;

  align-items:start;

  color:#b8c3d0;

  font-size:.91rem;
  line-height:1.58;
}


#sadrzaj-detalji .pdpv2-detail-key-icon{
  color:#ffbf2f;

  font-size:.8rem;
  font-weight:900;
  line-height:1.75;
}


@media (max-width:767.98px){

  #sadrzaj-detalji .pdpv2-detail-key-info{
    margin-top:1.35rem;
    padding-top:1.2rem;
  }


  #sadrzaj-detalji .pdpv2-detail-key-info li{
    font-size:.88rem;
    line-height:1.55;
  }

}


/* ============================================================
   PDP V2 — TAB SPACE BALANCE
   Keep desktop tabs visually stable without imposing a fixed
   height. Long content is always free to expand naturally.
   ============================================================ */

/* ============================================================
   PDP V2 — DETALJI WIDE-SCREEN READING LAYOUT

   Desktop:
     narrative | key information

   Tablet/mobile:
     narrative
     key information
   ============================================================ */

@media (min-width:1100px){

  #sadrzaj-detalji .pdpv2-detail-panel{
    display:grid;

    grid-template-columns:
      minmax(0,1.35fr)
      minmax(300px,.65fr);

    column-gap:
      clamp(
        2rem,
        4vw,
        4.5rem
      );

    row-gap:1.2rem;

    align-items:start;
  }


  #sadrzaj-detalji .pdpv2-detail-heading{
    grid-column:1 / -1;

    max-width:none;

    margin-bottom:.2rem;
  }


  #sadrzaj-detalji .pdpv2-detail-text{
    grid-column:1;

    max-width:820px;

    margin:0;
  }


  #sadrzaj-detalji .pdpv2-detail-key-info{
    grid-column:2;

    max-width:none;

    margin:0;
    padding:
      .1rem
      0
      .1rem
      1.6rem;

    border-top:0;

    border-left:
      1px solid
      rgba(255,191,47,.22);
  }


  /* Products without supplemental information retain a
     normal full-width reading column. */
  #sadrzaj-detalji .pdpv2-detail-text:last-child{
    grid-column:1 / -1;

    max-width:920px;
  }

}


/* Restore natural stacked reading flow below wide desktop. */
@media (max-width:1099.98px){

  #sadrzaj-detalji .pdpv2-detail-panel{
    display:block;
  }


  #sadrzaj-detalji .pdpv2-detail-key-info{
    margin-top:1.5rem;
    padding-top:1.3rem;

    border-left:0;

    border-top:
      1px solid
      rgba(255,255,255,.08);
  }

}


/* Phones should never inherit artificial tab height. */
@media (max-width:767.98px){

  .pdpv2-info-content{
    min-height:0;
  }

}


/* ============================================================
   PDP V2 — PRIMARY DISCOVERY COLLECTION
   Secondary route from PDP into the canonical SEO/shop collection.
   ============================================================ */

#stranica-artikal
.pdpv2-collection-cta{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:14px;

  align-items:center;

  min-width:0;

  margin-top:10px;

  padding:
    13px
    14px;

  border:
    1px solid
    rgba(126,151,178,.16);

  border-left-color:
    rgba(255,191,47,.55);

  border-radius:10px;

  background:
    linear-gradient(
      180deg,
      rgba(16,26,36,.98),
      rgba(8,17,26,.99)
    );

  box-shadow:
    inset
    0
    1px
    rgba(255,255,255,.018);
}


#stranica-artikal
.pdpv2-collection-cta.is-only{
  margin-top:0;
}


#stranica-artikal
.pdpv2-collection-cta-copy{
  min-width:0;
}


#stranica-artikal
.pdpv2-collection-cta-kicker{
  display:block;

  margin-bottom:3px;

  color:#ffbf2f;

  font-size:9px;
  font-weight:800;

  letter-spacing:.09em;

  line-height:1.2;

  text-transform:uppercase;
}


#stranica-artikal
.pdpv2-collection-cta h3{
  margin:0;

  color:#f2f5f8;

  font-size:14px;
  font-weight:800;

  line-height:1.25;
}


#stranica-artikal
.pdpv2-collection-cta p{
  margin:
    4px
    0
    0;

  color:#8f9dac;

  font-size:10.5px;

  line-height:1.4;
}


#stranica-artikal
.pdpv2-collection-cta-link{
  display:inline-flex;

  gap:7px;

  align-items:center;
  justify-content:center;

  min-height:34px;

  padding:
    7px
    11px;

  border:
    1px solid
    rgba(255,191,47,.28);

  border-radius:8px;

  background:
    rgba(255,191,47,.07);

  color:#ffd166;

  font-size:10.5px;
  font-weight:800;

  line-height:1.2;

  text-decoration:none;

  white-space:nowrap;
}


#stranica-artikal
.pdpv2-collection-cta-link:hover,
#stranica-artikal
.pdpv2-collection-cta-link:focus-visible{
  border-color:
    rgba(255,191,47,.55);

  background:
    rgba(255,191,47,.12);

  color:#ffe09a;

  text-decoration:none;
}


#stranica-artikal
.pdpv2-collection-cta-link i{
  font-size:9px;
}


@media (max-width:575.98px){

  #stranica-artikal
  .pdpv2-collection-cta{
    grid-template-columns:
      minmax(0,1fr);

    gap:9px;

    padding:
      10px
      11px;
  }


  #stranica-artikal
  .pdpv2-collection-cta-link{
    justify-self:start;
  }

}


/* PDP V2 — no workflow and no discovery CTA.
   Do not reserve an empty desktop process column. */

#stranica-artikal
.pdpv2-overview-lower--solo-specs{
  grid-template-columns:
    minmax(0,1fr)
    !important;
}

/* ============================================================
   PDP V2.19 — CLEAN MOBILE PROCESS
   One full card, visible explanation, compact navigation.
   ============================================================ */

#stranica-artikal
.ppcj-mobile{
  display:none;
}


@media (max-width:767.98px){

  /* Original desktop/tablet main flow stays untouched,
     but is hidden when the dedicated phone renderer exists. */

  #stranica-artikal
  .pdpv2-overview-process
  .pp-complete-job--compact
  > .pp-complete-job-flow{
    display:none !important;
  }


  #stranica-artikal
  .ppcj-mobile{
    display:block;

    min-width:0;

    margin-top:7px;
  }


  /* Process heading */

  #stranica-artikal
  .pdpv2-overview-process
  .pp-complete-job-title{
    font-size:15px !important;
    line-height:1.22 !important;
  }


  #stranica-artikal
  .pdpv2-overview-process
  .pp-complete-job-intro{
    display:block !important;

    margin-top:4px !important;

    overflow:visible !important;

    -webkit-line-clamp:unset !important;
    line-clamp:unset !important;

    color:#9da9b6 !important;

    font-size:11.5px !important;
    line-height:1.42 !important;
  }


  /* One whole slide */

  #stranica-artikal
  .ppcj-mobile-track{
    display:grid;

    grid-auto-flow:column;
    grid-auto-columns:100%;

    gap:8px;

    width:100%;

    min-width:0;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

    overscroll-behavior-inline:contain;

    -webkit-overflow-scrolling:touch;
  }


  #stranica-artikal
  .ppcj-mobile-track::-webkit-scrollbar{
    display:none;
  }


  /* Flatter card: the outer process panel already provides framing. */

  #stranica-artikal
  .ppcj-mobile-card{
    display:grid;

    grid-template-columns:
      98px
      minmax(0,1fr);

    min-width:0;

    overflow:hidden;

    border:
      1px solid
      rgba(125,150,176,.12);

    border-radius:9px;

    background:
      rgba(7,16,25,.54);

    box-shadow:none;

    scroll-snap-align:start;
    scroll-snap-stop:always;
  }


  #stranica-artikal
  .ppcj-mobile-card.is-current{
    border-color:
      rgba(255,191,47,.38);

    background:
      linear-gradient(
        90deg,
        rgba(255,191,47,.035),
        rgba(7,16,25,.54) 42%
      );
  }


  /* Image */

  #stranica-artikal
  .ppcj-mobile-media{
    position:relative;

    min-height:150px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:
      10px
      8px;

    border-right:
      1px solid
      rgba(255,255,255,.05);

    background:
      rgba(5,14,22,.56);
  }


  #stranica-artikal
  .ppcj-mobile-media img{
    display:block;

    width:auto;
    max-width:88%;

    height:auto;
    max-height:126px;

    object-fit:contain;
  }


  #stranica-artikal
  .ppcj-mobile-number{
    position:absolute;

    top:7px;
    left:7px;

    width:22px;
    height:22px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:#ffbf2f;

    color:#101820;

    font-size:10px;
    font-weight:900;

    line-height:1;
  }


  /* Copy */

  #stranica-artikal
  .ppcj-mobile-copy{
    min-width:0;

    display:flex;

    flex-direction:column;

    padding:
      10px
      11px;
  }


  #stranica-artikal
  .ppcj-mobile-meta{
    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:
      4px
      6px;

    margin-bottom:5px;
  }


  #stranica-artikal
  .ppcj-mobile-role{
    color:#8d9aa8;

    font-size:9px;
    font-weight:850;

    letter-spacing:.05em;

    line-height:1.2;

    text-transform:uppercase;
  }


  #stranica-artikal
  .ppcj-mobile-current{
    padding:
      2px
      5px;

    border:
      1px solid
      rgba(255,191,47,.26);

    border-radius:999px;

    color:#ffd26a;

    background:
      rgba(255,191,47,.055);

    font-size:7.8px;
    font-weight:850;

    line-height:1.15;

    text-transform:uppercase;
  }


  #stranica-artikal
  .ppcj-mobile-product{
    display:block;

    max-width:100%;

    color:#f3f6f9;

    font-size:14px;
    font-weight:850;

    line-height:1.25;

    text-decoration:none;

    overflow-wrap:anywhere;
  }


  #stranica-artikal
  a.ppcj-mobile-product:hover,
  #stranica-artikal
  a.ppcj-mobile-product:focus-visible{
    color:#ffd269;
  }


  /* This is useful content — always visible. */

  #stranica-artikal
  .ppcj-mobile-reason{
    display:-webkit-box;

    margin:
      6px
      0
      0;

    overflow:hidden;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;

    color:#a8b3bf;

    font-size:11px;

    line-height:1.4;
  }


  /* Price + action share one row instead of creating extra height. */

  #stranica-artikal
  .ppcj-mobile-card-footer{
    width:100%;

    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:8px;

    margin-top:auto;

    padding-top:8px;
  }


  #stranica-artikal
  .ppcj-mobile-price{
    color:#fff0c7;

    font-size:12.5px;
    font-weight:900;

    line-height:1.2;
  }


  #stranica-artikal
  .ppcj-mobile-link{
    display:inline-flex;

    align-items:center;

    gap:5px;

    color:#ffbf2f;

    font-size:10.5px;
    font-weight:850;

    line-height:1.2;

    text-decoration:none;

    white-space:nowrap;
  }


  /* One compact carousel footer */

  #stranica-artikal
  .ppcj-mobile-nav{
    display:grid;

    grid-template-columns:
      auto
      minmax(0,1fr)
      auto;

    align-items:center;

    gap:10px;

    margin-top:7px;
  }


  #stranica-artikal
  .ppcj-mobile-status{
    min-width:27px;

    color:#9ca8b5;

    font-size:10.5px;
    font-weight:800;

    line-height:1;
  }


  #stranica-artikal
  .ppcj-mobile-dots{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:5px;

    margin:0;
  }


  #stranica-artikal
  .ppcj-mobile-dot{
    width:6px;
    height:6px;

    padding:0;

    border:0;

    border-radius:999px;

    background:
      rgba(153,169,184,.30);
  }


  #stranica-artikal
  .ppcj-mobile-dot.is-active{
    width:17px;

    background:#ffbf2f;
  }


  #stranica-artikal
  .ppcj-mobile-controls{
    display:flex;

    gap:5px;
  }


  #stranica-artikal
  .ppcj-mobile-control{
    width:30px;
    height:30px;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:0;

    border:
      1px solid
      rgba(255,191,47,.22);

    border-radius:7px;

    background:
      rgba(255,191,47,.045);

    color:#ffbf2f;

    font-size:10px;
  }


  #stranica-artikal
  .ppcj-mobile-control:disabled{
    opacity:.28;
  }

}


@media (max-width:374.98px){

  #stranica-artikal
  .ppcj-mobile-card{
    grid-template-columns:
      88px
      minmax(0,1fr);
  }


  #stranica-artikal
  .ppcj-mobile-media{
    min-height:145px;

    padding:
      9px
      7px;
  }


  #stranica-artikal
  .ppcj-mobile-media img{
    max-height:118px;
  }

}



/* ============================================================
   PDP V2 PRODUCTION UX FOLLOW-UP — 2026-10-03
   ============================================================ */


/* ============================================================
   HERO → FULL DETAILS CTA
   ============================================================ */

#stranica-artikal
.pdpv2-more-details{
  display:inline-flex;

  align-items:center;

  gap:7px;

  margin:
    -4px
    0
    13px;

  padding:
    3px
    0;

  border:0;

  background:
    transparent;

  color:
    #ffb100;

  font-size:
    12px;

  font-weight:
    850;

  line-height:
    1.2;

  cursor:pointer;

  text-decoration:none;

  transition:
    color .14s ease,
    transform .14s ease;
}


#stranica-artikal
.pdpv2-more-details:hover{
  color:
    #ffd15a;

  transform:
    translateX(2px);
}


#stranica-artikal
.pdpv2-more-details i{
  font-size:
    10px;
}


#stranica-artikal
.pdpv2-more-details:focus-visible{
  outline:
    2px solid
    rgba(255,177,0,.82);

  outline-offset:
    4px;

  border-radius:
    3px;
}



/* ============================================================
   MOBILE GUIDANCE DISCOVERABILITY
   ============================================================ */

#stranica-artikal
.pdpv2-usage-mobile-head,
#stranica-artikal
.pdpv2-usage-mobile-nav{
  display:none;
}


@media (max-width:767.98px){


  #stranica-artikal
  .pdpv2-usage-mobile-head{
    display:flex;

    align-items:center;

    justify-content:
      space-between;

    gap:
      12px;

    margin:
      0
      0
      6px;

    padding:
      0
      2px;
  }


  #stranica-artikal
  .pdpv2-usage-mobile-head
  > span{
    color:
      #dce6ef;

    font-size:
      10px;

    font-weight:
      850;

    letter-spacing:
      .045em;

    text-transform:
      uppercase;
  }


  #stranica-artikal
  .pdpv2-usage-mobile-count{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:
      38px;

    min-height:
      22px;

    padding:
      3px
      7px;

    border:
      1px solid
      rgba(255,177,0,.24);

    border-radius:
      999px;

    background:
      rgba(255,177,0,.055);

    color:
      #ffbd25;

    font-size:
      10px;

    font-weight:
      900;

    line-height:
      1;
  }


  /*
   * Deliberate visible peek of the following card.
   * This communicates horizontal continuation before the user
   * ever touches the component.
   */

  #stranica-artikal
  .pdpv2-usage-grid{
    grid-auto-columns:
      calc(
        100%
        -
        42px
      ) !important;

    gap:
      8px !important;

    padding-right:
      18px !important;

    scroll-snap-type:
      x mandatory !important;

    scroll-padding-inline:
      0 !important;
  }


  #stranica-artikal
  .pdpv2-usage-card{
    scroll-snap-align:
      start !important;

    scroll-snap-stop:
      always;
  }


  #stranica-artikal
  .pdpv2-usage-mobile-nav{
    display:flex;

    align-items:center;

    justify-content:
      space-between;

    gap:
      12px;

    min-height:
      26px;

    margin-top:
      5px;

    padding:
      0
      1px;
  }


  #stranica-artikal
  .pdpv2-usage-dots{
    display:flex;

    align-items:center;

    gap:
      1px;
  }


  #stranica-artikal
  .pdpv2-usage-dot{
    position:relative;

    width:
      17px;

    height:
      17px;

    margin:0;

    padding:0;

    border:0;

    border-radius:
      999px;

    background:
      transparent;

    cursor:pointer;
  }


  #stranica-artikal
  .pdpv2-usage-dot::before{
    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:
      6px;

    height:
      6px;

    border-radius:
      999px;

    background:
      #4a6174;

    transform:
      translate(
        -50%,
        -50%
      );

    transition:
      width .15s ease,
      background .15s ease;
  }


  #stranica-artikal
  .pdpv2-usage-dot.is-active::before{
    width:
      14px;

    background:
      #ffb100;
  }


  #stranica-artikal
  .pdpv2-usage-dot:focus-visible{
    outline:
      1px solid
      #ffb100;

    outline-offset:
      0;
  }


  #stranica-artikal
  .pdpv2-usage-swipe-hint{
    display:inline-flex;

    align-items:center;

    gap:
      5px;

    color:
      #8498aa;

    font-size:
      9.5px;

    font-weight:
      700;

    line-height:
      1.2;

    white-space:
      nowrap;
  }


  #stranica-artikal
  .pdpv2-usage-swipe-hint
  i{
    color:
      #ffb100;

    font-size:
      8px;
  }

}


@media (max-width:389.98px){

  #stranica-artikal
  .pdpv2-usage-grid{
    grid-auto-columns:
      calc(
        100%
        -
        32px
      ) !important;

    padding-right:
      12px !important;
  }


  #stranica-artikal
  .pdpv2-usage-swipe-hint{
    font-size:
      9px;
  }

}



/* ============================================================
   SIMILAR PRODUCT DESCRIPTION
   Large desktop only.
   Compact tablet/mobile commerce cards stay unchanged.
   ============================================================ */

#stranica-artikal
.pdpv2-commerce-description{
  display:none;
}


@media (min-width:1800px){

  #stranica-artikal
  .pdpv2-commerce-similar
  .pdpv2-commerce-copy{
    display:flex !important;

    flex-direction:
      column;

    min-height:
      0;
  }


  #stranica-artikal
  .pdpv2-commerce-similar
  .pdpv2-commerce-description{
    display:-webkit-box;

    overflow:hidden;

    -webkit-box-orient:
      vertical;

    -webkit-line-clamp:
      2;

    line-clamp:
      2;

    margin:
      7px
      0
      8px;

    color:
      #93a4b5;

    font-size:
      10.5px;

    font-weight:
      500;

    line-height:
      1.38;
  }


  #stranica-artikal
  .pdpv2-commerce-similar
  .pdpv2-commerce-price{
    margin-top:
      auto !important;
  }

}



/* ============================================================
   PDP V2 SIMILAR DESCRIPTION POLISH — 2026-10-03

   Wide desktop:
   image
   brand
   name
   useful short explanation
   price                         cart
   ============================================================ */

@media (min-width:1800px){


  #stranica-artikal
  #pdpv2SimilarTrack
  > .pdpv2-commerce-card{
    position:relative !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr) !important;

    grid-template-rows:
      175px
      minmax(0,1fr) !important;

    gap:
      0 !important;

    height:
      315px !important;

    min-height:
      315px !important;

    max-height:
      315px !important;

    padding:
      0 !important;

    overflow:
      hidden !important;

    align-items:
      stretch !important;
  }


  /* ----------------------------------------------------------
     PRODUCT IMAGE
     ---------------------------------------------------------- */

  #stranica-artikal
  #pdpv2SimilarTrack
  > .pdpv2-commerce-card
  > .pdpv2-commerce-media{
    grid-column:
      1 !important;

    grid-row:
      1 !important;

    width:
      100% !important;

    height:
      175px !important;

    min-width:
      0 !important;

    min-height:
      175px !important;

    max-height:
      175px !important;

    border-radius:
      0 !important;

    border-bottom:
      1px solid
      rgba(125,151,179,.11) !important;
  }


  #stranica-artikal
  #pdpv2SimilarTrack
  > .pdpv2-commerce-card
  > .pdpv2-commerce-media
  img{
    transition:
      transform .18s ease,
      filter .18s ease;
  }


  #stranica-artikal
  #pdpv2SimilarTrack
  > .pdpv2-commerce-card:hover
  > .pdpv2-commerce-media
  img{
    transform:
      scale(1.035);

    filter:
      brightness(1)
      saturate(.98)
      drop-shadow(
        0
        5px
        7px
        rgba(0,0,0,.30)
      );
  }


  /* ----------------------------------------------------------
     COPY AREA
     ---------------------------------------------------------- */

  #stranica-artikal
  #pdpv2SimilarTrack
  > .pdpv2-commerce-card
  > .pdpv2-commerce-copy{
    grid-column:
      1 !important;

    grid-row:
      2 !important;

    display:flex !important;

    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    justify-content:
      flex-start !important;

    min-width:
      0 !important;

    min-height:
      0 !important;

    overflow:
      hidden;

    padding:
      11px
      54px
      11px
      11px !important;
  }


  #stranica-artikal
  #pdpv2SimilarTrack
  .pdpv2-commerce-brand{
    margin:
      0
      0
      4px !important;

    color:
      #8195aa !important;

    font-size:
      8.5px !important;

    line-height:
      1.1 !important;
  }


  #stranica-artikal
  #pdpv2SimilarTrack
  .pdpv2-commerce-name{
    display:-webkit-box !important;

    overflow:
      hidden !important;

    -webkit-box-orient:
      vertical;

    -webkit-line-clamp:
      2 !important;

    line-clamp:
      2 !important;

    margin:
      0
      0
      6px !important;

    color:
      #f4f7f9 !important;

    font-size:
      12.5px !important;

    font-weight:
      850 !important;

    line-height:
      1.18 !important;
  }


  #stranica-artikal
  #pdpv2SimilarTrack
  .pdpv2-commerce-description{
    display:-webkit-box !important;

    overflow:
      hidden;

    -webkit-box-orient:
      vertical;

    -webkit-line-clamp:
      2;

    line-clamp:
      2;

    margin:
      0
      0
      7px !important;

    color:
      #b2bfcc !important;

    font-size:
      10.5px !important;

    font-weight:
      500;

    line-height:
      1.38;

    text-wrap:
      pretty;
  }


  #stranica-artikal
  #pdpv2SimilarTrack
  .pdpv2-commerce-price{
    margin-top:
      auto !important;

    padding-top:
      3px;

    color:
      #ffb71f !important;

    font-size:
      11.5px !important;

    line-height:
      1.1 !important;
  }


  /* ----------------------------------------------------------
     CART — fixed to lower-right corner
     ---------------------------------------------------------- */

  #stranica-artikal
  #pdpv2SimilarTrack
  > .pdpv2-commerce-card
  > .pdpv2-commerce-cart-form{
    position:absolute !important;

    right:
      11px !important;

    bottom:
      11px !important;

    z-index:
      3;

    width:
      36px !important;

    height:
      36px !important;

    margin:
      0 !important;
  }


  #stranica-artikal
  #pdpv2SimilarTrack
  > .pdpv2-commerce-card:hover{
    border-color:
      rgba(255,183,31,.34) !important;

    box-shadow:
      0
      10px
      25px
      rgba(0,0,0,.18),

      inset
      0
      1px
      rgba(255,255,255,.025);
  }

}