/* =====================================
   PRODUCTS HERO
   Layout consistent with About / Contact
===================================== */

.products-hero {

    display: grid;

    /* Takie same proporcje jak About */
    grid-template-columns: 42% 58%;

    min-height: 620px;

    padding: 0;

    background: linear-gradient(
        135deg,
        #f7f4fb 0%,
        #eee8f7 100%
    );

}


/* =====================================
   HERO - CONTENT
===================================== */

.products-hero-content {

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 70px 4vw 70px 8vw;

}


.products-hero .section-label {

    display: block;

    margin-bottom: 24px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;

    color: #7355A3;

}


.products-hero h1 {

    margin: 0 0 28px;

    font-size: clamp(52px, 4vw, 68px);
    line-height: 1.05;
    letter-spacing: -0.045em;

    font-weight: 600;

    color: #27233A;

}


.products-hero p {

    max-width: 570px;

    margin: 0;

    font-size: 17px;
    line-height: 1.75;

    color: #666;

}


/* =====================================
   HERO - IMAGE
===================================== */

.products-hero-image {

    position: relative;

    min-width: 0;
    min-height: 620px;

    overflow: hidden;

    background: #eee8f5;

}


.products-hero-image img {

    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 0;
    box-shadow: none;

    transition: transform 0.8s ease;

}


.products-hero-image:hover img {

    transform: scale(1.015);

}


/* =====================================
   HERO BUTTONS
===================================== */

.hero-buttons {

    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 36px;

    flex-wrap: wrap;

}


.hero-btn-primary,
.hero-btn-secondary,
.hero-btn-outline {

    display: inline-flex;

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

    min-height: 54px;

    padding: 15px 24px;

    border-radius: 12px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition: all .3s ease;

}


/* PRIMARY */

.hero-btn-primary {

    background: #4A3A72;
    color: #fff;

    border: 2px solid #4A3A72;

}


.hero-btn-primary:hover {

    background: #5D4A90;
    border-color: #5D4A90;

    color: #fff;

    transform: translateY(-2px);

}


/* SECONDARY */

.hero-btn-secondary {

    background: #F5F2FA;

    color: #4A3A72;

    border: 1px solid #DDD4EF;

}


.hero-btn-secondary:hover {

    background: #EEE8F8;

    color: #4A3A72;

    transform: translateY(-2px);

}


/* ALLEGRO */

.hero-btn-outline {

    background: transparent;

    color: #4A3A72;

    border: 2px solid #4A3A72;

}


.hero-btn-outline:hover {

    background: #4A3A72;

    color: #fff;

    transform: translateY(-2px);

}


/* =====================================
   PRODUCTS HERO - TABLET
===================================== */

@media(max-width:1024px) {

    .products-hero {

        grid-template-columns: 46% 54%;

        min-height: 560px;

    }

    .products-hero-content {

        padding: 60px 4vw;

    }

    .products-hero-image {

        min-height: 560px;

    }

    .products-hero h1 {

        font-size: clamp(42px, 5vw, 58px);

    }

    .hero-buttons {

        margin-top: 30px;

    }

}


/* =====================================
   PRODUCTS HERO - MOBILE
===================================== */

@media(max-width:767px) {

    .products-hero {

        grid-template-columns: 1fr;

        min-height: 0;

    }

    .products-hero-content {

        padding: 75px 24px 80px;

        text-align: left;

    }

    .products-hero h1 {

        font-size: 46px;

    }

    .products-hero p {

        font-size: 16px;

    }

    .products-hero-image {

        min-height: 420px;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        margin-top: 32px;

    }

    .hero-btn-primary,
    .hero-btn-secondary,
    .hero-btn-outline {

        width: 100%;

    }

}


/* =====================================
   PRODUCTS HERO - SMALL MOBILE
===================================== */

@media(max-width:420px) {

    .products-hero-content {

        padding: 65px 18px 70px;

    }

    .products-hero h1 {

        font-size: 40px;

    }

    .products-hero-image {

        min-height: 350px;

    }

}

/* RESPONSIVE */

@media(max-width:768px){

.products-hero{

    padding:80px 25px;

}

.products-hero-grid{

    grid-template-columns:1fr;
    gap:50px;

}

.products-hero h1{

    font-size:42px;

}

.products-hero p{

    font-size:18px;

}

.hero-buttons{

    flex-direction:column;

}

.hero-btn-primary,
.hero-btn-secondary,
.hero-btn-outline{

    width:100%;

}

}

/* =====================================
   KOLEKCJA PRODUKTÓW
===================================== */

.collection-nav{

    padding:140px 8%;
    background:#ffffff;

}

.section-header{

    max-width:760px;
    margin:0 auto 90px;
    text-align:center;

}

.section-header h2{

    font-size:52px;
    line-height:1.15;
    color:#27233A;
    font-weight:700;
    margin:20px 0;

}

.section-header p{

    max-width:720px;
    margin:auto;
    font-size:19px;
    line-height:1.9;
    color:#72707C;

}

/* ===================================== */

.collection-grid{

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:40px;
    align-items:stretch;

}

/* ===================================== */

.collection-card{

    display:flex;
    flex-direction:column;

    background:#ffffff;

    border:1px solid #EEE7F6;

    border-radius:30px;

    overflow:hidden;

    transition:all .35s ease;

    box-shadow:
    0 12px 35px rgba(32,20,60,.05);

    height:100%;

}

.collection-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 35px 80px rgba(48,32,73,.14);

}

/* ===================================== */

.collection-image{

    overflow:hidden;
    background:#FBFAFD;
    position:relative;

}

.collection-image img{

    width:100%;
    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

    transition:transform .6s ease;

}

.collection-card:hover .collection-image img{

    transform:scale(1.08);

}

/* ===================================== */

.collection-content{

    display:flex;
    flex-direction:column;
    flex:1;

    padding:34px;

}

.collection-content h3{

    font-size:31px;
    line-height:1.25;
    font-weight:700;

    color:#27233A;

    margin-bottom:12px;

}

/* ===================================== */

.product-stars{

    color:#D8B458;

    font-size:18px;

    letter-spacing:3px;

    margin-bottom:20px;

}

/* ===================================== */

.collection-content p{

    color:#6E6E78;

    font-size:17px;

    line-height:1.8;

    margin-bottom:25px;

}

/* ===================================== */

.product-mini-benefits{

    list-style:none;

    margin:0;

    padding:0;

    margin-bottom:35px;

}

.product-mini-benefits li{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:12px;

    font-size:16px;

    color:#4A4758;

}

/* ===================================== */

.collection-buttons{

    display:flex;

    gap:14px;

    margin-top:auto;

}

/* ===================================== */

.btn-secondary{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    height:56px;

    border-radius:14px;

    border:1px solid #D9D1E9;

    background:#fff;

    color:#433463;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

}

.btn-secondary:hover{

    background:#F7F4FB;

    border-color:#C7B9E6;

}

/* ===================================== */

.btn-primary{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    height:56px;

    border-radius:14px;

    background:#46346D;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.btn-primary:hover{

    background:#5C488A;

    transform:translateY(-2px);

}

/* ===================================== */

.collection-image a{

    display:block;

}

/* ===================================== */

.collection-image::after{

    content:"🔍 Powiększ";

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    background:rgba(39,35,58,.82);

    color:#fff;

    padding:12px 22px;

    border-radius:40px;

    font-size:15px;

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.collection-card:hover .collection-image::after{

    opacity:1;

}

/* ===================================== */

@media(max-width:1100px){

.collection-grid{

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

}

}

/* ===================================== */

@media(max-width:768px){

.collection-nav{

    padding:90px 25px;

}

.section-header h2{

    font-size:38px;

}

.collection-grid{

    grid-template-columns:1fr;

    gap:30px;

}

.collection-content{

    padding:28px;

}

.collection-content h3{

    font-size:28px;

}

.collection-buttons{

    flex-direction:column;

}

.btn-primary,
.btn-secondary{

    width:100%;

}

}

/*==========================================
KARTA PRODUKTU
==========================================*/

.product-section{

    padding:140px 8%;

    background:#ffffff;

}

.product-grid{

    display:grid;

    grid-template-columns:520px 1fr;

    gap:90px;

    align-items:start;

}

/*==========================================
GALERIA
==========================================*/

.product-gallery{

    position:sticky;

    top:120px;

}

.product-gallery a{

    display:block;

}

.product-main-image{

    width:100%;

    border-radius:28px;

    display:block;

    box-shadow:0 25px 60px rgba(40,20,70,.08);

    transition:.4s;

}

.product-main-image:hover{

    transform:scale(1.02);

}

.product-thumbs{

    display:flex;

    gap:15px;

    margin-top:20px;

}

.product-thumbs img{

    width:90px;

    height:90px;

    border-radius:14px;

    object-fit:cover;

    cursor:pointer;

    border:2px solid #EFEAF7;

    transition:.3s;

}

.product-thumbs img:hover{

    border-color:#5A457E;

    transform:translateY(-4px);

}

/*==========================================
OPIS
==========================================*/

.product-info{

    max-width:700px;

}

.product-info h2{

    font-size:54px;

    line-height:1.1;

    color:#27233A;

    margin:15px 0;

}

.product-stars{

    color:#D8B458;

    font-size:22px;

    letter-spacing:3px;

    margin:15px 0 30px;

}

.product-lead{

    font-size:21px;

    line-height:1.9;

    color:#666;

    margin-bottom:40px;

}

/*==========================================
CECHY
==========================================*/

.product-features{

    display:grid;

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

    gap:15px;

    list-style:none;

    padding:0;

    margin:0 0 35px;

}

.product-features li{

    background:#F8F6FC;

    border-radius:12px;

    padding:14px 18px;

    font-size:17px;

}

/*==========================================
POJEMNOŚĆ
==========================================*/

.product-volume{

    margin-bottom:35px;

    font-size:19px;

    color:#444;

}

.product-volume strong{

    color:#27233A;

}

/*==========================================
PRZYCISK
==========================================*/

.product-buttons{

    margin-bottom:45px;

}

.product-buttons .btn-primary{

    display:inline-block;

    padding:18px 42px;

    border-radius:14px;

    background:#4B3A73;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.product-buttons .btn-primary:hover{

    background:#624C96;

    transform:translateY(-2px);

}

/*==========================================
AKORDEON
==========================================*/

.product-accordion{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.product-accordion details{

    background:#fff;

    border:1px solid #ECE7F4;

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

}

.product-accordion details[open]{

    box-shadow:0 10px 30px rgba(50,35,80,.07);

}

.product-accordion summary{

    list-style:none;

    cursor:pointer;

    padding:24px 28px;

    font-size:22px;

    font-weight:600;

    color:#27233A;

    position:relative;

}

.product-accordion summary::-webkit-details-marker{

    display:none;

}

.product-accordion summary::after{

    content:"+";

    position:absolute;

    right:28px;

    top:50%;

    transform:translateY(-50%);

    font-size:30px;

    color:#5A457E;

    transition:.3s;

}

.product-accordion details[open] summary::after{

    content:"−";

}

.product-accordion details p{

    padding:0 28px 28px;

    margin:0;

    color:#666;

    line-height:2;

    font-size:17px;

}

.product-list{

    padding:0 45px 28px;

    margin:0;

}

.product-list li{

    margin-bottom:12px;

    color:#555;

    line-height:1.8;

}

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

@media(max-width:1100px){

.product-grid{

grid-template-columns:1fr;

gap:50px;

}

.product-gallery{

position:relative;

top:auto;

}

}

@media(max-width:768px){

.product-section{

padding:90px 25px;

}

.product-info h2{

font-size:38px;

}

.product-lead{

font-size:18px;

}

.product-features{

grid-template-columns:1fr;

}

.product-thumbs{

justify-content:center;

}

.product-main-image{

border-radius:18px;

}

.product-accordion summary{

font-size:18px;

padding:18px 20px;

}

.product-accordion details p{

padding:0 20px 20px;

}

.product-list{

padding:0 35px 20px;

}

}


/* =====================================
CTA
===================================== */

.cta-keranique{

    padding:140px 8%;

    background:
    linear-gradient(
    180deg,
    #F8F6FC,
    #F3EEF9);

    text-align:center;

}

.cta-keranique h2{

    font-size:56px;

    color:#27233A;

    margin:20px auto;

    max-width:800px;

    line-height:1.15;

}

.cta-keranique p{

    max-width:760px;

    margin:0 auto 60px;

    font-size:20px;

    line-height:1.9;

    color:#666;

}

.cta-image{

    width:100%;

    max-width:900px;

    display:block;

    margin:0 auto 60px;

    border-radius:28px;

    box-shadow:

    0 35px 70px rgba(0,0,0,.08);

}

.cta-benefits{

    display:grid;

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

    gap:18px;

    max-width:1000px;

    margin:0 auto 55px;

}

.cta-benefits div{

    background:#ffffff;

    border:1px solid #ECE6F6;

    border-radius:16px;

    padding:22px;

    font-size:18px;

    color:#423363;

    font-weight:600;

    box-shadow:

    0 10px 25px rgba(40,20,70,.05);

}

.cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-buttons a{

    flex:none;

    min-width:230px;

}

.cta-buttons .btn-primary{

    min-width:240px;

}

.cta-buttons .btn-secondary{

    min-width:240px;

}

@media(max-width:900px){

.cta-benefits{

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

}

}

@media(max-width:768px){

.cta-keranique{

padding:90px 25px;

}

.cta-keranique h2{

font-size:40px;

}

.cta-keranique p{

font-size:18px;

}

.cta-benefits{

grid-template-columns:1fr;

}

.cta-buttons{

flex-direction:column;

align-items:center;

}

}