:root {
    --primary-color: #6c757d; /* Changed from blue to gray */
    --secondary-color: #6c757d;
    --primary-color-light: #f8f9fa; /* New light gray for highlights */
    --background-light: #ffffff; /* Overall white background */
    --background-form: #f8f8f8; /* Light grey for form panel */
    --background-product-display: #ffffff; /* White for product display */
    --text-dark: #212529;
    --text-light: #495057;
    --text-on-dark: #ffffff; /* Text color for dark backgrounds (not used much now) */
    --border-color: #e2e4e5;
    --shadow-light: rgba(0, 0, 0, 0.05);
    --shadow-medium: rgba(0, 0, 0, 0.1);
    --border-radius: 0.3rem; /* Slightly reduced for a more modern feel */
    --spacing-unit: 1rem;
    --green-button: #28a745;
    --white-text: #ffffff;

    /* Kolory dla suwaka obwodu - ZMODYFIKOWANE DLA LEPSZEGO KONTRASTU */
    --slider-track-color: #e9ecef; /* Jasnoszary dla tła ścieżki */
    --slider-range-minmax-color: #a0a2aa; /* Jeszcze ciemniejszy szary dla zakresu Min/Max */
    --slider-range-optimal-color: #495057; /* Najciemniejszy szary dla zakresu Optymalnego */
    --slider-thumb-color: var(--primary-color); /* Kolor kciuka suwaka */
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    background-color: #ffffff;
    color: #333;
    font-size: 16px;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1400px;
    margin: 0 auto;
    gap: 5px;
}

/* Old h1, .main-content, .product-display, .configurator-form styles removed as they are replaced by new column layout styles */

.option-group {
    display: flex;
    flex-direction: column;
}

#kolorNiciSectionContainer, #buckleOptionGroup {
    background: none;
    border: none;
    padding: 0;
}




.input-section {
    display: flex;
    flex-direction: column;
    gap: calc(0.75 * var(--spacing-unit));
}

.option-group label {
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: var(--text-dark);
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected-color-name {
    font-weight: normal;
    color: #000;
    font-size: 0.85rem;
}

.label-text-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.selected-color-name {
    font-weight: bold;
}

.option-group select,
.option-group input[type="number"] {
    padding: 0.75rem 1rem; /* Increased padding */
    border-radius: var(--border-radius); /* Rounded corners */
    border: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
    font-size: 0.95rem;
    color: var(--text-dark); /* Explicitly set font color to prevent iOS default blue */
    background-color: #fff;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236c757d%22%20d%3D%22M287%2C197.3L159.3%2C69.7c-3.2-3.2-8.3-3.2-11.6%2C0L5.4%2C197.3c-3.2%2C3.2-3.2%2C8.3%2C0%2C11.6l11.6%2C11.6c3.2%2C3.2%2C8.3%2C3.2%2C11.6%2C0l120.7-120.7l120.7%2C120.7c3.2%2C3.2%2C8.3%2C3.2%2C11.6%2C0l11.6-11.6C290.3%2C205.6%2C290.3%2C200.5%2C287%2C197.3z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 0.8rem top 50%;
    background-size: 0.65rem auto;
}

.option-group select:focus,
.option-group input[type="number"]:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
    outline: none;
}

/* Focus styles for custom interactive elements */
.color-option-item:focus,
.buckle-color-item:focus,
.lang-flag:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2); /* Neutral gray glow */
}


/* Unified Close Button Style */
.unified-close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    color: var(--text-dark); /* Set color for the icon */
    z-index: 10;
}


/* Adjustments for specific containers */
.image-preview-panel .unified-close-button {
    background-color: white;
}



.color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Further reduced gap */
    padding-top: 0.25rem;
}

/* New styles for advanced color options */
.color-option-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 84px; /* Adjusted for 4 items per row */
    padding: 5px;
    box-sizing: border-box; /* Ensure padding is included in the width */
    border-radius: 6px;
    /* background-color: #f9f9f9; */ /* Removed */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative; /* Establish positioning context for absolute children */
}
.color-option-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px var(--shadow-medium); /* Use existing shadow var */
}
.color-option-item.selected {
    /* border-color: var(--primary-color); */ /* No border on item itself */
    /* box-shadow: 0 0 0 2px var(--primary-color); */ /* Outline effect on selected - REMOVED */
    /* The .selected class will now be used to trigger the checkmark */
}

/* Checkmark for selected swatch */
.color-option-item.selected .color-swatch-small {
    position: relative; /* Needed for ::after positioning */
}

.color-option-item.selected .color-swatch-small::after {
    content: '';
    position: absolute;
    left: 8px; /* Adjust for centering */
    top: 4px;  /* Adjust for centering */
    width: 8px;  /* Checkmark leg width */
    height: 12px; /* Checkmark leg height */
    border: solid white; /* Checkmark color */
    border-width: 0 3px 3px 0; /* Thicker checkmark */
    transform: rotate(45deg);
    box-sizing: border-box;
}


.swatch-image-wrapper {
    position: relative;
    width: 74px; /* Adjusted for new item width */
    height: 74px; /* Adjusted for new item width */
    margin-bottom: 0; /* No margin, text is removed */
}

.color-swatch-small {
    position: absolute;
    top: 0;
    left: 0;
    width: 25px; /* New size */
    height: 25px; /* New size */
    border-radius: 4px; /* Square with rounded corners */
    background-color: grey; /* Default, will be overridden by inline style */
    border: 1px solid var(--background-light); /* New border width */
    box-shadow: 0 1px 3px var(--shadow-medium); /* Use existing shadow var */
    z-index: 2; /* Swatch on top */
}
.image-preview-large {
    position: absolute;
    top: 5px;  /* Offset 5px down */
    left: 5px; /* Offset 5px right */
    width: 74px; /* New size */
    height: 74px; /* New size */
    background-color: #e0e0e0; /* Placeholder background */
    border: 1px solid var(--border-color); /* Use existing border var */
    border-radius: 4px;
    object-fit: cover;
    z-index: 1; /* Image behind swatch */
}
/* End of new styles */

.section-title-group {
    margin-bottom: calc(0.5 * var(--spacing-unit)); /* Space below title */
    padding-bottom: calc(0.5 * var(--spacing-unit));
    border-bottom: 1px solid var(--border-color);
}

.section-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0; /* Remove default label margin */
}

/* Obsolete styles for .buckle-section, .buckle-image-column, .buckle-options-column are removed */
/* .buckle-section { ... } */
/* .buckle-image-column { ... } */
/* .buckle-image-column img { ... } */
/* .buckle-options-column { ... } */
/* Buckle specific styles are removed below */

/* Remove old .preview styles if they are not used by .product-display */
/* .preview, .preview h2, .preview img, .preview-details, .image-zoom-options etc. */
/* The styles for .product-display img and p#kodProduktu are defined above */

.order-button {
    background-color: var(--green-button); /* Green background */
    color: var(--white-text); /* White text */
    border: none;
    padding: 0.9rem 1.5rem; /* Wide button */
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-weight: 600; /* Bolder text */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.1s ease;
    margin-top: var(--spacing-unit); /* Space above button */
    width: 100%; /* Full width within its container */
    box-shadow: 0 2px 4px var(--shadow-light);
    text-transform: uppercase; /* Optional: uppercase text */
}

.order-button:hover:not(:disabled) {
    background-color: #218838; /* Darker green on hover */
    box-shadow: 0 4px 8px var(--shadow-medium);
    transform: translateY(-1px); /* Slight lift on hover */
}

.order-button:disabled {
    background-color: var(--secondary-color);
    cursor: not-allowed;
    opacity: 0.65;
}

/* Style for the "Add to Cart" button in the order summary popup */
.button.primary {
    background-color: var(--green-button); /* Green background */
    color: var(--white-text); /* White text */
    border: none;
    padding: 0.9rem 1.5rem; /* Wide button */
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-weight: 600; /* Bolder text */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.1s ease;
    margin-top: var(--spacing-unit); /* Space above button */
    width: 100%; /* Full width within its container */
    box-shadow: 0 2px 4px var(--shadow-light);
    text-transform: uppercase; /* Optional: uppercase text */
    text-decoration: none; /* Remove underline for links */
    display: inline-block; /* Allow padding and width */
    text-align: center; /* Center text */
}

.button.primary:hover:not(:disabled) {
    background-color: #218838; /* Darker green on hover */
    box-shadow: 0 4px 8px var(--shadow-medium);
    transform: translateY(-1px); /* Slight lift on hover */
}

.button.primary:disabled {
    background-color: var(--secondary-color);
    cursor: not-allowed;
    opacity: 0.65;
}


/* Old @media (max-width: 992px) block removed as it's replaced by the new @media (max-width: 768px) block */
/* ===== NEW STYLES FOR 3-COLUMN LAYOUT (APPENDED) ===== */

/* ===== Desktop Layout ===== */
@media (min-width: 769px) {
    .container {
        display: grid;
        grid-template-columns: 5.5fr 4.5fr; /* Zmiana proporcji na 55/45 */
        max-width: 1600px;
        margin: 0 auto;
        gap: 5px;
        /* Usunięto padding */
        transform: translateX(-2.5vw); /* Przesunięcie całego kontenera w lewo dla balansu */
    }

    .column-left {
        position: sticky;
        top: 105px; /* Zwiększona wartość, aby uwzględnić wysokość nagłówka */
        height: fit-content; 
        display: flex;
        flex-direction: column;
        gap: 5px; 
        background-color: var(--background-product-display); /* Używamy zmiennej */
    }

    .column-right {
        display: flex;
        flex-direction: column;
        background-color: var(--background-form); /* Jasnoszare tło dla prawej kolumny */
        padding: 20px; /* Dodano padding */
    }

    .title-cell {
        padding: 15px 20px; /* Padding góra/dół i lewo/prawo */
        margin: 10px 0 10px 0; /* Margines dolny */
        font-weight: 700;
        font-size: 1.25rem;
        color: var(--text-dark);
        border-bottom: 1px solid var(--border-color);
        background-color: transparent; /* Tło przezroczyste */
        text-transform: none; 
        text-align: left; 
    }

    .column {
    padding: 20px; /* Zmieniono padding na 20px */
    display: flex;
    flex-direction: column;
    gap: calc(1.5 * var(--spacing-unit));
    background-color: var(--background-form);
    border-radius: var(--border-radius); /* Dodano zaokrąglenie */
    /* Usunięto box-shadow */
}

    #column-product-display {
    background-color: var(--background-product-display);
    align-items: center;
    justify-content: center;
    gap: 0;
    border-radius: 0; /* Usunięcie zaokrąglenia */
    box-shadow: none; /* Usunięcie cienia */
}
    #column-product-display .unified-close-button {
        display: none; /* Hide on desktop by default */
    }
}

#column-product-display {
    position: relative; /* Added for positioning the message */
}

.main-image-wrapper {
    position: relative;
    width: 100%; /* Ensure it takes full width of its parent */
    display: flex; /* Use flex to center the image */
    justify-content: center;
    align-items: center;
    min-height: 200px; /* Minimum height to ensure message is visible even if image is small */
}

#column-product-display img#mainImage {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--border-radius);
    margin-bottom: 0;
    cursor: zoom-in;
}

.no-preview-message {
    position: absolute;
    top: 66%; /* Approximately 2/3 down the image */
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    z-index: 10; /* Ensure it's above the image */
    pointer-events: none; /* Allow clicks to pass through to the image if needed */
    white-space: nowrap; /* Prevent text wrapping */
}

#column-product-display h3 {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0.2rem;
    margin-top: 0;
    font-weight: 500;
}



/* ===== NEW RESPONSIVE ADJUSTMENTS FOR 3-COLUMN LAYOUT (APPENDED) ===== */
@media (max-width: 1024px) {
    /* Intermediate adjustments if needed, e.g., 2 columns + 1 */
}

@media (max-width: 768px) {
    body {
        padding-top: 0; /* Header height on mobile */
        padding-bottom: 70px; /* Dodano padding dla mobile-summary-bar */
        background-color: var(--background-form);
    }
    body.is-panel-active {
        overflow: hidden;
    }

    .container {
        display: block; /* Revert to block layout */
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        overflow-x: hidden; /* Prevent horizontal scroll */
    }

    .title-cell {
        border-right: none;
        text-align: left;
        padding: calc(0.8 * var(--spacing-unit)) var(--spacing-unit);
    }

    #title-cell-product {
        display: none; /* Hide the old title cell on mobile */
    }


    #title-cell-appearance,
    #title-cell-size,
    .title-cell-summary {
        background-color: var(--text-dark);
        color: var(--text-on-dark);
    }

    .column {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: var(--spacing-unit);
        /* flex-basis: auto; Removed */
    }
    .column:last-child {
        border-bottom: none;
    }

    #column-product-display img#mainImage {
        max-width: 100%;
        height: auto;
        max-height: 35vh;
        object-fit: contain;
    }

    .container > .order-button {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}



/* Styles for form row layout */
.form-row-flex {
    display: flex;
    gap: var(--spacing-unit); /* Adjust gap as needed */
    align-items: flex-start; /* Align items to the top */
}

.form-row-flex .option-group {
    margin-bottom: 0; /* Remove default bottom margin from option-group when in a flex row */
}


.form-group-60 {
    flex: 6;
}

.form-group-40 {
    flex: 4;
}

/* Style for disabled/informative select elements */
select.is-informative,
select:disabled {
    background-color: transparent; /* Zmieniono na przezroczyste */
    opacity: 1; /* Pełna przezroczystość */
    cursor: default; 
    color: #495057; 
    border: 1px solid transparent; /* Przezroczyste obramowanie */
}

/* Ensure the custom arrow is also slightly faded for disabled/informative selects */
select.is-informative,
select:disabled {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ced4da%22%20d%3D%22M287%2C197.3L159.3%2C69.7c-3.2-3.2-8.3-3.2-11.6%2C0L5.4%2C197.3c-3.2%2C3.2-3.2%2C8.3%2C0%2C11.6l11.6%2C11.6c3.2%2C3.2%2C8.3%2C3.2%2C11.6%2C0l120.7-120.7l120.7%2C120.7c3.2%2C3.2%2C8.3%2C3.2%2C11.6%2C0l11.6-11.6C290.3%2C205.6%2C290.3%2C200.5%2C287%2C197.3z%22%2F%3E%3C%2Fsvg%3E');
}
/* Styles for Buckle Items to be EXACTLY like .color-option-item */

/* .buckle-color-item should be identical to .color-option-item */
.buckle-color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 84px; /* Match .color-option-item for total width */
    padding: 5px;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative; /* Matches .color-option-item */
    box-sizing: border-box;
}

.buckle-color-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px var(--shadow-medium);
}

/* .swatch-image-wrapper inside .buckle-color-item should be identical to the general .swatch-image-wrapper */
.buckle-color-item .swatch-image-wrapper {
    position: relative; /* Matches general .swatch-image-wrapper */
    width: 74px;        /* Matches general .swatch-image-wrapper */
    height: 74px;       /* Matches general .swatch-image-wrapper */
    margin-bottom: 0;   /* Matches general .swatch-image-wrapper */
}

/* .color-swatch-small inside .buckle-color-item .swatch-image-wrapper should be identical to general .color-swatch-small */
.buckle-color-item .color-swatch-small {
    position: absolute; /* Matches general .color-swatch-small */
    top: 0;             /* Matches general .color-swatch-small */
    left: 0;            /* Matches general .color-swatch-small */
    width: 25px;        /* Matches general .color-swatch-small */
    height: 25px;       /* Matches general .color-swatch-small */
    border-radius: 4px; /* Matches general .color-swatch-small */
    background-color: grey; /* Default, will be overridden by inline style */
    border: 1px solid var(--background-light); /* Matches general .color-swatch-small */
    box-shadow: 0 1px 3px var(--shadow-medium); /* Matches general .color-swatch-small */
    z-index: 2;         /* Matches general .color-swatch-small */
}

/* .buckle-option-image-preview should be styled like .image-preview-large */
.buckle-option-image-preview {
    position: absolute; /* Matches .image-preview-large */
    top: 5px;           /* Matches .image-preview-large */
    left: 5px;          /* Matches .image-preview-large */
    width: 74px;        /* Matches .image-preview-large */
    height: 74px;       /* Matches .image-preview-large */
    border-radius: 4px; /* Matches .image-preview-large */
    object-fit: cover; /* Changed to 'cover' to be EXACTLY like .image-preview-large */
    z-index: 1;         /* Matches .image-preview-large */
    display: block;     /* Ensure it's a block for layout */
}

/* Checkmark for selected buckle item - applied to .buckle-color-item's swatch */
.buckle-color-item.selected .color-swatch-small {
    position: relative; /* Ensure this is still here for the ::after pseudo-element */
}

.buckle-color-item.selected .color-swatch-small::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 4px;
    width: 8px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    box-sizing: border-box;
}
/* Styles for the buckle section background */
#buckleOptionGroup {

}

#buckleOptionGroup > label {
    /* Optional: Adjust label styling if needed within this white box */
    /* For example, if the default label color doesn't contrast well with white */
}

#buckleOptionGroup .color-options {
    /* This section now inherits its flex properties from the main .color-options rule */
    /* The specific grid override was causing layout issues on desktop. */
    /* Mobile grid layout is handled by a separate media query. */
    justify-content: flex-start; /* Align items to the start */
}

/* Style dla suwaka obwodu nadgarstka */
input[type="range"]#obwodNadgarstka {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px; /* Grubość ścieżki */
    background: var(--slider-track-color); /* Domyślne tło, będzie nadpisane przez JS */
    border-radius: 5px;
    outline: none;
    opacity: 0.9;
    transition: opacity .15s ease-in-out;
    cursor: pointer;
}

input[type="range"]#obwodNadgarstka:hover {
    opacity: 1;
}

/* Kciuk suwaka dla WebKit (Chrome, Safari, Edge Chromium) */
input[type="range"]#obwodNadgarstka::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px; /* Szerokość kciuka */
    height: 28px; /* Wysokość kciuka */
    background: var(--slider-thumb-color);
    border-radius: 50%; /* Okrągły kciuk */
    border: 2px solid var(--background-light); /* Biała obwódka dla kontrastu */
    cursor: pointer;
    margin-top: -5px; /* Aby wycentrować kciuk na ścieżce */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Kciuk suwaka dla Firefox */
input[type="range"]#obwodNadgarstka::-moz-range-thumb {
    width: 25px; /* Szerokość kciuka */
    height: 25px; /* Wysokość kciuka */
    background: var(--slider-thumb-color);
    border-radius: 50%;
    border: 2px solid var(--background-light);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Ścieżka dla Firefox - tło będzie ustawiane przez JS */
input[type="range"]#obwodNadgarstka::-moz-range-track {
    width: 100%;
    height: 8px;
    background: var(--slider-track-color); /* Domyślne tło, będzie nadpisane przez JS */
    border-radius: 5px;
    cursor: pointer;
}

/* Styles for Wrist Circumference Slider Section */
.form-group-slider {
    padding: var(--spacing-unit);
    background-color: var(--background-light);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.range-slider-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wrist-circumference-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.8rem;
    margin-bottom: 1.5rem;
}

.wrist-circumference-controls button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}


.wrist-circumference-controls button .icon {
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    transition: background-color 0.2s ease;
}

.wrist-circumference-controls button:active .icon {
    transform: scale(0.95);
}

#wrist-decrease,
#wrist-increase {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}


.range-slider-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    min-width: 80px;
    text-align: center;
    padding: 0.5rem 1rem;
    background-color: var(--background-form);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.range-slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-light);
}

.range-slider-min-label,
.range-slider-max-label {
    font-weight: 500;
}

/* Results Section Styles */
.results-section {
    margin-top: var(--spacing-unit);
    padding: var(--spacing-unit);
    background-color: var(--background-form);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    text-align: center;
}

.results-section h2 {
    margin: 0 0 1rem 0;
    color: var(--text-dark);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

.recommended-size {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

#strap-size-value {
    font-size: 1.2rem; /* Zmniejszono, aby zmieścić dłuższy tekst */
    font-weight: bold;
    color: var(--primary-color);
    padding: 0.5rem 0.8rem; /* Zmniejszono padding poziomy */
    background-color: var(--background-light);
    border-radius: var(--border-radius);
    border: 2px solid var(--primary-color);
    min-width: 60px;
    text-align: center;
    white-space: nowrap; /* Zapobiega łamaniu linii */
}

#strap-optimal-wrist-text {
    font-size: 0.9rem;
    color: var(--text-light);
    font-style: italic;
}

@media (max-width: 768px) {
    .wrist-circumference-controls {
        gap: 0.75rem;
    }

    .wrist-circumference-controls button {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .range-slider-value {
        font-size: 1rem;
        min-width: 70px;
        padding: 0.4rem 0.8rem;
    }

    .form-group-slider {
        padding: calc(0.75 * var(--spacing-unit));
    }

    .results-section {
        padding: calc(0.75 * var(--spacing-unit));
    }

    #strap-size-value {
        font-size: 1.1rem; /* Zmniejszono, aby zmieścić dłuższy tekst */
    }
}

/* Styles for Size Table */
.table-section {
    margin-top: var(--spacing-unit);
    padding: var(--spacing-unit);
    background-color: var(--background-light);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.table-section h2 {
    margin: 0 0 var(--spacing-unit) 0;
    color: var(--text-dark);
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#size-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    background-color: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 1px 3px var(--shadow-light);
}

#size-table thead {
    background-color: var(--primary-color);
    color: white;
}

#size-table th,
#size-table td {
    padding: 0.6rem 0.5rem; /* Zmniejszony padding */
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

#size-table th {
    font-weight: 600;
    font-size: 0.85rem; /* Lekko zmniejszona czcionka */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: normal; /* Pozwala na zawijanie tekstu */
    word-break: break-word; /* Łamie długie słowa, jeśli to konieczne */
    vertical-align: middle; /* Lepsze wyrównanie w pionie */
}

#size-table td {
    font-size: 0.95rem;
    color: var(--text-dark);
}

#size-table tbody tr {
    transition: background-color 0.2s ease;
    cursor: pointer;
}

#size-table tbody tr:hover {
    background-color: var(--background-form);
}

#size-table tbody tr:last-child td {
    border-bottom: none;
}

/* Highlighted row for selected size */
/* Legacy class removed */
#size-table tbody tr.highlighted {
    background-color: var(--primary-color-light, #f0f0f0) !important;
    font-weight: bold;
}

#size-table tbody tr.highlighted td {
    color: var(--text-dark); /* Ensure text color is consistent */
}

@media (max-width: 768px) {
    #size-table th,
    #size-table td {
        padding: 0.4rem 0.2rem; /* Jeszcze mniejszy padding na mobile */
        font-size: 0.7rem; /* Dalsze zmniejszenie czcionki */
        line-height: 1.2; /* Poprawa czytelności zawiniętego tekstu */
    }

    .table-section {
        padding: calc(0.75 * var(--spacing-unit));
    }
}

/* --- Icon System --- */

/* Base class for all icons */
.icon {
    display: inline-block;
    width: 24px; /* Default icon size */
    height: 24px; /* Default icon size */
    padding-left:10px;
    background-color: currentColor; /* Inherit color from parent */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: middle;
    background-color: var(--primary-color);

}

/* Specific icon definitions */
.icon-info           { -webkit-mask-image: url(../graphics/info-square.svg); mask-image: url(../graphics/info-square.svg); }
.icon-close          { -webkit-mask-image: url(../graphics/x-square.svg); mask-image: url(../graphics/x-square.svg); }
.icon-share          { -webkit-mask-image: url(../graphics/share.svg); mask-image: url(../graphics/share.svg); }
.icon-envelope-at    { -webkit-mask-image: url(../graphics/envelope-at.svg); mask-image: url(../graphics/envelope-at.svg); }
.icon-zoom           { -webkit-mask-image: url(../graphics/zoom.svg); mask-image: url(../graphics/zoom.svg); }
.icon-dash-square    { -webkit-mask-image: url(../graphics/dash-square.svg); mask-image: url(../graphics/dash-square.svg); }
.icon-plus-square    { -webkit-mask-image: url(../graphics/plus-square.svg); mask-image: url(../graphics/plus-square.svg); }


/* --- Button and Interactive Element Styling --- */

/* The One True Icon Button Style */
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    border: 1px solid transparent;
    background-color: transparent;
    border-radius: 10%; /* Make all icon buttons circular */
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.icon-button .icon {
    transition: background-color 0.2s ease;
}

.icon-button:hover,
.icon-button:focus {
    background-color: var(--primary-color-light);
    transform: scale(1.05);
    border-color: var(--border-color);
    outline: none;
}

.icon-button:focus {
    /*box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.3), 0 4px 8px var(--shadow-medium);
    */
}

.icon-button:hover .icon,
.icon-button:focus .icon {
    background-color: var(--text-dark);
}

/* Individual button sizing and positioning */

.tooltip-icon {
    width: 24px;
    height: 24px;
}

.unified-close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    z-index: 10;
}

.share-icon-button {
    width: 44px;
    height: 44px;
}

.panel-zoom-button {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    z-index: 5;
}

.wrist-circumference-controls button {
    width: 40px;
    height: 40px;
}


/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001; /* Ensure it's above other content */
}


.modal-content {
    background-color: var(--background-light);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: none;
    width: 90%;
    max-width: 1000px; /* Zwiększona szerokość */
    position: relative;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--text-light);
    cursor: pointer;
}

.lang-flag {
    width: 30px;
    height: 22.5px; /* Utrzymanie proporcji 4:3 */
    cursor: pointer;
    margin-left: 5px;
    border: 2px solid transparent;
    transition: border-color 0.3s;
    border-radius: 3px; /* Zaokrąglenie rogów */
}

.lang-flag.active {
    border-color: #007bff;
}
/* Mobile Summary Bar Styles */
.mobile-summary-bar {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    padding: 5px 10px;
    z-index: 1070; /* Higher than the summary panel and overlay */
    align-items: stretch; /* Stretch items to fill height */
    justify-content: center; /* Center the actions container */
    height: auto; /* Auto height based on content */
    padding: 10px;
}

.mobile-summary-actions {
    display: flex;
    gap: 10px;
    width: 100%;
}

.mobile-action-button {
    height: 48px; /* Stała wysokość przycisku */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px; /* Usunięto padding góra/dół, wysokość kontroluje wysokość */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    flex: 1 1 0; /* Each button takes equal space and can shrink/grow */
    text-align: center;
    text-transform: uppercase;
    transition: background-color 0.2s ease, height 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* Allow button to shrink */
}

#mobile-preview-button {
    background-color: #e9ecef;
    color: var(--green-button, #28a745);
    display: flex;
    align-items: center;
    justify-content: center;
}

#mobile-preview-button::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    background-color: currentColor;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}

#mobile-order-button {
    background-color: #28a745;
    color: white;
}

#mobile-preview-button:hover {
    background-color: #d3d9df;
}

#mobile-order-button:hover {
    background-color: #218838;
}

#mobile-preview-button:disabled, #mobile-order-button:disabled {
    background-color: #adb5bd;
    cursor: not-allowed;
    opacity: 0.7;
}

.pulse-animation {
    animation: pulse 0.5s 1; /* Run the animation once */
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(33, 136, 56, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 10px 10px rgba(33, 136, 56, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(33, 136, 56, 0);
    }
}

/* Side Panel Styles */
.image-preview-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* Tło będzie na overlayu */
    z-index: 1050;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
}

/* New Mobile Summary Panel */
.mobile-summary-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 350px;
    height: 100%;
    background-color: var(--background-light);
    z-index: 1060;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
    padding: 20px;
    box-shadow: none;
    box-sizing: border-box;
}

.mobile-summary-panel.open {
    transform: translateX(0);
}

#mobile-summary-image {
    width: 100%;
    height: auto;
    max-height: 30vh;
    object-fit: contain;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.mobile-summary-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-summary-content h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.mobile-summary-content p {
    font-size: 0.9rem;
    margin: 0;
    display: flex;
    justify-content: space-between;
}

.mobile-summary-content p strong {
    color: var(--text-light);
    font-weight: 500;
    margin-right: 10px;
}

.mobile-summary-content p span {
    font-weight: 600;
    text-align: right;
}

.mobile-summary {
    display: none; /* Hidden by default, shown in panel */
}

.image-preview-panel .mobile-summary {
    display: none; /* Ukrywamy podsumowanie w trybie pełnoekranowym */
}

.image-preview-panel .info-item h3 {
    font-size: 1rem;
    margin-bottom: 10px;
}

.image-preview-panel .mobile-summary p {
    font-size: 0.8rem;
    margin: 0 0 2px 0; /* Zmniejszony margines dolny */
    display: flex;
    justify-content: space-between;
}

.desktop-summary {
    width: 100%;
    padding-top: var(--spacing-unit);
    margin-top: var(--spacing-unit);
    border-top: 1px solid var(--border-color);
}

.summary-group {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px;
    margin-bottom: 10px;
    background-color: var(--background-light);
}

.summary-group:last-of-type {
    margin-bottom: 0;
}

.summary-row {
    margin: 0 0 5px 0 !important;
}

.summary-row:last-child {
    margin-bottom: 0 !important;
}

.desktop-summary p {
    font-size: 0.9rem;
    margin: 0 0 4px 0;
    display: flex;
    justify-content: space-between;
}

.desktop-summary p strong {
    color: var(--text-light);
    font-weight: 500;
}

.desktop-summary p span {
    font-weight: 600;
    text-align: right;
}

.summary-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.summary-buttons .order-button {
    margin-top: 0;
    flex: 1; /* Make buttons share space equally */
}

#shareButton {
    background-color: var(--secondary-color);
}

#shareButton:hover {
    background-color: #5a6268;
}

.image-preview-panel .mobile-summary p strong {
    color: var(--text-light);
}

.image-preview-panel .mobile-summary p span {
    font-weight: 600;
    text-align: right;
}

.image-preview-panel.open {
    visibility: visible;
    opacity: 1;
}

#image-preview-content {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: 5px;
    object-fit: contain; /* Kluczowe dla dopasowania obrazu */
    box-shadow: none;
}

.panel-close {
    position: absolute;
    top: 20px; /* Adjusted for better visual alignment with image */
    right: 20px; /* Adjusted for better visual alignment with image */
    font-size: 1.8rem; /* Slightly smaller font for better fit */
    font-weight: bold;
    color: white; /* White color for better contrast */
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent dark background */
    border-radius: 50%; /* Make it round */
    width: 40px; /* Fixed width */
    height: 40px; /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    z-index: 1060;
}

.panel-close:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */
}

@media (min-width: 769px) {
    #column-product-display .panel-close {
        display: none;
    }
}

.panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7); /* Ciemniejsza nakładka */
    z-index: 1049; /* Poniżej panelu, ale nad resztą */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.panel-overlay.open {
    opacity: 1;
    visibility: visible;
}


@media (max-width: 768px) {
    #title-cell-product {
        display: none;
    }
    /* Setup for mobile sliding panel animation */
    #column-product-display {
        position: fixed;
        top: 0;
        left: 0;
        width: 90%;
        height: 100%;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1055; /* Higher than overlay */
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 1rem 0.5rem; /* Reduced side padding */
        overflow-y: auto;
        visibility: hidden;
    }
    #column-product-display.is-preview-visible {
        transform: translateX(0);
        visibility: visible;
    }

    #preview-summary-content .desktop-summary {
        padding: var(--spacing-unit);
        background-color: var(--background-form);
    }
    .main-content {
        grid-template-columns: 1fr;
    }
    .mobile-summary-bar {
        display: flex;
    }
    .container {
        padding-bottom: 0; /* Usunięto padding z kontenera, ponieważ jest teraz na body */
    }
    #orderButton {
        display: none; /* Hide the original order button on mobile */
    }

    /* Poprawka dla Safari mobile - użycie Grid dla klamer */
    .color-options {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
    }

    .color-option-item {
        width: 100%;
    }



    /* Add transitions for the animated elements */
    .site-header,
    #title-cell-appearance,
    #column-appearance-options,
    #title-cell-size,
    #column-size-options,
    #column-product-display {
        transition: transform 0.4s ease-in-out;
    }

    /* --- Mobile Preview Mode --- */
    /* --- Mobile Preview Mode (OLD) --- */
    /* Deprecated preview-mode-active styles removed */

    body.quick-preview-active .site-header {
        transform: translateY(-100%);
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: none; /* Ukryj border i padding, gdy nagłówek jest schowany */
    }
}
/* Style for the second line in the size table */
#size-table .size-value {
    font-size: 0.85em;
    color: var(--text-light);
}
/* Mobile Quick Preview Styles */
.mobile-quick-preview {
    background-color: var(--background-light);
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */ /* Cień może być niepotrzebny, gdy jest częścią layoutu */
    padding: 0; /* Usunięty padding, obrazek go dostosuje */
    box-sizing: border-box;
    display: grid;
    place-items: center; /* Zamiennik dla justify-content i align-items w grid */
    position: relative; /* Dla pozycjonowania przycisku zamknięcia */
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Płynniejsze przejście */
}

.mobile-quick-preview.is-open {
    max-height: 33.33vh; /* Wysokość podglądu */
    padding: 10px; /* Dodaj padding, gdy otwarty */
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000; /* Poniżej nagłówka, ale nad resztą */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
    .mobile-quick-preview.is-hidden-on-scroll {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: none;
        overflow: hidden;
    }
}

.mobile-quick-preview-image-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px; /* Adjust as needed for mobile preview */
}

#mobile-quick-preview-image {
    max-width: 100%;
    height: auto;
    max-height: calc(33.33vh - 20px); /* Adjust based on wrapper height */
    object-fit: contain;
}

#mobile-quick-preview-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-dark);
    cursor: pointer;
    line-height: 1;
    z-index: 2; /* Wyżej niż obrazek */
}

.mobile-no-preview-message {
    position: absolute;
    top: 66%; /* Approximately 2/3 down the image */
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    z-index: 10; /* Ensure it's above the image */
    pointer-events: none; /* Allow clicks to pass through */
    white-space: nowrap;
}

/* Adjust mobile summary bar when quick preview is visible */


body.side-panel-open {
    overflow: hidden; /* Block scrolling */
}

.mobile-summary-bar {
    /* Add transition for when it comes back */
    transition: transform 0.4s ease-in-out;
}

/* Custom styles for summary */
.summary-wrist-circumference {
    text-decoration: underline;
    color: #A52A2A !important; /* Dark Red with high priority */
}
#infoObwodNadgarstka {
    color: #A52A2A; /* Dark Red */
    font-weight: bold;
}
/* --- HEADER STYLES --- */
.site-header {
    background-color: #fff;
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column; /* Stack rows vertically */
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1010;
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 200px; /* Wystarczająco duża, aby pomieścić nagłówek */
}

.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo-container {
    /* No special styles needed now, it's just a wrapper */
}

.site-header .logo {
    height: 40px;
    width: auto;
}

.site-title {
    margin: 10px 0 0; /* Add some margin-top */
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    /* align-self: flex-end; is removed */
}

.language-selector {
    display: flex;
    align-items: center; /* Vertically center flags */
    justify-content: flex-end;
    gap: 5px;
    height: 40px; /* Match the logo height for alignment */
}

@media (max-width: 768px) {
    body {
        padding-top: 0; /* Adjusted for mobile header height */
    }

    .site-header {
        padding: 10px 15px;
    }

    .site-header .logo {
        height: 35px;
    }
    
    .language-selector {
        height: 35px; /* Match mobile logo height */
    }

    .site-title {
        font-size: 0.8rem;
        margin-top: 8px;
    }

    .column > *:not(.title-cell) { /* Target direct children of .column, excluding .title-cell */
        margin-bottom: var(--spacing-unit); /* Consistent spacing for all major sections */
    }

    .column > *:last-child { /* Remove margin from the very last child of .column */
        margin-bottom: 0;
    }
}
/* Language Modal Styles */

.lang-modal-trigger-button {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#current-lang-flag {
    width: 30px;
    height: 22.5px;
    display: block;
}

#language-modal .modal-content {
    max-width: 90vw;
    width: 400px;
}

#language-modal-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 1rem;
}

.language-modal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px;
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease;
}

.language-modal-item:hover {
    background-color: var(--background-form);
}

.language-modal-item .lang-flag {
    width: 40px;
    height: 30px;
    border: 2px solid transparent;
}

.language-modal-item .lang-flag.active {
    border-color: var(--primary-color);
}

.language-modal-item span {
    font-weight: 500;
    color: var(--text-dark);
}


.lang-modal-trigger-button {
    gap: 8px; /* Add space between flag and arrow */
}

.dropdown-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-dark); /* Arrow color */
    transition: transform 0.3s ease;
}
/* Obsolete .color-option styles removed */
/* Styl dla aktywnej flagi języka */
.lang-flag.active {
  border: 2px solid var(--primary-color);
  box-shadow: 0 0 5px var(--primary-color);
}

/* Popup Action Buttons */
/* Usunięto .popup-actions, ponieważ jego zawartość została przeniesiona */

/* Nowe style dla układu podsumowania z obrazkiem */
#order-summary-details-wrapper {
    display: flex;
    gap: 1.5rem; /* Odstęp między kolumnami */
    margin-bottom: 1.5rem; /* Odstęp przed przyciskami akcji */
    align-items: stretch; /* Rozciągnij elementy, aby wypełniły wysokość */
}

#order-summary-image-column {
    flex-shrink: 0; /* Zapobiega zmniejszaniu */
    width: 500px; /* Zwiększona szerokość dla obrazka */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Usunięto style ramki i tła */
}

#order-summary-product-image {
    max-width: 100%;
    height: 100%; /* Obrazek wypełnia dostępną wysokość */
    object-fit: contain;
}

#order-summary-info-column {
    flex-grow: 1; /* Rozciąga się, aby wypełnić dostępną przestrzeń */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Wyśrodkowanie pionowe zawartości */
}

#order-summary-info-column h2 {
    margin-top: 0;
    margin-bottom: 1rem; /* Odstęp pod nagłówkiem */
    text-align: center;
}

#order-summary-info-column #order-summary-links {
    margin-top: 1.5rem !important; /* Zwiększony odstęp od góry dla przycisku */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.order-summary-qrcode {
    margin-top: 1rem;
    padding: 10px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: none; /* Domyślnie ukryty */
}

.order-summary-qrcode canvas,
.order-summary-qrcode img {
    display: block;
    margin: auto;
}


/* Ukryj obrazek na mobile */
@media (max-width: 768px) {
    #order-summary-image-column {
        display: none;
    }
    #order-summary-details-wrapper {
        flex-direction: column;
        gap: 0.5rem;
    }
    #order-summary-info-column {
        width: 100%;
    }
    .order-summary-qrcode {
        display: none !important; /* Bezwzględnie ukryj na mobile */
    }
}


/* Footer Styles */
.site-footer {
    background-color: #212529; /* Dark background for the footer */
    color: #f8f9fa; /* Light text color */
    padding: 2rem 1.5rem;
    text-align: center;
    font-size: 0.9rem;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 1200px; /* Match container max-width */
    margin: 0 auto;
}

.contact-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.contact-info .infolinia {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.contact-info .phone-number {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.8rem; /* Larger font for phone number */
    font-weight: bold;
    color: #ffffff;
    margin: 0;
}

.contact-info .phone-number::before {
    content: '📞';
    margin-right: 10px;
    font-size: 1.5rem; /* Adjust size as needed */
    filter: grayscale(1) brightness(3);
}

.contact-info .working-hours {
    font-size: 0.9rem;
    color: #adb5bd; /* Lighter grey for working hours */
    margin: 0;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.5rem; /* Row gap and column gap */
}

.footer-links a {
    color: #f8f9fa; /* Light text for links */
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
}

.footer-links a:hover {
    color: var(--primary-color); /* Highlight on hover */
}

@media (min-width: 769px) {
    .footer-content {
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
    }

    .contact-info {
        align-items: flex-start;
    }

    .footer-links {
        justify-content: flex-end;
        flex-grow: 1;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding: 1.5rem 1rem;
        margin-top: 1.5rem;
    }

    .contact-info .phone-number {
        font-size: 1.5rem;
    }

    .contact-info .phone-number img {
        height: 25px;
    }

    .footer-links {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
}

/* Author Info Styles */
.author-info {
    text-align: center;
    margin: 1.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid #495057;
    width: 100%;
    max-width: 1200px;
}

.author-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #adb5bd;
}

.author-info a {
    color: #f8f9fa;
    text-decoration: none;
    font-weight: 600;
}

.author-info a:hover {
    color: var(--primary-color);
}
.footer-author {
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
    font-size: 0.8rem;
    color: #888;
}

.footer-author a {
    color: #888;
    text-decoration: none;
}

.footer-author a:hover {
    text-decoration: underline;
}

/* New Language Modal Styles */
#language-modal .modal-content {
    max-width: 95vw;
    width: 500px;
}

#language-modal-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 10px; /* for scrollbar */
}

.language-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.language-option:hover {
    background-color: var(--primary-color-light);
    border-color: var(--primary-color);
}

.language-option.active {
    background-color: var(--primary-color-light);
    border-color: var(--primary-color);
    font-weight: bold;
}

.lang-flag-modal {
    width: 32px;
    height: 24px;
    border-radius: 3px;
    flex-shrink: 0;
}

.lang-name-modal {
    font-size: 0.9rem;
    color: var(--text-dark);
}

/* Share Icon Button Styles */
/* Usunięto stare, niespójne style dla .image-actions i .share-icon-button */
/* Nowe pozycjonowanie zostanie obsłużone przez klasę .share-action-button */
.product-display-container {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    gap: 5px; /* Space between image and buttons */
}

.main-image-wrapper {
    flex-grow: 1; /* Image takes up available space */
}

.action-buttons-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Space between buttons */
}

.share-action-button,
.email-action-button {
    position: static; /* Remove absolute positioning */
    width: 50px;
    height: 50px;
    z-index: 5;
}

.share-action-button .icon,
.email-action-button .icon {
    width: 30px;
    height: 30px;
}

@media (max-width: 768px) {
    #column-product-display.is-preview-visible .share-action-button,
    #column-product-display.is-preview-visible .email-action-button {
        position: static;
        margin-top: 5px;
        margin-bottom: 5px;
        align-self: center;
    }
}