/* =================================================
   SINGLE PRODUCT – KrystalSpace Premium
   ================================================= */

/* --- SYSTEMOWE ZMIENNE --- */
:root {
    --ks-green: #22c55e;
    --ks-blue: #ec8088;
    --ks-navy: #1e293b;
    --ks-slate: #64748b;
    --ks-bg-light: #f8fafc;
    --ks-gradient: linear-gradient(135deg, #ec8088, #ec8088);
    --ks-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* --- CONTAINER --- */
.ks-product-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- BREADCRUMBS --- */
.ks-breadcrumbs-wrap {
    padding: 30px 0;
    font-size: 14px;
    color: var(--ks-slate);
}
.ks-breadcrumbs-wrap a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}
.ks-breadcrumbs-wrap a:hover {
    color: var(--ks-blue);
}
.ks-breadcrumbs-wrap i {
    font-size: 10px;
    margin: 0 10px;
    opacity: 0.5;
}

/* --- GRID --- */
.ks-single-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 70px;
    margin-bottom: 50px;
    align-items: start;
}

/* --- GALERIA --- */
.ks-gallery-sticky {
    position: sticky;
    top: 110px;
}
.ks-main-img-box {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #f1f5f9;
    cursor: zoom-in;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px -15px rgba(59, 130, 246, 0.08);
}
#ks-zoom-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease-out;
}
.ks-thumb-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 20px;
}
.ks-thumb-link {
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: var(--ks-transition);
    background: #fff;
}
.ks-thumb-link:hover {
    border-color: var(--ks-blue);
}

/* --- TYPOGRAFIA --- */
.ks-title-main {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--ks-navy);
    margin-bottom: 15px;
    line-height: 1.1;
}
.ks-short-text {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ks-slate);
    margin-bottom: 30px;
}

/* --- CENA --- */
.ks-price-display .price {
    font-size: 32px;
    font-weight: 700;
    color: var(--ks-navy);
    margin-bottom: 35px;
    display: block;
}
.ks-price-display ins {
    text-decoration: none;
}
.ks-price-display del {
    font-size: 24px;
    opacity: 0.3;
    margin-right: 15px;
}

/* --- ADD TO CART --- */
.ks-buy-row {
    display: flex;
    gap: 15px;
    align-items: stretch;
    margin-bottom: 20px;
}
.ks-add-to-cart-btn {
    flex-grow: 1;
    background: var(--ks-gradient);
    color: #fff !important;
    font-weight: 700;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: var(--ks-transition);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.2);
}
.ks-add-to-cart-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.3);
}

/* --- PŁATNOŚCI --- */
.ks-secure-payments-wrapper {
    margin-top: 10px;
    padding: 20px;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 20px;
    text-align: center;
}
.ks-payment-header {
    font-size: 13px;
    font-weight: 700;
    color: var(--ks-navy);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ks-payment-header i {
    color: var(--ks-green);
    font-size: 18px;
}
.ks-payment-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 28px;
    color: #cbd5e1;
    margin-top: 10px;
}

/* --- FEATURES BAR --- */
.ks-features-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 25px 0;
}
.ks-feat-card {
    background: var(--ks-bg-light);
    padding: 15px 10px;
    border-radius: 15px;
    text-align: center;
    transition: 0.3s;
}
.ks-feat-card i {
    font-size: 24px;
    color: var(--ks-blue);
    margin-bottom: 8px;
    display: block;
}
.ks-feat-card span {
    font-size: 10px;
    font-weight: 800;
    color: var(--ks-navy);
    text-transform: uppercase;
}

/* --- TABS --- */
.ks-tabs-section {
    margin: 80px 0;
    background: #fff;
    border-radius: 40px;
    padding: 60px;
    border: 1px solid #f1f5f9;
}
.ks-tabs-nav {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-bottom: 50px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
}
.ks-tab-btn {
    padding: 15px 0;
    border: none;
    background: none;
    font-size: 18px;
    color: var(--ks-slate);
    cursor: pointer;
    position: relative;
}
.ks-tab-btn.active {
    color: #000;
    font-weight: 700;
}
.ks-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--ks-gradient);
    border-radius: 10px;
}
.ks-tab-content {
    display: none;
    line-height: 1.8;
    color: #334155;
    font-size: 16px;
}
/* --- KRYSTALSPACE QUANTITY INPUT --- */

/* Kontener (WooCommerce zazwyczaj używa klasy .quantity) */
.quantity {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Stylizacja pola tekstowego */
input.qty[type="number"] {
    width: 70px;
    height: 48px;
    padding: 0 5px;
    text-align: center;
    font-family: 'Archivo', sans-serif; /* Archivo świetnie wygląda przy liczbach */
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ks-dark);
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    outline: none;
    transition: var(--ks-transition);
    appearance: none; /* Ukrycie strzałek Safari/Chrome */
    -moz-appearance: textfield; /* Ukrycie strzałek Firefox */
}

/* Ukrycie strzałek (Spinners) w Webkit (Chrome, Safari, Edge) */
input.qty::-webkit-outer-spin-button,
input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Stan Hover & Focus */
input.qty:hover {
    border-color: var(--ks-indigo);
    background-color: #f8fafc;
}

input.qty:focus {
    border-color: var(--ks-indigo);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
    background-color: #ffffff;
}

/* Opcjonalne: jeśli chcesz, aby input był szerszy na mobile dla łatwiejszego klikania */
@media (max-width: 768px) {
    input.qty[type="number"] {
        width: 80px;
        height: 52px;
        font-size: 1.2rem;
    }
}
/* --- KRYSTALSPACE SHOP GRID UPDATED --- */

/* 1. Sekcja produktów - dodajemy odstęp od góry i dołu strony */
.related.products, 
.site-main .products-archive-container {
    padding: 60px 0; /* Więcej miejsca dla całej sekcji */
}

/* 2. Usunięcie "clearfix" */
ul.products::before, 
ul.products::after {
    display: none !important;
    content: none !important;
}

/* 3. Resetowanie klas WooCommerce */
ul.products li.product.first, 
ul.products li.product.last {
    clear: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

/* 4. Główny Grid - dodajemy padding boczny, żeby produkty nie dotykały krawędzi ekranu */
ul.products.columns-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px; /* Zwiększony odstęp między kartami dla lepszej czytelności */
    list-style: none;
    padding: 20px 0; /* Padding góra/dół dla listy */
    margin: 0;
}

/* 5. Karta produktu - zwiększamy wewnętrzny padding tekstu */
.ks-product-card {
    margin: 0 !important;
    width: 100% !important;
}

.ks-card-body {
    background: #fff;
}

/* 6. Margines pod tytułem sekcji */
.related.products h2 {
    margin-bottom: 40px;
}

/* --- RWD (Mobile) --- */
@media (max-width: 1100px) {
    ul.products.columns-4 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    /* Na mobile dodajemy padding dla całego kontenera, żeby karty nie kleiły się do brzegów telefonu */
    ul.products.columns-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
        padding: 10px 15px; 
    }
    
    .ks-card-body {
        padding: 15px !important; /* Na mobile nieco mniejszy, żeby zmieścić treść */
    }
}
.ks-tab-content.active {
    display: block;
    animation: ksFadeUp 0.5s ease forwards;
}

@keyframes ksFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- RWD --- */
@media (max-width: 1024px) {
    .ks-single-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .ks-gallery-sticky {
        position: static;
    }
    .ks-tabs-section {
        padding: 30px 20px;
    }
}















.related.products h2{
    font-family: 'Archivo', sans-serif;
    font-weight: 700!important;
    color: var(--text-dark, #2d3436);
    position: relative;
    display: inline-block;
    font-size: 16px!important;
    margin-bottom: 8px!important;
    line-height: 1.3!important;
}
.ks-product-desc{
        font-size: 13px!important;
    color: var(--ks-slate, #64748b)!important;
    margin-bottom: 15px!important;
    line-height: 1.5!important;
}
.ks-status-text{
    display: flex!important;
    align-items: center!important;
    gap: 6px!important;
    font-size: 11px!important;
    font-weight: 700!important;
    text-transform: uppercase!important;
    color:#22c55e!important;
}
.ks-price{
    font-size: 18px!important;
    font-weight: 700;
    color: var(--ks-navy, #1e293b);
}































/* ==========================================================================
   KRYSTALSPACE – MINIMALIST LUXURY CARD (v3.3)
   Styl: Wyrafinowany minimalizm, brak gradientów tęczowych
   ========================================================================== */

:root {
    --ks-primary-dark: #0f172a;    /* Głęboki granat (Navy) */
    --ks-accent-coral: #ec8088;    /* Twój koralowy akcent */
    --ks-accent-aqua:  #6dd5ed;    /* Twój błękitny akcent */
    --ks-slate-light:  #f8fafc;    /* Jasne tło Slate */
    --ks-border-color: #e2e8f0;    /* Subtelna krawędź */
    --ks-shadow-soft:  0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --ks-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --ks-transition-smooth: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- KONTENER GŁÓWNY --- */
.ks-product-card {
    list-style: none;
    position: relative;
    transition: var(--ks-transition-smooth);
}

.ks-product-inner {
    background: #ffffff;
    border-radius: 24px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ks-border-color);
    box-shadow: 0 15px 35px rgba(59, 130, 246, .08);
    transition: var(--ks-transition-smooth);
    position: relative;
    overflow: hidden;
}

/* Hover Karty: Delikatne uniesienie i zmiana obramowania */
.ks-product-card:hover .ks-product-inner {
    transform: translateY(-8px);
    border: 1px #ec8088;
    box-shadow: 0 15px 35px rgba(59, 130, 246, .08);
    transition: all 0.3s ease;;
}

/* --- 1. BADGES (Klasyczne, stałe kolory) --- */
.ks-product-badges {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
}

.ks-badge {
    padding: 5px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 6px; /* Bardziej nowoczesny, prostokątny szlif */
    color: #fff;
    letter-spacing: 0.5px;
}

.ks-badge-sale { background: var(--ks-accent-coral); }
.ks-badge-bestseller { background: var(--ks-primary-dark); }
.ks-badge-out { background: #94a3b8; }

/* --- 2. WISHLIST (Minimalistyczny okrąg) --- */
.ks-wishlist-pos {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 11;
    opacity: 0;
    transform: scale(0.9);
    transition: var(--ks-transition-smooth);
}

.ks-product-card:hover .ks-wishlist-pos {
    opacity: 1;
    transform: scale(1);
}

.ks-wishlist-toggle {
    width: 38px;
    height: 38px;
    background: #fff;
    border: 1px solid var(--ks-border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ks-primary-dark);
    transition: 0.3s;
    cursor: pointer;
}

.ks-wishlist-toggle:hover {
    background: var(--ks-slate-light);
    color: var(--ks-accent-coral);
    border-color: var(--ks-accent-coral);
}

/* --- 3. TYPOGRAFIA I BODY --- */
.ks-card-body {
    padding: 15px 4px 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ks-card-cat {
    font-size: 11px;
    font-weight: 600;
    color: #007aff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.ks-product-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.4;
}

.ks-product-title a {
    color: var(--ks-primary-dark);
    text-decoration: none;
}

.ks-product-title a:hover {
    color: var(--ks-accent-aqua);
}

.ks-product-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* --- 4. FOOTER & PRICE --- */
.ks-card-footer {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--ks-slate-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ks-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ks-primary-dark);
}

.ks-stock-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
}

.ks-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e2e8f0;
}

.instock .ks-dot { background: #10b981; } /* Klasyczna zieleń sukcesu */
.instock .ks-status-text { color: #10b981; }

/* --- 5. ACTION BUTTON (Elegancki Solid) --- */
.ks-card-actions {
    margin-top: 15px;
    transition: var(--ks-transition-smooth);
}

.ks-btn-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    text-decoration: none;
    transition: var(--ks-transition-smooth);
}

.ks-btn-cart:hover {
background: #000;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
}
/* =========================================================
   SECURE PAYMENTS WIDGET – NO MARKER STYLE
   ========================================================= */

#media_image-2 {
    list-style: none; /* Usuwa kropki listy */
    padding: 30px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* CAŁKOWITY BRAK MARKERA */
    background: transparent; 
    border: none !important; 
    box-shadow: none !important;
    
    transition: all 0.4s ease;
}

/* STYLIZACJA SAMEJ GRAFIKI (BELKI) */
#media_image-2 img {
    max-width: 350px; /* Optymalna szerokość dla czytelności ikon */
    width: 100%;
    height: auto;
    
    /* Efekt "Quiet Luxury": Belka jest lekko wyszarzona i wtapia się w tło */
    filter: grayscale(100%) brightness(1.1);
    opacity: 0.6;
    
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* INTERAKCJA: Belka "budzi się" po najechaniu */
#media_image-2:hover img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: translateY(-2px); /* Subtelne uniesienie */
}

/* FIX DLA MOBILNYCH: Belka zawsze wyśrodkowana */
@media (max-width: 768px) {
    #media_image-2 {
        padding: 20px 0;
    }
    #media_image-2 img {
        max-width: 280px; /* Mniejsza szerokość na telefonach */
    }
}
/* =========================================================
   WOOCOMMERCE REVIEWS – QUIET LUXURY STYLE (v3.7)
   ========================================================= */

#reviews.woocommerce-Reviews {
    padding: 40px 0;
}

/* --- 1. NAGŁÓWEK I STATUS --- */
.woocommerce-Reviews-title {
    font-family: 'Archivo', sans-serif;
    font-size: 1.5rem;
    color: var(--ks-primary-dark, #0f172a);
    margin-bottom: 20px;
}

.woocommerce-noreviews {
    color: #94a3b8;
    font-size: 14px;
    background: var(--ks-slate-light, #f8fafc);
    padding: 20px;
    border-radius: 16px;
    border-left: 4px solid #ec8088;
}

/* --- 2. FORMULARZ OPINII (Kontener) --- */
#review_form_wrapper {
    background: #ffffff;
    padding: 35px;
    border-radius: 28px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04); /* Miękki cień zamiast markerów */
    margin-top: 40px;
    border: 1px solid var(--ks-border-color, #e2e8f0);
}

.comment-reply-title {
    font-size: 1.1rem;
    font-weight: 700;
    display: block;
    margin-bottom: 25px;
    color: var(--ks-primary-dark, #0f172a);
}

/* --- 3. GWIAZDKI (Rating) --- */
.comment-form-rating {
    margin-bottom: 25px;
}

.comment-form-rating label {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 10px;
}

/* Stylizacja standardowych gwiazdek WooCommerce */
.stars a {
    color: #e2e8f0 !important; /* Domyślny kolor gwiazdek */
    transition: color 0.2s ease;
}

.stars a:hover,
.stars a.active {
    color: var(--ks-accent-coral, #ec8088) !important; /* Koralowy kolor po najechaniu */
}

/* --- 4. POLA TEKSTOWE --- */
.comment-form-comment label {
    display: block;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

#comment {
    width: 100%;
    background: var(--ks-slate-light, #f8fafc);
    border: 1px solid var(--ks-border-color, #e2e8f0);
    border-radius: 18px;
    padding: 15px 20px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ks-primary-dark);
    transition: all 0.3s ease;
    outline: none;
    min-height: 150px;
}

#comment:focus {
    background: #fff;
    border-color: var(--ks-accent-aqua, #6dd5ed);
    box-shadow: 0 0 0 4px rgba(109, 213, 237, 0.1); /* Delikatna poświata przy pisaniu */
}

/* --- 5. PRZYCISK WYŚLIJ --- */
.form-submit {
    margin-top: 20px;
}

#submit {
    background: var(--ks-primary-dark, #0f172a);
    color: #fff;
    border: none;
    padding: 14px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.4s ease;
    width: auto;
}

#submit:hover {
    background: var(--ks-accent-aqua, #6dd5ed);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(109, 213, 237, 0.2);
}

/* --- RESPONSIVE --- */
@media (max-width: 600px) {
    #review_form_wrapper {
        padding: 20px;
    }
    
    #submit {
        width: 100%; /* Przycisk na całą szerokość na komórkach */
    }
}