:root {
    /* Define global font variables */
    --font-body: "Neuzeit S", sans-serif;
    /* Body font */
    --font-size-heading-4-base: clamp(1.4123175rem, 1.2275129419889503rem + 0.7884994475138121vw, 1.8583125rem);
    /* Responsive heading size */
    --font-heading: "ITC Stepp", serif;
    /* Heading font */
    --font-size-body-100: clamp(1.009375rem, 0.9873618784530387rem + 0.09392265193370165vw, 1.0625rem);
    /* Responsive body size */
}

/* Style for the modal */
.scarce-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Fixed position to cover the entire screen */
    z-index: 1000;
    /* Sit on top of other elements */
    left: 0;
    /* Align to the left */
    top: 0;
    /* Align to the top */
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black background with opacity */
}

/* Modal Content */
.scarce-modal-content {
    margin: auto;
    /* Center the content */
    display: flex;
    /* Use flexbox layout */
    height: 100vh;
    /* Full viewport height */
}

.scarce-modal-content-inner {
    background-color: white;
    /* White background for the modal */
    padding: 20px;
    /* Padding around content */
    border: 1px solid #888;
    /* Border around modal */
    max-width: 600px;
    /* Max width for the modal */
    text-align: center;
    /* Center text */
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Shadow effect */
    margin: auto;
    /* Center the modal */
}

/* Button styles */
.scarce-button {
    padding: 10px;
    /* Padding for buttons */
    border-radius: 5px;
    /* Rounded corners */
    border: 0;
    /* No border */
    color: white;
    /* Text color */
    font-size: 15px;
    /* Font size */
    cursor: pointer;
    /* Pointer cursor on hover */
    font-family: var(--font-body);
    /* Body font */
}

/* Decline button style */
.scarce-button.decline-button {
    background-color: #DD4B44;
    /* Red background */
    min-height: 40px;
    /* Minimum height */
    min-width: 70px;
    /* Minimum width */
}

/* Loading style for decline button */
.scarce-button.decline-button .scarce-loading {
    margin: auto;
    /* Center loading spinner */
}

/* Bold styles for counter offer elements */
#counter-offer-price,
#counter-offer-product {
    font-weight: bold;
    /* Bold text */
}

/* Accept button style */
.scarce-button.accept-button {
    background-color: #61A946;
    /* Green background */
    min-height: 40px;
    /* Minimum height */
    min-width: 70px;
    /* Minimum width */
}

/* Loading style for accept button */
.scarce-button.accept-button .scarce-loading {
    margin: auto;
    /* Center loading spinner */
}

/* Hide elements in the bid modal */
.scarce-bid-modal .hidden {
    display: none;
    /* Hide elements */
}

/* Close button styles */
.scarce-close-button {
    color: #aaa;
    /* Light gray color */
    float: right;
    /* Float to the right */
    font-size: 28px;
    /* Font size */
    font-weight: bold;
    /* Bold text */
}

/* Close button hover/focus effects */
.scarce-close-button:hover,
.scarce-close-button:focus {
    color: #000;
    /* Change color on hover/focus */
    text-decoration: none;
    /* Remove underline */
    cursor: pointer;
    /* Pointer cursor on hover */
}

/* Payment message styles */
.scarce-bid-modal #payment-message {
    color: red;
    /* Red color for errors */
    font-size: 16px;
    /* Font size */
    line-height: 20px;
    /* Line height */
    padding-top: 12px;
    /* Padding above message */
    text-align: center;
    /* Center text */
}

/* Margin for payment element */
.scarce-bid-modal #payment-element {
    margin-bottom: 24px;
    /* Margin below payment element */
}

/* Padding for payment element and shipping address */
#payment-element,
#shipping-address {
    padding: 0px 5px;
    /* Padding */
}

/* Spinner styles for loading state */
.scarce-bid-modal .spinner,
.scarce-bid-modal .spinner:before,
.scarce-bid-modal .spinner:after {
    border-radius: 50%;
    /* Circular shape */
}

/* Spinner main styles */
.scarce-bid-modal .spinner {
    color: #ffffff;
    /* White color */
    font-size: 22px;
    /* Font size */
    text-indent: -99999px;
    /* Hide text */
    margin: 0px auto;
    /* Center the spinner */
    position: relative;
    /* Relative positioning */
    width: 30px;
    /* Spinner width */
    height: 30px;
    /* Spinner height */
    box-shadow: inset 0 0 0 2px;
    /* Inner shadow */
    transform: translateZ(0);
    /* Create a new stacking context */
}

/* Spinner before and after pseudo-elements styles */
.scarce-bid-modal .spinner:before,
.scarce-bid-modal .spinner:after {
    position: absolute;
    /* Absolute positioning */
    content: "";
    /* Empty content */
}

/* Spinner before styles */
.scarce-bid-modal .spinner:before {
    width: 10.4px;
    /* Width */
    height: 20.4px;
    /* Height */
    background: #5469d4;
    /* Blue background */
    border-radius: 20.4px 0 0 20.4px;
    /* Rounded corners */
    top: -0.2px;
    /* Positioning */
    left: -0.2px;
    /* Positioning */
    transform-origin: 10.4px 10.2px;
    /* Rotation origin */
    animation: loading 2s infinite ease 1.5s;
    /* Animation */
}

/* Spinner after styles */
.scarce-bid-modal .spinner:after {
    width: 10.4px;
    /* Width */
    height: 10.2px;
    /* Height */
    background: #5469d4;
    /* Blue background */
    border-radius: 0 10.2px 10.2px 0;
    /* Rounded corners */
    top: -0.1px;
    /* Positioning */
    left: 10.2px;
    /* Positioning */
    transform-origin: 0px 10.2px;
    /* Rotation origin */
    animation: loading 2s infinite ease;
    /* Animation */
}

/* Heading styles */
#scarce-bid-modal h3 {
    font-weight: bold;
    /* Bold text */
}

/* Make-off heading size */
.h3-make-off {
    font-size: var(--font-size-heading-4-base) !important;
    /* Use the heading font size variable */
}

/* Payment title styles */
#scarce-bid-modal .payment-title {
    margin-top: 15px !important;
    /* Margin above payment title */
}

/* Loading keyframes for spinner animation */
@keyframes loading {
    0% {
        transform: rotate(0deg);
        /* Start rotation */
    }

    100% {
        transform: rotate(360deg);
        /* End rotation */
    }
}

/* Button styles for submit modal */
#scarce-bid-submit-modal-btn {
    margin-bottom: 10px;
    /* Margin below button */
}

/* Hidden class to enforce display none */
.hidden {
    display: none !important;
    /* Force display none */
}

/* Styles for open modal button */
#scarce-bid-open-modal-btn {
    padding: 5px;
    /* Padding */
    cursor: pointer;
    /* Pointer cursor */
    min-height: 35px;
    /* Minimum height */
    height: 37px;
    /* Height */
    background-color: rgb(0, 0, 0);
    /* Black background */
    color: rgb(255, 255, 255);
    /* White text */
    width: 100%;
    /* Full width */
    font-size: 14px;
    /* Font size */
    font-weight: 400;
    /* Normal weight */
    line-height: 1.5;
    /* Line height */
    text-transform: uppercase;
    /* Uppercase text */
    text-align: center;
    /* Center text */
    font-family: var(--font-body);
    /* Use body font */
}

/* Disabled state for open modal button */
#scarce-bid-open-modal-btn:disabled {
    cursor: not-allowed;
    /* Not-allowed cursor */
    opacity: .5;
    /* Reduced opacity */
}


/* Modal container for the bid section */
.scarce-bid-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Fixed positioning to cover the viewport */
    z-index: 999;
    /* Positioned above other elements */
    left: 0;
    /* Aligns to the left of the viewport */
    top: 0;
    /* Aligns to the top of the viewport */
    width: 100%;
    /* Full width of the viewport */
    height: 100%;
    /* Full height of the viewport */
    overflow-y: auto;
    /* Enables vertical scrolling if content overflows */
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black background */
}

/* Content area of the bid modal */
.scarce-bid-modal-content {
    background-color: #fefefe;
    /* Light background color for the content */
    margin: auto;
    /* Center the content horizontally */
    position: relative;
    /* Positioning context for absolutely positioned children */
    width: 90%;
    /* Responsive width */
    max-width: 650px;
    /* Maximum width of the modal */
    border-radius: 10px;
    /* Rounded corners */
}

/* Header style for tabs in the bid modal */
.scarce-plugin-tab h3 {
    font-style: normal;
    /* Normal font style */
    font-weight: 700;
    /* Bold font weight */
    letter-spacing: 0.0em;
    /* No extra spacing between letters */
    color: rgb(18, 18, 18);
    /* Dark text color */
    line-height: 1.1;
    /* Line height for readability */
    word-break: break-word;
    /* Prevents overflow by breaking long words */
    margin-block-start: 20px;
    /* Space above the header */
    margin-block-end: 10px;
    /* Space below the header */
    font-family: var(--font-heading);
    /* Custom font for headings */
    font-size: 15px;
    /* Font size for the header */
    margin: 20px 0px 10px 0px;
    /* Overall margin for the header */
}

/* Specific header styling for a certain tab content */
.tab-content-2 h3 {
    margin: 0px 0px 15px 5px !important;
    /* Overrides margin with specific values */
}

/* Header style for the main title in the plugin tab */
.scarce-plugin-tab h2 {
    font-weight: 400;
    /* Regular font weight */
    letter-spacing: 0.0em;
    /* No extra spacing between letters */
    color: rgb(18, 18, 18);
    /* Dark text color */
    line-height: 1.0;
    /* Single line height */
    word-break: break-word;
    /* Prevents overflow by breaking long words */
    margin-block-start: 20px;
    /* Space above the header */
    margin-block-end: 10px;
    /* Space below the header */
    font-family: var(--font-body);
    /* Custom font for body text */
    margin: 20px 0px 10px 0px;
    /* Overall margin for the header */
}

/* Close button styling for the bid modal */
.scarce-bid-close {
    position: absolute;
    /* Positioned relative to the closest positioned ancestor */
    top: 5px;
    /* Distance from the top */
    right: 20px;
    /* Distance from the right */
    font-size: 28px;
    /* Font size for the close button */
    font-weight: bold;
    /* Bold font weight */
    cursor: pointer;
    /* Changes cursor to pointer on hover */
    color: #000;
    /* Black color for the close button */
}

/* Title style for the bid section */
.scarce-bid-title {
    text-align: left;
    /* Left-aligns the title */
    margin-top: 0;
    /* No margin at the top */
    margin-bottom: 10px;
    /* Space below the title */
    font-weight: 700;
    /* Bold font weight */
}

/* Body section of the bid modal with a flex layout */
.scarce-bid-modal-body {
    display: flex;
    /* Flexbox layout */
    flex-direction: row;
    /* Horizontal arrangement of children */
    overflow: auto;
    /* Allows scrolling if content exceeds container */
    background-color: white;
    /* White background for the body */
    flex-wrap: wrap;
    /* Allows wrapping of flex items */
    gap: 10px;
    /* Space between flex items */
}

/* Section styling for the bid form */
.scarce-bid-form-section {
    flex: 1;
    /* Flex-grow to fill available space */
    padding-right: 0px;
    /* No padding on the right */
}

/* Section styling for the product information */
.scarce-bid-product-section {
    flex: 1;
    /* Flex-grow to fill available space */
    text-align: center;
    /* Center-aligns text */
    margin-top: 0px;
    /* No margin at the top */
}

/* Responsive layout adjustments for modal body sections */
.scarce-bid-modal-body>.scarce-bid-form-section,
.scarce-bid-modal-body>.scarce-bid-product-section {
    flex: 1 1 49%;
    /* Flexible width with a base of 49% */
    box-sizing: border-box;
    /* Includes padding and border in element's total width and height */
}

/* Media query for small screen devices */
@media (max-width: 550px) {

    /* Adjusts the flex items to full width on smaller screens */
    .scarce-bid-modal-body>.scarce-bid-form-section,
    .scarce-bid-modal-body>.scarce-bid-product-section {
        flex: 1 1 100%;
        /* Full width for each section */
    }

    .scarce-bid-product-section {
        flex: 1;
        /* Flex-grow to fill available space */
        text-align: center;
        /* Center-aligns text */
        margin-top: 0px;
        /* No margin at the top */
    }
}

/* Grouping styles for form elements */
.scarce-bid-form-group,
.scarce-login-form-group {
    margin-bottom: 15px;
    /* Space below each group */
    padding: 0px 0px;
    /* No padding */
}

/* Label styling for form groups */
.scarce-bid-form-group label,
.scarce-login-form-group label {
    font-size: 13px;
    /* Font size for labels */
    font-weight: 600;
    /* Semi-bold font weight */
    display: block;
    /* Display as a block element */
    margin-bottom: 5px;
    /* Space below each label */
    letter-spacing: 0.0em;
    /* No extra spacing between letters */
    line-height: 1.3;
    /* Line height for readability */
    color: black;
    /* Black color for the labels */
    font-family: '"Neuzeit S", sans-serif';
    /* Custom font for labels */
}

/* Left-aligned labels for login form */
.scarce-login-form-group label {
    text-align: left;
    /* Left-aligns the label text */
}

/* Input styling for form groups */
.scarce-bid-form-group input,
.scarce-login-form-group input,
#card-element {
    width: 100%;
    /* Full width inputs */
    box-sizing: border-box;
    /* Includes padding and border in element's total width and height */
    display: block;
    /* Block display for inputs */
    padding: 10px;
    /* Padding inside the inputs */
    margin: 0;
    /* No margin */
    border: 1px solid #ccc;
    /* Light gray border */
    border-radius: 0px;
    /* No rounded corners */
    resize: vertical;
    /* Allows vertical resizing */
    font-family: inherit;
    /* Inherit font from parent */
    font-size: 13px;
    /* Font size for inputs */
    background-color: inherit;
    /* Inherit background color from parent */
}

/* Focus styling for inputs to remove outline */
.scarce-bid-form-group input:focus-visible,
.scarce-login-form-group input:focus-visible,
#card-element:focus-visible {
    outline: 0rem !important;
    /* No outline */
    outline-offset: 0rem !important;
    /* No offset */
    box-shadow: unset !important;
    /* No shadow */
}

/* Disabled input styling */
.scarce-bid-form-group input:disabled {
    background-color: #F0F0F0 !important;
    /* Light gray background for disabled inputs */
    color: #2f2f2f !important;
    /* Dark gray text for disabled inputs */
}

/* Form margin adjustments for the login modal */
#scarce-login-modal form {
    margin-top: 15px;
    /* Space above the form */
}

/* Submit button styling */
.scarce-bid-submit-btn {
    display: block;
    /* Block display for centering */
    margin: 0 auto;
    /* Center the button horizontally */
    padding: 10px 20px;
    /* Padding inside the button */
    background-color: #4CAF50;
    /* Green background color */
    color: white;
    /* White text color */
    border: none;
    /* No border */
    cursor: pointer;
    /* Pointer cursor on hover */
    font-size: 16px;
    /* Font size for the button */
}

/* Hover effect for submit button */
.scarce-bid-submit-btn:hover {
    background-color: #45a049;
    /* Darker green on hover */
}

/* Styling for product image */
#scarce-bid-product-image {
    max-width: 100%;
    /* Responsive image width */
    height: auto;
    /* Automatic height */
    margin-bottom: 10px;
    /* Space below the image */
}

/* Margin adjustments for product name and price */
#scarce-bid-product-name,
#scarce-bid-product-price {
    margin-bottom: 10px;
    /* Space below the product name and price */
    font-weight: 600;
    /* Semi-bold font weight */
    color: #333;
    /* Dark gray color */
}

/* Font styling for notes section */
.scarce-bid-notes {
    font-size: 12px;
    /* Font size for notes */
    line-height: 1.5;
    /* Line height for readability */
    padding: 15px;
    /* Padding inside notes */
    border: 1px solid #ccc;
    /* Light gray border */
    border-radius: 5px;
    /* Slightly rounded corners */
}


/**/
/* main styles */
/**/
.scarce-plugin-tab {
    margin: 0;
    /* Reset margin */
    padding: 0;
    /* Reset padding */
    border: 0;
    /* Remove border */
    outline: none;
    /* Remove outline */
    font-size: 0;
    /* Hide text (used for tab functionality) */
    text-align: left;
    /* Align text to the left */
    border-radius: 10px 10px 0px 0px;
    /* Rounded top corners */
}

.scarce-plugin-tab>input {
    position: absolute;
    /* Hide input visually */
    left: -9999px;
    /* Move input offscreen */
}

.scarce-plugin-tab>label {
    position: relative;
    /* Relative positioning for label */
    display: inline-block;
    /* Inline block display */
    margin: 0;
    /* Reset margin */
    padding: 0;
    /* Reset padding */
    border: 0;
    /* Remove border */
    outline: none;
    /* Remove outline */
    cursor: pointer;
    /* Change cursor to pointer */
    transition: all 0.1s;
    /* Smooth transition for all properties */
    -o-transition: all 0.1s;
    /* Vendor prefix for transition */
    -ms-transition: all 0.1s;
    /* Vendor prefix for transition */
    -moz-transition: all 0.1s;
    /* Vendor prefix for transition */
    -webkit-transition: all 0.1s;
    /* Vendor prefix for transition */
}

.scarce-plugin-tab>label>i {
    display: block;
    /* Block display for icon */
    float: left;
    /* Align icon to the left */
    margin: 8px 8px 0 -2px;
    /* Margins around the icon */
    padding: 0;
    /* Reset padding */
    border: 0;
    /* Remove border */
    outline: none;
    /* Remove outline */
    font-style: normal;
    /* Normal font style */
    font-size: 17px;
    /* Font size for the icon */
}

.scarce-plugin-tab input:checked+label {
    cursor: default;
    /* Default cursor when checked */
}

.scarce-plugin-tab>ul {
    list-style: none;
    /* Remove bullet points */
    position: relative;
    /* Relative positioning for list */
    display: block;
    /* Block display */
    overflow: hidden;
    /* Hide overflow */
    margin: 0;
    /* Reset margin */
    padding: 0;
    /* Reset padding */
    border: 0;
    /* Remove border */
    outline: none;
    /* Remove outline */
    font-size: 13px;
    /* Font size for the list */
}

.scarce-plugin-tab>ul>li {
    position: absolute;
    /* Position list items absolutely */
    width: 100%;
    /* Full width */
    overflow: auto;
    /* Allow overflow */
    padding: 0px 0px;
    /* Reset padding */
    box-sizing: border-box;
    /* Include padding in width */
    -moz-box-sizing: border-box;
    /* Vendor prefix for box-sizing */
    opacity: 0;
    /* Initially hidden */
    transition: all 0.5s;
    /* Smooth transition for all properties */
    -o-transition: all 0.5s;
    /* Vendor prefix for transition */
    -ms-transition: all 0.5s;
    /* Vendor prefix for transition */
    -moz-transition: all 0.5s;
    /* Vendor prefix for transition */
    -webkit-transition: all 0.5s;
    /* Vendor prefix for transition */
}

.scarce-plugin-tab>.tab-content-first:checked~ul .tab-content-first,
.scarce-plugin-tab>.tab-content-2:checked~ul .tab-content-2 {
    z-index: 1;
    /* Bring content to front */
    top: 0;
    /* Align content to top */
    left: 0;
    /* Align content to left */
    opacity: 1;
    /* Make visible */
    -webkit-transform: scale(1, 1);
    /* Reset scale */
    -webkit-transform: rotate(0deg);
    /* Reset rotation */
    display: flex;
    /* Use flexbox for layout */
    flex-direction: column;
    /* Stack items vertically */
    justify-content: space-between;
    /* Space items evenly */
    padding-top: 15px;
    /* Padding at the top */
}

/*----------------------------------------------------------------------------*/
/*                                 EXTENSIONS                                 */
/*----------------------------------------------------------------------------*/


.scarce-plugin-tab-height-auto>ul>li {
    position: static;
    /* Static positioning for list items */
    display: none;
    /* Initially hidden */
    height: auto !important;
    /* Auto height */
}

.scarce-plugin-tab-height-auto>.tab-content-first:checked~ul .tab-content-first,
.scarce-plugin-tab-height-auto>.tab-content-2:checked~ul .tab-content-2 {
    display: block;
    /* Display block when checked */
    padding: 0px 5px;
    /* Padding for visible content */
}

/**/
/* steps */
/**/
.scarce-plugin-tab-steps label {
    cursor: default;
    /* Default cursor for steps */
}

/**/
/* animation effects */
/**/
.scarce-plugin-tab-effect-scale>ul>li {
    -webkit-transform: scale(0.1, 0.1);
    /* Scale down for animation */
}

.scarce-plugin-tab-effect-rotate>ul>li {
    -webkit-transform: rotate(180deg);
    /* Rotate for animation */
}

.scarce-plugin-tab-effect-slide-top>ul>li {
    top: -40px;
    /* Slide up for animation */
}

.scarce-plugin-tab-effect-slide-right>ul>li {
    left: 80px;
    /* Slide right for animation */
}

.scarce-plugin-tab-effect-slide-bottom>ul>li {
    top: 40px;
    /* Slide down for animation */
}

.scarce-plugin-tab-effect-slide-left>ul>li {
    left: -80px;
    /* Slide left for animation */
}

/*----------------------------------------------------------------------------*/
/*                                   LAYOUTS                                  */
/*----------------------------------------------------------------------------*/

/**/
/* top right */
/**/
.scarce-plugin-tab-layout-top-right {
    text-align: right;
    /* Align text to the right */
}

/**/
/* top center */
/**/
.scarce-plugin-tab-layout-top-center {
    text-align: center;
    /* Center align text */
}

/**/
/* top combi */
/**/
.scarce-plugin-tab>.right {
    float: right;
    /* Float right for combinational layout */
}

/**/
/* icons positions */
/**/
.scarce-plugin-tab-icons-top label {
    text-align: center;
    /* Center align label */
}

.scarce-plugin-tab-icons-top label i {
    float: none;
    /* Remove float */
    margin: 0 auto -10px;
    /* Center icon with negative margin */
    padding-top: 17px;
    /* Padding at the top */
    font-size: 23px;
    /* Font size for icon */
    line-height: 23px;
    /* Line height for icon */
    text-align: center;
    /* Center align text */
}

.scarce-plugin-tab-icons-right label i {
    float: right;
    /* Float icon to the right */
    margin: 0 -2px 0 8px;
    /* Margin adjustments */
}

.scarce-plugin-tab-icons-bottom label {
    text-align: center;
    /* Center align label */
}

.scarce-plugin-tab-icons-bottom label i {
    float: none;
    /* Remove float */
    margin: -10px auto 0;
    /* Center icon with negative margin */
    padding-bottom: 17px;
    /* Padding at the bottom */
    font-size: 23px;
    /* Font size for icon */
    line-height: 23px;
    /* Line height for icon */
    text-align: center;
    /* Center align text */
}

.scarce-plugin-tab-icons-only label i {
    float: none;
    /* Remove float */
    margin: 0 auto;
    /* Center icon */
    font-size: 23px;
    /* Font size for icon */
}

#scarce-bid-modal .product__media img {
    object-fit: scale-down;
    /* Scale down image */
    display: block;
    /* Block display for image */
    max-width: 100%;
    /* Max width 100% */
    position: absolute;
    /* Absolute positioning for image */
    top: 0;
    /* Align image to top */
    left: 0;
    /* Align image to left */
    height: 100%;
    /* Full height */
    width: 100%;
    /* Full width */
    object-position: center center;
    /* Center the image */
    transition: opacity .4s cubic-bezier(.25, .46, .45, .94)
        /* Smooth opacity transition */
}

#scarce-bid-modal .product_title {
    word-break: break-word;
    /* Break words in title */
}

#scarce-bid-modal .product_title h2 {
    margin: 5px 0px 5px 0px;
    /* Margin adjustments for h2 */
    margin-block-start: 10px !important;
    /* Ensure margin at the start */
    margin-block-end: 10px;
    /* Margin at the end */
}

#scarce-bid-modal .productVariantTitle h4 {
    word-break: break-word;
    /* Break words in variant title */
    margin: 0px 0px 0px 0px;
    /* Reset margin */
    color: #777;
    /* Gray color for variant title */
    font-size: 14px;
    /* Font size for variant title */
    font-family: var(--font-body);
    /* Use body font */
    letter-spacing: 0.0em;
    /* No letter spacing */
}



/*----------------------------------------------------------------------------*/
/*                                   THEMES                                   */
/*----------------------------------------------------------------------------*/

/**/
/* default */
/**/
.scarce-plugin-tab>label {
    padding: 0 20px;
    /* Padding on left and right */
    background: #e5e5e5;
    /* Default background color */
    font-size: 15px;
    /* Font size */
    line-height: 33px;
    /* Line height */
    font-family: var(--font-body);
    /* Font family from variable */
    letter-spacing: 0.0em;
    /* Letter spacing */
}

.scarce-plugin-tab>label:hover {
    background: #f2f2f2;
    /* Background color on hover */
}

.scarce-plugin-tab>input:checked+label {
    background: #fff;
    /* Background color when selected */
}

.scarce-plugin-tab>ul {
    background: #fff;
    /* Background color for the unordered list */
    text-align: left;
    /* Text alignment */
}

.scarce-plugin-tab-steps>label:hover {
    background: #e5e5e5;
    /* Background color on hover for step labels */
}

/**/
/* theme 1 */
/**/

.scarce-plugin-tab-theme-1 {
    margin: 0px 40px;
    /* Margin on left and right */
}

.scarce-plugin-tab-theme-1>label {
    margin: 0 5px 5px 0;
    /* Margin on label */
    border-radius: 5px;
    /* Rounded corners */
    background: #fff;
    /* Background color for labels */
    color: #808080;
    /* Text color */
    opacity: 0.8;
    /* Opacity of the label */
}

.scarce-plugin-divider {
    border-bottom: 1px solid;
    /* Bottom border for divider */
    border-color: rgba(0, 0, 0, 0.12);
    /* Border color with transparency */
}

.scarce-plugin-tab-theme-1>label:hover {
    background: #fff;
    /* Background color on hover for theme 1 */
    opacity: 1;
    /* Full opacity on hover */
}

.scarce-plugin-tab-theme-1>input:checked+label {
    margin-bottom: 0;
    /* No margin at the bottom when selected */
    padding-bottom: 5px;
    /* Padding at the bottom */
    border-bottom-right-radius: 0;
    /* No radius at bottom right */
    border-bottom-left-radius: 0;
    /* No radius at bottom left */
    color: black;
    /* Text color when selected */
    border-bottom: 2px solid;
    /* Bottom border when selected */
    opacity: 1;
    /* Full opacity when selected */
}

.scarce-plugin-tab-theme-1>ul {
    border-radius: 5px;
    /* Rounded corners for the list */
}

.scarce-plugin-tab-theme-1>.tab-content-first:checked~ul {
    border-top-left-radius: 0;
    /* No radius on top left when first tab is checked */
}

@media screen and (max-width: 767px) {
    .scarce-plugin-tab-theme-1>label {
        margin-right: 0;
        /* No right margin on mobile */
    }

    .scarce-plugin-tab-theme-1>input:checked+label {
        margin-bottom: 5px;
        /* Bottom margin when selected on mobile */
        padding-bottom: 0;
        /* No padding at the bottom when selected on mobile */
    }

    .scarce-plugin-tab-theme-1>.tab-content-first:checked~ul {
        border-top-left-radius: 5px;
        /* Radius on top left when first tab is checked on mobile */
    }
}

.scarce-plugin-button-submit {
    margin-bottom: 35px !important;
    /* Bottom margin for submit button */
}

#scarce-already-have-account {
    background-color: transparent;
    /* Transparent background */
    border: 0px;
    /* No border */
    color: black;
    /* Text color */
    margin-bottom: 20px;
    /* Bottom margin */
    text-align: center;
    /* Centered text */
    width: 100%;
    /* Full width */
    cursor: pointer;
    /* Pointer cursor on hover */
    font-family: var(--font-body);
    /* Font family from variable */
    font-size: 11px;
    /* Font size */
}

.margin-25 {
    margin-bottom: 35px !important;
    /* Bottom margin */
}

#scarce-login-error {
    color: red;
    /* Text color for login error */
    text-align: center;
    /* Centered text */
    display: none;
    /* Hidden by default */
}

#scarce-register-account {
    background-color: transparent;
    /* Transparent background */
    border: 0px;
    /* No border */
    color: blue;
    /* Text color */
    margin-bottom: 35px;
    /* Bottom margin */
    text-align: center;
    /* Centered text */
    width: 100%;
    /* Full width */
    cursor: pointer;
    /* Pointer cursor on hover */
    font-family: var(--font-body);
    /* Font family from variable */
    font-size: 14px;
    /* Font size */
}


/*----------------------------------------------------------------------------*/
/*                               CUSTOMIZATION                                */
/*----------------------------------------------------------------------------*/

/**/
/* height */
/**/
.scarce-plugin-tab>ul,
.scarce-plugin-tab>ul>li {

    max-height: 70vh;
    /* Maximum height */
}

.scarce-info-text {
    display: flex;
    /* Flex display */
    align-items: center;
    /* Center items vertically */
    gap: 10px;
    /* Space between items */
    margin-top: 10px;
    /* Top margin */
    margin-bottom: 10px;
    /* Bottom margin */
    justify-content: center;
    /* Center items horizontally */
    font-family: var(--font-body);
    /* Font family from variable */
}

.scarce-info-text>svg {
    width: 20px;
    /* Width of SVG icons */
    height: 20px;
    /* Height of SVG icons */
}

.scarce-info-text>span {
    font-size: 14px;
    /* Font size */
    font-weight: bold;
    /* Bold text */
    color: #828282;
    /* Text color */
}

.scarce-bid-product-section .product__media {
    overflow: hidden !important;
    /* Hide overflow */
    background-color: transparent;
    /* Transparent background */
    display: block;
    /* Block display */
    position: relative;
    /* Relative positioning */
}

.scarce-bid-modal button::after,
.scarce-modal button::after {
    content: "";
    /* Empty content for pseudo element */
    position: absolute;
    /* Absolute positioning */
    top: 1;
    /* Position from top */
    right: 1;
    /* Position from right */
    bottom: 1;
    /* Position from bottom */
    left: 1;
    /* Position from left */
    z-index: 1;
    /* Layering order */
    border-radius: 0px;
    /* No border radius */
    box-shadow: 0 0 0 1 rgba(255, 255, 255, 0), 0 0 0 1 rgba(18, 18, 18, 1);
    /* Shadow effect */
    transition: box-shadow 0.1s ease;
    /* Transition effect */
}

.scarce-bid-modal .button,
.scarce-modal .button {
    font-size: 14px !important;
    /* Font size for buttons */
    padding: 8px;
    /* Padding */
    cursor: pointer;
    /* Pointer cursor on hover */
    min-height: 35px;
    /* Minimum height */
    height: 37px;
    /* Fixed height */
    background-color: rgb(0, 0, 0);
    /* Black background */
    color: rgb(255, 255, 255);
    /* White text color */
    width: 100%;
    /* Full width */
    font-weight: 400;
    /* Normal font weight */
    letter-spacing: 0.0em;
    /* No letter spacing */
    line-height: 1.5;
    /* Line height */
    cursor: pointer;
    /* Pointer cursor on hover */
    z-index: auto;
    /* Default z-index */
    text-transform: uppercase;
    /* Uppercase text */
    text-align: center;
    /* Centered text */
    font-family: var(--font-body);
    /* Font family from variable */
    display: flex;
    /* Flex display */
    justify-content: center;
    /* Center items horizontally */
    align-items: center;
    /* Center items vertically */
    margin-top: 15px;
    /* Top margin */
    font-weight: bold;
    /* Bold font weight */
    letter-spacing: 0.1em;
    /* Slight letter spacing */
}

.scarce-plugin-button-submit-span {
    margin-right: 0px;
    /* No right margin */
    font-weight: bold;
    /* Bold font weight */
    letter-spacing: 0.1em;
    /* Slight letter spacing */
}

.scarce-bid-modal .button i {
    margin-left: -3px;
    /* Negative left margin for icon */
}

#scarce-bid-discount-price {
    color: green;
    /* Text color for discount price */
}

.scarce-bid-modal .button:disabled,
.scarce-modal .button:disabled {
    cursor: not-allowed;
    /* Not-allowed cursor for disabled buttons */
    opacity: .5;
    /* Reduced opacity for disabled buttons */
}

.scarce-collection-offer-btn:disabled {
    opacity: 0.5;
    /* Reduced opacity for disabled offer button */
}

.scarce-line-through {
    text-decoration: line-through;
    /* Line through text for discounts */
}


.scarce-title {
    font-style: normal;
    /* Sets the font style to normal (not italicized) */
    font-weight: 700;
    /* Sets the font weight to bold */
    letter-spacing: 0.0em;
    /* No extra spacing between letters */
    color: rgb(18, 18, 18);
    /* Sets the text color to a dark shade */
    line-height: 1.1;
    /* Sets the line height for better readability */
    word-break: break-word;
    /* Allows long words to break onto the next line */
    font-family: var(--font-heading);
    /* Uses a variable for the font family */
    font-size: var(--font-size-heading-4-base);
    /* Uses a variable for the font size */
    margin-bottom: 5px;
    /* Adds a 5px margin below the title */
}

.scarce-product-container {
    padding-top: 0px;
    /* No padding at the top */
}

.scarce-image-container {
    margin: auto;
    /* Centers the container */
    display: flex;
    /* Uses flexbox for layout */
    height: auto;
    /* Height adjusts based on content */
    width: auto;
    /* Width adjusts based on content */
}

.scarce-parent-product-container {
    display: flex;
    /* Uses flexbox for layout */
    padding: 10px;
    /* Adds 10px padding around the container */
    border: 1px solid rgba(0, 0, 0, 0.4);
    /* Sets a semi-transparent border */
    gap: 5px;
    /* Adds a gap between flex items */
}

.scarce-product-info {
    text-align: center;
    /* Centers the text */
    display: flex;
    /* Uses flexbox for layout */
    flex-direction: column;
    /* Stacks child elements vertically */
    justify-content: center;
    /* Centers items vertically */
}

.scarce-product-info h2 {
    font-size: 11px;
    /* Sets the font size for the heading */
    font-weight: bold;
    /* Makes the heading bold */
    margin-bottom: 0px;
    /* No margin below the heading */
    text-align: left;
    /* Aligns the heading to the left */
    margin-top: 0px;
    /* No margin above the heading */
}

.scarce-product-info p {
    margin: 0px 0;
    /* No margins around the paragraph */
    line-height: 1.3;
    /* Sets the line height for better readability */
    color: #000;
    /* Sets the text color to black */
    text-align: left;
    /* Aligns the text to the left */
    font-size: 11px;
    /* Sets the font size for the paragraph */
}

.scarce-price-info {
    margin-top: 15px;
    /* Adds a 15px margin above the price info */
    font-size: 14px;
    /* Sets the font size for price info */
}

.scarce-price-info p {
    margin: 0px 0;
    /* No margins around the paragraph */
    line-height: 1.3;
    /* Sets the line height for better readability */
    color: #000;
    /* Sets the text color to black */
    font-size: 11px;
    /* Sets the font size for the paragraph */
}

.scarce-product-offer {
    text-align: center;
    /* Centers the offer text */
    margin-top: 8px;
    /* Adds an 8px margin above the offer section */
}

.scarce-product-offer p {
    font-size: 11px;
    /* Sets the font size for the offer text */
    font-weight: bold;
    /* Makes the offer text bold */
    color: #000;
    /* Sets the text color to black */
    margin: 0px 0px;
    /* No margins around the offer paragraph */
}

.scarce-product-offer span {
    color: black;
    /* Sets the text color to black */
    font-weight: normal;
    /* Sets the font weight to normal */
}

/* Styles for autofilled inputs to maintain font styling */
input:-webkit-autofill::first-line {
    font-family: "Neuzeit S", sans-serif !important;
    /* Forces a specific font for autofill first line */
    font-size: 13px !important;
    /* Forces a specific font size for autofill first line */
}

/* Applies the specified font family to all autofilled inputs */
*:-webkit-autofill::first-line,
*:-webkit-autofill,
*:-webkit-autofill:hover,
*:-webkit-autofill:focus,
*:-webkit-autofill:active,
*:-webkit-autofill::first-line {
    font-family: "Neuzeit S", sans-serif !important;
    /* Forces a specific font for all autofilled inputs */
}

/* Sets image styles within the scarce image container */
.scarce-image-container img {
    max-width: 50px;
    /* Sets the maximum width of images */
    max-height: 50px;
    /* Sets the maximum height of images */
}

/* Responsive styles for different screen widths */
@media (min-width: 330px) {
    .scarce-image-container img {
        max-width: 80px;
        /* Increases max width for larger screens */
        max-height: 80px;
        /* Increases max height for larger screens */
    }
}

@media (min-width: 370px) {
    .scarce-image-container img {
        max-width: 110px;
        /* Increases max width for larger screens */
        max-height: 110px;
        /* Increases max height for larger screens */
    }
}

@media (min-width: 400px) {
    .scarce-image-container img {
        max-width: 150px;
        /* Increases max width for larger screens */
        max-height: 150px;
        /* Increases max height for larger screens */
    }
}

@media (min-width: 429px) {
    .scarce-image-container img {
        max-width: 150px;
        /* Ensures consistent max width for larger screens */
        max-height: 150px;
        /* Ensures consistent max height for larger screens */
    }
}

@media (min-width: 653px) {
    .scarce-parent-product-container {
        display: flex;
        /* Uses flexbox for layout on larger screens */
        flex-direction: column;
        /* Stacks child elements vertically */
    }

    .scarce-product-info p {
        text-align: center;
        /* Centers the paragraph text */
        font-size: 12px;
        /* Increases font size for better readability */
    }

    .scarce-product-info h2 {
        text-align: center;
        /* Centers the heading text */
        font-size: 12px;
        /* Increases font size for better readability */
    }

    .scarce-image-container img {
        max-width: 100%;
        /* Sets maximum width to 100% of the container */
        max-height: 117px;
        /* Increases max height for better display */
        object-fit: contain;
        /* Maintains aspect ratio while fitting the container */
    }

    .scarce-price-info p {
        font-size: 12px;
        /* Increases font size for price info */
    }

    .scarce-product-offer p {
        font-size: 12px;
        /* Increases font size for the offer text */
    }

    .scarce-price-info {
        margin-top: 5px;
        /* Adds a 5px margin above the price info */
    }

    .scarce-bid-product-section {
        margin-top: 22px;
        /* Adds a 22px margin above the bid product section */
    }
}