/* --- I. DESIGN SYSTEM --- */
:root {
    --color-bg: #faf8f5;
    --color-bg-accent: #f1ede9;
    --color-text: #222222;
    --color-text-light: #666666;
    --color-accent-gold: #b89a74;
    --color-white: #ffffff;
    --color-border: #e0e0e0;
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Inter', sans-serif;
    --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px;
    --transition-main: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Global Reset & Base Styles --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-text); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
body.no-scroll { overflow: hidden; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; }
h1 { font-size: 3rem; }
h2 { font-size: 2.75rem; text-align: center; margin-bottom: var(--space-6); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-bottom: var(--space-3);}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font-family: inherit; background: none; border: none; cursor: pointer; }

/* --- Layout & Utility --- */
.container { max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: var(--space-3); padding-right: var(--space-3); }
.section { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.fade-in-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--transition-main), transform 0.8s var(--transition-main); }
.fade-in-up.is-visible { opacity: 1; transform: translateY(0); }

/* --- II. COMPONENTS --- */

/* Header (from perfum.html) */
.main-header { position: sticky; top: 0; z-index: 1000; background-color: rgba(250, 248, 245, 0.85); backdrop-filter: blur(10px); box-shadow: 0 2px 15px rgba(0,0,0,0.05); padding: var(--space-3) 0; }
.header-container { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 40px; width: auto; display: block; }
.main-nav ul { display: flex; align-items: center; gap: var(--space-4); }
.main-nav a { font-weight: 500; position: relative; letter-spacing: 0.5px; }
.main-nav > ul > li > a:not(.no-underline)::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 1px; background-color: var(--color-accent-gold); transition: width var(--transition-main); }
.main-nav > ul > li > a:not(.no-underline):hover::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.header-actions a, .header-actions button { position: relative; color: var(--color-text); }
.header-actions svg { width: 24px; height: 24px; stroke-width: 1.5; transition: color 0.3s ease; }
.header-actions a:hover svg, .header-actions button:hover svg { color: var(--color-accent-gold); }
.cart-counter { position: absolute; top: -8px; right: -8px; background-color: var(--color-accent-gold); color: var(--color-white); font-size: 11px; font-weight: 500; width: 18px; height: 18px; border-radius: 50%; display: flex; justify-content: center; align-items: center; line-height: 1; transition: transform 0.2s ease; }
.cart-counter.updated { transform: scale(1.2); }
.menu-toggle { display: none; z-index: 1003; }

/* Dropdown Menu */
.nav-item-dropdown { position: relative; padding-bottom: 24px; margin-bottom: -24px; }
.nav-item-dropdown > a { display: flex; align-items: center; gap: var(--space-1); }
.nav-item-dropdown > a .arrow-down { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; transition: transform 0.3s ease; }
.nav-item-dropdown:hover > a .arrow-down { transform: rotate(180deg); }
.dropdown-menu { display: flex; flex-direction: column; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); padding: var(--space-1) 0; margin-top: -24px; background-color: var(--color-white); border: 1px solid var(--color-border); box-shadow: 0 8px 25px rgba(0,0,0,0.1); border-radius: 4px; min-width: 220px; z-index: 1010; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; }
.nav-item-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown-menu li a { display: block; padding: var(--space-2) var(--space-3); white-space: nowrap; font-weight: 400; transition: background-color 0.2s ease; }
.dropdown-menu li a:hover { background-color: var(--color-bg); }
.dropdown-menu li a::after { display: none; }

/* Search Overlay */
.search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(250, 248, 245, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 1020; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding-top: 15vh; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease, visibility 0.4s ease; }
.search-overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.search-overlay-content { width: 90%; max-width: 600px; }
#search-overlay-input { width: 100%; background: transparent; border: none; border-bottom: 2px solid var(--color-text); font-size: 2rem; font-family: var(--font-heading); color: var(--color-text); text-align: center; padding: var(--space-2) 0; outline: none; }
#search-overlay-close { position: absolute; top: var(--space-4); right: var(--space-4); color: var(--color-text); }
#search-overlay-close svg { width: 32px; height: 32px; }
#search-results-container { margin-top: var(--space-4); max-height: 50vh; overflow-y: auto; width: 100%; max-width: 600px; }
.search-result-item { display: flex; align-items: center; padding: var(--space-2); border-radius: 4px; transition: background-color 0.2s ease; }
.search-result-item:hover { background-color: rgba(0,0,0,0.05); }
.search-result-item img { width: 50px; height: 50px; object-fit: cover; margin-right: var(--space-3); border-radius: 2px;}
.search-result-info h5 { font-family: var(--font-body); font-weight: 500; font-size: 1rem; margin: 0; }
.search-result-info span { font-size: 0.85rem; color: #888; }
.no-results-message { color: #888; text-align: center; margin-top: var(--space-4); }

/* Cart Panel */
.cart-panel-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1030; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s ease, visibility 0.4s ease; }
.cart-panel-overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.cart-panel { position: fixed; top: 0; right: 0; width: 100%; max-width: 450px; height: 100%; background: var(--color-white); box-shadow: -5px 0 30px rgba(0,0,0,0.15); z-index: 1040; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.5s var(--transition-main); }
.cart-panel.is-visible { transform: translateX(0); }
.cart-header { padding: var(--space-3); border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center;}
.cart-header h3 { font-size: 1.5rem; }
#cart-close-btn { font-size: 2rem; color: #aaa; line-height: 1; }
.cart-body { flex-grow: 1; overflow-y: auto; padding: var(--space-3); }
.cart-item { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); }
.cart-item img { width: 80px; height: 80px; object-fit: cover; background-color: var(--color-bg); }
.cart-item-details { flex-grow: 1; }
.cart-item-details h5 { font-size: 1rem; font-weight: 500; font-family: var(--font-body); }
.cart-item-details .price { color: var(--color-accent-gold); font-weight: 500; }
.cart-item-actions { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-1); }
.cart-quantity-selector { display: flex; align-items: center; border: 1px solid var(--color-border); }
.cart-quantity-selector button { width: 30px; height: 30px; font-size: 1rem; }
.cart-quantity-selector button:disabled { opacity: 0.5; cursor: not-allowed; }
.cart-quantity-selector input { width: 40px; height: 30px; text-align: center; border: none; font-size: 1rem; -moz-appearance: textfield; }
.cart-quantity-selector input::-webkit-outer-spin-button, .cart-quantity-selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.remove-item-btn { color: #aaa; }
.remove-item-btn:hover { color: var(--color-text); }
.cart-empty-message { text-align: center; color: #888; margin-top: var(--space-6); }
.cart-footer { padding: var(--space-3); border-top: 1px solid var(--color-border); }
.cart-summary { display: flex; justify-content: space-between; align-items: center; font-size: 1.2rem; margin-bottom: var(--space-3); }
.cart-summary span:last-child { font-weight: 600; }
.btn-checkout, .btn-continue { width: 100%; display: block; text-align: center; padding: var(--space-2); text-transform: uppercase; font-weight: 500; letter-spacing: 1px; transition: 0.3s ease;}
.btn-checkout { background: var(--color-accent-gold); color: var(--color-white); margin-bottom: var(--space-2); }
.btn-checkout:hover { background: var(--color-text); }
.btn-continue { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.btn-continue:hover { background-color: var(--color-bg); }

/* --- III. PAGE-SPECIFIC & SHARED STYLES --- */

/* Home Page: Hero */
.hero { min-height: calc(100vh - 84px); display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('https://images.unsplash.com/photo-1541695439274-061a7de064e0?q=80&w=1974&auto=format&fit=crop'); background-size: cover; background-position: center; color: var(--color-white); }
.hero-content { max-width: 800px; }
.hero h1 { color: var(--color-white); font-weight: 300; font-size: 4.5rem; text-shadow: 0 2px 20px rgba(0,0,0,0.4); }
.cta-button { display: inline-block; background-color: var(--color-accent-gold); color: var(--color-white); padding: var(--space-2) var(--space-5); font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; border: 1px solid var(--color-accent-gold); border-radius: 2px; transition: all var(--transition-main); margin-top: var(--space-4); }
.cta-button:hover { background-color: transparent; color: var(--color-white); transform: translateY(-3px); }

/* Universal Product Card */
.product-card { text-align: left; }
.product-card:hover .product-image-wrapper img { transform: scale(1.03); }
.product-card .product-image-wrapper { position: relative; background-color: #f0f0f0; margin-bottom: var(--space-2); overflow: hidden; }
.product-card .product-image-wrapper img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 0.5s var(--transition-main); }
.product-card .product-brand { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: #888; }
.product-card .product-name { margin: var(--space-1) 0; }
.product-card .product-price { font-weight: 500; margin-bottom: var(--space-1); }
.product-card .product-availability { font-size: 0.85rem; color: #666; }
.add-to-cart-btn { width: 100%; background-color: var(--color-text); color: var(--color-white); padding: var(--space-2) 0; margin-top: var(--space-2); text-transform: uppercase; font-weight: 500; letter-spacing: 1px; transition: background-color var(--transition-main); }
.add-to-cart-btn:hover { background-color: var(--color-accent-gold); }
.add-to-cart-btn:disabled { background-color: #ccc; cursor: not-allowed; }

/* Styles for product card footer and icon button */
.product-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-1);
    padding: 0 var(--space-1);
}

.add-to-cart-btn.icon-btn {
    width: 40px;
    height: 40px;
    min-width: 40px; /* Prevents shrinking */
    padding: var(--space-1);
    margin-top: 0; /* Resets margin from the main class */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-to-cart-btn.icon-btn svg {
    width: 20px;
    height: 20px;
}

/* Universal Slider Styles */
.slider-section { overflow: hidden; }
.slider-wrapper { position: relative; }
.slider-container { 
    overflow-x: auto; /* Enables horizontal scrolling */
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.slider-container::-webkit-scrollbar { 
    display: none; /* Chrome, Safari, Opera */
}
.product-slider { display: flex; gap: var(--space-4); }
.product-slider .product-card {
    flex-shrink: 0; /* Prevents cards from shrinking */
    width: 75%;     /* Default width for the smallest screens */
}
.slider-arrow { position: absolute; top: 40%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.8); border: 1px solid var(--color-border); width: 50px; height: 50px; border-radius: 50%; z-index: 10; transition: all 0.3s ease; display: none; /* Hidden by default, JS will show them on desktop */ }
.slider-arrow:hover { background-color: var(--color-white); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.slider-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.slider-arrow.arrow-left { left: -25px; }
.slider-arrow.arrow-right { right: -25px; }


/* Home Page: Decants Section */
.decant-products { background-color: var(--color-bg-accent); }
.filter-bar { display: flex; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.filter-btn { padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: 50px; font-size: 0.9rem; transition: all 0.3s ease; }
.filter-btn.filter-active, .filter-btn:hover { background-color: var(--color-text); border-color: var(--color-text); color: var(--color-white); }
.decant-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.decant-card { transition: opacity 0.4s ease, transform 0.4s ease; }
.decant-card.is-hidden { opacity: 0; transform: scale(0.95); pointer-events: none; }

/* Shop Pages (Perfumy/Odlewki): Layout & Filters */
.page-header { text-align: center; padding: var(--space-5) 0; background-color: var(--color-bg-accent); margin-bottom: var(--space-6); }
.page-header h1 { font-weight: 300; }
.shop-layout { display: flex; flex-wrap: nowrap; gap: var(--space-5); }
.filter-sidebar { flex: 0 0 280px; background-color: var(--color-white); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: 4px; align-self: flex-start; }
.shop-content { flex: 1 1 0; }
.filter-group { padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.filter-group:last-child { border-bottom: none; margin-bottom: 0; }
.filter-group h4 { margin-bottom: var(--space-3); font-size: 1rem; letter-spacing: 0.5px; }
.filter-option { padding: 2px 0; }
.filter-option label { display: flex; align-items: center; cursor: pointer; font-size: 0.95rem; }
.filter-option input { margin-right: var(--space-2); }
.filter-options-collapsible { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
.filter-group.is-expanded .filter-options-collapsible { max-height: 500px; }
.toggle-more-btn { color: var(--color-accent-gold); font-weight: 500; margin-top: var(--space-2); font-size: 0.9rem; }
.sorting-controls { margin-bottom: var(--space-4); text-align: right; }
.sorting-controls select { padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: 4px; font-family: var(--font-body); }
.mobile-filter-trigger { display: none; }
#top-controls { display: flex; justify-content: flex-end; align-items: center; margin-bottom: var(--space-4); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.no-products-message { text-align: center; color: #888; grid-column: 1 / -1; font-size: 1.1rem; padding: var(--space-5) 0; }
.capacity-filters-container { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.capacity-filter-btn { padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: 20px; font-weight: 400; transition: all var(--transition-main); font-size: 0.9rem; }
.capacity-filter-btn:hover { background-color: var(--color-bg-accent); border-color: var(--color-accent-gold); }
.capacity-filter-btn.active { background-color: var(--color-accent-gold); color: var(--color-white); border-color: var(--color-accent-gold); }

/* Single Product Page (perfum.html) */
.product-page-section { padding-top: var(--space-5); }
.breadcrumbs { margin-bottom: var(--space-4); font-size: 0.9rem; color: #888; }
.breadcrumbs a:hover { color: var(--color-text); }
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: flex-start; }
.product-gallery { display: flex; flex-direction: column; gap: var(--space-2); }
.main-product-image { background-color: var(--color-bg-accent); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; }
.product-thumbnails { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.thumbnail-item { cursor: pointer; border: 2px solid transparent; transition: border-color 0.3s ease; border-radius: 4px; overflow: hidden; }
.thumbnail-item:hover, .thumbnail-item.active { border-color: var(--color-accent-gold); }
.thumbnail-item img { aspect-ratio: 1 / 1; object-fit: cover; }
.product-info .product-brand { font-size: 1rem; text-transform: uppercase; letter-spacing: 1.5px; color: #888; margin-bottom: var(--space-1);}
.product-info h1 { margin-bottom: var(--space-2); }
.product-info .product-price { font-size: 1.75rem; font-weight: 500; color: var(--color-accent-gold); margin-bottom: var(--space-3); }
.product-info .short-description { margin-bottom: var(--space-4); }
.options-group { margin-bottom: var(--space-4); }
.options-group label { display: block; margin-bottom: var(--space-2); font-weight: 500; }
.capacity-selector { display: flex; gap: var(--space-2); }
.capacity-btn { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; border-radius: 4px; }
.capacity-btn.active, .capacity-btn:hover { background-color: var(--color-text); color: var(--color-white); border-color: var(--color-text); }
#product-quantity-selector { display: flex; align-items: center; border: 1px solid var(--color-border); width: fit-content; border-radius: 4px; }
#product-quantity-selector button, #product-quantity-selector input { width: 40px; height: 40px; text-align: center; border: none; background: none; font-size: 1.2rem; }
#product-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
#add-to-cart-product-page { background-color: var(--color-accent-gold); color: var(--color-white); padding: var(--space-3) 0; text-transform: uppercase; font-weight: 500; letter-spacing: 1.5px; transition: background-color var(--transition-main); font-size: 1rem; border-radius: 4px; width: 100%; }
#add-to-cart-product-page:hover { background-color: var(--color-text); }
.product-details-tabs { margin-top: var(--space-7); border-top: 1px solid var(--color-border); }
.tab-navigation { display: flex; justify-content: center; gap: var(--space-5); border-bottom: 1px solid var(--color-border); }
.tab-link { padding: var(--space-3) 0; font-size: 1.1rem; font-weight: 500; color: #888; position: relative; cursor: pointer; }
.tab-link::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background-color: var(--color-accent-gold); transition: width var(--transition-main); }
.tab-link.active, .tab-link:hover { color: var(--color-text); }
.tab-link.active::after { width: 100%; }
.tab-content { padding: var(--space-5) 0; max-width: 900px; margin: 0 auto; line-height: 1.8; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.related-products { background-color: var(--color-bg-accent); }
.related-products h2 { font-size: 2.75rem; text-align: center; margin-bottom: var(--space-6); }
#params .params-container { background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px; padding: var(--space-5); box-shadow: 0 10px 25px rgba(0,0,0,0.03); }
#params .params-title { font-size: 2rem; font-weight: 600; margin-bottom: var(--space-6); }
#params .params-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
#params .param-group { display: flex; flex-direction: column; gap: var(--space-5); }
#params .param-item .param-label { font-weight: 500; color: var(--color-text); display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
#params .param-item .param-label svg { width: 20px; height: 20px; color: var(--color-accent-gold); }
#params .param-slider-track { position: relative; height: 6px; background-color: var(--color-bg-accent); border-radius: 3px; }
#params .param-slider-thumb { position: absolute; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-color: var(--color-accent-gold); border-radius: 50%; border: 2px solid var(--color-white); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
#params .param-slider-labels { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--color-text-light); margin-top: var(--space-1); }
#params .icons-group .icon-item { display: flex; align-items: center; gap: var(--space-3); }
#params .icons-group .icon-label { font-weight: 500; }
#params .recommendation-icons { margin-left: auto; display: flex; gap: var(--space-3); }
#params .recommendation-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); color: var(--color-text-light); }
#params .recommendation-item.active { color: var(--color-text); }
#params .recommendation-item .emoji-icon { font-size: 28px; line-height: 1; filter: grayscale(1); opacity: 0.5; transition: all 0.3s ease; }
#params .recommendation-item.active .emoji-icon { filter: grayscale(0); opacity: 1; transform: scale(1.1); }
#params .recommendation-item span { font-size: 0.85rem; }
#params .recommendation-item.active span { font-weight: 500; }
#params .recommendation-item svg { width: 28px; height: 28px; color: var(--color-text-light); transition: color 0.3s ease; }
#params .recommendation-item.active svg { color: var(--color-accent-gold); }
.reviews-section .review { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-3); margin-bottom: var(--space-3); }
.reviews-section .review:last-child { border-bottom: none; margin-bottom: 0; }
.review-author { font-weight: 600; margin-bottom: 4px; }
.review-text { color: var(--color-text-light); }

/* Footer */
.main-footer { background-color: var(--color-bg-accent); padding: var(--space-7) 0 var(--space-5) 0; font-size: 0.95rem; color: #555; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); }
.footer-col .logo img { height: 40px; width: auto; }
.footer-col ul li { margin-bottom: var(--space-1); }
.footer-col a:hover { color: var(--color-text); }
.footer-col .social-icons { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.footer-col .social-icons svg { width: 22px; height: 22px; }
.copyright { text-align: center; margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: 0.85rem; color: #888; }
        
/* --- IV. RESPONSIVENESS --- */

/* Slider Card Widths */
@media (min-width: 540px) {
    .product-slider .product-card { width: calc(50% - (var(--space-4) / 2)); }
}
@media (min-width: 768px) {
    .product-slider .product-card { width: calc(33.333% - (var(--space-4) * 2 / 3)); }
}
@media (min-width: 992px) {
    .product-slider .product-card { width: calc(25% - (var(--space-4) * 3 / 4)); }
    .slider-arrow { display: flex; align-items: center; justify-content: center; } /* Pokaż strzałki na desktopie */
}

@media (max-width: 992px) { /* Tablet */
    h1 { font-size: 2.5rem; } h2 { font-size: 2rem; }
    .decant-grid { grid-template-columns: repeat(2, 1fr); }
    .hero h1 { font-size: 3.5rem; }
    .footer-grid { grid-template-columns: 1fr; text-align: center;}
    .footer-col .logo { margin: 0 auto; }
    .footer-col .social-icons { justify-content: center; }
    .product-layout { grid-template-columns: 1fr; }
    .product-gallery { margin-bottom: var(--space-5); }
    .shop-layout { flex-direction: column; }
    .filter-sidebar { flex-basis: auto; display: none; position: fixed; top: 0; left: 0; width: 320px; height: 100%; z-index: 1050; overflow-y: auto; transform: translateX(-100%); transition: transform 0.4s ease; background-color: var(--color-white); box-shadow: 5px 0 15px rgba(0,0,0,0.1); }
    .filter-sidebar.is-open { display: block; transform: translateX(0); }
    #top-controls { justify-content: space-between; }
    .mobile-filter-trigger { display: flex; align-items: center; gap: var(--space-2); background-color: var(--color-text); color: var(--color-white); padding: var(--space-2) var(--space-4); cursor: pointer; border-radius: 4px; width: fit-content; }
    .filter-panel-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1045; }
    .filter-panel-overlay.is-open { display: block; }
}

@media (max-width: 768px) { /* Mobile */
    h1 { font-size: 2.8rem; } h2 { font-size: 2rem; } .section { padding: var(--space-6) 0; }
    .dropdown-menu { display: none !important; }
    .nav-item-dropdown > a .arrow-down { display: none; }
    #search-overlay-input { font-size: 1.5rem; }
    .main-nav { position: fixed; top: 0; right: 0; width: 300px; height: 100vh; background-color: var(--color-bg); padding: var(--space-7) var(--space-4); transform: translateX(100%); transition: transform 0.4s ease; box-shadow: -5px 0 20px rgba(0,0,0,0.1); z-index: 1002;}
    .main-header.nav-active .main-nav { transform: translateX(0); }
    .main-nav ul { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .main-nav a { font-size: 1.2rem; }
    .menu-toggle { display: block; }
    .decant-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
    .filter-bar { flex-wrap: wrap; gap: var(--space-1); }
    .footer-grid { text-align: center; }
    #params .params-grid { grid-template-columns: 1fr; }
    .tab-content { padding-left: var(--space-2); padding-right: var(--space-2); }
}

@media (max-width: 480px) { /* Small Mobile */
    h1 { font-size: 2.2rem; }
    .decant-grid { grid-template-columns: 1fr; }
    .container { padding-left: var(--space-2); padding-right: var(--space-2); }
    .product-thumbnails { grid-template-columns: repeat(3, 1fr); }
    .tab-navigation { gap: var(--space-3); }
    .tab-link { font-size: 1rem; }
    #params .recommendation-icons { gap: var(--space-2); }
}
/* --- V. MODAL STYLES --- */
.capacity-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.capacity-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}
.capacity-modal {
    background: var(--color-white);
    padding: var(--space-4);
    border-radius: 8px;
    width: 90%;
    max-width: 350px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.capacity-modal-overlay.is-visible .capacity-modal {
    transform: scale(1);
}
.capacity-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-3);
}
.capacity-modal-header h4 {
    margin: 0;
    font-size: 1.2rem;
    font-family: var(--font-body);
}
.capacity-modal-close-btn {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text-light);
}
.capacity-modal-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.capacity-modal-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.capacity-modal-option:hover {
    background-color: var(--color-bg);
    border-color: var(--color-accent-gold);
}
.capacity-modal-option-size {
    font-weight: 500;
}
.capacity-modal-option-price {
    color: var(--color-text-light);
}