body {overflow-x:hidden;}
.btn-success {color:white!important;}
.btn-success i {color:white!important;}
.form-confirm {
	display: block;  
	//height:25px;
	//width:25px;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
}
.checkbox-container {
    display: flex;
    flex-direction: column;
}

.checkbox-item {
    display: flex;
    align-items: center;  /* Ensures vertical center alignment */
    margin-bottom: 10px;  /* Space between each checkbox option */
}

.checkbox-item label {
    display: flex;
    align-items:center;  /* Ensures the checkbox and text are aligned in the center vertically */
    width: 60%;  /* Full width to ensure proper alignment and spacing */
		padding-top:7px;
}

.checkbox-item input[type="checkbox"] {
    margin-right: 10px;  /* Space between checkbox and label text */
    flex-shrink: 0;  /* Prevents the checkbox from being squished */
    //width:20%;
    height: calc(0.70em + .75rem + 2px);
    background-color:red;
}


.essen-bestellen {background:#cc4a39;}
.flex-list-item {
    display: flex;         /* Enables flexbox */
    justify-content: space-between; /* Distributes space between the sub-divs */
    background-color:white;
    border-radius:5px;
    border:1px solid #f15944;
    padding:20px;
    margin-bottom:15px;
}
.flex-align {width:33%;}
.sidedishgroup {
    flex: 1 1 50%; /* Each column should take up 50% of the container width */    
    box-sizing: border-box; /* Ensure padding is included in the width calculation */
}
@media (max-width: 998px) {
  .is-container {padding:15px;}
}
.options-container {padding:10px;background-color:rgba(158, 157, 36, 0.15);;border-radius:5px;margin-top:25px;}
.option {background-color:#888;color:white;}
/* Add any additional styling for the options as needed */
.option {
    /* Your option styling here */
}
.floating-butyyton {
    position:absolute;right:-10px;top:-11px;
    border-radius: 50%;
    background-color: #666;
    color: #fff;
    text-align: center;
    line-height: 46px;
    font-size: 28px;
    cursor: pointer;
    padding-left:13px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	  z-index:999;
	  width:45px;
	  height:45px;
	  
}
.floating-icon {    
    border-radius: 50%;
    background-color: #f15944;
    color: #fff;
    text-align: center;
    line-height: 38px;
    font-size: 28px;
    cursor: pointer;    
	  z-index:999;
	  width:40px;
	  height:40px;
	  
}
.floating-icon:hover {
      background-color: #666 ;
    }
.floating-buttssson:hover {
      background-color: #f15944 ;
    }
.floating-cart {
      position:fixed;
      top: 450px;
      right: 20px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #007bff;
      color: #fff;
      text-align: center;
      line-height: 60px;
      font-size: 20px;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	  z-index:999;
	  width:65px;
	  height:65px;
	  padding-top:0px;
		user-select:none;
    }

    /* Add hover effect */
    .floating-cart:hover {
      background-color: #0056b3;
    }
/* CSS for the notification with a smooth fade-out effect */
.notification {
    position:fixed;	
	width:250px;
	top:78px;
    right: 20px;
    background-color: #2ecc71;
    color: #fff;
    text-align: center;
    padding: 10px;
    opacity: 1;
    transition: opacity 0.5s ease; /* Add a transition for opacity */
}

.hidden {
    display: none;
}
#cart {width:280px;}
.is-menu > ul > li > a {text-transform:uppercase;font-family: 'Hammersmith One', sans-serif;font-size:1.12em;}
.is-topbar.fixed.static.dark .is-menu li li a {text-transform:uppercase;font-size:0.90em;}

#footer a:hover {color:white;text-decoration:none;}
/* GDPR Cookie dialog */
body {
	margin-top: 70px;
}
.model-viewer {width:100%;height:600px;}
/* GDPR Cookie dialog */
.jobs ul {
	list-style-position: outside;
	padding-left: 18px;
	margin-bottom: 25px;
	margin-top: 25px;
	padding-top: 0;
	padding-bottom: 0;
}

.cookie {font-size:48px;float:left;margin-right:10px;}
.gdprcookie-intro {display:table-cell;float:left;}
.gdprcookie-buttons {display:table-cell;}
.gdprcookie-types {display:block;width:400px;clear:both;padding-top:20px;padding-bottom:20px;}

.gdprcookie {
    z-index:9999;
    color:white;
    font-size: .85em;
    line-height: 1.5em;
    font-family: 'Roboto', sans-serif;
    padding: 1rem;
		opacity:0.95;
    background: #8c8b8b;
    
}

@media (min-width: 680px) {
.gdprcookie-types {padding-left:10px;}
.gdprcookie {    
    position: fixed;    
    width:470px;
    height: 600px;
    height: auto;
    bottom: 15px;
    left:15px;
    padding:25px;
    
}
}
@media (max-width: 681px) {
    .gdprcookie-types {display:block;width:340px;max-width:100%;clear:both;text-align:center;align:center;margin:0px auto!important;padding-left:5px;}
    .gdprcookie-intro {display:block;width:100%;}
.gdprcookie-buttons {display:block;width:100%;}
	.gdprcookie {    
    position: fixed;    
    width: 100%!important;
    height: 600px;
    height: auto;
    bottom: 0px;
    left:0px;
    padding:15px;
    
}
}
.gdprcookie h1,
.gdprcookie h2 {
    font-size: 1.2em;
    margin-bottom: .5rem;
}
.gdprcookie h2 {
    font-size: 1.2em;
}
.gdprcookie a {
    color: inherit;
}


/* GDPR Cookie buttons */

.gdprcookie-buttons {
    text-align: center;
}
.gdprcookie-buttons button {
    /*width:220px;*/
    
    color: black;
    font-family: inherit;
    font-size: 1em;
    padding: .210rem;    
    
    margin: 0 .5rem;
    background: white;
    cursor: pointer;
    opacity:0.75;
    
    margin-bottom: 20px!important;
}
.background-red {
    background-color: #4a5c10!important;
    color:white!important;
}
.gdprcookie-buttons button:hover {    
    opacity:1;  
}
.gdprcookie-buttons button:disabled {
    opacity:0.5;
}


/* GDPR Cookie types */
.gdprcookie-types ul {
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0 0 1rem;
}
.gdprcookie-types li {
    display: block;
    list-style: none;
    float: left;
    width: 50%;
    padding: 10px;
    padding-left: 0px;
    margin: 0;
}
.gdprcookie-types input[type=checkbox] {
    margin-right: .25rem!important;
}

/* Scoped checkbox styles to only apply to GDPR cookie elements */
.gdprcookie-types [type="checkbox"] {
    position: relative;
    left: 30px;
    top: 0px;
    z-index: 0;
    -webkit-appearance: none;
}
.gdprcookie-types [type="checkbox"] + label {
    position: relative;
    display: block;
    cursor: pointer;
    line-height: 1.3;
    padding-left: 70px;
    position: relative;
    margin-top: -30px;
}
.gdprcookie-types [type="checkbox"] + label:before {
    width: 40px;
    height: 20px;
    border-radius: 30px;
    background-color: #EEE;
    content: "";
    margin-right: 15px;
    transition: background-color 0.5s linear;
    z-index: 5;
    position: absolute;
    left: 0px;
}
.gdprcookie-types [type="checkbox"] + label:after {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: #fff;
    content: "";
    transition: margin 0.1s linear;
    box-shadow: 0px 0px 5px #aaa;
    position: absolute;
    left: -2px;
    top: 0px;
    z-index: 10;
}
.gdprcookie-types [type="checkbox"]:checked + label:before {
    background-color: #4a5c10;
}
.gdprcookie-types [type="checkbox"]:checked + label:after {
    margin: 0 0 0 30px;
}



@media (min-width: 1921px) {
  .is-container.size-18.v2 p, .is-container.size-18.v2 td, .is-container.size-18.v2 li, .is-container.size-18.v2 label {
    font-size:inherit;
  }
}
.form-check-label {font-size:11.5px;}





	.cart-icon-container {
    position: fixed;
    top: 20px; /* Or your desired position */
    right: 20px; /* Or your desired position */
    z-index: 1035; /* Standard z-index for it */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Add transition */
}

.cart-icon-container.hidden-by-sidebar {
    opacity: 0;
    pointer-events: none; /* Prevent clicks when invisible */
    transform: scale(0.8); /* Optional: slight scale down effect */
}
	#toggleCartSidebar {
	position: fixed;
  top: 390px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #007bff;
  color: #fff;
  text-align: center;
  
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 899;
  width: 65px;
  height: 65px;
  padding-top: 0px;
  user-select: none;
	}
/* Basic Cart Sidebar Styles */
.cart-icon-container {
    position: fixed; /* Or relative to your header */
    top: 20px;
    right: 20px;
    z-index: 1050; /* Above most content, below modal */
}
#cartBadge {
    font-size: 0.8em;
    padding: .2em .5em;
    position: absolute;
    top: -1px;
		background:red;
		color:white;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: -380px; /* Initially off-screen, width + some buffer */
    width: 360px;
    height: 100%;
    background-color: #f8f9fa;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    z-index: 1040; /* High, but below modals if any */
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #dee2e6;
}
.cart-sidebar.open {
    right: 0;
}
.cart-sidebar-header {
    padding: 15px;
    background-color: #e9ecef;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cart-sidebar-header h3 {
    margin: 0;
    font-size: 1.25rem;
}
.close-sidebar-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    padding: 0 .5rem;
    cursor: pointer;
}
.cart-sidebar-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
}
.cart-items-list .empty-cart-message {
    text-align: center;
    color: #6c757d;
    margin-top: 20px;
}
.cart-sidebar-footer {
    padding: 15px;
    border-top: 1px solid #dee2e6;
    background-color: #fff;
}
.cart-summary p { margin-bottom: 0.5rem; }
.cart-summary span { float: right; font-weight: bold; }
.checkout-btn.disabled {
    pointer-events: none;
    opacity: 0.65;
}

.sidebar-cart-item {
    display: flex;
    align-items: flex-start; /* Align items to the top for better text flow if names wrap */
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.sidebar-cart-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.sidebar-item-image {
    width: 60px;  /* SET A FIXED WIDTH for the container */
    height: 60px; /* SET A FIXED HEIGHT for the container */
    margin-right: 10px;
    flex-shrink: 0; /* Prevent the image container from shrinking if text is long */
    overflow: hidden; /* Optional: if you want to strictly clip, though object-fit handles it */
    border-radius: 4px; /* Optional: for rounded corners */
    background-color: #f0f0f0; /* Optional: placeholder background if image is loading slow */
}

.sidebar-item-image img {
    width: 100%;         /* Make image fill its container's width */
    height: 100%;        /* Make image fill its container's height */
    object-fit: cover;   /* THIS IS THE KEY PROPERTY */
                         /* 'cover': Scales the image to maintain its aspect ratio while filling the element’s entire content box.
                                    If the image's aspect ratio does not match the aspect ratio of its box, then the image will be clipped to fit. */
                         /* Alternatives:
                            'contain': Scales the image to maintain its aspect ratio while fitting within the element’s content box.
                                       The entire object will be made to fill the box, while preserving its aspect ratio,
                                       so the object will be "letterboxed" if its aspect ratio does not match the aspect ratio of the box.
                            'scale-down': Compares the difference between none and contain, and picks the smaller concrete object size.
                         */
    display: block;      /* Removes any extra space below the image if it's inline */
}

.sidebar-item-details {
    flex-grow: 1;
    /* min-width: 0; */ /* Can sometimes help with flex item overflow if text is too long */
}
.sidebar-item-name {
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 3px;
}
.sidebar-item-options {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px;
}
.sidebar-item-price, .sidebar-item-qty-total {
    font-size: 0.9rem;
}
.sidebar-item-qty-controls {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}
.sidebar-item-qty-controls button {
    background: #ddd;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align:center;
}
.sidebar-item-qty-controls input {
    width: 40px;
    text-align: center;
    border: 1px solid #ccc;
    margin: 0 5px;
    border-radius: 4px;
    height: 25px;
}
.sidebar-item-remove {
    margin-left: auto; /* Pushes button to the right */
    align-self: flex-start; /* Align to top of its flex container */
}
.sidebar-item-remove button {
    color: #dc3545;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding:0;
}

.cart-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1030; /* Below sidebar, above content */
}
.cart-sidebar-overlay.open {
    display: block;
}

/* Notification Styles (from your JS) */
.notification {
    position: fixed;
    top: 20px; /* Initial top, JS will adjust */
    left: 20px;
    background-color: #678521; /* Success green */
    color: white;
    padding: 15px 25px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 2000; /* Above everything */
    opacity: 1;
    transition: opacity 0.5s ease-in-out, top 0.3s ease-in-out;
    font-size: 1rem;
}
.sidebar-item-qty-controls {
    display: flex;         /* Use flexbox for alignment */
    align-items: center;   /* Vertically center items */
    margin-top: 8px;       /* Add some space above the controls */
}

.sidebar-item-qty-controls .btn {
    /* Adjust padding for small buttons if needed */
    /* padding: 0.15rem 0.4rem; */
    font-size: 1rem;        /* Slightly larger font for +/- */
    line-height: 1;         /* Ensure symbol is centered */
    width: 28px;            /* Fixed width */
    height: 28px;           /* Fixed height */
    display: inline-flex;   /* Use flexbox for centering content within button */
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem; /* Consistent rounded corners */
}

.sidebar-item-qty-controls input.sidebar-item-qty {
    text-align: center;
    border-left: none;      /* Remove left border next to '-' button */
    border-right: none;     /* Remove right border next to '+' button */
    border-radius: 0;       /* Remove rounding in the middle */
    height: 28px;           /* Match button height */
    padding-left: 0.2rem;   /* Adjust padding */
    padding-right: 0.2rem;
    max-width: 45px;        /* Adjust width as needed */
    /* Remove spinner arrows on number input */
    -moz-appearance: textfield;
    appearance: textfield;
}
.sidebar-item-qty-controls input.sidebar-item-qty::-webkit-outer-spin-button,
.sidebar-item-qty-controls input.sidebar-item-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Specific rounding for outer buttons */
.sidebar-item-qty-controls .sidebar-qty-decrease {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.sidebar-item-qty-controls .sidebar-qty-increase {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Optional: Slightly visually group them on hover */
.sidebar-item-qty-controls:hover .btn {
   /* background-color: #e9ecef; /* Example subtle hover */ */
}
.sidebar-item-qty-controls:hover input.sidebar-item-qty {
   /* border-color: #ced4da; /* Match Bootstrap's input border */ */
}
.cart-sidebar-footer {
    padding: 15px;
    border-top: 1px solid #dee2e6;
    background-color: #fff;
}
.cart-icon-container {
    /* No fixed position here if button inside is fixed */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    /* Ensure it's on top if it's not the button doing the z-indexing */
    position: relative; /* Or fixed, depending on your exact needs for this container */
    z-index: 1046; /* Just above sidebar, adjust as needed */
}

.cart-icon-container.hidden-by-sidebar {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

/* Your actual floating button */
#toggleCartSidebar {
    position: fixed;
    top: 390px;
    right: 20px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: #007bff; /* Or your theme color */
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1045; /* High, above sidebar and overlay */
    user-select: none;
}

#toggleCartSidebar svg {
    width: 30px; /* Adjust for your SVG */
    height: 30px; /* Adjust for your SVG */
}

#cartBadge {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 20px;
    height: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 20px;
    padding: 0;
    text-align: center;
    border-radius: 50%;
    background: red;
    color: white;
    border: 1px solid white;
}

/* --- General Cart Sidebar Structure --- */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -380px; /* Adjust width if your sidebar is wider/narrower */
    width: 360px;  /* Default width */
    height: 100%;
    background-color: #f8f9fa; /* Light background */
    box-shadow: -3px 0 15px rgba(0,0,0,0.15); /* Softer shadow */
    z-index: 1040; /* Below floating button, above overlay */
    transition: right 0.35s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smoother transition */
    display: flex;
    flex-direction: column;
    border-left: 1px solid #dee2e6; /* Light border */
}
.cart-sidebar.open {
    right: 0;
}

.cart-sidebar-header {
    padding: 0.75rem 1rem; /* Slightly adjusted padding */
    background-color: #e9ecef;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* Prevent header from shrinking */
}
.cart-sidebar-header h3 {
    margin: 0;
    font-size: 1.2rem; /* Adjusted size */
    font-weight: 500;
}
.close-sidebar-btn {
    background: none;
    border: none;
    font-size: 1.75rem; /* Adjusted size */
    line-height: 1;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem; /* Negative margin to increase clickable area */
    cursor: pointer;
    color: #6c757d;
}
.close-sidebar-btn:hover {
    color: #343a40;
}

.cart-sidebar-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem; /* Consistent padding */
}
.cart-items-list .empty-cart-message {
    text-align: center;
    color: #6c757d;
    padding: 2rem 1rem; /* More padding for empty message */
}

/* --- Sidebar Cart Item (as generated by shop.js) --- */
.sidebar-cart-item {
    /* These are added by Bootstrap via JS: d-flex mb-3 pb-3 border-bottom */
}
.sidebar-cart-item:last-child {
    /* border-bottom: none; margin-bottom: 0; padding-bottom: 0; */ /* Handled by Bootstrap structure */
}
.sidebar-item-image img {
    /* Inline styles from JS: width: 60px; height: 60px; object-fit: cover; border-radius: 4px; */
    /* Consider moving these to CSS if all sidebar images are same size */
}
.sidebar-item-name {
    /* font-weight-bold mb-1 from Bootstrap */
    font-size: 0.9rem; /* Consistent size */
}
.sidebar-item-options,
.sidebar-item-deposit-info {
    /* small text-muted mb-1 from Bootstrap */
    font-size: 0.8rem;
    line-height: 1.3;
}
.sidebar-item-price {
    /* small mb-1 from Bootstrap */
    font-size: 0.85rem;
    line-height: 1.4;
}
.sidebar-item-qty-total {
    /* font-weight-bold mb-2 from Bootstrap */
    font-size: 0.95rem;
}
.sidebar-item-qty-controls {
    /* input-group input-group-sm from Bootstrap */
    /* max-width: 120px; inline */
}
.sidebar-item-qty-controls .btn {
    min-width: 30px; /* Slightly wider buttons */
    height: 30px;
}
.sidebar-item-qty-controls .form-control {
    height: 30px; /* Match button height */
    flex-grow: 0; /* Prevent input from growing too much */
    width: 40px; /* Fixed width for qty input */
}
.sidebar-item-remove .btn svg { /* Ensure SVG inside button is styled */
    width: 1em;
    height: 1em;
    vertical-align: -0.125em; /* From Bootstrap icon alignment */
    /* fill: currentColor; /* If your SVG uses currentColor */
}


/* --- Sidebar Footer (Totals and Actions) --- */
.sidebar-cart-footer {
    padding: 1rem; /* OVERALL PADDING FOR THE FOOTER BLOCK */
    border-top: 1px solid #dee2e6;
    background-color: #fff;
    flex-shrink: 0; /* Prevent footer from shrinking */
}

/* Target the <p> tags directly inside the footer for the summary lines */
.sidebar-cart-footer > p {
    margin-bottom: 0.6rem; /* Spacing between lines */
    font-size: 0.875rem;   /* Consistent font size */
    display: flex;         /* For label left, value right */
    justify-content: space-between;
    align-items: center;
    /* The padding of the parent .sidebar-cart-footer will provide the left/right indent */
}

.sidebar-cart-footer > p span { /* The value part of the total line */
    font-weight: 500; /* Slightly bolder for values */
    /* text-align: right; /* Not needed with flex justify-content */
}

.sidebar-cart-footer > p#sidebarVatItemRow,
.sidebar-cart-footer > p#sidebarVatDepositRow {
    font-size: 0.8rem; /* Slightly smaller for VAT lines if desired */
    color: #555;
}

.sidebar-cart-footer hr {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    border-top: 1px solid #e0e0e0;
}

.sidebar-cart-footer p.sidebar-grand-total {
    font-size: 1.1rem; /* Larger for grand total */
    margin-top: 0.5rem;
}
.sidebar-cart-footer p.sidebar-grand-total strong { /* The "Gesamtsumme:" text */
    font-weight: 600; /* Bold */
}
.sidebar-cart-footer p.sidebar-grand-total span { /* The grand total value */
    font-weight: bold;
}

.sidebar-cart-footer .sidebar-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sidebar-cart-footer .sidebar-actions .btn {
    /* Ensure buttons in actions have consistent sizing if needed */
    /* e.g., flex-grow: 1; margin: 0 5px; if you want them to fill space */
}


/* --- Overlay for when sidebar is open --- */
.cart-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.45); /* Slightly darker overlay */
    z-index: 1039; /* Below sidebar, above content */
}
.cart-sidebar-overlay.open {
    display: block;
}

/* Prevent body scroll when sidebar is open */
body.sidebar-open-no-scroll {
    overflow: hidden;
}
/* --- Floating Cart Button & Badge --- */

/* The DIV container for the button.
   Its main role here is to apply the hide/show transition.
   It should NOT have position:fixed if the button inside is fixed. */
.cart-icon-container {
    /* No position, top, right needed here if button is fixed. */
    /* z-index can also be removed from here if button has its own. */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    /* This container needs to be positioned if the button inside isn't fixed.
       However, since #toggleCartSidebar IS fixed, this div is mostly for the transition class.
       If #toggleCartSidebar was not fixed, then this container would need:
       position: fixed; top: 390px; right: 20px; z-index: 1045;
    */
}

.cart-icon-container.hidden-by-sidebar {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

/* YOUR STYLE FOR THE ACTUAL FLOATING BUTTON - THIS IS THE PRIMARY STYLE */
#toggleCartSidebar {
    position: fixed;
    top: 390px;       /* YOUR VALUE */
    right: 20px;      /* YOUR VALUE */
    width: 65px;      /* YOUR VALUE for a larger round button */
    height: 65px;     /* YOUR VALUE */
    border-radius: 50%; /* Makes it round */
    background-color: #007bff; /* Or your theme's primary color */
    color: #fff;       /* Icon color */
    border: none;       /* Remove default button border */
    display: flex;      /* For centering SVG/content inside */
    align-items: center;
    justify-content: center;
    padding: 0;         /* Remove any default padding */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* Slightly stronger shadow */
    z-index: 1045;      /* Above sidebar (1040) and overlay (1030) */
    user-select: none;
}

#toggleCartSidebar svg {
    width: 30px;        /* Adjust size of SVG icon as needed */
    height: 30px;       /* Adjust size of SVG icon as needed */
    /* fill: currentColor; /* Usually good for SVGs to inherit color */
}

/* CORRECTED BADGE POSITIONING */
#cartBadge {
    position: absolute;
    top: -3px;          /* Adjust to position slightly outside the top edge */
    right: -5px;         /* Adjust to position slightly outside the right edge */
    min-width: 22px;    /* Ensures it's somewhat round even with 1 digit */
    height: 22px;
    font-size: 0.75rem; /* Small, clear font */
    font-weight: bold;
    line-height: 20px;  /* Vertically center text in badge (match height) */
    padding: 0;         /* Remove padding if using fixed width/height for roundness */
    text-align: center;
    border-radius: 50%; /* Make badge circular */
    background-color: red;
    color: white;
    border: 2px solid white; /* White border to make it pop from the button */
    box-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Subtle shadow for the badge */
}

/* --- Other Sidebar Styles (Keep the ones that fixed footer padding) --- */
/* ... (All .cart-sidebar, .cart-sidebar-header, .cart-sidebar-content, .sidebar-cart-item, .sidebar-cart-footer CSS
          from the previous response that CORRECTLY handled the footer padding should go here) ... */

.cart-sidebar-footer {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    background-color: #fff;
    text-align: left;
}
.sidebar-cart-footer > p {
    margin-bottom: 0.6rem;
    font-size: 0.875rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0;
    margin-left: 0;
}
.sidebar-cart-footer > p span {
    font-weight: 500;
}

.mfg-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background-color: #fff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  overflow: hidden; /* Ensures child elements respect the border-radius */
}

/* --- Card Hover Effect --- */
.mfg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
  text-decoration: none;
  color: inherit;
}

/* --- Image / Logo Wrapper --- */
.mfg-card__image-wrapper {
  /* A fixed height is key to a uniform grid */
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: #f8f9fa; /* A light background for logos */
  border-bottom: 1px solid #e9ecef;
}

/* --- The Logo Image Itself --- */
.mfg-card__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* This is the magic property: scales the image to fit without stretching or cropping */
  object-fit: contain; 
}

/* --- Content Area Below the Image --- */
.mfg-card__content {
  display: flex;
  flex-direction: column;
  /* This makes the content area grow to fill the available card space */
  flex-grow: 1; 
  padding: 1rem;
  text-align: center;
}

/* --- Manufacturer Name/Title --- */
.mfg-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 0.5rem 0;
}

/* --- Short Description Text --- */
.mfg-card__description {
  /* This allows the description to take up available space, pushing the button down */
  flex-grow: 1; 
  font-size: 0.85rem;
  line-height: 1.5;
  color: #6c757d;
  margin: 0 0 1rem 0;
}

/* --- Button/Actions container at the bottom --- */
.mfg-card__actions {
  /* This is not strictly needed due to flex-grow on the description, but good for structure */
  margin-top: auto; /* Pushes this element to the very bottom */
}

.mfg-card__button {
  color: #28a745;
  border-color: #28a745;
}

.mfg-card:hover .mfg-card__button {
  background-color: #28a745;
  color: #fff;
}