/* --- CUSTOM PALETTE & VARIABLES --- */
        :root {
            --bg-sand: #F9F7F2;       /* Bardzo jasny piasek */
            --col-moss: #5B6E58;      /* Zgaszony mech */
            --col-water: #3D5A5C;     /* Głęboki turkus/ocean */
            --col-gold: #C0A062;      /* Szampańskie złoto */
            --col-text: #555555;      /* Szary tekst */
            
            --font-serif: 'Cormorant Garamond', serif;
            --font-sans: 'Montserrat', sans-serif;
        }

        body {
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Standard */
}


        html {
            scroll-padding: 70px;
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--bg-sand);
            color: var(--col-text);
            font-family: var(--font-sans);
            font-weight: 300;
            overflow-x: hidden;
        }

        /* --- TYPOGRAPHY --- */
        h1, h2, h3, h4, h5 {
            font-family: var(--font-serif);
            color: var(--col-water);
        }

        .lead-serif {
            font-family: var(--font-serif);
            font-size: 1.5rem;
            font-style: italic;
            color: var(--col-moss);
        }

        /* --- NAVBAR --- */
        .navbar {
            background-color: rgba(249, 247, 242, 0.9);
            backdrop-filter: blur(10px);
            padding: 1.5rem 0;
            border-bottom: 1px solid rgba(91, 110, 88, 0.1);
        }

        /* --- LOGO STYLING --- */
        .logo-img {
            height: 45px; /* Wysokość w menu */
            width: auto;
            margin-right: 12px;
            
            /* MAGIA CSS: */
            /* 1. Mieszanie: Sprawia, że białe tło obrazka znika na piaskowym tle strony */
            mix-blend-mode: multiply; 
            transition: all 0.4s ease;
        }

        .navbar-brand:hover .logo-img {
            transform: scale(1.05); /* Lekkie powiększenie po najechaniu */
        }

        /* Wersja do stopki lub znaku wodnego */
        .logo-watermark {
            width: 150px;
            opacity: 0.1; /* Bardzo delikatne, ledwo widoczne */
            mix-blend-mode: multiply;
            filter: grayscale(100%) sepia(100%) hue-rotate(10deg) saturate(400%) contrast(0.8); /* Odcień sepii/złota */
        }

        .navbar-brand {
            font-family: var(--font-serif);
            font-size: 1.8rem;
            color: var(--col-water);
            letter-spacing: 2px;
        }

        .nav-link {
            color: var(--col-text);
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 1.5px;
            margin: 0 10px;
            transition: color 0.3s;
        }

        .nav-link:hover {
            color: var(--col-gold);
        }

        /* Rozwijane menu Kolekcja – styl wspólny (desktop + mobile) */
        .navbar .nav-item.dropdown-hover .dropdown-menu {
            background-color: var(--bg-sand);
            border: 1px solid rgba(91, 110, 88, 0.12);
        }
        .navbar .nav-item.dropdown-hover .dropdown-item {
            font-family: var(--font-serif);
            letter-spacing: 2px;
            color: var(--col-water);
        }
        .navbar .nav-item.dropdown-hover .dropdown-item:hover {
            color: var(--col-gold);
            background-color: rgba(192, 160, 98, 0.06);
        }
        .navbar .nav-item.dropdown-hover .dropdown-divider {
            border-color: rgba(91, 110, 88, 0.15);
        }

        /* Rozwijane menu Kolekcja – rozwija się po najechaniu (desktop) */
        @media (min-width: 992px) {
            .navbar .nav-item.dropdown-hover:hover .dropdown-menu {
                display: block;
                margin-top: 0;
                border-radius: 4px;
                box-shadow: 0 12px 32px rgba(61, 90, 92, 0.12);
                border: 1px solid rgba(91, 110, 88, 0.15);
                background-color: var(--bg-sand);
                padding: 0.5rem 0;
                min-width: 220px;
            }
            .navbar .nav-item.dropdown-hover .dropdown-item {
                padding: 0.6rem 1.5rem;
                font-family: var(--font-serif);
                font-size: 1rem;
                font-weight: 500;
                letter-spacing: 2px;
                color: var(--col-water);
                transition: color 0.25s ease, background-color 0.25s ease;
                border-left: 3px solid transparent;
            }
            .navbar .nav-item.dropdown-hover .dropdown-item:hover {
                color: var(--col-gold);
                background-color: rgba(192, 160, 98, 0.06);
                border-left-color: var(--col-gold);
            }
            .navbar .nav-item.dropdown-hover .dropdown-divider {
                margin: 0.4rem 0;
            }
        }

        /* --- HERO --- */
        .hero-section {
            position: relative;
            height: 90vh; /* Nie pełne 100, żeby widać było że coś jest niżej */
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 0 0 50% 50% / 4%; /* Delikatne łukowate wycięcie na dole */
            margin-bottom: 5rem;
        }

        .hero-bg {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            /* Zdjęcie: Woda i piasek z góry, tekstura */
            background: url('../../assets/images/hero-zatoka.jpg') no-repeat center/cover;
            filter: brightness(0.9);
            z-index: -1;
        }

        .hero-content {
            background: rgba(255, 255, 255, 0.7);
            padding: 3rem 4rem;
            border-radius: 2px;
            backdrop-filter: blur(5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            max-width: 800px;
        }

        /* --- BUTTONS --- */
        .btn-custom {
            border: 1px solid var(--col-water);
            color: var(--col-water);
            border-radius: 0;
            padding: 12px 30px;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.8rem;
            transition: all 0.4s ease;
        }

        .btn-custom:hover {
            background-color: var(--col-water);
            color: #fff;
        }

        .btn-gold {
            background-color: var(--col-gold);
            border: none;
            color: white;
            padding: 15px 40px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 2px;
        }
        .btn-gold:hover {
            background-color: #b08d4b;
            color: white;
        }

        /* --- PRODUCT CARD --- */
        .stone-list li {
            margin-bottom: 10px;
            font-size: 0.95rem;
        }
        .stone-icon {
            color: var(--col-gold);
            width: 25px;
            text-align: center;
            margin-right: 10px;
        }

        /* --- MUSIC SECTION --- */
        .music-card {
            background-color: #fff;
            border: 1px solid rgba(0,0,0,0.05);
            border-radius: 8px;
            padding: 3rem;
            position: relative;
            overflow: hidden;
        }
        
        .music-bg-icon {
            position: absolute;
            right: -20px;
            bottom: -20px;
            font-size: 15rem;
            color: var(--col-moss);
            opacity: 0.05;
        }

        /* --- FOOTER --- */
        footer {
            background-color: var(--col-water);
            color: var(--bg-sand);
            margin-top: 80px;
        }
        .footer-help-link:hover {
            color: var(--col-gold) !important;
        }
        
        .form-control-contact {
            border: 1px solid rgba(91, 110, 88, 0.25);
            border-radius: 4px;
            padding: 0.6rem 1rem;
            font-family: var(--font-sans);
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .form-control-contact:focus {
            border-color: var(--col-water);
            box-shadow: 0 0 0 2px rgba(61, 90, 92, 0.15);
        }
        .form-control-contact::placeholder {
            color: #aaa;
        }
        .contact-form .form-label {
            font-size: 0.85rem;
            letter-spacing: 1px;
            color: var(--col-water);
        }

        .form-control-custom {
            background: transparent;
            border: none;
            border-bottom: 1px solid var(--col-gold);
            color: white;
            border-radius: 0;
        }
        
        .form-control-custom:focus {
            background: transparent;
            box-shadow: none;
            border-color: white;
            color: white;
        }


        
.gem-visual {
        width: 0.8em;
        margin-right:0.4em;
    height: 0.8em;
    border-radius: 50%;
    display:inline-block;
    box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.2), 5px 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}


    /* Specific Gem Looks */
    .gem-ametyst { background: radial-gradient(circle at 30% 30%, #d8b4fe, #7e22ce); }
    .gem-kwarc-rozowy { background: radial-gradient(circle at 30% 30%, #fce7f3, #f472b6); }
    .gem-krysztal-gorski { background: radial-gradient(circle at 30% 30%, #ffffff, #cbd5e1); opacity: 0.9; }
    .gem-tygrysie-oko { background: linear-gradient(45deg, #854d0e 25%, #facc15 50%, #3f2c06 75%); }
    .gem-hematyt { background: radial-gradient(circle at 30% 30%, #9ca3af, #1f2937); }
    .gem-lapis { background: radial-gradient(circle at 30% 30%, #3b82f6, #1e3a8a); }
    .gem-oniks { background: radial-gradient(circle at 30% 30%, #4b5563, #000000); }
    .gem-cytryn { background: radial-gradient(circle at 30% 30%, #fef08a, #eab308); }
    .gem-awenturyn { background: radial-gradient(circle at 30% 30%, #86efac, #15803d); }
    .gem-turmalin { background: radial-gradient(circle at 30% 30%, #374151, #000000); }
    .gem-malachit { background: repeating-linear-gradient(45deg, #22c55e, #15803d 10px, #14532d 20px); }
    .gem-labradoryt { background: linear-gradient(120deg, #374151, #0e7490, #374151); }
    .gem-kamien-ksiezycowy { background: radial-gradient(circle at 30% 30%, #ffffff, #e0f2fe); box-shadow: 0 0 15px #bfdbfe; }
    .gem-bursztyn { background: radial-gradient(circle at 30% 30%, #fbbf24, #b45309); opacity: 0.9; }
    .gem-turkus { background: radial-gradient(circle at 30% 30%, #67e8f9, #0891b2); }
    .gem-agat-indianski { background: linear-gradient(to right, #57534e, #15803d, #78350f); }
    .gem-agat-mszysty { background: radial-gradient(circle at 30% 30%, #e2e8f0, #166534); }
    .gem-lawa { background: radial-gradient(circle at 30% 30%, #525252, #171717); border: 2px dashed #404040; }

            .gem-granat { background: radial-gradient(circle at 30% 30%, #8b0000, #300000); }
        .gem-masa-perlowa { background: radial-gradient(circle at 30% 30%, #fffef0, #e6e2d3, #f0f8ff); filter: brightness(1.1); }
        .gem-jaspis-cesarski { background: radial-gradient(circle at 50% 50%, #20b2aa, #483d8b, #ff4500); filter: contrast(1.2); }
        .gem-jaspis-picasso { background: radial-gradient(circle at 70% 20%, #d2b48c, #696969, #8b4513); }
        .gem-akwamaryn { background: radial-gradient(circle at 30% 30%, #e0ffff, #7fffd4, #5f9ea0); opacity: 0.9; }
        .gem-morganit { background: radial-gradient(circle at 30% 30%, #ffedf4, #ffb6c1, #db7093); opacity: 0.9; }
        .gem-amazonit { background: linear-gradient(135deg, #40e0d0, #00ced1, #fff); background-size: 200% 200%; }
        .gem-karneol { background: radial-gradient(circle at 40% 40%, #ff7f50, #d2691e, #8b0000); }
        .gem-fluoryt { background: linear-gradient(45deg, #9370db, #3cb371, #9370db); }
        .gem-opal { background: conic-gradient(from 0deg, #ff0000, #00ff00, #0000ff, #ffff00, #ff0000); filter: blur(1px); opacity: 0.8; }
        .gem-howlit { background: radial-gradient(circle, #f0f8ff 90%, #708090 95%); background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #ccc 10px, #ccc 11px); }
        .gem-kwarc-truskawkowy { background: radial-gradient(circle at 30% 30%, #ffc0cb, #d87093); background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMiIvPgo8L3N2Zz4='); } /* Noise simulation */
        .gem-awenturyn { background: radial-gradient(circle at 30% 30%, #90ee90, #2e8b57); }

        /* --- LOGO STYLING --- */
        .logo-img {
            height: 45px; /* Wysokość w menu */
            width: auto;
            margin-right: 12px;
            
            /* MAGIA CSS: */
            /* 1. Mieszanie: Sprawia, że białe tło obrazka znika na piaskowym tle strony */
            mix-blend-mode: multiply; 
            transition: all 0.4s ease;
        }

           /* --- HERO FOR LEXICON --- */
        .lexicon-hero {
            padding: 8rem 0 4rem 0;
            text-align: center;
            background: linear-gradient(to bottom, rgba(249,247,242,0) 0%, rgba(91,110,88,0.05) 100%);
        }

        /* --- MINERAL CARD STYLING --- */
        .mineral-card {
            background: #fff;
            border: none;
            border-radius: 4px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.03);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
            border-top: 3px solid var(--col-gold); /* Akcent na górze karty */
        }

        .mineral-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(61, 90, 92, 0.1);
        }

        .mineral-header {
            padding: 2rem 2rem 1rem 2rem;
            border-bottom: 1px solid rgba(0,0,0,0.03);
        }

        .mineral-body {
            padding: 2rem;
        }

        .prop-section {
            margin-bottom: 1.5rem;
        }

        .prop-title {
            font-family: var(--font-serif);
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--col-moss);
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
        }
        
        .prop-title i {
            margin-right: 10px;
            color: var(--col-gold);
            font-size: 0.9rem;
        }

        .source-link {
            font-size: 0.75rem;
            color: #aaa;
            text-decoration: none;
            border-bottom: 1px solid transparent;
            transition: all 0.2s;
        }
        .source-link:hover {
            color: var(--col-water);
            border-color: var(--col-water);
        }

        /* Kolekcje – zakładki i karty */
        .collection-tabs .nav-link {
            color: var(--col-moss);
            background-color: transparent;
            border: 1px solid transparent;
            border-bottom: 2px solid transparent;
            border-radius: 0;
            transition: all 0.3s ease;
            font-family: var(--font-serif);
            font-size: 1.1rem;
            font-weight: 500;
            letter-spacing: 2px;
        }

        .collection-tabs .nav-link:hover {
            color: var(--col-water);
        }

        .collection-tabs .nav-link.active {
            color: var(--col-water);
            background-color: transparent;
            font-weight: 600;
            border-bottom: 2px solid var(--col-gold);
        }

        .collection-hero-img {
            object-fit: cover;
            min-height: 400px;
            width: 100%;
        }
        .product-card-title {
            font-family: var(--font-serif);
            font-size: 1.4rem;
        }
        .product-price {
            font-family: var(--font-serif);
        }
        .product-card {
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
        }

        .product-card img {
            transition: transform 0.8s ease;
        }

        .product-card:hover img {
            transform: scale(1.05);
        }

        .letter-spacing-2 {
            letter-spacing: 2px;
        }