/* ==========================================================================
   MANAWA FLOW SHOP - "PRISMATIC COMMERCE"
   ========================================================================== */

/* --- 1. IMPORT CZCIONEK (Z folderu ../font/) --- */
@font-face { font-family: 'Sansation'; src: url('../font/Sansation-Regular.ttf') format('truetype'); font-weight: normal; }
@font-face { font-family: 'Sansation'; src: url('../font/Sansation-Bold.ttf') format('truetype'); font-weight: bold; }
@font-face { font-family: 'Outfit'; src: url('../font/Outfit-Light.ttf') format('truetype'); font-weight: 300; }
@font-face { font-family: 'Outfit'; src: url('../font/Outfit-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Outfit'; src: url('../font/Outfit-SemiBold.ttf') format('truetype'); font-weight: 600; }
@font-face { font-family: 'Outfit'; src: url('../font/Outfit-Bold.ttf') format('truetype'); font-weight: 700; }

:root {
    /* --- PALETA PRYZMATU --- */
    --color-accent-1: #FF9A9E; 
    --color-accent-2: #A18CD1; 
    --color-accent-3: #84FAB0; 
    --color-dark:     #1A1A1A; 
    
    /* --- TŁO I SZKŁO --- */
    --bg-light:       #FAFAFA; 
    --glass-white:    rgba(255, 255, 255, 0.65); 
    --glass-border:   rgba(255, 255, 255, 0.9);
    
    /* --- ZMIENNE UI --- */
    --font-head:      'Sansation', sans-serif;
    --font-body:      'Outfit', sans-serif;
    --radius:         20px;
    --shadow-soft:    0 20px 60px -15px rgba(0, 0, 0, 0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-body);
    color: var(--color-dark);
    background-color: var(--bg-light);
    line-height: 1.6;
}

/* --- TŁO MESH GRADIENT (ZGODNE Z MARKĄ) --- */
body::before {
    content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: 
        radial-gradient(at 0% 0%, rgba(255, 154, 158, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(132, 250, 176, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(161, 140, 209, 0.15) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(255, 236, 210, 0.2) 0px, transparent 50%);
    filter: blur(40px); z-index: -1; animation: meshMove 20s infinite alternate;
}
@keyframes meshMove { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }

/* --- HEADER SKLEPOWY (STYLIZOWANY NA NAVBAR MARKI) --- */
.header {
    background: var(--glass-white);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.8);
    padding: 15px 40px;
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 100;
    box-shadow: var(--shadow-soft);
}

.brand { 
    font-family: var(--font-head); font-size: 1.5rem; font-weight: 400; letter-spacing: 3px; 
    color: var(--color-dark); text-decoration: none;
}
.brand span { 
    font-weight: 600; 
    background: linear-gradient(90deg, #FF9A9E, #A18CD1); 
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
}

.nav-menu a {
    text-decoration: none; color: var(--color-dark); font-weight: 500; font-size: 0.9rem;
    margin-left: 20px; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s;
}
.nav-menu a:hover { color: var(--color-accent-2); }

/* --- UKŁAD SKLEPU --- */
.shop-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    max-width: 1300px;
    margin: 40px auto;
    padding: 0 20px;
}

/* --- SIDEBAR (SZKLANY PANEL) --- */
.sidebar {
    background: #fff;
    border-radius: var(--radius);
    padding: 30px;
    height: fit-content;
    border: 1px solid rgba(0,0,0,0.03);
    box-shadow: var(--shadow-soft);
}

.cat-title {
    font-family: var(--font-head);
    font-size: 1.2rem; margin-bottom: 20px;
    color: var(--color-dark); letter-spacing: 1px;
}

.cat-list { list-style: none; }
.cat-list li { margin-bottom: 12px; }

.cat-link {
    text-decoration: none; color: #555; display: flex; justify-content: space-between;
    font-size: 0.95rem; transition: 0.3s; padding: 8px 12px; border-radius: 10px;
}
.cat-link span { opacity: 0.5; font-size: 0.8em; }

.cat-link:hover, .cat-link.active {
    background: rgba(161, 140, 209, 0.1);
    color: var(--color-accent-2);
    font-weight: 600;
}

/* --- SIATKA PRODUKTÓW --- */
.page-title {
    font-family: var(--font-head); font-size: 2.5rem; margin-bottom: 30px;
    background: linear-gradient(90deg, #1A1A1A, #4a4a4a);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

/* --- KARTA PRODUKTU (BENTO STYLE) --- */
.product-card {
    background: #fff; border-radius: var(--radius);
    transition: 0.4s; border: 1px solid rgba(0,0,0,0.03);
    overflow: hidden; display: flex; flex-direction: column;
    position: relative;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(161, 140, 209, 0.15);
    border-color: rgba(161, 140, 209, 0.3);
}

.card-img-wrapper {
    height: 220px; background: #f9f9f9; position: relative; overflow: hidden;
}
.card-img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.product-card:hover .card-img { transform: scale(1.05); }

.badge {
    position: absolute; top: 15px; left: 15px;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px 12px; border-radius: 20px;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--color-dark); z-index: 2;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.card-body { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }

.card-sub {
    font-size: 0.75rem; text-transform: uppercase; color: #999; letter-spacing: 1px; margin-bottom: 5px;
}
.card-title {
    font-family: var(--font-body); font-size: 1.2rem; font-weight: 700; margin-bottom: 10px;
    color: var(--color-dark); line-height: 1.3;
}
.card-desc {
    font-size: 0.9rem; color: #666; margin-bottom: 20px; flex-grow: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.card-footer {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid #f0f0f0; padding-top: 15px; margin-top: auto;
}

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

/* --- PRZYCISK "ZOBACZ" (BTN-PRISM) --- */
.btn-buy {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-dark); color: #fff; padding: 10px 25px; border-radius: 50px;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    text-decoration: none; transition: all 0.3s ease;
}
.btn-buy:hover {
    background: #fff; color: var(--color-dark);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: 1px solid var(--color-dark);
}

/* --- RESPONSYWNOŚĆ --- */
@media (max-width: 900px) {
    .shop-layout { grid-template-columns: 1fr; }
    .sidebar { margin-bottom: 30px; }
}
/* ==========================================================================
   DODATEK: KARTA PRODUKTU (SINGLE PRODUCT PAGE)
   ========================================================================== */

.product-view {
    max-width: 1200px; margin: 60px auto; padding: 0 20px;
}

.product-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
}

/* LEWA STRONA: ZDJĘCIE */
.product-gallery {
    position: relative; border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05); background: #fff;
    border: 1px solid rgba(0,0,0,0.03); min-height: 500px;
    display: flex; align-items: center; justify-content: center;
}
.product-gallery img { width: 100%; height: 100%; object-fit: cover; }

/* PRAWA STRONA: TREŚĆ */
.product-details { padding: 20px 0; }

.breadcrumbs {
    font-size: 0.85rem; text-transform: uppercase; color: #999; letter-spacing: 1px; margin-bottom: 20px;
}
.breadcrumbs a { color: #999; text-decoration: none; border-bottom: 1px solid transparent; }
.breadcrumbs a:hover { color: var(--color-dark); border-color: var(--color-dark); }

.p-title {
    font-family: var(--font-head); font-size: 3rem; line-height: 1.1; margin-bottom: 10px;
    background: linear-gradient(90deg, #1A1A1A, #4a4a4a);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.p-subtitle {
    font-size: 1.2rem; color: var(--color-accent-2); /* Lawenda */
    font-family: var(--font-head); font-style: italic; margin-bottom: 30px;
}

.p-desc {
    font-size: 1rem; color: #555; line-height: 1.8; margin-bottom: 30px;
    padding-left: 20px; border-left: 3px solid var(--color-accent-1); /* Różowa linia */
}

/* CECHY PRODUKTU */
.p-features { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.p-feat-item {
    background: rgba(132, 250, 176, 0.2); color: #2d8a56; /* Miętowy akcent */
    padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
}

/* CENA I AKCJE */
.p-actions-box {
    background: #fff; padding: 30px; border-radius: var(--radius);
    box-shadow: var(--shadow-soft); border: 1px solid rgba(0,0,0,0.03);
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
}

.p-price { font-size: 2rem; font-weight: 700; font-family: var(--font-body); color: var(--color-dark); }
.p-old-price { font-size: 1rem; text-decoration: line-through; color: #aaa; margin-right: 10px; font-weight: 400; }

.btn-add-cart {
    background: var(--color-dark); color: #fff; border: none;
    padding: 15px 40px; border-radius: 50px; cursor: pointer;
    font-size: 0.9rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    transition: 0.3s;
}
.btn-add-cart:hover {
    background: linear-gradient(135deg, var(--color-accent-1), var(--color-accent-2));
    box-shadow: 0 10px 25px rgba(161, 140, 209, 0.4); transform: translateY(-2px);
}

/* RESPONSYWNOŚĆ */
@media (max-width: 900px) {
    .product-split { grid-template-columns: 1fr; gap: 40px; }
    .product-gallery { min-height: 350px; }
    .p-title { font-size: 2.2rem; }
    .p-actions-box { flex-direction: column; align-items: flex-start; }
    .btn-add-cart { width: 100%; }
}
/* ==========================================================================
   DODATEK: KOSZYK (CART STYLING)
   ========================================================================== */

.cart-view {
    max-width: 1200px; margin: 40px auto; padding: 0 20px;
    min-height: 60vh; /* Żeby stopka nie uciekała do góry przy pustym koszyku */
}

/* UKŁAD DWUKOLUMNOWY */
.cart-grid {
    display: grid; grid-template-columns: 1.8fr 1fr; gap: 40px; align-items: start;
}

/* STYLIZACJA TABELI "LEWITUJĄCEJ" */
.cart-table {
    width: 100%; border-collapse: separate; border-spacing: 0 15px; /* Odstępy między rzędami */
}

.cart-table thead th {
    text-align: left; padding: 0 20px; font-size: 0.8rem; text-transform: uppercase;
    color: #999; font-weight: 600; letter-spacing: 1px;
}

.cart-table tbody tr {
    background: #fff; box-shadow: var(--shadow-soft);
    border-radius: var(--radius); transition: 0.3s;
}
.cart-table tbody tr:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

/* Zaokrąglenie rogów wiersza (pierwsza i ostatnia komórka) */
.cart-table td:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.cart-table td:last-child { border-radius: 0 var(--radius) var(--radius) 0; }

.cart-table td { padding: 25px 20px; vertical-align: middle; }

/* PANEL PODSUMOWANIA (STICKY) */
.cart-summary {
    background: #fff; padding: 35px; border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(161, 140, 209, 0.1); /* Lawendowy cień */
    border: 1px solid rgba(0,0,0,0.03);
    position: sticky; top: 100px; /* Przykleja się podczas scrollowania */
}

.summary-title {
    font-family: var(--font-head); font-size: 1.5rem; margin-bottom: 25px;
    color: var(--color-dark); border-bottom: 1px solid #f0f0f0; padding-bottom: 15px;
}

/* FORMULARZ KUPONU */
.coupon-form {
    display: flex; gap: 10px; margin-bottom: 20px;
}
.input-coupon {
    flex-grow: 1; padding: 12px 15px; border-radius: 10px; border: 1px solid #eee;
    font-family: var(--font-body); outline: none; transition: 0.3s;
}
.input-coupon:focus { border-color: var(--color-accent-2); box-shadow: 0 0 0 3px rgba(161,140,209,0.1); }

.btn-coupon {
    background: #f0f0f0; border: none; color: #555; padding: 0 20px; border-radius: 10px;
    font-weight: 700; cursor: pointer; transition: 0.3s;
}
.btn-coupon:hover { background: var(--color-dark); color: #fff; }

/* SUMY I PRZYCISK KASY */
.summary-row { display: flex; justify-content: space-between; margin-bottom: 12px; color: #666; font-size: 0.95rem; }
.summary-total {
    display: flex; justify-content: space-between; margin-top: 20px; padding-top: 20px;
    border-top: 2px solid #f9f9f9; font-size: 1.4rem; font-weight: 700; color: var(--color-dark);
}

.btn-checkout {
    display: block; width: 100%; text-align: center; margin-top: 30px;
    background: linear-gradient(135deg, var(--color-dark), #333);
    color: #fff; padding: 18px; border-radius: 50px; text-decoration: none;
    font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: 0.3s;
}
.btn-checkout:hover {
    transform: translateY(-2px); box-shadow: 0 15px 40px rgba(161, 140, 209, 0.3);
}

/* RESPONSYWNOŚĆ KOSZYKA */
@media (max-width: 900px) {
    .cart-grid { grid-template-columns: 1fr; gap: 30px; }
    .cart-table thead { display: none; } /* Ukrywamy nagłówki na mobile */
    .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
    .cart-table tr { margin-bottom: 20px; border: 1px solid #eee; }
    .cart-table td { text-align: right; padding: 15px; border-bottom: 1px solid #f9f9f9; }
    .cart-table td::before { /* Etykiety na mobile */
        content: attr(data-label); float: left; font-weight: 700; text-transform: uppercase; font-size: 0.8rem; color: #999;
    }
    .cart-table td:first-child { text-align: center; background: #fafafa; border-radius: var(--radius) var(--radius) 0 0; }
    .cart-summary { position: static; }
}
/* ==========================================================================
   DODATEK: KASA (CHECKOUT) & DZIĘKUJEMY (THANK YOU)
   ========================================================================== */

/* --- CHECKOUT (ZAMÓWIENIE) --- */
.checkout-container {
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px;
    max-width: 1100px; margin: 50px auto; padding: 0 20px;
}

.checkout-form, .checkout-summary {
    background: #fff; padding: 40px; border-radius: var(--radius);
    box-shadow: var(--shadow-soft); border: 1px solid rgba(0,0,0,0.03);
}

.form-head {
    font-family: var(--font-head); font-size: 1.8rem; margin-bottom: 25px;
    background: linear-gradient(90deg, #1A1A1A, #4a4a4a);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    border-bottom: 1px solid #f0f0f0; padding-bottom: 15px;
}

.inp-group { margin-bottom: 20px; }

.inp-label {
    display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
    color: #999; margin-bottom: 8px; letter-spacing: 1px;
}

.inp-field, .inp-area {
    width: 100%; padding: 15px; border: 1px solid #eee; background: #fff;
    border-radius: 12px; font-family: var(--font-body); font-size: 1rem;
    transition: 0.3s;
}
.inp-field:focus, .inp-area:focus {
    border-color: var(--color-accent-2); outline: none;
    box-shadow: 0 0 0 4px rgba(161, 140, 209, 0.1);
}

/* Przycisk Zamawiam (Gradient Flow) */
.btn-place-order {
    width: 100%; background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent-1));
    color: #fff; padding: 18px; font-family: var(--font-head); font-size: 1.1rem;
    text-transform: uppercase; font-weight: 700; border: none; border-radius: 50px;
    cursor: pointer; transition: 0.3s; margin-top: 20px;
    box-shadow: 0 10px 30px rgba(161, 140, 209, 0.3);
}
.btn-place-order:hover {
    transform: translateY(-2px); box-shadow: 0 15px 40px rgba(161, 140, 209, 0.5);
}

.btn-edit-cart {
    display: block; text-align: center; margin-top: 20px; text-decoration: none;
    color: #999; font-size: 0.85rem; text-transform: uppercase; font-weight: 600;
    transition: 0.3s;
}
.btn-edit-cart:hover { color: var(--color-dark); }

/* Wyróżnienie wierszy w podsumowaniu */
.checkout-summary .summary-row {
    border-bottom: 1px solid #f9f9f9; padding: 15px 0;
}

/* --- THANK YOU PAGE (PODZIĘKOWANIE) --- */
.thank-you-wrapper {
    max-width: 600px; margin: 80px auto; background: #fff; padding: 60px;
    text-align: center; border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.02);
}

.success-icon {
    font-size: 5rem; margin-bottom: 20px;
    /* Gradientowy "ptaszek" */
    background: linear-gradient(135deg, var(--color-accent-3), var(--color-accent-2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.transfer-box {
    margin: 30px 0; padding: 25px; background: #fafafa; border-radius: 12px;
    text-align: left; border: 1px solid #eee;
}

/* RESPONSYWNOŚĆ */
@media (max-width: 900px) {
    .checkout-container { grid-template-columns: 1fr; }
    .thank-you-wrapper { margin: 40px 20px; padding: 40px 20px; }
}