@font-face {
    font-family: "Poppins";
    src: url("/images/FONTI/Poppins-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url("/images/FONTI/Poppins-SemiBold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html {
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    max-width: 100%;
    /* Fluid base font size. Every rem/em based size across the site scales from
       this value: it stays at 16px on desktop and shrinks smoothly down to ~13px
       on small phones, so fonts and controls adapt to the viewport. */
    font-size: clamp(13px, 12.4px + 0.3vw, 16px);
    font-family: "Poppins", sans-serif;
}
body {
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    line-height: 1.45;
}

/* Form controls do not inherit font sizing by default, which stops them from
   scaling with the rest of the page. Make them follow the fluid root size. */
input,
select,
textarea,
button {
    font-family: inherit;
    font-size: inherit;
}

a,
a:link,
a:visited {
    color: black;
    text-decoration: none;
}

.site-header-wrapper {
    background-color: #f9a64a;
    height: 3vw;
    min-height: 100px;
    max-height: 100px;
}

.site-header-wrapper button,
.site-header-wrapper input[type="button"] {
    margin: 5px 0.5vw;
}

.logo{
    height: clamp(28px, 7vw, 50px);
    width: auto;
    padding: 0 1vw 0 0;
    box-sizing: border-box;
}

.search-form,
form[action="/search/index"] {
    position: relative;
    background-color: white;
    border: 2px solid #f9a64a;
    border-radius: 4px;
    align-items: stretch;
    overflow: hidden;
}

.search {
    background-color: transparent;
    border: none;
    outline: none;
    padding: clamp(6px, 0.9vw, 8px);
    color: black;
}

.search-magnifier {
    flex: 0 0 auto;
    width: clamp(28px, 3.4vw, 40px);
    padding: 0;
    border: none;
    background-color: white !important;
    box-shadow: none !important;
    background-image: url("/images/Iskanje.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: clamp(12px, 1.6vw, 18px) clamp(12px, 1.6vw, 18px);
    cursor: pointer;
}

.head-search-results {
    position: absolute;
    background-color: white;
    z-index: 3;
    border: 2px solid #F9A64A;
    font-size: clamp(10px, 9px + 0.3vw, 18px);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
    .head-search-results span.price {
        color: #f88400;
        font-size: 1.2em;
    }

    .head-search-results input.button {
        width: 80%;
    }

    .head-search-results .button-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .head-search-results .title h3 {
        color: #F9A64A;
        margin-bottom: 0.3em;
    }

    .head-search-results .title h3.center {
        text-align: center;
    }

    .head-search-results .products .product {
        display: flex;
        border-bottom: 1px solid transparent;
        border-top: 1px solid transparent;
        transition: border-color 0.3s ease;
    }

        .head-search-results .products .product .product-image {
            object-fit: contain;
            width: clamp(80px, 100px, 150px);
            height: clamp(80px, 100px, 150px);
            min-width: 80px;
            padding: 5px;
        }

        .head-search-results .close-panel img {
            object-fit: contain;
            width: 14px;
            height: 14px;
            position: absolute;
            top: 0px;
            right: 0px;
            margin-top: 10px;
            margin-right: 10px;
            cursor: pointer;
        }

    .head-search-results .products .product:hover {
        border-color: #F9A64A;
    }
        /*
        .head-search-results .products .product.no-border {
            border-bottom: none;
        }*/

        .head-search-results .products .product .data {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            justify-content: center;
        }

    .head-search-results .categories-and-brands {
        display: flex;
        justify-content: space-evenly;
        padding-bottom: 1em;
    }

        .head-search-results .categories-and-brands .categories-only,
        .head-search-results .categories-and-brands .brands-only {
            display: flex;
            flex-direction: column;
        }


input[type="button"].cart-button {
    background: url("/images/Kosarica.svg");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: clamp(12px, 2vw, 28px) clamp(12px, 2vw, 28px);
    padding-left: clamp(20px, 2.5vw, 34px);
}

.top-ctx{
	padding: 8px;
}

#top-ctx.top-ctx a{
    background-color: #f9a64a;
    color: #ffffff;
    border: none;
    padding: 0.5em 0.85em;
    font-size: 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(249, 166, 74, 0.18);
    margin: 5px 0;
    text-decoration: none;
    }

#top-context-menu-trigger,
#bottom-context-menu-trigger {
    background: url("/images/Moj_profil.svg");
    background-position: left;
    background-repeat: no-repeat;
    background-size: clamp(12px, 1.7vw, 25px) clamp(12px, 1.7vw, 25px);
    padding-left: clamp(20px, 2vw, 32px);
    cursor: pointer;
}

@media screen and (max-width: 1050px) {
    #bottom-ctx input[type="button"] {
        font-size: clamp(16px, 4.2vw, 22px);
        padding-block: 10px;
    }

    #bottom-context-menu-trigger,
    #bottom-ctx input[name="cart-counter-bottom"] {
        background-size: clamp(18px, 4.5vw, 30px) clamp(18px, 4.5vw, 30px);
        padding-left: clamp(28px, 6vw, 42px);
    }

    #bottom-ctx #cart-counter-bottom {
        width: clamp(18px, 1.6vw + 10px, 24px);
        height: clamp(18px, 1.6vw + 10px, 24px);
        font-size: clamp(0.65em, 0.55em + 0.35vw, 0.85em);
        transform: translate(-100%, 130%);
    }
}

#top-context-menu-trigger:hover {
    background-color: #f9a64a;
}

input[name="cart-counter-top"] {
    background-color: #f9a64a;
    border: 2px solid #f9a64a;
    border-radius: 4px;
    padding: 0.5em 0.85em;
    color: white;
    cursor: pointer;
}

input[name="cart-counter-top"]:hover {
    background-color: #f9a64a;
}

#cart-counter-top {
    width: clamp(13px, 0.9vw + 6px, 19px);
    height: clamp(13px, 0.9vw + 6px, 19px);
    border-radius: 50%;
    background: red;
    color: white;
    font-size: clamp(0.5em, 0.42em + 0.25vw, 0.68em);
    font-weight: 600;
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    position: absolute;
    transform: translate(-70%, 50%);
    cursor: context-menu;
}

#cart-counter-bottom {
    width: clamp(16px, 1.2vw + 10px, 23px);
    height: clamp(16px, 1.2vw + 10px, 23px);
    border-radius: 50%;
    background: red;
    color: white;
    font-size: clamp(0.6em, 0.5em + 0.3vw, 0.8em);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    position: absolute;
    transform: translate(-60%, 40%);
    z-index: 9999;
}

.site-body-left {
    background-color: white;
    padding: 5px 8px 10px;
    border-radius: 12px;
    /* Fluid sidebar: width and text scale with the viewport across desktop widths
       instead of staying locked at 320px and full font size. The steep slope with
       a negative offset makes the sidebar shrink aggressively as the screen narrows. */
    width: clamp(50px, 45vw - 240px, 400px);
    min-width: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
    font-size: clamp(10px, 8px + 0.5vw, 14px);
    border: 1.5px solid white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;

    & img {
        display: block;
        max-width: 50%;
        height: auto;
        width: auto;
        object-fit: contain;
        margin: 0 auto;
    }

    & label.attribute-value {
        text-transform: lowercase;
        display: inline-block;

        &::first-letter {
        text-transform: uppercase;
        }
    }

    & ul ,li {
        line-height: 1.6;
    }
}

.site-body-left input[type="checkbox"] {
    accent-color: #f9a64a;
    border: 1px solid #f9a64a;
    width: clamp(16px, 1vw, 18px);
    height: clamp(16px, 1vw, 18px);
}

.categories {
    background-color: transparent;
    padding-bottom: 5%;
}

.site-body-left ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: clamp(12px, 9px + 0.6vw, 17px);
}

.site-body-left ul a,
.site-body-left ul a:visited {
    color: black;
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-body-left ul a:hover,
.site-body-left ul a:active {
    color: #FF8D00;
    text-decoration: underline;
}

.site-body-left a.current,
.site-body-left a.current:visited {
    color: #FF8D00;
}

.site-body-left ul li {
    list-style: none;
}

.site-body-left > ul > li,
.site-body-left > ul > li > a {
    font-weight: bold;
}

.site-body-left ul ul {
    margin: 0;
    padding-left: 20px;
}

.site-body-left ul ul li,
.site-body-left ul ul li > a {
    font-weight: normal;
}

.site-body-left .multiselect {
    position: relative;
    max-height: 12em;
    overflow-y: auto;
    box-sizing: border-box;
}

.site-body-left .multiselect .attribute-title {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white;
}

.attribute-title {
    display: block;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 2em;
}
	
.category {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 6px 8px;
    background-color: white;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    border-left: 4px solid transparent;
    border-bottom: 1px solid #e0e0e0;
    font-size: clamp(6px, 1vw, 16px);
}

.category:hover {
    background-color: #fff8f0;
    border-left-color: #f9a64a;
}

.category img {
    width: clamp(20px, 2vw, 40px);
    height: clamp(20px, 2vw, 40px);
    object-fit: cover;
    flex-shrink: 1;
}

.category-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.category-name {
    font-size: 1.2em;
    font-weight: bold;
    color: black;
    transition: color 0.3s ease;
}

.category:hover .category-name {
    color: #FF8D00;
}

.category .arrow{
    height: clamp(11px, 1.6vw, 15px);
    width: clamp(11px, 1.6vw, 15px);
}

.category .link {
    display: none;
}

.site-footer-wrapper {
    --footer-text-size: clamp(0.82rem, 0.8rem + 0.16vw, 0.92rem);
    background-color: white;
    border-top: 2px solid #f9a64a;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

    & .footer-item h3 {
        margin: 0 0 10px;
        color: #f9a64a;
        font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem);
    }

    & .footer-item ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    & .footer-item li {
        margin: 0 0 6px;
    }

    & .footer-item a,
    & .footer-item a:visited {
        color: black;
        font-size: var(--footer-text-size);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    & .footer-item a:hover,
    & .footer-item a:active {
        color: #FF8D00;
        text-decoration: underline;
    }
}

.bottom {
    font-size: clamp(0.82rem, 0.8rem + 0.16vw, 0.92rem);
    margin-top: 0.2vw;
    color:#555;
}

.cart-dropdown {
    background-color: white;
    border: 2px solid #f9a64a;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    padding: 5px 15px;
    line-height: 1.3;
    box-sizing: border-box;
    text-align: left;
    margin-bottom: 1vw;

    & h3 {
        color: #f9a64a;
        margin: 0.5vw 0;
        font-size: clamp(16px, 2.5vw, 20px);
    }
    

    & .item-container {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
        border-bottom: 1px solid black;
        padding: 12px 0;

        & .image-container img {
            width: clamp(44px, 6vw, 72px);
            height: clamp(44px, 6vw, 72px);
            object-fit: contain;
        }

        & .price-container {
            text-align: left;
            margin-top: 0.5vw;

            & .price {
                font-weight: bold;
            }
        }
    }

    & .summary-container {
        text-align: left;
        padding: 12px 0 0;

        & .price {
            font-weight: bold;
            float: right;
        }
    }

    & > div:last-child > input[type="button"] {
        font-size: clamp(1rem, 0.86rem + 0.2vw, 1rem);
        padding: 0.4em 2em;
        margin: 5px 0;
        width: 100%;
    }
}

.cart-view .cart-item-container .title-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 0;
    margin-bottom: 8px;
}

.cart-view .cart-item-container .title-container a,
.cart-view .cart-item-container .title-container .primary-title,
.cart-view .cart-item-container .title-container .secondary-title {
    display: block;
    width: 100%;
}

.cart-view .cart-item-container .title-container a {
    text-decoration: none;
}

.cart-view .cart-item-container .title-container .primary-title,
.cart-view .cart-item-container .title-container .secondary-title {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.cart-view .cart-item-container .title-container .primary-title {
    font-size: clamp(14px, 1.3vw, 18px);
    font-weight: 700;
    line-height: 1.35;
    color: #1a1a1a;
}

.cart-view .cart-item-container .title-container .secondary-title {
    font-size: clamp(12px, 1vw, 16px);
    color: #555;
    line-height: 1.4;
    font-weight: 400;
}

.context-menu-wrapper {
    background-color: white;
    border: 2px solid #f9a64a;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    padding: 0 15px 5px 15px;
    line-height: 1.3;
    margin-bottom: 1vw;
    font-size: clamp(12px, 2.5vw, 14px);

    a {
        color: black;
        text-decoration: none;
        transition: opacity 1s ease;
		line-height: 1.5;
    }

    a:hover {
        text-decoration: underline;
		color: #f9a64a;
        transition: color 0.3s ease;
    }

    img  {
        width: clamp(14px, 2vw, 14px);
        height: clamp(14px, 2vw, 14px);
    }

    h3 {
        font-size: clamp(16px, 2.5vw, 20px);
    }
	
	select {
		border: 2px solid #f9a64a;
		border-radius: 0.5em; 
		padding: 3px 20px 3px 15px;
		background-color: white;
		color: black;
		cursor: pointer;
		
	
		width: 100%;
		max-width: 180px;
		box-sizing: border-box;
		appearance: base-select;
	}	
	
	::picker(select) {
		appearance:base-select;
		border: 2px solid #f9a64a;
		border-radius: 0.5em;
	
	}
	select::picker-icon{
		align-content: center;
		transition: 150ms ease;

	}
	
	select:open::picker-icon{
		rotate: 180deg;
	}
	select ::checkmark {
		content: none;
	}
	.body {
		padding:10px 0;
	}
}

.context-menu-wrapper h3 {
    margin: 0;
    padding-top: 10px;
    color: #f9a64a;
    font-size: clamp(16px, 4vw, 20px);
}
/* MOJ PROFIL*/
.my-account-wrapper {
    background-color: white;
    border: 2px solid #f9a64a;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    padding: 0 15px 5px 15px;
    line-height: 1.3;
    box-sizing: border-box;

    a {
        color: black;
        text-decoration: none;
        transition: opacity 1s ease;
        line-height: 1.5;
    }

    a:hover {
        text-decoration: underline;
        color: #FF8D00;
        transition: color 0.3s ease;
    }

    input,
    select,
    textarea {
        border: 2px solid #f9a64a;
        border-radius: 8px;
        padding: 5px;
        margin: 2px 0;
        box-sizing: border-box;
        font-size: clamp(11px, 10px + 0.5vw, 14px);
    }
    input.region-name._regionName {
        width: 84%;
        min-width: 84%;
        box-sizing: border-box;
    }
    
    input.region-code._regionCode {
        width: 15%;
        min-width: 15%;
        box-sizing: border-box;
    }

    input.street._street {
        width: 84%;
        min-width: 84%;
        box-sizing: border-box;
    }

    input.street-index._streetIndex {
        width: 15%;
        min-width: 15%;
        box-sizing: border-box;
    }

    .body {
        padding: 10px 0;
    }
}

.site-body,
.site-body-right,
.my-account-wrapper .my-account,
.my-account-wrapper .my-addresses,
.my-account-wrapper .my-addresses .addresses {
    min-width: 0;
    box-sizing: border-box;
}

.site-body-right .product-quantity {
    font-weight: bold;
}

.my-account-wrapper .my-addresses .addresses {
    max-width: 100%;
    overflow-x: hidden;
}

.my-account-wrapper .my-addresses .addresses .my-address,
.my-account-wrapper .my-addresses .addresses .my-address-placeholder {
    min-width: 0 !important;
}

.my-address, .my-data-header,
.my-data-org {
    background-color: white;
    border: 2px solid #f9a64a;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    line-height: 1.4;
    box-sizing: border-box;
    margin: 10px 0;
    min-width: 49%;
    max-width: 100%;
}

.my-data-header h3,
.my-data-org h3,
.my-address h3,
.my-addresses .title h3
 {
    margin: 0 0 5px 0;
    color: #f9a64a;
}
.my-data-header h4,
.my-data-org h4,
.my-address h4 {
    margin-top: 0;
    color: #f9a64a;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    background-color: #f9a64a;
    color: #ffffff;
    border: none;
    padding: 0.55em 0.85em;
    font-size: clamp(8px, 8px + 0.3vw, 14px);
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(249, 166, 74, 0.18);
    transition: background-color 0.18s ease, transform 0.12s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    background-color: #f9a64a;
    transform: translateY(-1px);
}

/* NASTAVITEV GUMBA DODAJ NOV NASLOV NA SREDINO POLJA*/
input#new-address.new-address {
    margin: 180px 40%;
}



/* SPREMEMBA GESLA*/

.password-change-wrapper {
    background-color: white;
    border: 2px solid #f9a64a;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    padding: 16px;
    margin: 20px auto;
    max-width: 100%;
    box-sizing: border-box;
}

.password-change-wrapper table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

.password-change-wrapper td {
    display: block;
    width: 100%;
    padding: 0;
}

.password-change-wrapper td label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.password-change-wrapper td input,
.password-change-wrapper td select,
.password-change-wrapper td textarea {
    width: 400px;
    max-width: 600px;
    box-sizing: border-box;
}

.password-change-wrapper .password-change-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.password-change-wrapper .password-change-form input,
.password-change-wrapper .password-change-form select,
.password-change-wrapper .password-change-form textarea {
    background-color: white;
    border: 2px solid #f9a64a;
    border-radius: 8px;
    color: black;
    width: 400px;
    max-width: 600px;
    padding: 5px 15px;
    margin: 5px 0;
    box-sizing: border-box;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.password-change-wrapper .password-change-form input:focus,
.password-change-wrapper .password-change-form select:focus,
.password-change-wrapper .password-change-form textarea:focus {
    border-color: #f9a64a;
    outline: none;
}

/* Compact submit button for password-change forms */
.password-change-wrapper .password-change-form input[type="submit"],
.password-change-wrapper .password-change-form button[type="submit"] {
    background-color: #f9a64a;
    color: #ffffff;
    border: none;
    margin-top: 15px;
    padding: 8px ;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(249, 166, 74, 0.18);
    transition: background-color 0.18s ease, transform 0.12s ease;
    align-self: center;
    display: inline-flex;
    justify-content: center;
}

.password-change-wrapper .password-change-form input[type="submit"]:hover,
.password-change-wrapper .password-change-form button[type="submit"]:hover {
    background-color: #f9a64a;
    transform: translateY(-1px);
}

/* PRIJAVA V RAČUN*/
.login-wrapper {
    background-color: white;
    border: 2px solid #f9a64a;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    padding: 5px 20px;
    margin: 20px auto;
    max-width: 100%;
    box-sizing: border-box;
    & a{
        color: #f9a64a;
        padding-bottom: 10px;
        text-decoration-line: underline;
        text-decoration-color: transparent;
        text-underline-offset: 2px;
        transition: text-decoration-color 0.25s ease;

    & span{
        color: #f9a64a;
        padding-bottom: 10px;
        }
    }

    & a:hover {
        text-decoration-color: currentColor;
    }


    & .login-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;

        & label {
            width: 400px;
            max-width: 600px;
            margin-bottom: 0.4rem;
            font-weight: 600;
            text-align: left;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        & label span {
            display: block;
            margin-bottom: 0.35rem;
            line-height: 1.25;
        }

        & label input,
        & label select,
        & label textarea {
            display: block;
        }

        & td {
            display: block;
            width: 400px;
            max-width: 600px;
            padding: 0;
            text-align: left;
        }

        & td span {
            display: block;
            margin-bottom: 0.35rem;
            font-weight: 600;
        }

        & td input[type="text"],
        & td input[type="password"] {
            display: block;
            width: 100%;
        }

        & td.button-row input.button,
        & input.button.registration {
            padding: 10px 70px;
        }

        & input,
        & select,
        & textarea {
            background-color: white;
            border: 2px solid #f9a64a;
            border-radius: 8px;
            color: black;
            width: 400px;
            max-width: 600px;
            padding: 5px 15px;
            margin: 5px 0;
            box-sizing: border-box;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        }

        & input:focus,
        & select:focus,
        & textarea:focus {
            border-color: #f9a64a;
            outline: none;
        }

        & input[type="submit"],
        & button[type="submit"],
        & input.button.registration {
            background-color: #f9a64a;
            color: #ffffff;
            border: none;
            margin-top: 15px;
            padding: 8px;
            font-size: 14px;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(249, 166, 74, 0.18);
            transition: background-color 0.18s ease, transform 0.12s ease;
            align-self: center;
            display: inline-flex;
            justify-content: center;
            width: auto;
        }

        & input[type="submit"]:hover,
        & button[type="submit"]:hover,
        & input.button.registration:hover {
            background-color: #f9a64a;
            transform: translateY(-1px);
        }

        & input.button.registration {
            width: 400px;
            max-width: 600px;
            box-sizing: border-box;
        }

        & .error.validation-summary-errors {
            color: red;
            font-weight: bold;
            text-align: center;

            & ul{
                margin: 3% 0;
                padding: 0;
            }

            & li {
                list-style: none;
                margin:0;
            }
        }
    }
}

/* REGISTRACIJA */

.registration{
    margin: 20px auto;
    & a{
        color: orange;
    }

    & h1{
        color: #f88400;
        margin: 0 0 10px 0;
    }
}
.registration-section {
    background-color: white;
    border: 2px solid #f9a64a;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    padding: 20px 20px;
    margin: 20px auto;
    max-width: 100%;
    box-sizing: border-box;

    & .label {
        display: block;
        max-width: 600px;
        margin-bottom: 0.4rem;
        font-weight: 600;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .street-index-label{
        font-weight: 600;
        margin: 0 5px;
    }

    & .column input {
        border: 2px solid #f9a64a;
        border-radius: 5px;
        padding: 3px 5px;
        height: 32px;
        box-sizing: border-box;
    }

    & .column input:focus {
        outline: none;
    }

    & input.postcode {
        margin-right: 1%;
    }
    & select.country-picker{
        border: 2px solid #f9a64a;
        border-radius: 5px;
        padding: 3px 5px;
		cursor: pointer;
		width: 100%;
		height: 32px;
		box-sizing: border-box;
		appearance: base-select;
	}	
	
	::picker(select) {
		appearance:base-select;
		border: 2px solid #f9a64a;
		border-radius: 0.5em;
	
	}
	select::picker-icon{
		align-content: center;
		transition: 150ms ease;

	}
	
	select:open::picker-icon{
		rotate: 180deg;
	}
	select ::checkmark {
		content: none;
	}  
}

.registration-wrapper input[type="submit"] {
    background-color: #f9a64a;
    color: #ffffff;
    border: none;
    margin-top: 15px;
    padding: 10px 70px;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(249, 166, 74, 0.18);
    transition: background-color 0.18s ease, transform 0.12s ease;
    display: inline-flex;
    justify-content: center;
    width: auto;
}

.registration-wrapper input[type="submit"]:hover {
    background-color: #f9a64a;
    transform: translateY(-1px);
}

/* POZABELJENO GESLO*/

.password-reset-wrapper{
    background-color: white;
    border: 2px solid #f9a64a;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    padding: 10px 20px;
    margin: 20px auto;
    max-width: 100%;
    box-sizing: border-box;

    & input[name="TargetEmail"]{
        border: 2px solid #f9a64a;
        border-radius: 8px;
        padding: 5px; 
    }
    
    & input[name="TargetEmail"]:focus{
        outline: none;
    }
    
    & input[type="submit"][value="Pošlji zahtevek za spremembo gesla"]{
        border: 2px solid #f9a64a;
        border-radius: 8px;
        padding: 5px;
    }

}

/* MOJA NAROČILA */

/* Fluid base font for the entire order section — scales across all viewport widths */
.order-wrapper {
    font-size: clamp(12px, 4px + 0.65vw, 16px);
}

/* Order item product photos scale fluidly with the viewport */
.order-wrapper .product-image img {
    width: clamp(40px, 5vw, 80px);
    height: auto;
    object-fit: contain;
    display: block;
}

.my-order-body table{
    border: none;
    border-collapse: separate;
    border-radius: 8px;
    margin: 10px 0;
    border-spacing: 0;
    box-shadow: 0 0 0 2px #f9a64a;
    overflow: hidden;
    width: 100%;
    cursor: default;
    font-size: 1em;
    
    a{
        color: black;
        text-decoration: none;
    }

    a:hover{
        text-decoration: underline;
        color: #f9a64a;
        transition: color 0.3s ease;
    }

    td.left, td.right {
        background-color: #f9a64a;
        padding: clamp(4px, 0.6vw, 8px);
        border: none;
        line-height: 1.3;
        color: white;
        font-weight: bold;
        
    }
    
    th {
        padding: clamp(5px, 0.8vw, 10px);
        border: none;
        line-height: 1.3;
        font-weight: bold;
    }
    tbody tr:nth-child(odd) td:not(.left):not(.right) {
        background-color: #fff8f0;
    }
}

/* ISKANJE PRODUKTOV STYLING */
.num-cart-items {
    width: 20%;
    min-width: 52px;
    height: 34px;
    border: 2px solid #f9a64a;
    border-radius: 4px;
    text-align: center;
    box-sizing: border-box;
    margin: 5px 0;
}

.product-view-tile form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.product-view-tile .add-to-cart,
.product-view-tile .num-cart-items {
    height: 34px;
    margin: 0;
    box-sizing: border-box;
    
    &.num-cart-items:focus {
        outline: none;
    }
}

.product-view-tile {
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    border-radius: 8px;
    padding: clamp(8px, 1vw, 16px) clamp(6px, 0.7vw, 10px);
    /* Fluid text: tile contents scale down across desktop widths as the
       columns get narrower. Inner titles/price use em, so they follow this. */
    font-size: clamp(13px, 8px + 0.5vw, 16px);
}

.product-view-tile:hover {
    border-color: #f9a64a;
}

.product-view-tile a,
.product-view-tile a:visited,
.product-view-tile a:hover,
.product-view-tile a:active {
    text-decoration: none;
}

.product-view-tile .product-primary-title {
    font-weight: bold;
    text-align: center;
    margin: 0;
}

/* BLAGAJNA */

.cart-view {
    & h1 {
        color: orange;
        margin: 0;
        font-size: clamp(16px, 6vw, 24px);
    }
}

.cart-view button,
.cart-view input[type="button"],
.cart-view input[type="submit"],
.cart-view input[type="reset"] {
    font-size: clamp(12px, 0.45vw + 10.5px, 14px);
    line-height: 1.2;
    padding: 0.48em 0.9em;
    min-height: 2.2em;
    width: auto;
    min-width: clamp(110px, 14vw, 180px);
}

.right-panel{
    border: 2px solid #f9a64a;
    border-radius: 8px;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;

    & a{
        color: black;
        text-decoration: none;
        font-weight: bold;
    }

    & .price-container .value {
        font-weight: bold;
    }
}

.delivery-panel {
    border: 2px solid #f9a64a;
    border-radius: 8px;
    margin: 10px 0;
    padding: 10px;
    box-sizing: border-box;

    & .my-address-container .my-address{

        & .row .item {


            & input.region-code._regionCode, input.street-index._streetIndex {
                    border: 2px solid #f9a64a;
                    display: inline-flex;
                    border-radius: 0.5em;
                    padding: 5px;
                    box-sizing: border-box;
                    width: 15%;
                    margin: 4px 0;
            }

            & input.street._street, input.region-name._regionName {
                border: 2px solid #f9a64a;
                display: inline-flex;
                border-radius: 0.5em;
                padding: 5px;
                box-sizing: border-box;
                width: 84%;
            }
            
            & .input {
                border: 2px solid #f9a64a;
                border-radius: 0.5em; 
                margin: 0;
                padding: 5px 6px;
                box-sizing: border-box;
            }
        }
    
        & .row .item select._country {
        border: 2px solid #f9a64a;
        border-radius: 0.5em; 
        margin: 0;
        padding: 2px 6px;
        }
    }

    & select {
    appearance: base-select;
    border: 2px solid #f9a64a;
	border-radius: 0.5em; 
	padding: 3px 20px 3px 15px;
	background-color: white;
	color: black;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
    margin: 10px 0;
    }
	& ::picker(select) {
		appearance:base-select;
		border: 2px solid #f9a64a;
		border-radius: 0.5em;
	
	}
	& select::picker-icon{
		align-content: center;
		transition: 150ms ease;

	}
	
	& select:open::picker-icon{
		rotate: 180deg;
	}
	& select ::checkmark {
		content: none;
    }

}

.cart-view input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid rgb(150, 150, 150); 
    background-color: white;
    border-radius: 20%;
    cursor: pointer;
    margin: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cart-view input[type="radio"]:checked {
    background-color: orange;
}

.pipeline-title, .delivery-title {
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 600;
}

.pipeline-disclaimer, .delivery-description {
    font-size: 0.82rem;
    line-height: 1.4;
    color: #555;
}


.selected-quantity-container {
    display: flex;
    align-items: center;
    gap: 10px;

    & .quantity {
        border: 2px solid #f9a64a;
        border-radius: 8px;
        width: 50px;
        text-align: center;
        padding: 5px;
    }
}

.price-pipeline-container {
    border: 2px solid #f9a64a;
    border-radius: 8px;
    margin: 10px 0;
    padding: 10px;
    box-sizing: border-box;
    }

.cart-item-container {
    margin: 20px 0;
}

.error-panel .error,
.prompt-container .error {
    color: red;
        font-weight: bold;
        margin-top: 10px;
}

.error-panel .warning,
.prompt-container .warning {
    color: brown;
    font-weight: bold;
}

/* computer screens */
@media screen and (min-width: 1051px) {

    .current-category-popup-wrapper {
        background-color: white;
        border: 2px solid #f9a64a;
        border-radius: 12px;
        /* Joined look (mimovrste-style): square the edge facing the category
           menu so the flyout reads as an extension of it rather than a
           detached card. The menu sits immediately to its left. */
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left-width: 1px;
        /* fit-content + right lets the panel shrink to its content but never
           extend past the viewport's right edge (e.g. on Windows 150% scaling
           where the CSS viewport is smaller), so columns can't be clipped. */
        width: fit-content;
        right: 16px;
        max-width: calc(100vw - 300px);
        padding: clamp(6px, 0.8vw, 12px);
        box-sizing: border-box;
        font-size: clamp(12px, 1vw, 14px);
        position: fixed !important;
        top: var(--category-popup-top, 108px) !important;
        /* Taller when wider so content stays packed in fewer columns; never
           taller than the viewport. */
        max-height: min(660px, calc(430px + 11vw), calc(100vh - var(--category-popup-top, 108px) - 16px));
        /* Side-scroll on overflow: when the subcategory columns are wider than
           the panel (many groups, or a narrow/scaled viewport), expose a
           horizontal scrollbar instead of clipping the rightmost columns. */
        overflow-x: auto;
        overflow-y: auto;
    }

    /* Cap each group's (column) width so long labels wrap instead of forcing a
       very wide column. Narrower columns also mean more of them fit in the
       reduced horizontal space on scaled/short viewports without clipping.
       Group cap: 160px @1051px growing to ~230px @1730px (265px on wider screens). */
    .current-category-popup-wrapper .group {
        max-width: clamp(160px, 24px + 12vw, 265px);
        box-sizing: border-box;
        padding-bottom: clamp(10px, 0.8vw, 20px);
        padding-left: clamp(8px, 0.9vw, 20px);
    }

    .current-category-popup-wrapper .group .header h3 {
        font-size: clamp(12px, 5px + 0.72vw, 17px);
        line-height: 1.25;
        overflow-wrap: break-word;
    }

    .current-category-popup-wrapper .group .header img {
        width: clamp(18px, 4.6px + 1.3vw, 30px);
        height: clamp(18px, 4.6px + 1.3vw, 30px);
        object-fit: contain;
    }

    .current-category-popup-wrapper .group .items {
        font-size: clamp(11px, 3px + 0.72vw, 15px);
        line-height: 1.3;
    }

    .current-category-popup-wrapper .group .items a {
        font-size: inherit;
        overflow-wrap: break-word;
    }

    /* my orders */
    .order-wrapper {

        & #my-orders-container h3 {
            color: orange;
            text-align: center;
            font-size: 1.5em;
            }

        & .orders-narrow {
            display: none;
        }
    }
}
    .order-wrapper {
        & .orders-wide .my-order {
            margin-bottom: 20px;

            & .my-order-header {
                background-color: #f9a64a;
            }

            & .my-order-body th {
                padding-left: 10px;
                padding-right: 10px;
            }

            & .popup {
                &.shown {
                    background-color: white;
                    border: 1px solid #FF8D00;
                    border-radius: 8px;
                    text-align: left;
                    padding: 5px;

                    & pre {
                        margin: 0;
                        white-space: pre-wrap;
                        overflow-wrap: break-word;
                        word-break: break-word;
                    }
            }
        }
        & h1{ 
                color: #f88400;
                    }

        & .paging {
            & .current-page {
                font-weight: bold;
            }
        }
    }
}
    .order-wrapper select {
		border: 2px solid #f9a64a;
		border-radius: 0.5em; 
		padding: 3px 20px 3px 15px;
		background-color: white;
		color: black;
		cursor: pointer;
		
	
		width: 100%;
		max-width: 200px;
		box-sizing: border-box;

		appearance: base-select;
    }

    ::picker(select) {
		appearance:base-select;
		border: 2px solid #f9a64a;
		border-radius: 0.5em;
	
	}
	select::picker-icon{
		align-content: center;
		transition: 150ms ease;

	}
	
	select:open::picker-icon{
		rotate: 180deg;
	}
	select ::checkmark {
		content: none;
    }

form#order-form input[name="ordersearch"] {
    border: 2px solid #f9a64a;
    border-radius: 0.5em;
    padding: 4.5px 15px;
    width: 200px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    &:focus {
        border-color: #f9a64a;
        outline: none;
    }
}

.category-view-middle,
.first-page-product-container {
    & .product-primary-title {
                font-weight: bold;
            }

            & .product-price {
                font-weight: bold;
                font-size: 1.8em;
                margin: 5px 0;
                color: #f88400;
                
                & a{
                    color: inherit;
                }
            }

            & .product-quantity{
                margin: 5px 0;
            }

            & .product-supply-timestamp{
                font-weight: bold;
                margin: 0 0 15px 0;

            }

            & #visualTrigger {
                background-color: #ffffff00;
                width: 10px;
                height: 10px;
            }
}

.techspec {
    font-size: 1rem;
}

.techspec .techspec_header {
    font-weight: bold;
    margin: 10px 0 10px 0;
}

.techspec .techspec_keyvalue {
    margin-left: 2vw;
    display: flex;
}

.techspec .techspec_keyvalue:nth-child(odd) {
    background-color: #fff8f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 4px 0;
}

.techspec .techspec_key {
    font-weight: bold;
}

.techspec .techspec_keyvalue .techspec_value {
    margin-left: 10px;
}

/* Product page visual */
.product-wrapper {
    & .product-head-compatible,
    & .product-head-advanced {
        background-color: white;
        border: 1.5px solid #e8e8e8;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        padding: 3vw;
        box-sizing: border-box;
    }

    /* Aggressive fluid base font: all em-based text inside the advanced view
       scales strongly with the viewport width (small on narrow, large on wide). */
    & .product-head-advanced {
        font-size: clamp(9px, 2px + 0.95vw, 14px);

        & .product-images img.main {
            height: clamp(150px, 150px + 2vw, 200px);
            width:auto;
            user-select: none;
            cursor: pointer;
            touch-action: pan-y;
            -webkit-user-drag: none;
        }

        & .product-images img.additional {
            width: 50px;
            height: 50px;
            flex: 0 0 50px;
            box-sizing: border-box;
            object-fit: contain;
            padding: 2px;
            background: #fff;
            user-select: none;
            cursor: pointer;
            -webkit-user-drag: none;
            touch-action: pan-y;
        }

        & .product-images .additional-images {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            gap: 4px;
            overflow: hidden;
        }
    }

    & .product-head-compatible {
        font-size: clamp(9px, 2px + 0.95vw, 14px);

        & .product-images img.main {
            height: clamp(350px, 400px, 500px);
            width:auto;
            user-select: none;
            cursor: pointer;
            touch-action: pan-y;
            -webkit-user-drag: none;
        }

        & .product-images img.additional {
            width: 50px;
            height: 50px;
            flex: 0 0 50px;
            box-sizing: border-box;
            object-fit: contain;
            padding: 2px;
            background: #fff;
            user-select: none;
            cursor: pointer;
            -webkit-user-drag: none;
            touch-action: pan-y;
        }

        & .product-images .additional-images {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            gap: 4px;
            overflow: hidden;
        }
    }

    & .product-advanced-view input.num-cart-items{
        width: 100%;
        max-width: none;
    }

    & .product-images {
        & img {
            border-radius: 8px;
            border: 1px solid #f0f0f0;
            background-color: transparent;
            object-fit: contain;
            max-height: 420px;
        }        & input.button {
            margin-top: 4px;
        }

        & input.button[value="Galerija"] {
            margin: 0 auto;
            min-width: 60px;
        }
    }

    & .product-compatible-view {
        & .product-primary-title {
            font-size: clamp(16px, 1.7vw, 26px);
            font-weight: 700;
            line-height: 1.3;
            color: #1a1a1a;
        }

        & .product-secondary-title {
            font-size: clamp(12px, 1.1vw, 17px);
            color: #555;
            line-height: 1.4;
        }

        & .product-identifications .product-identification {
            font-size: clamp(9px, 9px + 0.5vw, 15px);
            color: black;

            & .product-identification-label {
                font-weight: 600;
            }
        }

        & .product-price {
            font-size: clamp(20px, 2.5vw, 38px);
            font-weight: 700;
            color: #f88400;
        }

        & .product-installment {
            font-size: clamp(11px, 1vw, 15px);
            color: #555;
        }

        & .product-delivery-date {
            font-size: clamp(11px, 1vw, 16px);
            color: #444;
        }

        & .product-availability .availability {
            font-size: clamp(11px, 1.05vw, 16px);
            color: #333;
            background-color: #fff8f0;
            border: 1px solid #f9e0be;
            border-radius: 8px;
            padding: 10px 14px;
        }

        & .cart-add-button .add-to-cart {
            font-size: clamp(13px, 1.2vw, 18px);
            padding: 12px 28px;
            font-weight: 600;
            letter-spacing: 0.3px;
        }

        & .cart-add-button .num-cart-items {
            width: 70px;
            height: 42px;
            font-size: clamp(13px, 1.2vw, 18px);
        }

        & .product-advanced-view {
            border-top: 1px solid #f0f0f0;
            padding-top: 12px;
            font-size: clamp(11px, 1vw, 16px);
            color: #555;
        }

        & .product-bestdelivery-time {
            background-color: #fff8f0;
            border: 1px solid #f9a64a;
            border-radius: 8px;
            padding: 10px 14px;
            font-size: clamp(12px, 1vw, 16px);

            & .best-delivery-price {
                font-weight: bold;
                color: #f88400;
                font-size: clamp(13px, 1.2vw, 18px);
            }
        }
    }

    & .product-advanced-view {
        & .product-primary-title {
            font-size: clamp(16px, 1.9vw, 26px);
            font-weight: 700;
            line-height: 1.3;
            color: #1a1a1a;
        }

        & .product-secondary-title {
            font-size: clamp(12px, 1.1vw, 17px);
            color: #555;
        }

        & .product-identifications .product-identification {
            font-size: clamp(9px, 9px + 0.5vw, 15px);
            color: black;

            & .product-identification-label {
                font-weight: 600;
            }
        }

        & .price-grid {
            overflow-x: hidden;
            overflow-y: hidden;

            & .header {
                font-weight: 700;
                color: #f88400;
                padding: 6px 8px;
                border-bottom: 2px solid #f9a64a;
                white-space: nowrap;
            }

            & > div:not(.header) {
                padding: 6px 8px;
                border-bottom: 1px solid #f0f0f0;
                display: flex;
                align-items: center;
            }
        }

        & .product-simple-view {
            border-top: 1px solid #f0f0f0;
            padding-top: 12px;
            font-size: clamp(11px, 1vw, 16px);
        }
    }

    /* Brand (h4) shown below the product head */
    & > h4.display-4 {
        font-size: 0.9em;
        font-weight: 600;
        color: #888;
        margin: 0 0 4px 0;
    }

    /* Card style for unclassed divs (descriptions, images, attributes) below the product head */
    & > div:not(.product-head-compatible):not(.product-head-advanced) {
        background-color: white;
        border: 1.5px solid #e8e8e8;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        padding: 20px 24px;
        box-sizing: border-box;
        line-height: 1.7;
    }

    /* Attribute rows inside the attribute div */
        & > div:not(.product-head-compatible):not(.product-head-advanced):not(.long-description) > div[style] {
            border-bottom: 1px solid #f0f0f0;
            padding: 4px 0;
            &:nth-child(odd) {
            background-color: #fff8f0;
        }

        & span b {
            font-weight: 600;
            color: #333;
        }
    }

    /* Gallery images in unclassed divs */
& > div:not(.product-head-compatible):not(.product-head-advanced):not(.long-description) img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #fafafa;
    padding: 3px;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
    &:hover {
            border-color: #f9a64a;
        }
    }
}

/* Ensure .my-address respects responsive sizing (high specificity overrides) */
.my-account-wrapper .my-addresses .addresses .my-address,
.my-account-wrapper .my-addresses .addresses .my-address-placeholder {
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* Desktop: two-column layout for addresses */
@media screen and (min-width: 1051px) {
    .my-account-wrapper .my-addresses .addresses {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .my-account-wrapper .my-addresses .addresses .my-address,
    .my-account-wrapper .my-addresses .addresses .my-address-placeholder {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }
}

/* Prevent overflowing children from forcing width */
.my-account-wrapper .my-address *,
.my-account-wrapper .my-address-placeholder * {
    max-width: 100% !important;
    word-break: break-word !important;
}

.category-view-wrapper,
.first-page-product-container {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: clamp(4px, 0.5vw, 5px) clamp(8px, 1vw, 12px) clamp(8px, 1vw, 12px);
    box-sizing: border-box;
    /* Fluid text: product tile text scales down across desktop widths as the
       columns get narrower, instead of staying locked at full size. */
    font-size: clamp(13px, 8px + 0.5vw, 16px);

    & .category-view-top {
        
        & .total-hits {
                font-weight: bold;
                padding: 0;
            }

        & .sort {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: nowrap;
            background-color: white;
            border-radius: 12px;
            box-sizing: border-box;

            & label {
                font-weight: 600;
                margin: 0;
            }

           	select {
		    border: 2px solid #f9a64a;
		    border-radius: 0.5em; 
		    padding: 3px 20px 3px 15px;
		    background-color: white;
		    color: black;
		    cursor: pointer;
            width: auto;
            min-width: 270px;
		    box-sizing: border-box;
		    appearance: base-select;
	        }	
	
	        ::picker(select) {
		    appearance:base-select;
		    border: 2px solid #f9a64a;
		    border-radius: 0.5em;
	
	}
	        select::picker-icon{
		    align-content: center;
		    transition: 150ms ease;

	}
	
	        select:open::picker-icon{
		    rotate: 180deg;
	}
	        select ::checkmark {
		    content: none;
            }
        }
    }
}
/* Login form mobile responsiveness */
@media screen and (max-width: 1050px) {
    .categories-popup .categories .category {
        font-size: clamp(14px, 1.8vw + 8px, 18px);
    }

    .categories-popup .categories .category .text,
    .categories-popup .categories .category .category-name {
        font-size: clamp(14px, 1.8vw + 8px, 18px);
        line-height: 1.3;
    }

    .login-wrapper {
        width: 100%;
        padding: 5px 12px;
        box-sizing: border-box;

        & .login-form {
            width: 100%;
            align-items: stretch;

            & table {
                width: 100%;
            }

            & tr {
                display: flex;
                flex-direction: column;
                width: 100%;
            }

            & td {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
            }

            & input,
            & select,
            & textarea {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
            }

            & input.button.registration {
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
            }
        }
        
    }

    .password-change-wrapper {
        width: 100%;
        padding: 5px 12px;
        box-sizing: border-box;

        & .password-change-form {
            width: 100%;
            align-items: stretch;
        }

        & table {
            width: 100%;
        }

        & tr {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        & td {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }

        & td input,
        & td select,
        & td textarea,
        & .password-change-form input,
        & .password-change-form select,
        & .password-change-form textarea {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
    }
    
    /* Small screens: stack addresses (reinforce) */
    .my-account-wrapper .my-addresses .addresses {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .my-account-wrapper .my-addresses .addresses .my-address,
    .my-account-wrapper .my-addresses .addresses .my-address-placeholder {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .product-view-tile .num-cart-items {
        display: none;
    }

    .product-view-tile form {
        width: 100%;
    }

    .product-view-tile .add-to-cart {
        width: 100%;
        flex: 1 1 100%;
        font-size: clamp(12px, 2.5vw, 16px);
    }

    /* Responsive checkout/cart action buttons on smaller screens */
    .cart-view button,
    .cart-view input[type="button"],
    .cart-view input[type="submit"],
    .cart-view input[type="reset"] {
        font-size: clamp(12px, 1.9vw, 14px);
        line-height: 1.2;
        padding: 0.48em 0.9em;
        min-height: 2.25em;
        width: auto;
        min-width: clamp(112px, 33vw, 172px);
        max-width: 100%;
    }

    /* Responsive bottom context bar uses the same background color as the buttons */
    .bottom-ctx {
        background-color: #f9a64a;
    }

    /* Narrow order view: same border/radius/header styling as the wide table */
    .order-wrapper .orders-narrow .my-order {
        border: 2px solid #f9a64a;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 16px;
        position: relative;
    }

    .order-wrapper .orders-narrow .my-order .my-order-header {
        background-color: #f9a64a;
        color: white;
        font-weight: bold;
        padding: clamp(4px, 1vw, 8px) clamp(6px, 1.5vw, 12px);
        line-height: 1.3;
    }

    .order-wrapper .orders-narrow .my-order .my-order-items {
        padding: 4px 0;
    }

    .order-wrapper .orders-narrow .my-order .my-order-item {
        border-bottom: 1px solid #f9a64a;
        padding: clamp(4px, 1vw, 8px) clamp(6px, 1.5vw, 12px);
    }

    .order-wrapper .orders-narrow .my-order .my-order-item .incoming-date {
        font-weight: bold;
        font-size: 1.1em;
    }

    .order-wrapper .orders-narrow .my-order .my-order-item .my-order-details {
        align-items: center;
        gap: 8px;
    }

    .order-wrapper .orders-narrow .my-order .my-order-item .my-order-details .rows .row {
        align-items: center;
    }

    .order-wrapper .orders-narrow .my-order .my-order-item .my-order-details .rows .row:nth-child(2) > div:first-child {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 1 1 auto;
        gap: 6px;
        white-space: nowrap;
    }

    .order-wrapper .orders-narrow .my-order .my-order-item .my-order-details .rows .row:nth-child(2) > .separator {
        display: none;
    }

    .order-wrapper .orders-narrow .my-order .my-order-item .my-order-details .rows .row:nth-child(2) > div:last-child {
        margin-left: 8px;
    }

    .order-wrapper .orders-narrow .my-order .my-order-item:last-child {
        border-bottom: none;
    }

    .order-wrapper .orders-narrow .my-order .popup.shown {
        position: absolute;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        box-sizing: border-box;
        background-color: white;
        border: 1px solid #FF8D00;
        border-radius: 8px;
        text-align: left;
        padding: 5px;
    }

    .order-wrapper .orders-narrow .my-order .popup.shown pre {
        margin: 0;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .price-rows {
        background-color: #f9a64a;
        color: white;
        font-weight: bold;
        padding: clamp(4px, 1vw, 8px) clamp(6px, 1.5vw, 12px);
        line-height: 1.3;
    }

    span.value {
        font-weight: bold;
    }
}

.product-wrapper .long-description > table.tbl:first-of-type {
    display: contents !important;
}

    .product-wrapper .long-description > table.tbl:first-of-type > tbody {
        display: block !important;
        width: 100% !important;
    }

        .product-wrapper .long-description > table.tbl:first-of-type > tbody > tr {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            width: 100% !important;
            box-sizing: border-box;
        }

            .product-wrapper .long-description > table.tbl:first-of-type > tbody > tr > td {
                display: block !important;
                width: auto !important;
                min-width: 0;
                padding: 24px !important;
                box-sizing: border-box;
                overflow-wrap: anywhere;
            }

                .product-wrapper .long-description > table.tbl:first-of-type > tbody > tr > td[colspan] {
                    grid-column: 1 / -1;
                }

            .product-wrapper .long-description > table.tbl:first-of-type > tbody > tr:first-child > td {
                padding: 0 !important;
            }

    .product-wrapper .long-description > table.tbl:first-of-type img {
        display: block;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto;
    }

@media (max-width: 700px) {
    .product-wrapper .long-description > table.tbl:first-of-type > tbody > tr {
        grid-template-columns: minmax(0, 1fr);
    }

        .product-wrapper .long-description > table.tbl:first-of-type > tbody > tr > td {
            padding: 16px !important;
        }

        .product-wrapper .long-description > table.tbl:first-of-type > tbody > tr:first-child > td {
            padding: 0 !important;
        }
}