/* Ozon Arctic Pure Black (proizvod 232) - stranica specifičan CSS.
   Ovo je kopija css/product.css (stranica US12ANNBM75), ISTE klase i
   responsive pravila, sa dve razlike:
   1) Izostavljen je .product-hero/.product-hero-content/.product-model/
      .product-specifications/.product-badges blok - hero je deljena
      komponenta, već potpuno stilizovana kroz slick-slider-product.css,
      i ne treba joj (ni ne sme joj) dodatni override ovde.
   2) Tri background: url(...) koja u originalu prikazuju BELI uređaj
      (.product-kasica, .product-hot-cold/.sticky-hot-cold-bg,
      .product-night-mode) zamenjena su tamnim gradijentom - dok ne stigne
      Figma export sa crnim uređajem, vidi TODO komentare u product6.php. */

.product-page {
    margin-top: 60px;
}
.desktop-only {
    display: none;
}

/* === Section 2 === */
.product-kasica {
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
    background-color: #000;
    z-index: 1;
    padding-bottom: 80px;
}
.kasica-prasica-image {
    width: 100%;
    height: auto;
}
.product-kasica h2 {
    margin-top: 20px;
    color: #fff;
}
.product-center-text {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 28px;
}
.product-center-text p {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
    color: #fff;
}
/* === Section 3 === */
.product-section-simple {
    position: relative;
    background-color: var(--white);
    padding: 60px 20px 60px 20px;
    z-index: 2;
}
.product-section-simple h2 {
    margin-top: 25px;
    padding: 0 0 0 12px;
}
.product-section-simple p {
    margin-top: 25px;
    padding: 0 0 0 12px;
}
/* === Section 4 === */
.product-section-wbg {
    position: relative;
    width: 100%;
    height: 100vh;
    text-align: center;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    padding: 50px 0;
}
.product-section-6th {
    align-items: flex-start;
}

.product-hot-cold h2,
.product-hot-cold h3 {
    color: var(--white);
    margin: 0;
}
.product-hot-cold h3 {
    margin-top: 100px;
    font-size: 25px;
    line-height: 29px;
    font-weight: 700;
}
.product-hot-cold h2 {
    font-size: 78px;
    line-height: 60px;
    margin-top: 16px;
}

.hot-cold-cards {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-top: 50px;
    gap: 20px;
    flex-wrap: nowrap;
    flex-direction: row;
}
.hot-cold-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 calc(50% - 30px);
    max-width: 380px;
    min-width: 120px;
    padding: 40px 24px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(153,153,153,0.3) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.07);
    margin-bottom: 20px;
}
.hot-cold-card-icon {
    margin-right: 0;
    margin-bottom: 15px;
}
.hot-cold-card-icon img {
    display: block;
    width: 46px;
    height: auto;
}
.hot-cold-card-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.hot-cold-card-title {
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #fff;
    margin-bottom: 6px;
}
.hot-cold-card-subtitle {
    font-weight: 500;
    font-size: 26px;
    line-height: 26px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #fff;
    margin-top: 10px;
}
/* === Section 5 === */
.product-night-mode {
    height: 110vh;
    background: url('../assets/img/product/nocni-rezim-crna-mob.webp') center/cover no-repeat;
}
.product-night-mode h2 {
    color: var(--white);
    margin-top: 38vh;
    padding: 0 40px;
}
.product-night-mode p {
    color: var(--white);
}
.product-section-image {
    width: 100%;
}
.product-decija-soba h2 br {
    display: none;
}
.product-page .product-warranty {
    background: url('../assets/img/product/dugotrajan-mir-garancija-crna-mob.webp') center/cover no-repeat;
}
.warranty-background.warranty-background-desktop {
    display: none;
}
.warranty-background.warranty-background-mobile {
    /* display: block; */
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: top;
}
.product-section-simple-5th {
    padding: 60px 20px 60px 20px;
}
/* Mobile (<768px): video is a contained, in-flow block above the text -
   own aspect ratio, no crop/scrim, no overlap with the text below it. */
.product-kasica-video-bg {
    position: relative;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
}
.product-kasica .container {
    position: relative;
    z-index: 2;
}
.product-video-embed {
    display: none;
    position: relative;
    width: 100%;
    padding-top: 80%;
}
.product-video-embed.product-video-mobile {
    display: block;
}
.product-video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* === RESPONSIVE BREAKPOINTS === */
@media (min-width: 390px) {
    .product-kasica { height: auto; }
    .product-kasica h2 { margin-top: 20px; }
    .product-section-wbg { height: 100vh; }
    .product-section-6th { height: 90vh; }
}
@media (min-width: 540px) {
    .product-section-wbg { height: 140vh; }
    .hot-cold-cards { flex-direction: column; align-items: center; }
}

/* MD - ≥768px */
@media (min-width: 768px) {
    .product-kasica {
        background-attachment: scroll;
        -webkit-background-size: cover;
        background-size: cover;
    }
    .product-section-wbg { height: 120vh; }
    .product-hot-cold h3 { margin-top: 150px; font-size: 29px; }
    .product-hot-cold h2 { font-size: 58px; line-height: 1; }
    .product-section-simple { padding: 80px 0px 80px 0px; }
    .product-section-simple .col-sm-6,
    .product-section-simple-5th .col-sm-6 { align-self: center; }
    .product-section-simple h2 { margin-top: 0; }
    .product-section-simple-5th { padding: 60px 0 60px 0; }
    .hot-cold-cards { flex-direction: row; gap: 32px; }
    .hot-cold-card { min-width: 300px; }
    .product-night-mode h2 { margin-top: 25vh; }
    .product-night-mode { background: url('../assets/img/product/nocni-rezim-crna.webp') center/cover no-repeat; }
    .product-center-text p { padding: 0; }
    .custom-col-p-50 { padding-right: 50px; }
    .warranty-background.warranty-background-desktop { display: block; }
    .warranty-background.warranty-background-mobile { display: none; }
    .desktop-only { display: block; }
    .mobile-only { display: none; }
}

/* LG - ≥992px */
@media (min-width: 992px) {
    .product-hot-cold h2 { font-size: 72px; }
    .product-hot-cold h3 { margin-top: 180px; font-size: 48px; line-height: 48px; }
    .hot-cold-card-title { font-size: 29px; line-height: 28px; letter-spacing: 0; }
    .hot-cold-card-subtitle { font-size: 38px; line-height: 26px; letter-spacing: 0; }
    .product-kasica {
        height: 100vh;
        padding-bottom: 0;
        background: linear-gradient(180deg, #1a1a1a 0%, #0d0d10 100%);
    }
    .product-kasica-video-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
    }
    .product-kasica-video-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(13,13,16,.55) 0%, rgba(13,13,16,.25) 35%, rgba(13,13,16,.55) 100%);
    }
    .product-video-embed {
        position: absolute;
        inset: 0;
        padding-top: 0;
    }
    .product-video-embed.product-video-desktop { display: block; }
    .product-video-embed.product-video-mobile { display: none; }
    .product-video-embed iframe {
        top: 50%;
        left: 50%;
        width: 177.78vh;
        height: 100vh;
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%) scale(1.15);
    }
    .product-kasica h2 { margin-top: 120px; }
    .product-decija-soba h2 br { display: block; }
    .sticky-hot-cold-bg { display: none; }
    .kasica-prasica-image { display: none; }
    .hot-cold-cards { flex-direction: row; gap: 64px; }
    .product-night-mode h2 { margin-top: 30vh; }
    .product-hot-cold { background: url('../assets/img/product/toplo-hladno-crna.webp') center/cover no-repeat; }
    .product-section-simple-5th { padding: 0px 0px 60px 0; }
    .hot-cold-card-icon img { width: 60px; }
}

/* XL - ≥1200px */
@media (min-width: 1200px) {
    .product-kasica h2 { margin-top: 80px; }
    .product-hot-cold h2 { font-size: 80px; }
    .product-hot-cold h3 { margin-top: 250px; font-size: 50px; line-height: 50px; }
    .hot-cold-cards { margin-top: 50px; }
    /* .product-kasica { height: 140vh; } */
    .product-section-simple,
    .product-section-simple-5th { padding: 135px 0; }
    .product-section-wbg { height: 175vh; }
    .product-hot-cold { background-position: center; }
    .hot-cold-card { min-width: 360px; }
    .product-night-mode h2 { margin-top: 40vh; }
    .product-section-wbg { align-items: flex-start; }
}

/* XXL - ≥1400px */
@media (min-width: 1400px) {
    .product-kasica h2 { margin-top: 15vh; }
    .product-kasica { height: 125vh; }
    .product-hot-cold h2 { font-size: 86px; margin-top: 8px; }
    .product-hot-cold h3 { margin-top: 30vh; }
    .product-section-wbg { height: 125vh; }
    .product-section-6th { height: 140vh; }
    .hot-cold-cards { flex-direction: row; gap: 64px; }
    .product-night-mode h2 { margin-top: 30vh; }
    .product-center-text p { max-width: 700px; }
}
@media (min-width: 1920px) {
    .hot-cold-cards { margin-top: 100px; }
    .product-kasica { height: 100vh; }
    .product-kasica h2 { font-size: 72px; line-height: 72px; }
    .product-night-mode h2 { margin-top: 40vh; }
}

/* === Budzenje toplo hladno sekcije === */
@media (max-width: 991.98px) {
  .sticky-hot-cold-bg {
    position: sticky;
    top: 60px;
    width: 100%;
    height: 100vh;
    background: url('../assets/img/product/toplo-hladno-crna-mob.webp') center/cover no-repeat;
    z-index: 1;
  }
  .product-hot-cold {
    position: relative;
    z-index: 2;
  }
  .product-hot-cold-container {
    position: relative;
    z-index: 3;
  }
}

/* === SAFARI & IPHONE OPTIMIZATIONS === */
@supports not (backdrop-filter: blur(4px)) {
    .hot-cold-card {
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
}
@supports (-webkit-touch-callout: none) {
    .product-section-wbg {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        will-change: auto;
    }
    .sticky-hot-cold-bg {
        position: -webkit-sticky;
        position: sticky;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .product-kasica {
        background-attachment: scroll;
        -webkit-background-size: cover;
        background-size: cover;
    }
    .product-hot-cold {
        background-attachment: scroll;
        -webkit-background-size: cover;
        background-size: cover;
    }
    .product-night-mode {
        background-attachment: scroll;
        -webkit-background-size: cover;
        background-size: cover;
    }
    .sticky-hot-cold-bg {
        background-attachment: scroll;
        -webkit-background-size: cover;
        background-size: cover;
    }
    .hot-cold-card {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }
}
@supports (-webkit-touch-callout: none) and (pointer: coarse) {
    .product-section-wbg {
        height: auto;
        min-height: 100svh;
        min-height: 100vh;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 40px;
    }
    .product-kasica {
        height: auto;
        min-height: 100svh;
        min-height: 100vh;
        padding-bottom: 60px;
    }
    .hot-cold-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .product-page {
        -webkit-overflow-scrolling: touch;
    }
}
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    .product-section-wbg {
        height: auto !important;
        min-height: calc(100vh - 120px) !important;
        padding: 40px 0 60px 0 !important;
    }
    .product-kasica {
        height: auto !important;
        min-height: calc(100vh - 80px) !important;
    }
    @supports (padding: max(0px)) {
        .product-section-wbg {
            min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 60px) !important;
            padding-top: calc(40px + env(safe-area-inset-top));
            padding-bottom: calc(60px + env(safe-area-inset-bottom));
        }
    }
}
@media screen and (max-device-height: 480px) and (orientation: landscape) {
    .product-section-wbg,
    .product-kasica {
        min-height: auto !important;
        height: auto !important;
        padding: 20px 0 40px 0 !important;
    }
}

/* === PULSING CIRCLES (Sleep/night mode dekoracija) === */
.circle {
    position: absolute;
    border-radius: 50%;
    background: rgb(0, 212, 233);
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}
.circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: rgba(0, 212, 233, 0.7);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    animation: pulse-animation 2s infinite;
    z-index: -1;
}
@keyframes pulse-animation {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
    75% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
}
.circle-1 { width: 15px; height: 15px; top: 80%; left: 7%; }
.circle-2 { width: 15px; height: 15px; top: 84%; left: 29%; }
.circle-3 { width: 15px; height: 15px; top: 6%; left: 35%; }
.circle-4 { width: 15px; height: 15px; top: 74%; left: 50%; }
.circle-5 { width: 15px; height: 15px; top: 60%; left: 62%; }
.circle-6 { width: 15px; height: 15px; top: 76%; left: 76.5%; }
@media (min-width: 768px) {
    .circle-1 { top: 75%; left: 22%; }
    .circle-3 { top: 6%; left: 15%; }
}
@media (min-width: 992px) {
    .circle-3 { top: 69.3%; left: 42%; }
    .circle-6 { display: block; }
}
.circle-1, .circle-2, .circle-3, .circle-4, .circle-5, .circle-6 {
    display: none;
}