@layer btn_all { /* BUTTONS: ALL */
    .dz_button_names_container {
        display: flex;
        flex-direction: column;
    }

    .dz_button_short_name {
        font-size: medium;
    }

    .dz_button_short_name.short_names_hidden {
        display: none;
    }

    .dz_button_short_name.short_names_displayed + .dz_button_full_name { /* WHEN SHORT NAMES ARE SHOWN */
        font-size: x-small;
    }

    .dz_button_full_name { /* WHEN SHORT NAMES ARE HIDDEN */
        font-size: medium;
    }
}

@layer btn_actions { /* BUTTONS: SIMPLE ACTIONS / NAVIGATION */
    .dz_action_button {
        border-radius: 3px;
        border: none;
        background-color: rgb(78, 155, 78);
        cursor: pointer;
    }

    .dz_action_button:hover {
        background-color: rgb(159, 235, 159);
    }

    .dz_action_button:active {
        background-color: rgb(213, 235, 16);
    }

    .dz_action_buttons_container {
        text-align: center;
    }
}

@layer btn_choices { /* BUTTONS: CHOICES AND TOGGLES */
    .dz_form_control_group_buttons {
        display: flex;
        flex-direction: row;
        gap: 8px;
        flex-wrap: wrap;
    }

    .dz_option_button {
        display: flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        border-radius: 3px;
        border: none;
        background-color: rgb(189, 213, 189);
        cursor: pointer;
    }

    .dz_option_button.active {
        background: #007bff;
        color: #fff;
    }

    .dz_form_control_group[dz_buttons_group_type="radio"] .dz_option_button.active > .dz_button_icon_container::after {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-left: 6px;
        background-color: currentColor;
        mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIHI9IjQ3IiBjeD0iNTAiIGN5PSI1MCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjUiIGZpbGw9Im5vbmUiLz48Y2lyY2xlIHI9IjI2IiBjeD0iNTAiIGN5PSI1MCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjUiLz48L3N2Zz4=');
        mask-repeat: no-repeat;
        mask-size: contain;
    }

    .dz_form_control_group[dz_buttons_group_type="radio"] .dz_option_button:not(.active) > .dz_button_icon_container::after {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-left: 6px;
        background-color: currentColor;
        mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIHI9IjQ3IiBjeD0iNTAiIGN5PSI1MCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMiIGZpbGw9Im5vbmUiLz48L3N2Zz4=');
        mask-repeat: no-repeat;
        mask-size: contain;
    }

    .dz_form_control_group[dz_buttons_group_type="multi"] .dz_option_button.active > .dz_button_icon_container::after {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-left: 6px;
        background-color: currentColor;
        mask-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%3E%0A%0A%20%20%3Cline%20x1%3D%223%22%20y1%3D%2212%22%20x2%3D%226%22%20y2%3D%2220%22%20%2F%3E%0A%20%20%3Cline%20x1%3D%226%22%20y1%3D%2220%22%20x2%3D%2220%22%20y2%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E');
        mask-repeat: no-repeat;
        mask-size: contain;
    }

    .dz_form_control_group[dz_buttons_group_type="multi"] .dz_option_button:not(.active) > .dz_button_icon_container::after {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-left: 6px;
        background-color: currentColor;
        mask-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%3E%0A%0A%20%20%3Cline%20x1%3D%223%22%20y1%3D%223%22%20x2%3D%2220%22%20y2%3D%2220%22%20%2F%3E%0A%20%20%3Cline%20x1%3D%223%22%20y1%3D%2220%22%20x2%3D%2220%22%20y2%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E');
        mask-repeat: no-repeat;
        mask-size: contain;
    }
}

@layer sliders {

    .filter_panel_item[dz_control_type="slider"] {
        width: 90%;
    }

    .dual_slider_container {
        position: relative;
        width: 100%;
        height: 20px;
        margin: 20px 0;
    }   

    .slider_track {
        position: relative;
        padding-left: 3px;
        padding-right: 3px;
        margin-left: 3px;
        margin-right: 3px;
        width: 100%;
        height: 4px;
        background: #b8b8b8;
        /* Grey line for inactive range */
        top: 50%;
        transform: translateY(-5.5px);
        z-index: 1;
    }

    .slider_range {
        position: absolute;
        padding-left: 3px;
        padding-right: 3px;
        margin-left: 3px;
        margin-right: 3px;
        height: 6px;
        background: #000000;
        /* Black line for active range */
        top: 50%;
        transform: translateY(-3px);
        z-index: 2;
        left: 0; /* Default left position */
        width: 0; /* Default width */
    }

    .dual_slider {
        position: absolute;
        width: 100%;
        height: 2px;
        background: transparent;
        pointer-events: none;
        -webkit-appearance: none;
        appearance: none;
        z-index: 3;
    }



    .min_slider {
        z-index: 4;
    }

    .max_slider {
        z-index: 5;
    }

    .slider_values {
        display: flex;
        justify-content: space-between;
        margin-top: 5px;
        font-family: Arial, sans-serif;
        font-size: 12px;
    }

}

@layer general { /* GENERAL */

    .dz_form_control_group {
        margin-bottom: 3px;
        margin-top: 3px;
        margin-left: 3px;
        margin-right: 3px;
        padding-bottom: 3px;
        padding-top: 3px;
        padding-left: 3px;
        padding-right: 3px;
    }

    @font-face {
    font-family: 'Orbit';
    src: url('https://denzil.neocities.org/plant_shop/OrbitMaxenceDuterne-Regular.woff');
    }

    h1, h2, h3, h4, div, p, span, td, button {
        font-family: 'Orbit', sans-serif;
        overflow-wrap: break-word;
    }

    h1 {
        text-align: center;
        font-size: xx-large;
    }

    h2 {
        text-align: center;
        vertical-align: top;
        height: 50px;
    }

    .xy_centred {
        text-align: center;
        vertical-align: middle;
        align-items: center;
        justify-content: center;
    }

    @media (min-width: 769px) {
        /* DESKTOP ONLY */
        .MOBILE_ONLY {
            display: none;
        }
    }

    @media (max-width: 768px) {
        /* MOBILE ONLY */
        .DESKTOP_ONLY {
            display: none;
        }
    }

    input[type="checkbox"] {
        transform: scale(3);
        /* Makes the checkbox 3x bigger */
        margin: 5px;
        /* Optional: Adjust spacing around the checkbox */
    }

}

@layer plant_polaroid {
    .plant_polaroid img[orientation="undetermined"] {
        display: none;
    }

	.plant_polaroid {
		display: grid;
		border: 2px solid black;
		background-color: white;
		padding: 5px;
		margin: 10px;
		break-inside: avoid;
		grid-template-columns: 1fr 2fr 1fr;
		/* Central column is wider */
		grid-template-rows: 1fr 2fr 1fr;
		/* Middle row is deeper */
		gap: 0;	
		width: 200px;
		min-width: 225px;
		max-height: 275px;
		min-height: 225px;
		/* Adjust as needed */
	}

	/* Corner cells (fixed to their positions) */
	.polaroid_corner {
		background: #c222de;
		display: flex;
		padding: 10px;
		min-width:  40px;
		min-width: 40px;
		box-sizing: border-box;
	}

	.top-left {
		grid-column: 1;
		grid-row: 1;
	}

	.top-right {
		grid-column: 3;
		grid-row: 1;
	}

	.bottom-left {
		grid-column: 1;
		grid-row: 3;
	}

	.bottom-right {
		grid-column: 3;
		grid-row: 3;
	}

	img[oriented="undetermined"] { /* should not happen! */
		grid-column: 2;
		grid-row: 1 / span 3;
		height: 20px;
		width: 20px;
		background-color: red;
	}

	/* Portrait images: span the entire central column (all 3 rows) */
	img[oriented="portrait"] {
		grid-column: 2;
		grid-row: 1 / span 3;
		max-width: 200px;
		height: 100%;
		max-height: 225px;

		/* Spans all rows in the central column */
	}

	/* Landscape images: span the entire middle row (all 3 columns) */
	img[oriented="landscape"] {
		grid-column: 1 / span 3;
		/* Spans all columns in the middle row */
		grid-row: 2;
		width: 100%;
		max-width: 225px;
		max-height: 200px;
	}



}



@layer image_carousel {

    /* Page layout */
    .page {
        padding: 15px;
    }

    /* Carousel */
    .carousel_img_wrapper {
        position: relative;
        max-width: 100%;
        margin: 10% 0;
    }

    /* Desktop (default) */
    .carousel_img {
        width: 20%;
        max-width: 20%;
        display: none;
    }
}

@layer svg_icons {

    .svg_red::after {
        background-color: rgb(170, 21, 21);
    }

    .svg_violet::after {
        background-color: rgb(128, 17, 162);
    }

    .svg_amber::after {
        background-color: rgb(218, 181, 36);
    }

    .svg_green::after {
        background-color: rgb(16, 151, 14);
    }

    .svg_droplet::after {
        content: "";
        display: inline-block;
        width:32px;
        height:32px;
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIHI9IjQ5IiBjeD0iNTAiIGN5PSI1MCIvPjxjaXJjbGUgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTQ5Ljg2IDE0LjRzLTI1LjIgMjguOC0yNS4yIDQ2LjhhMjUuMiAyNS4yIDAgMDA1MC40IDBjMC0xOC0yNS4yLTQ2LjgtMjUuMi00Ni44eiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjcuMiIvPjwvc3ZnPg==");
        mask-repeat: no-repeat;
        mask-size: contain;
        margin-left: 8px;
    }

    .svg_droplet_with_diagonal_line::after {
        content: "";
        display: inline-block;
        width:32px;
        height:32px;
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIHI9IjQ5IiBjeD0iNTAiIGN5PSI1MCIvPjxjaXJjbGUgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTE2IDE2bDY4IDY4IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iOSIvPjxwYXRoIGQ9Ik01MC4wNSAxNHMtMjQuNSAyOC0yNC41IDQ1LjVhMjQuNSAyNC41IDAgMDA0OSAwYzAtMTcuNS0yNC41LTQ1LjUtMjQuNS00NS41eiIvPjwvc3ZnPg==");
        mask-repeat: no-repeat;
        mask-size: contain;
        margin-left: 8px;
    }

    .svg_dumbbell::after {
        content: "";
        display: inline-block;
        width:32px;
        height:32px;
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIHI9IjQ5IiBjeD0iNTAiIGN5PSI1MCIvPjxjaXJjbGUgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTEyIDM1aDR2MzBoLTR6TTE4IDMwaDZ2NDBoLTZ6TTI3IDI1aDh2NTBoLTh6TTM2IDQ4aDI4djVIMzZ6TTg4IDM1aC00djMwaDR6TTgyIDMwaC02djQwaDZ6TTczIDI1aC04djUwaDh6Ii8+PC9zdmc+");
        mask-repeat: no-repeat;
        mask-size: contain;
        margin-left: 8px;
    }

    .svg_star::after {
        content: "";
        display: inline-block;
        width:32px;
        height:32px;
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIHI9IjQ5IiBjeD0iNTAiIGN5PSI1MCIvPjxjaXJjbGUgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTQ5LjcyNSA3LjY1bDkuMzUgMjcuMmMuODUgMy40IDMuNCA1LjEgNi44IDUuMWgyMi4xTDcwLjEyNSA1Mi43Yy00LjI1IDMuNC01LjEgNS45NS0zLjQgMTAuMmw3LjY1IDIxLjI1LTE4LjctMTQuNDVjLTMuNC0yLjU1LTguNS0yLjU1LTExLjkgMGwtMTguNyAxNC40NSA3LjY1LTIxLjI1YzEuNy00LjI1Ljg1LTYuOC0zLjQtMTAuMmwtMTcuODUtMTIuNzVoMjIuMWMzLjQgMCA1Ljk1LTEuNyA2LjgtNS4xeiIvPjwvc3ZnPg==");
        mask-repeat: no-repeat;
        mask-size: contain;
        margin-left: 8px;
    }

    .svg_tick::after {
        content: "";
        display: inline-block;
        width:32px;
        height:32px;
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIHI9IjQ5IiBjeD0iNTAiIGN5PSI1MCIvPjxjaXJjbGUgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIiBmaWxsPSIjRkZGIi8+PHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMjIgNTVsMTggMjUgMzctNTUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI5Ii8+PC9zdmc+");
        mask-repeat: no-repeat;
        mask-size: contain;
        margin-left: 8px;
    }

    .svg_excl_mark::after {
        content: "";
        display: inline-block;
        width:32px;
        height:32px;
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIHI9IjQ5IiBjeD0iNTAiIGN5PSI1MCIvPjxjaXJjbGUgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIiBmaWxsPSIjRkZGIi8+PHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNNTAgODB2LTNtMC0yMlYyMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEyIi8+PC9zdmc+");
        mask-repeat: no-repeat;
        mask-size: contain;
        margin-left: 8px;
    }

    .svg_flat_line::after {
        content: "";
        display: inline-block;
        width:32px;
        height:32px;
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIHI9IjQ5IiBjeD0iNTAiIGN5PSI1MCIvPjxjaXJjbGUgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIiBmaWxsPSIjRkZGIi8+PHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMjAgNTBoNjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxNSIvPjwvc3ZnPg==");
        mask-repeat: no-repeat;
        mask-size: contain;
        margin-left: 8px;
    }

    .svg_recycling::after {
        content: "";
        display: inline-block;
        width:32px;
        height:32px;
        mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIHI9IjQ5IiBjeD0iNTAiIGN5PSI1MCIvPjxjaXJjbGUgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIiBmaWxsPSIjRkZGIi8+PHBhdGggZD0iTTM1IDc1Yy0xMy03LTMwLTM2IDYtNTQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxMSIgc3Ryb2tlLWxpbmVjYXA9Im1pdGVyIi8+PHBhdGggc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMiIGQ9Ik01NSAxOWwxMy0yLTggMTR6Ii8+PGcgc3Ryb2tlPSIjMDAwIj48cGF0aCBkPSJNNjUgMjVjMTMgNyAzMCAzNi02IDU0IiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjExIiBzdHJva2UtbGluZWNhcD0ibWl0ZXIiLz48cGF0aCBzdHJva2Utd2lkdGg9IjMiIGQ9Ik00NSA4MWwtMTMgMiA4LTE0eiIvPjwvZz48L3N2Zz4=");
        mask-repeat: no-repeat;
        mask-size: contain;
        margin-left: 8px;
    }
}


@layer menu_page_layout {

    /* FIRST ROW */
    #top_row {
        height: 100px;
        width: 100%;
        display: flex;
    }

    #top_row_title {
        display: inline-block;
        text-align: center;
        flex: 1;
    }

    #top_row_btn_return_home,
    #top_row_btn_contact_me {
        display: inline-block;
        text-align: center;
        width: 10%;
    }

    /* SECOND ROW */
    #central_row {
        display: flex;
    }

    /* SECOND ROW: LEFT FILTERS PANE (ON DESKTOP ONLY) */
    #left_filter_pane {
        width: 30%;
        max-width: 300px;
        border: 1px solid grey;
    }

    /* SECOND ROW: CENTRAL PANE (DESKTOP AND MOBILE) */
    #central_pane {
        display: inline-block;
        flex: 1;
        /* Takes up the remaining space */
    }
}

@layer filter_pill_rack_MOBILE {
	#filter_bar {
		height: 50px;
	}

	#filter_overlay_visibility_button {
		display: inline;
		margin: 10px;
	}

	#filter_pill_rack {
		height: 30px;
		width: 100%;
		overflow-x: scroll;
	}

	.filter_pill {
		height: 90%;
		width: 30%;
		vertical-align: middle;
		align-items: left;
		display: inline;
		border-radius: 10px;
		border: 3px;
	}

	.filter_pill_caption {
		height: 90%;
		text-align: left;
		display: inline;
	}

	.filter_pill_valuetext {
		height: 90%;
		text-align: right;
		display: inline;
		border-radius: 5px;
		border: 2px;
	}
}