/* IDEALNI KORISNICI BOX */



.idealni-box {

    background: none;/* #f3f3f3*/

    padding: 0px;

    margin: 40px 0;

    border-radius: 0px;

}



.idealni-title {

    font-size: 20px;

    font-weight: 700;

    color: #fff;

    margin-bottom: 18px;

    letter-spacing: 1px;

}



.idealni-text {

    position: relative;

    padding-left: 20px;

    font-size: 18px;

    line-height: 1.95;

    color: #fff;

}



.idealni-text:before {

    content: "";

    position: absolute;

    left: 0;

    top: 4px;

    width: 3px;

    height: calc(100% - 8px);

    background: rgba(255, 255, 255, 0.6); /* #DC4D4E red accent line */

    border-radius: 2px;

}



/* KARAKTERISTIKE SECTION */



.karakteristike-section {

    background: #DC4D4E; /*promjena boje-none*/

    padding: 60px 20px;

    margin-top: 15px;

}



.aux-profesional {

    background: #6D6E71;  

}



.aux-hexacorr {

    background: #87B233;  

}



.aux-mineral {

    background: #F48336;  

}



.aux-sport {

    background: #038BE5; 

}



.aux-polino-kids {

    background: #724199; 

}



.aux-bifokal {

    background: #546BB1; 

}



.aux-monofokal {

    background: #C17DB3; 

}



.karakteristike-container {

   background: transparent;

   max-width: 1200px;

   margin: auto;

   display: flex;

   gap: 80px;

   padding: 20px 30px;

}



.karakteristike-left,

.karakteristike-right {

    flex: 1;

     background: #efefef;  /*promjena boje-none*/

    padding: 30px;

}



.karakteristike-title {

    background: #dcdcdc;

    padding: 16px 22px;

    font-weight: 700;

    margin-bottom: 35px;

    letter-spacing: 1px;

    color: #444;

}





/* LEFT ITEMS */



.karakteristika-item {

    display: flex;

    align-items: center;

    margin-bottom: 28px;

}



.karakteristika-icon {

    width: 48px;

    height: 48px;

    margin-right: 18px;

}



.karakteristika-icon img {

   width: 100%;

   width: 40px;

   background-color: #DC4D4E;

}



.aux-profesional-icon img {

   background-color: #6D6E71;

}



.aux-hexacorr-icon img {

   background-color: #87B233;

}



.aux-mineral-icon img {

   background-color: #F48336;

}



.aux-sport-icon img {

   background-color: #038BE5;

}



.aux-polino-kids-icon img {

   background-color: #724199;

}



.aux-bifokal-icon img {

   background-color: #546BB1;

}



.aux-monofokal-icon img {

   background-color: #C17DB3;

}



.karakteristika-text {

    font-size: 16px;

    color: #444;     /*promjena boje-#fff*/

    line-height: 1.5;

}





/* RIGHT SIDE */



.iot-header-accordion {

    display: flex;

    align-items: center;

    gap: 18px;

    color: #444;

    background: #fff;

    padding: 16px 0px;

    font-weight: 700;

}



 .iot-header {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 10px;

    border-bottom: 1px solid #dcdcdc;

    color: #444;

    background: #dcdcdc;

    padding: 16px 22px;

    font-weight: 700;

} 



.iot-header img,.iot-header-accordion img {

   height: 40px;

}



.iot-header span,.iot-header-accordion span {

    font-weight: 600;

    letter-spacing: .5px;

}





/* IOT ROWS */



.iot-row {

    display: flex;

    align-items: center;

    padding: 8px 0;

    border-bottom: 1px solid #dcdcdc;

}



.iot-bars {

   width: 160px;

}



.iot-bars img {

   width: 160px;

   height:50px !important;

}



.iot-text {

    margin-left: 20px;

    font-size: 15px;

    color: #555; /*promjena boje-#fff*/

}





/* RESPONSIVE */



@media (max-width: 900px) {

    .karakteristike-container {

        flex-direction: column;

        gap: 50px;

        padding: 10px;

    }



    .iot-bars {

        width: 120px;

    }

}





/* ACCORDION */



.product-accordion {

    max-width: 1200px;

    margin: 40px auto;

}



.accordion-item {

    border-top: 1px solid #ddd;
}



.accordion-toggle {

    width: 100%;

    text-align: left;

    background: #efefef;

    border: none;

    padding: 20px 25px;

    font-size: 18px;

    font-weight: 600;

    cursor: pointer;

    transition: background .25s ease;



    /* NEW */

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.accordion-toggle:hover {

    background: #e5e5e5;

}



.accordion-more {

    color: #1A1818;

    font-weight: 700;

    letter-spacing: .5px;

    font-size: 14px;

}



/* hidden by default */

.accordion-content {

    max-height: 0;

    overflow: hidden;

    transition: max-height .45s ease;

    background: white;

}



/* when open */

.accordion-item.active .accordion-content {

    padding: 30px 25px;

    max-height: 1000px;

}





/* INTRO BLOCK */



.intro-box {

    display: flex;

    gap: 18px;

    margin-bottom: 30px;

}



.intro-line {

    width: 4px;

    background: #e53935;

}



.aux-profesional-line {

    background: #6D6E71;

}



.aux-hexacorr-line {

    background: #87B233;

}



.aux-mineral-line {

    background: #F48336;

}



.aux-sport-line {

    background: #038BE5;

}



.aux-polino-kids-line {

    background: #724199;

}



.aux-bifokal-line {

    background: #546BB1;

}



.aux-monofokal-line {

    background: #C17DB3;

}



.intro-text p {

    margin: 0 0 10px;

    line-height: 1.6;

    color: #444;

    font-size: 15px;

}



.accordion-small-img {

    border-right:2px solid #e53935; 

    padding-right:20px

}



.aux-profesional-accordion-small-img {

    border-color:#6D6E71; 

}



.aux-hexacorr-accordion-small-img {

    border-color:#87B233; 

}



.aux-mineral-accordion-small-img {

    border-color:#F48336; 

}



.aux-sport-accordion-small-img {

    border-color:#038BE5; 

}



.aux-polino-kids-accordion-small-img {

    border-color:#724199; 

}



.aux-bifokal-accordion-small-img {

    border-color:#546BB1; 

}



.aux-monofokal-accordion-small-img {

    border-color:#C17DB3; 

}



/* PDF LINKS */



.pdf-links {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.pdf-link {

    text-decoration: none;

    color: #222;

    font-weight: 600;

    padding: 12px 0;

    border-bottom: 1px solid #ddd;

    transition: color .2s ease;

}



.pdf-link:hover {

    color: #e53935;

}



.pdf-link-profesional:hover {

    color: #6D6E71;

}



.pdf-link-hexacorr:hover {

    color: #87B233;

}



.pdf-link-mineral:hover {

    color: #F48336;

}



.pdf-link-sport:hover {

    color: #038BE5;

}



.pdf-link-polino-kids:hover {

    color: #724199;

}



.pdf-link-bifokal:hover {

    color: #546BB1;

}



.pdf-link-monofokal:hover {

    color: #C17DB3;

}



/* MOBILE */



@media (max-width: 700px) {



    .accordion-toggle {

        font-size: 16px;

        padding: 18px;

    }



    .accordion-item.active .accordion-content {

        padding: 20px 18px;

    }



}





/* Protection Layers Page */

.protection-layers-page {

    color: #111113;

    background: #ffffff;

    min-height: 100vh;

    padding-top: 160px;

    margin-bottom: 100px;

}



.protection-hero {

    background: #505052;

    padding: 42px 7vw 34px;

}



.protection-hero-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    max-width: 1320px;

    margin: 0 auto;

}



.protection-main-title {

    margin: 0;

    color: #ffffff;

    font-size: clamp(32px, 4vw, 54px);

    font-weight: 800;

    letter-spacing: 0.02em;

    text-transform: uppercase;

}



.protection-kicker {

    color: rgba(255, 255, 255, 0.82);

    font-size: clamp(15px, 1.4vw, 20px);

    font-weight: 400;

    white-space: nowrap;

}



.protection-black-strip {

    height: 88px;

    background: #101012;

}



.protection-info {

    background: linear-gradient(90deg, #5a5a5c 0%, #38383a 48%, #171719 100%);

    padding: 78px 7vw 82px;

}



.protection-info-inner {

    max-width: 1320px;

    margin: 0 auto;

}



.protection-info h2 {

    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(22px, 2.2vw, 32px);

    font-weight: 800;

    letter-spacing: 0.02em;

    text-transform: uppercase;

}



.protection-info p {

    max-width: 1120px;

    margin: 0;

    color: rgba(255, 255, 255, 0.9);

    font-size: clamp(16px, 1.35vw, 21px);

    line-height: 1.35;

}



.protection-products-section {

    background: linear-gradient(180deg, #171719 0%, #202123 100%);

    padding: 70px 6vw 88px;

}



.protection-products-grid {

    max-width: 1220px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(12, 1fr);

    gap: 54px 46px;

    align-items: end;

}



.protection-product {

    position: relative;

    min-height: 330px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

}



.protection-product.top {

    grid-column: span 4;

}



.protection-product.bottom {

    grid-column: span 3;

}



.protection-product img {

    position: relative;

    z-index: 1;

    width: min(100%, 260px);

    height: auto;

    display: block;

    filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.6));

    transition: transform 0.3s ease, filter 0.3s ease;

}



.protection-product:hover img {

    transform: translateY(-8px);

    filter: drop-shadow(0 24px 22px rgba(0, 0, 0, 0.72));

}



.protection-product-label {

    position: absolute;

    z-index: 3;

    left: 50%;

    bottom: 34px;

    transform: translateX(-50%);

    width: min(270px, 92%);

    padding: 10px 20px;

    color: #ffffff;

    font-size: clamp(15px, 1.25vw, 20px);

    font-weight: 800;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: 0.01em;

    background: linear-gradient(90deg, rgba(120, 120, 122, 0.82), rgba(120, 120, 122, 0.52), rgba(50, 50, 52, 0));

    backdrop-filter: blur(2px);

}



@media (max-width: 1100px) {

    .protection-products-grid {

        grid-template-columns: repeat(6, 1fr);

        gap: 46px 34px;

    }



    .protection-product.top,

    .protection-product.bottom {

        grid-column: span 3;

    }

}



@media (max-width: 768px) {

    .protection-layers-page {

        padding-top: 120px;

    }



    .protection-hero {

        padding: 34px 24px 28px;

    }



    .protection-hero-inner {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }



    .protection-kicker {

        white-space: normal;

    }



    .protection-black-strip {

        height: 58px;

    }



    .protection-info {

        padding: 52px 24px 56px;

    }



    .protection-products-section {

        padding: 50px 22px 70px;

    }



    .protection-products-grid {

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

        gap: 38px 18px;

    }



    .protection-product.top,

    .protection-product.bottom {

        grid-column: span 1;

    }



    .protection-product {

        min-height: 250px;

    }



    .protection-product img {

        width: min(100%, 190px);

    }



    .protection-product-label {

        bottom: 24px;

        padding: 9px 14px;

    }

}



@media (max-width: 520px) {

    .protection-products-grid {

        grid-template-columns: 1fr;

    }



    .protection-product.top,

    .protection-product.bottom {

        grid-column: span 1;

    }



    .protection-product {

        min-height: 280px;

    }

}

/* Protection comparison section */

.protection-comparison-section {

    background: linear-gradient(180deg, #202123 0%, #111113 100%);

    padding: 20px 6vw 90px;

}



.protection-comparison-grid {

    max-width: 1120px;

    margin: 0 auto;

    display: grid;

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

    gap: 70px;

    align-items: start;

}



.protection-comparison-card {

    text-align: center;

}



.protection-comparison-card img {

    width: 100%;

    max-width: 520px;

    display: block;

    margin: 0 auto;

    height: auto;

}



.protection-comparison-title {

    margin-top: 18px;

    color: #ffffff;

    font-size: clamp(18px, 1.8vw, 24px);

    font-weight: 800;

    line-height: 1.2;

    text-transform: uppercase;

    letter-spacing: 0.01em;

}



.protection-table-topbar {

    background: #505052;

    padding: 18px 7vw;

}



.protection-table-topbar-inner {

    max-width: 1320px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

}



.protection-table-topbar span {

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;

    opacity: 0.9;

}



@media (max-width: 900px) {

    .protection-comparison-grid {

        gap: 34px;

    }

}



@media (max-width: 768px) {

    .protection-comparison-section {

        padding: 10px 22px 70px;

    }



    .protection-comparison-grid {

        grid-template-columns: 1fr;

        gap: 46px;

    }



    .protection-comparison-card img {

        max-width: 520px;

    }

}



/* Protection table section */

.protection-table-section {

    background: linear-gradient(90deg, #252729 0%, #202123 45%, #101012 100%);

    padding: 78px 6vw 70px;

}



.protection-table-wrap {

    max-width: 1180px;

    margin: 0 auto;

    overflow-x: auto;

    padding-bottom: 8px;

}



.protection-table {

    width: 100%;

    min-width: 980px;

    border-collapse: collapse;

    background: #2f3234;

    color: #ffffff;

    font-size: 16px;

}



.protection-table th,

.protection-table td {

    border: 1px solid rgba(255, 255, 255, 0.65);

    padding: 18px 14px;

    text-align: center;

    vertical-align: middle;

}



.protection-table thead th {

    background: #505052;

    color: #ffffff;

    font-weight: 700;

    font-size: 16px;

    white-space: nowrap;

}



.protection-table thead th:first-child {

    text-align: left;

    text-transform: uppercase;

}



.protection-table tbody th {

    background: linear-gradient(90deg, #171719 0%, #2d3032 100%);

    color: #ffffff;

    font-weight: 600;

    text-align: left;

    white-space: nowrap;

    font-size: 17px;

}



.protection-check {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    background: #3f9b62;

    color: #ffffff;

    font-size: 22px;

    font-weight: 800;

    line-height: 1;

}



.protection-x {

    color: #ffffff;

    font-size: 28px;

    font-weight: 300;

    line-height: 1;

}



.protection-stars {

    display: inline-flex;

    gap: 2px;

    white-space: nowrap;

    font-size: 20px;

    line-height: 1;

}



.protection-star-full {

    color: #d2ad7a;

}



.protection-star-empty {

    color: rgba(255, 255, 255, 0.16);

}



.protection-text-value {

    color: #ffffff;

    font-weight: 500;

    white-space: nowrap;

}



@media (max-width: 768px) {

    .protection-table-section {

        padding: 10px 22px 54px;

    }



    .protection-table {

        font-size: 15px;

    }



    .protection-table th,

    .protection-table td {

        padding: 15px 12px;

    }



    .protection-table-wrap {

        margin-inline: -4px;

    }

}



/* Kanten Filter Page */

.kanten-filter-page {

    background: #ffffff;

    color: #606166;

    min-height: 100vh;

    padding-top: 160px;

}



.protection-hero {

    background: #505052;

    padding: 34px 7vw 28px;

}



.protection-hero-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    max-width: 1320px;

    margin: 0 auto;

}



.protection-title-wrap {

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.protection-main-title {

    margin: 0;

    color: #ffffff;

    font-size: clamp(32px, 4vw, 54px);

    font-weight: 800;

    letter-spacing: 0.02em;

    text-transform: uppercase;

    line-height: 1;

}



.protection-kicker {

    color: rgba(255, 255, 255, 0.82);

    font-size: clamp(15px, 1.4vw, 20px);

    font-weight: 400;

    white-space: nowrap;

}



.kanten-intro-section {

    background: #f4f4f5;

    padding: 112px 7vw 102px;

}



.kanten-content {

    max-width: 1120px;

    margin: 0 auto;

}



.kanten-content h2 {

    margin: 0 0 18px;

    color: #6a6b70;

    font-size: clamp(22px, 2vw, 30px);

    font-weight: 800;

    line-height: 1.2;

}



.kanten-content p {

    margin: 0 0 22px;

    color: #6d6e73;

    font-size: clamp(16px, 1.35vw, 20px);

    line-height: 1.28;

}



.kanten-filters-section {

    background: #dedfe1;

    padding: 58px 7vw 70px;

}



.kanten-filters-section.is-lighter {

    background: #e5e6e8;

}



.kanten-grid {

    max-width: 1220px;

    margin: 0 auto;

    display: grid;

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

    gap: 72px 110px;

}



.kanten-card {

    display: grid;

    grid-template-columns: 260px 1fr;

    gap: 34px;

    align-items: center;

}



.kanten-card-image {

    display: flex;

    align-items: center;

    justify-content: center;

}



.kanten-card-image img {

    width: 250px;

    max-width: 100%;

    height: auto;

    display: block;

    filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.22));

}



.kanten-card-text {

    color: #4f5055;

    font-size: 16px;

    line-height: 1.22;

}



.kanten-card-text h3 {

    margin: 0;

    color: #4f5055;

    font-size: 18px;

    font-weight: 800;

    line-height: 1.18;

}



.kanten-card-text p {

    margin: 0 0 18px;

}



.kanten-card-text ul {

    list-style: none;

    margin: 0;

    padding: 0;

}



.kanten-card-text li {

    margin: 0;

}



.kanten-card-text li::before {

    content: "– ";

}



.kanten-info-section {

    background: #f4f4f5;

    padding: 86px 7vw 94px;

}



.kanten-info-section .kanten-content {

    max-width: 1000px;

}



.kanten-info-section strong {

    display: block;

    margin: 32px 0;

    color: #6a6b70;

    font-size: clamp(16px, 1.35vw, 20px);

    line-height: 1.25;

}



.kanten-note {

    max-width: 1220px;

    margin: 34px auto 0;

    color: #4f5055;

    font-size: 14px;

    text-align: right;

}



.kanten-note strong {

    font-weight: 800;

}



@media (max-width: 1100px) {

    .kanten-grid {

        gap: 58px 50px;

    }



    .kanten-card {

        grid-template-columns: 210px 1fr;

        gap: 26px;

    }



    .kanten-card-image img {

        width: 210px;

    }

}



@media (max-width: 900px) {

    .kanten-grid {

        grid-template-columns: 1fr;

        gap: 54px;

    }



    .kanten-card {

        max-width: 650px;

        margin: 0 auto;

    }

}



@media (max-width: 768px) {

    .kanten-filter-page {

        padding-top: 120px;

    }



    .protection-hero {

        padding: 34px 24px 28px;

    }



    .protection-hero-inner {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }



    .protection-kicker {

        white-space: normal;

    }



    .kanten-intro-section,

    .kanten-info-section {

        padding: 58px 24px;

    }



    .kanten-filters-section {

        padding: 48px 24px 58px;

    }



    .kanten-card {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .kanten-card-text {

        text-align: left;

        max-width: 360px;

        margin: 0 auto;

    }



    .kanten-note {

        text-align: left;

    }

}



/* Tint / Bojenje Page */

.tint-page {

    background: #ffffff;

    color: #55565b;

    min-height: 100vh;

    padding-top: 160px;

}



/* Reused from previous pages */

.protection-hero {

    background: #505052;

    padding: 42px 7vw 34px;

}



.protection-hero-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    max-width: 1320px;

    margin: 0 auto;

}



.protection-main-title {

    margin: 0;

    color: #ffffff;

    font-size: clamp(32px, 4vw, 54px);

    font-weight: 800;

    letter-spacing: 0.02em;

    text-transform: uppercase;

    line-height: 1;

}



.protection-kicker {

    color: rgba(255, 255, 255, 0.82);

    font-size: clamp(15px, 1.4vw, 20px);

    font-weight: 400;

    white-space: nowrap;

}



.tint-intro-section {

    background: #f4f4f5;

    padding: 96px 7vw 92px;

}



.tint-content {

    max-width: 1120px;

    margin: 0 auto;

}



.tint-content p {

    margin: 0;

    color: #66676c;

    font-size: clamp(16px, 1.35vw, 20px);

    line-height: 1.35;

}



.tint-content b {

    font-weight: 800;

    color: #505156;

}



/* Classic Tints */

.classic-tints-section {

    background: #e5e6e8;

    padding: 58px 7vw 70px;

}



.classic-tint-block {

    max-width: 1220px;

    margin: 0 auto;

    padding: 0 0 52px;

}



.classic-tint-block + .classic-tint-block {

    padding-top: 54px;

    border-top: 8px solid rgba(180, 183, 186, 0.45);

}



.classic-tint-header {

    display: grid;

    grid-template-columns: 1fr auto;

    align-items: end;

    gap: 30px;

    margin-bottom: 34px;

    border-bottom: 2px solid #5a5b60;

    padding-bottom: 8px;

}



.classic-tint-header h2 {

    margin: 0;

    color: #4d4e53;

    font-size: clamp(22px, 2vw, 30px);

    font-weight: 800;

    text-transform: uppercase;

    line-height: 1;

}



.classic-tint-header span {

    color: #4d4e53;

    font-size: clamp(20px, 2vw, 28px);

    font-weight: 400;

    text-transform: uppercase;

    line-height: 1;

}



.classic-tint-content {

    display: grid;

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

    gap: 70px;

    align-items: center;

}



.classic-tint-levels {

    display: grid;

    gap: 10px;

}



.classic-tint-percentages {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    text-align: center;

    color: #303136;

    font-size: 14px;

    padding: 0 8px;

}



.classic-tint-strip img {

    width: 100%;

    display: block;

    height: auto;

}



.classic-gradient {

    text-align: center;

}



.classic-gradient-title {

    margin-bottom: 14px;

    color: #151516;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.15;

}



.classic-gradient-title span {

    display: block;

    font-size: 13px;

    font-weight: 400;

}



.classic-gradient img {

    width: 230px;

    max-width: 100%;

    height: auto;

    display: block;

    margin: 0 auto;

}



/* Royal Tints */

.royal-tints-section {

    background: #f4f4f5;

    padding: 64px 7vw 76px;

}



.tint-section-title {

    max-width: 1120px;

    margin: 0 auto 52px;

    padding-bottom: 10px;

    border-bottom: 1px solid rgba(80, 81, 86, 0.35);

}



.tint-section-title h2 {

    margin: 0;

    color: #151516;

    font-size: clamp(24px, 2.2vw, 32px);

    font-weight: 800;

    text-transform: uppercase;

    line-height: 1;

}



.royal-grid {

    max-width: 1120px;

    margin: 0 auto;

    display: grid;

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

    gap: 58px 70px;

}



.royal-card {

    text-align: center;

}



.royal-card h3 {

    margin: 0 0 4px;

    color: #151516;

    font-size: 17px;

    font-weight: 500;

    text-transform: uppercase;

    line-height: 1.2;

}



.royal-card p {

    margin: 0 0 22px;

    color: #151516;

    font-size: 14px;

    line-height: 1.2;

}



.royal-card img {

    width: 320px !important;

    max-width: 150%;

    height: auto;

    display: block;

    margin: 0 auto;

    filter: drop-shadow(0 18px 16px rgba(0, 0, 0, 0.18));

}



@media (max-width: 1100px) {

    .classic-tint-content {

        grid-template-columns: 1fr;

        gap: 34px;

    }



    .classic-gradient {

        max-width: 300px;

        margin: 0 auto;

    }



    .royal-grid {

        grid-template-columns: repeat(3, 1fr);

        gap: 48px 40px;

    }

}



@media (max-width: 768px) {

    .tint-page {

        padding-top: 120px;

    }



    .protection-hero {

        padding: 34px 24px 28px;

    }



    .protection-hero-inner {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }



    .protection-kicker {

        white-space: normal;

    }



    .tint-intro-section {

        padding: 58px 24px;

    }



    .classic-tints-section,

    .royal-tints-section {

        padding: 48px 24px 58px;

    }



    .classic-tint-header {

        grid-template-columns: 1fr;

        gap: 8px;

    }



    .classic-tint-percentages {

        font-size: 12px;

    }



    .royal-grid {

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

        gap: 42px 24px;

    }



 

}



@media (max-width: 480px) {

    .royal-grid {

        grid-template-columns: 1fr;

    }

}



/* Sport Tints */

.sport-tints-section {

    background: #f4f4f5;

    padding: 10px 7vw 84px;

}



.sport-grid {

    max-width: 1120px;

    margin: 0 auto;

    display: grid;

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

    gap: 58px 70px;

}



.sport-card {

    text-align: center;

}



.sport-card h3 {

    margin: 0 0 4px;

    color: #151516;

    font-size: 17px;

    font-weight: 500;

    text-transform: uppercase;

    line-height: 1.2;

}



.sport-card p {

    margin: 0 0 22px;

    color: #151516;

    font-size: 14px;

    line-height: 1.2;

}



.sport-card img {

    width: 320px !important;

    max-width: 150%;

    height: auto;

    display: block;

    margin: 0 auto;

    filter: drop-shadow(0 18px 16px rgba(0, 0, 0, 0.18));

}



.tint-note {

    max-width: 1120px;

    margin: 52px auto 0;

    color: #151516;

    font-size: 15px;

    line-height: 1.3;

}



.tint-note strong {

    font-weight: 800;

}



@media (max-width: 1100px) {

    .sport-grid {

        grid-template-columns: repeat(3, 1fr);

        gap: 48px 40px;

    }

}



@media (max-width: 768px) {

    .sport-tints-section {

        padding: 0 24px 64px;

    }



    .sport-grid {

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

        gap: 42px 24px;

    }

    .tint-note {

        margin-top: 42px;

    }

}



@media (max-width: 480px) {

    .sport-grid {

        grid-template-columns: 1fr;

    }

}



.tints-technical-section {

    background: #ffffff;

    padding: 70px 7vw 90px;

}



.tints-technical-container {

    max-width: 1120px;

    margin: 0 auto;

}



.tints-accordion-box {

    border-top: 1px solid rgba(80, 81, 86, 0.28);

    border-bottom: 1px solid rgba(80, 81, 86, 0.28);

}



.tints-accordion-toggle {

    width: 100%;

    border: 0;

    background: transparent;

    padding: 24px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    cursor: pointer;

    color: #151516;

    font-size: clamp(20px, 2vw, 28px);

    font-weight: 800;

    text-transform: uppercase;

    text-align: left;

}



.tints-accordion-icon {

    flex: 0 0 auto;

    width: 34px;

    height: 34px;

    border: 1px solid rgba(80, 81, 86, 0.45);

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #505052;

    font-size: 26px;

    font-weight: 400;

    line-height: 1;

}



.tints-accordion-panel {

    display: none;

    padding: 8px 0 42px;

}



.tints-accordion-box.is-open .tints-accordion-panel {

    display: block;

}



.tints-full-image {

    margin-bottom: 44px;

}



.tints-full-image img,

.tints-table-image img {

    width: 100%;

    height: auto;

    display: block;

}



.tints-notes-box {

    max-width: 950px;

    margin-bottom: 46px;

}



.tints-notes-box h2 {

    margin: 0 0 22px;

    color: #505156;

    font-size: clamp(22px, 2vw, 30px);

    font-weight: 800;

    line-height: 1.15;

}



.tints-notes {

    margin: 0;

    padding: 0;

    list-style: none;

}



.tints-notes li {

    position: relative;

    padding-left: 22px;

    margin-bottom: 16px;

    color: #66676c;

    font-size: clamp(16px, 1.25vw, 19px);

    line-height: 1.35;

}



.tints-notes li::before {

    content: "•";

    position: absolute;

    left: 0;

    top: 0;

    color: #505052;

    font-weight: 800;

}



@media (max-width: 768px) {

    .tints-technical-section {

        padding: 54px 24px 70px;

    }



    .tints-accordion-toggle {

        padding: 20px 0;

    }



    .tints-accordion-icon {

        width: 30px;

        height: 30px;

        font-size: 22px;

    }



    .tints-accordion-panel {

        padding-bottom: 34px;

    }



    .tints-full-image {

        margin-bottom: 34px;

    }

}



/* Mirror section */

.mirror-section {

    background: #ffffff;

    color: #55565b;

}



.mirror-hero {

    background: #505052;

    padding: 34px 7vw 28px;

}



.mirror-hero-inner {

    max-width: 1320px;

    margin: 0 auto;

}



.mirror-small-label {

    display: block;

    color: rgba(255, 255, 255, 0.75);

    font-size: 10px;

    font-weight: 500;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-bottom: 3px;

}



.mirror-main-title {

    margin: 0;

    color: #ffffff;

    font-size: clamp(32px, 4vw, 54px);

    font-weight: 800;

    letter-spacing: 0.02em;

    text-transform: uppercase;

    line-height: 1;

}



.mirror-intro {

    background: #f4f4f5;

    padding: 58px 7vw 0;

}



.mirror-intro-inner {

    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 60px;

    align-items: end;

}



.mirror-text {

    padding-bottom: 66px;

}



.mirror-text h2 {

    margin: 0 0 24px;

    color: #45464b;

    font-size: clamp(22px, 2vw, 30px);

    font-weight: 800;

    text-transform: uppercase;

    line-height: 1.15;

}



.mirror-text p {

    margin: 0 0 24px;

    color: #55565b;

    font-size: clamp(16px, 1.25vw, 19px);

    line-height: 1.25;

}



.mirror-girl {

    display: flex;

    align-items: flex-end;

    justify-content: center;

}



.mirror-girl img {

    width: 100%;

    max-width: 600px;

    height: auto;

    display: block;

}



.mirror-driving-strip {

    background: linear-gradient(90deg, #232426 0%, #333436 100%);

    color: #ffffff;

    padding: 18px 7vw;

}



.mirror-driving-inner {

    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 40px;

    align-items: center;

}



.mirror-driving-title {

    margin: 0;

    color: #ffffff;

    font-size: clamp(20px, 2vw, 28px);

    font-weight: 800;

    text-transform: uppercase;

    line-height: 1;

}



.mirror-driving-info {

    display: flex;

    align-items: center;

    gap: 18px;

}



.mirror-driving-text {

    color: rgba(255, 255, 255, 0.86);

    font-size: 15px;

    line-height: 1.15;

}



.mirror-driving-text strong {

    display: block;

    color: #ffffff;

    font-size: 18px;

    font-weight: 500;

    text-transform: uppercase;

}



.mirror-driving-icons {

    display: flex;

    gap: 10px;

}



.mirror-driving-icon {

    width: 52px;

    height: 52px;

    border: 3px solid #ffffff;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-size: 22px;

    font-weight: 800;

}



.mirror-products {

    background: linear-gradient(180deg, #111113 0%, #282a2c 100%);

    padding: 74px 7vw 70px;

}



.mirror-products-grid {

    max-width: 1320px;

    margin: 0 auto;

    display: grid;

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

    gap: 48px;

}



.mirror-product {

    text-align: center;

    color: #ffffff;

}



.mirror-product img {

    width: 320px !important;

    max-width: 100%;

    height: auto;

    display: block;

    margin: 0 auto 42px;

    filter: drop-shadow(0 22px 20px rgba(0, 0, 0, 0.45));

    transition: transform 0.3s ease, filter 0.3s ease;

}



.mirror-product:hover img {

    transform: translateY(-8px);

    filter: drop-shadow(0 28px 24px rgba(0, 0, 0, 0.55));

}



.mirror-product-title {

    margin: 0;

    color: #ffffff;

    font-size: clamp(16px, 1.25vw, 20px);

    font-weight: 400;

    text-transform: uppercase;

    line-height: 1.2;

}



.mirror-product-title strong {

    font-weight: 800;

}



@media (max-width: 1000px) {

    .mirror-intro-inner {

        grid-template-columns: 1fr;

        gap: 30px;

    }



    .mirror-text {

        padding-bottom: 20px;

    }



    .mirror-products-grid {

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

    }



    .mirror-driving-inner {

        grid-template-columns: 1fr;

        gap: 18px;

    }

}



@media (max-width: 768px) {

    .mirror-hero {

        padding: 34px 24px 28px;

    }



    .mirror-intro {

        padding: 48px 24px 0;

    }



    .mirror-driving-strip {

        padding: 22px 24px;

    }



    .mirror-driving-info {

        align-items: flex-start;

        flex-direction: column;

    }



    .mirror-products {

        padding: 54px 24px 60px;

    }



    .mirror-products-grid {

        grid-template-columns: 1fr;

        gap: 58px;

    }



    .mirror-product img {

        margin-bottom: 28px;

    }

}



/* Outdoor Mirror section */

.mirror-outdoor-section {

    background: #ffffff;

    color: #55565b;

    margin-bottom: 100px;

}



.mirror-outdoor-hero {

    background: #505052;

    padding: 34px 7vw 28px;

}



.mirror-outdoor-hero-inner {

    max-width: 1320px;

    margin: 0 auto;

}



.mirror-outdoor-small-label {

    display: block;

    color: rgba(255, 255, 255, 0.75);

    font-size: 10px;

    font-weight: 500;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-bottom: 3px;

}



.mirror-outdoor-main-title {

    margin: 0;

    color: #ffffff;

    font-size: clamp(32px, 4vw, 54px);

    font-weight: 800;

    letter-spacing: 0.02em;

    text-transform: uppercase;

    line-height: 1;

}



.mirror-outdoor-intro {

    background: linear-gradient(90deg, #8fb3cf 0%, #9eb9cf 35%, #89a4bb 100%);

    overflow: hidden;

}



.mirror-outdoor-intro-inner {

    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.95fr 1.05fr;

    gap: 48px;

    align-items: center;

    min-height: 520px;

    padding: 0 7vw;

}



.mirror-outdoor-man {

    align-self: end;

    display: flex;

    justify-content: flex-start;

}



.mirror-outdoor-man img {

    width: 100%;

    max-width: 520px;

    height: auto;

    display: block;

}



.mirror-outdoor-text-wrap {

    color: #ffffff;

    padding: 40px 0;

}



.mirror-outdoor-text-wrap h2 {

    margin: 0 0 28px;

    color: #ffffff;

    font-size: clamp(24px, 2.1vw, 40px);

    font-weight: 800;

    text-transform: uppercase;

    line-height: 1.08;

}



.mirror-outdoor-benefits {

    position: relative;

    margin: 0;

    padding: 0 0 0 34px;

    list-style: none;

}



.mirror-outdoor-benefits::before {

    content: "";

    position: absolute;

    left: 0;

    top: 2px;

    bottom: 2px;

    width: 3px;

    background: rgba(255, 255, 255, 0.8);

}



.mirror-outdoor-benefits li {

    margin: 0 0 18px;

    color: rgba(255, 255, 255, 0.98);

    font-size: clamp(17px, 1.35vw, 22px);

    line-height: 1.3;

}



.mirror-outdoor-benefits li:last-child {

    margin-bottom: 0;

}



.mirror-outdoor-strip {

    background: linear-gradient(90deg, #232426 0%, #333436 100%);

    color: #ffffff;

    padding: 18px 7vw;

}



.mirror-outdoor-strip-inner {

    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 30px;

    align-items: center;

}



.mirror-outdoor-strip-title {

    margin: 0;

    color: #ffffff;

    font-size: clamp(22px, 2vw, 30px);

    font-weight: 800;

    text-transform: uppercase;

    line-height: 1;

}



.mirror-outdoor-strip-info {

    display: flex;

    align-items: center;

    gap: 18px;

}



.mirror-outdoor-strip-text {

    color: rgba(255, 255, 255, 0.86);

    font-size: 15px;

    line-height: 1.15;

}



.mirror-outdoor-strip-text strong {

    display: block;

    color: #ffffff;

    font-size: 18px;

    font-weight: 500;

    text-transform: uppercase;

}



.mirror-outdoor-strip-icon {

    width: 58px;

    height: 58px;

    border: 3px solid #ffffff;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-size: 28px;

    font-weight: 800;

    line-height: 1;

}



.mirror-outdoor-products {

    background: linear-gradient(180deg, #111113 0%, #2b2d2f 100%);

    padding: 74px 7vw 80px;

}



.mirror-outdoor-grid {

    max-width: 1320px;

    margin: 0 auto;

    display: grid;

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

    gap: 52px 36px;

}



.mirror-outdoor-grid .mirror-product {

    text-align: center;

}



.mirror-outdoor-grid .mirror-product img {

    margin: 0 auto 32px;

    filter: drop-shadow(0 24px 22px rgba(0, 0, 0, 0.45));

}



.mirror-outdoor-grid .mirror-product-title {

    color: #ffffff;

    font-size: clamp(16px, 1.2vw, 20px);

    font-weight: 400;

    text-transform: uppercase;

    line-height: 1.2;

    margin: 0;

}



.mirror-outdoor-grid .mirror-product-title strong {

    font-weight: 800;

}



.mirror-outdoor-grid .mirror-product:nth-child(5) {

    grid-column: 1 / 2;

}



.mirror-outdoor-grid .mirror-product:nth-child(6) {

    grid-column: 2 / 3;

}



.mirror-outdoor-grid .mirror-product:nth-child(7) {

    grid-column: 3 / 4;

}



@media (max-width: 1100px) {

    .mirror-outdoor-intro-inner {

        grid-template-columns: 1fr;

        gap: 24px;

        padding-top: 40px;

    }



    .mirror-outdoor-man {

        justify-content: center;

    }



    .mirror-outdoor-text-wrap {

        padding-top: 0;

    }



    .mirror-outdoor-grid {

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

    }



    .mirror-outdoor-grid .mirror-product:nth-child(5),

    .mirror-outdoor-grid .mirror-product:nth-child(6),

    .mirror-outdoor-grid .mirror-product:nth-child(7) {

        grid-column: auto;

    }



    .mirror-outdoor-strip-inner {

        grid-template-columns: 1fr;

        gap: 18px;

    }

}



@media (max-width: 768px) {

    .mirror-outdoor-hero {

        padding: 34px 24px 28px;

    }



    .mirror-outdoor-intro-inner {

        padding-left: 24px;

        padding-right: 24px;

        min-height: auto;

    }



    .mirror-outdoor-text-wrap h2 {

        font-size: 28px;

    }



    .mirror-outdoor-benefits {

        padding-left: 24px;

    }



    .mirror-outdoor-strip {

        padding: 22px 24px;

    }



    .mirror-outdoor-strip-info {

        align-items: flex-start;

    }



    .mirror-outdoor-products {

        padding: 54px 24px 60px;

    }



    .mirror-outdoor-grid {

        grid-template-columns: 1fr;

        gap: 58px;

    }

}


/* =========================================
   DESKTOP VERZIJA - CENTRIRANA DUGMAD DOLE
   ========================================= */

#homepage-swiper .swiper-button-prev {
    left: calc(50% - 70px); /* Pozicionira lijevo od centra */
    right: auto;
    top: auto; /* Poništava defaultni swiper top */
    bottom: 30px; /* Spušta dugmad niže */
    background: url(../assets/slider-left.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: none;
    width: 63px;
    height: 63px;
    transition: transform 0.3s ease;
    z-index: 10;
}

#homepage-swiper .swiper-button-next {
    left: calc(50% + 7px); /* Pozicionira desno od centra (razmak 14px) */
    right: auto;
    top: auto;
    bottom: 30px; /* U istoj visini kao i prev */
    background: url(../assets/slider-right.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: none;
    width: 63px;
    height: 63px;
    transition: transform 0.3s ease;
    z-index: 10;
}

/* Hover efekat (povecanje) */
#homepage-swiper .swiper-button-prev:hover,
#homepage-swiper .swiper-button-next:hover {
    transform: scale(1.2);
}

/* Uklanjanje defaultnih Swiper strelica */
#homepage-swiper .swiper-button-prev::after,
#homepage-swiper .swiper-button-next::after {
    display: none;
}


/* =========================================
   MOBILNA VERZIJA (max-width: 800px)
   ========================================= */

@media only screen and (max-width: 1200px) {
    /* Tvoja pravila za tekst i slike */
    .slider-text img {
        max-height: 22px;
    }
    .slider-text h3 {
        font-size: 25px;
        margin-bottom: 15px;
    }
    .slider-text p {
        font-size: 18px;
        line-height: 25px;
    }
    .slider-text {
        left: 20px;
        top: unset!important;
        bottom: 15px!important;
        z-index: 1;
    }
    .slider-image {
        filter: brightness(0.8);
    }
    .products-section {
        padding: 50px 0px;
    }

    /* Nova pravila za dugmad na mobilnom (skroz desno) */
    #homepage-swiper .swiper-button-prev,
    #homepage-swiper .swiper-button-next {
        display: block; 
        left: auto; /* Poništavamo centriranje sa desktopa */
    }

    #homepage-swiper .swiper-button-next {
        right: 15px; /* Udaljenost od desne ivice */
    }

    #homepage-swiper .swiper-button-prev {
        right: 85px; /* Pozicija pored next dugmeta (15px + 63px + 7px razmaka) */
    }
}