/** Shopify CDN: Minification failed

Line 165:0 Unexpected "<"
Line 1121:0 Unexpected "{"
Line 1121:1 Expected identifier but found "%"
Line 1123:26 Unexpected "("
Line 1123:92 Unterminated string token
Line 1124:1 Expected identifier but found "%"
Line 1126:0 Unexpected "<"
Line 1280:0 Unexpected "<"

**/
/* Main product images - more specific selectors */
.product-template img,
.product-media img,
.product__media img,
.product-gallery img,
.product-image img {
  border: 1px solid grey !important;
  padding: 3px !important;
  box-sizing: border-box !important;
  background: white !important;
}

/* Add this to specifically exclude the logo */
#logo img, 
.logo-img,
header img {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Zoomed images (Fancybox) */
.fancybox__image {
  border: 1px solid grey !important;
  padding: 3px !important;
}

/* Optional: Thumbnails */
.product-thumbnail img {
  border: 0.5px solid grey !important;
  padding: 2px !important;
}


/* Target Xtra theme's image container */
.product-card figure {
  position: relative !important; /* Force positioning */
}

.unit-price-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #FF6F00 !important;
  color: white !important; /* Override theme colors */
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 3px;
  z-index: 100; /* Higher than product labels */
  font-weight: bold;
  display: block !important; /* Override hidden states */
}

/* Add position relative to media containers */
.l4pr > li {
  position: relative;
}

/* Existing badge styles */
.unit-price-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #FF6F00 !important;
  color: white !important;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 4px;
  z-index: 100;
}

.quantity-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #FF6F00 !important;
  color: white !important;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 4px;
  z-index: 100;
  font-weight: bold;
  display: block !important;
}




.out-of-stock-badge {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: red;
  color: white !important;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 4px;
  z-index: 101;
  font-weight: bold;
  display: block !important;
}

.l4cl .product-card {
  overflow: visible !important;
  position: relative;
  padding-bottom: 10px; /* adds breathing room for the image/frame */
  min-height: 100%; /* ensures full height */
}

.l4cl .product-card img {
  display: block;
  width: 100%;
  height: auto;
}

.l4cl .unit-price-badge,
.l4cl .quantity-badge {
  font-size: 11px;
  padding: 4px 8px;
  top: 2px;
}

.l4cl .unit-price-badge {
  left: 6px;
}

.l4cl .quantity-badge {
  right: 6px;
}

.collection-view-mode, 
.collection-view-toggle, 
.collection-view-buttons {
  display: none !important;
}


.shopify-policy__container {
  max-width: 100% !important;
  margin: 0 auto;
  padding: 0 2rem;
}

.shopify-policy__title,
.shopify-policy__body {
  text-align: left !important;
  max-width: 1200px; /* Adjust this to match your site's content width */
  margin-left: auto;
  margin-right: auto;
}

<style>


/* Another approach using the class of the table itself */
table.volumeDisplayTableForm-options thead th {
  color: #FFFFFF !important; /* White text */
  background-color: #FF6F00 !important; /* Orange background */
  font-size: 16px;
}


/* Make grey background full width with increased top padding */
#shopify-section-template--24800320749891__section_icon_text_blocks_B8Ccpk {
  position: relative;
  padding-top: 5px !important; /* Add padding to the section itself */
  padding-bottom: 0px !important;
}

#shopify-section-template--24800320749891__section_icon_text_blocks_B8Ccpk:before {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  top: 0;
  bottom: 0;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background-color: #f0f0f0;
  z-index: -1;
}

/* Additional padding for the content container */
#shopify-section-template--24800320749891__section_icon_text_blocks_B8Ccpk article {
  padding-top: 5px;
  padding-bottom: 0px;
}

/* Keep the orange headings */
#shopify-section-template--24800320749891__section_icon_text_blocks_B8Ccpk ul.l4st li h4 {
  color: #ff6f00 !important;
}

/* Make grey background full width with increased top padding */
#shopify-section-template--24800320749891__section_icon_text_blocks_9GMUK3 {
  position: relative;
  padding-top: 5px !important; /* Add padding to the section itself */
  padding-bottom: 0px !important;
}

#shopify-section-template--24800320749891__section_icon_text_blocks_9GMUK3:before {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  top: 0;
  bottom: 0;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background-color: #f0f0f0;
  z-index: -1;
}

/* Additional padding for the content container */
#shopify-section-template--24800320749891__section_icon_text_blocks_9GMUK3 article {
  padding-top: 5px;
  padding-bottom: 0px;
}

/* Force all 5 columns to display horizontally */
#shopify-section-template--24800320749891__section_icon_text_blocks_9GMUK3 ul.l4st.mobile-hide {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

#shopify-section-template--24800320749891__section_icon_text_blocks_9GMUK3 ul.l4st.mobile-hide li {
  flex: 1 1 20% !important; /* 5 equal columns at 20% each */
  max-width: 20% !important;
  margin: 0 !important;
  padding: 0 10px !important;
  text-align: center !important; /* Center all content */
}

/* Center images */
#shopify-section-template--24800320749891__section_icon_text_blocks_9GMUK3 figure {
  display: flex !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

/* Style headings to match first section */
#shopify-section-template--24800320749891__section_icon_text_blocks_9GMUK3 ul.l4st li h2 {
  color: #ff6f00 !important;
  font-size: 2.0rem !important; /* Match h4 size from first section */
  text-align: center !important;
  font-weight: normal !important; /* Match weight */
  margin-top: 10px !important;
  margin-bottom: 5px !important;
}

/* Make paragraph text bold */
#shopify-section-template--24800320749891__section_icon_text_blocks_9GMUK3 ul.l4st li p {
  font-weight: bold !important;
  font-size: 1.25rem !important; /* Match text size from first section */
  text-align: center !important;
  margin: 0 auto !important;
}

/* Keep existing mobile styles for responsive design */
@media only screen and (max-width: 47.5em) {
  #shopify-section-template--24800320749891__section_icon_text_blocks_9GMUK3 .mobile-only {
    display: block !important;
  }
  
  #shopify-section-template--24800320749891__section_icon_text_blocks_9GMUK3 .mobile-hide {
    display: none !important;
  }
  
  /* Center text on mobile too */
  #shopify-section-template--24800320749891__section_icon_text_blocks_9GMUK3 ul.l4st.mobile-only li {
    text-align: center !important;
  }
  
  #shopify-section-template--24800320749891__section_icon_text_blocks_9GMUK3 ul.l4st.mobile-only h2 {
    text-align: center !important;
    color: #ff6f00 !important;
  }
  
  #shopify-section-template--24800320749891__section_icon_text_blocks_9GMUK3 ul.l4st.mobile-only p {
    text-align: center !important;
    font-weight: bold !important;
  }
}

/* Target the specific footer nav element */
nav#shopify-section-footer {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  justify-content: flex-start !important;
}

/* Target the direct children divs */
nav#shopify-section-footer > div:first-child {
  margin-right: 10px !important;
}

nav#shopify-section-footer > div:nth-child(2) {
  margin-right: auto !important;
}

nav#shopify-section-footer > div.m6cn {
  margin-left: auto !important;
}

.product-type-badge {
  position: absolute;
  top: 52px; /* Perfect for product view */
  right: 12px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 4px;
  z-index: 10;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.full-box-badge {
  background: #C49A6C !important;
}

.sleeve-badge {
  background: #007B8A !important;
}

.pack-badge {
  background: #4C7737 !important;
}

.product-type-badge {
  position: absolute;
  top: 52px; /* Perfect for product view */
  right: 12px;
  background: rgba(0, 0, 0, 0.85);
  color: white !important;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 4px;
  z-index: 100;
  font-weight: bold;
  display: block !important;
  white-space: nowrap;
  text-align: center;
}

.full-box-badge {
  background: #C49A6C !important;
}

.sleeve-badge {
  background: #007B8A !important;
}

.pack-badge {
  background: #4C7737 !important;
}

/* Collection view - add more spacing */
.l4cl .product-type-badge {
  font-size: 11px !important;
  padding: 4px 8px !important;
  top: 34px !important; /* Increased from 30px to add white space */
  right: 6px !important;
}

blockquote h6 {
  margin-bottom: 8px !important;
  margin-top: 0 !important;
}

blockquote h6:last-child {
  margin-bottom: 0 !important;
}

.slideshow-badge {
  width: 250px !important;
  height: auto !important;
  display: block;
  margin: 5px auto 1px auto;
}

/* ======================================================= */
/* == Final, Polished Cart Quantity Buttons (Version 3) == */
/* ======================================================= */

/* The main container for our new selector */
.custom-quantity-selector {
  display: flex; /* Aligns children horizontally */
  align-items: center; /* Aligns children vertically */
  height: 42px; /* Set a consistent height for the container */
}

/* The read-only text input in the middle */
.custom-quantity-selector .quantity-value {
  width: 45px;
  height: 100%; /* Make it fill the container's height */
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  background-color: #fff;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-left: none; /* Remove side borders to merge with buttons */
  border-right: none;
  padding: 0;
  box-sizing: border-box; /* Ensures padding/border are included in height */
}

/* The new + and - buttons */
.custom-quantity-selector .quantity-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%; /* Make buttons fill the container's height */
  background-color: #F97316; /* Orange */
  color: white;
  font-size: 24px;
  font-weight: 500;
  text-decoration: none;
  line-height: 42px; /* Helps vertically center the +/- text */
  cursor: pointer;
  transition: opacity 0.2s ease;
  border: 1px solid #F97316;
  box-sizing: border-box;
}

/* Add rounded corners to the outer edges of the component */
.custom-quantity-selector .quantity-btn:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.custom-quantity-selector .quantity-btn:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.custom-quantity-selector .quantity-btn:hover {
  opacity: 0.85;
  color: white;
}
/* Final tweak to nudge the plus button up for perfect visual alignment */
.custom-quantity-selector .quantity-btn:last-child {
  position: relative;
  top: -3px;
}

/* Hide the green validation tick on the cart quantity input */
.custom-quantity-selector .quantity-value.is-valid {
  background-image: none !important;
}

/* Style for the disabled quantity buttons */
.custom-quantity-selector .quantity-btn.is-disabled {
  background-color: #cccccc; /* A neutral grey */
  cursor: not-allowed;
}

/* Style for non-editable cart quantity input */
.cart-input-quantity[readonly] {
  cursor: default;
  background-color: #f8f9fa; /* Optional: adds a slight grey background */
}

.cart-input-quantity[readonly]:focus {
  outline: none;
  box-shadow: none;
}

/* ======================================================= */
/* == Final Side Cart Quantity & Remove Buttons           == */
/* ======================================================= */

/* The container for the quantity selector group */
.side-cart__quantity-selector {
  display: flex;
  align-items: center;
  height: 42px; /* Matches main cart */
}

/* The non-editable number input in the middle */
.side-cart__quantity-selector .side-cart__quantity-input {
  width: 45px;
  height: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  background-color: #fff;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-left: none;
  border-right: none;
  padding: 0;
  box-sizing: border-box;
  -moz-appearance: textfield; /* Hide Firefox spinners */
}

/* Hide Webkit (Chrome, Safari) spinners */
.side-cart__quantity-input::-webkit-outer-spin-button,
.side-cart__quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* The new '+' and '-' buttons (<a> or <span> tags) */
.side-cart__quantity-selector .side-cart__quantity-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  background-color: #F97316;
  color: white;
  font-size: 24px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #F97316;
  box-sizing: border-box;
  transition: opacity 0.2s ease;
  vertical-align: middle; /* Add this line */
}

/* Add rounded corners to the outer edges */
.side-cart__quantity-selector .side-cart__quantity-btn:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.side-cart__quantity-selector .side-cart__quantity-btn:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Hover effect for clickable buttons */
.side-cart__quantity-selector a.side-cart__quantity-btn:hover {
  opacity: 0.85;
}

/* Style for the disabled buttons */
.side-cart__quantity-selector .side-cart__quantity-btn.is-disabled {
  background-color: #cccccc;
  border-color: #cccccc;
  cursor: not-allowed;
}

/* Nudge the plus button up for perfect vertical alignment */
.side-cart__quantity-selector .side-cart__quantity-btn:last-of-type {
  position: relative;
  top: -3px; 
}

/* Orange borders for registration form fields by default */
#create_customer input:not([type="checkbox"]):not([type="hidden"]) {
  border: 1px solid #FF8C00; /* Orange border by default */
  box-shadow: none;
  outline: none;
}

/* Optional: Keep same style on focus (for consistency or subtle tweak) */
#create_customer input:not([type="checkbox"]):not([type="hidden"]):focus {
  border-color: #FF8C00;
  box-shadow: none;
  outline: none;
}


/* Orange border for the 'My details' and 'Customer service' containers */
.m6bx {
  border: 1px solid #FF8C00; /* Orange border */
  padding: 2rem;
}

/* Styles the parent container for the contact links for alignment */
.l4cn.box {
  display: flex;
  align-items: stretch; /* This makes all child boxes the same height */
  gap: 1rem; /* Modern way to add space between items */
}

/* Styles each individual contact link box */
.l4cn.box li {
    border: 1.5px solid #FF8C00; /* Orange border */
    border-radius: 0px;
    background-color: #fff; /* Ensures border contrast and no cut-off */
    margin-bottom: 0;
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    box-sizing: border-box; /* Ensures padding doesn't exceed width */
}

/* Draws a complete orange box around the 'My orders' table */
.table-drop {
    border: 1.5px solid #FF8C00;
    border-radius: 0px; /* Optional: for slightly rounded corners */
    padding: 0; /* Reset any default padding */
    border-collapse: separate; /* Ensures the outer border is clean */
    border-spacing: 0;
}

/* Adds the internal line separating the header from the order rows */
.table-drop thead th {
    border-bottom: 1px solid #FF8C00;
}

ul.l4as.caption::before {
  content: none !important;
  display: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}
.m6bx.overlay.m10 {
  display: block !important;
}

ul.l4as.caption {
  padding-left: 0 !important;
  margin-left: 0 !important;
}
/* Apply Caterwise orange to all relevant account page headings */
.cols.base-font h2,
.account h2,
.table-wrapper caption,
h2.size-18 {
  color: #FF6F00 !important;
}

/* Orange borders for standard address fields */
form[action*="/account/addresses"] input:not([type="checkbox"]):not([type="hidden"]),
form[action*="/account/addresses"] select,
form[action*="/account/addresses"] textarea {
  border: 1px solid #FF8C00 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Keep orange border on focus */
form[action*="/account/addresses"] input:focus,
form[action*="/account/addresses"] select:focus,
form[action*="/account/addresses"] textarea:focus {
  border-color: #FF8C00 !important;
}

/* Round corners of the orange account header */
.m6fr.compact > article.palette-scheme-4.module-color-palette {
  border-radius: 15px;
  overflow: hidden; /* ensures background respects the curve */
}

/* Make the group behave evenly spaced */
.site-header__supply-link,
.icon-facebook-parent-link,
.site-header__account,
.site-header__cart {
  display: flex;
  align-items: center;
  margin: 0 8px; /* controls equal spacing – adjust to taste */
}

/* Supply Us link */
.site-header__supply-link {
  color: #FFFF00 !important;
  font-weight: bold !important;
  padding: 0; /* remove padding that pushed it away */
    position: relative;
  top: 2px; /* Adjust this value to move "Supply Us" up/down */
}

/* CORRECTED Header Facebook Icon */
#nav-user .icon-facebook {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: #1877F2 !important; /* Facebook Blue Background */
  color: white !important;             /* White "f" */
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 16px !important;
  margin: 0 !important;
}

/* Step 1: lower the Facebook circle slightly */
.icon-facebook {
  position: relative;
  top: 8px !important;  /* try 1–3px until it looks centered */
}

/* Step 2: force Facebook link spacing */
.icon-facebook-parent-link {
  margin: 0 !important;        /* reset all margins */
  padding: 0 !important;       /* reset padding */
  display: flex !important;
  align-items: center !important;
}

.site-header__supply-link {
  margin-right: -5px !important; /* controls space after Supply Us */
}

.icon-facebook-parent-link {
  margin-right: -10px !important; /* controls space after Facebook */
}

/* Step 3: tighten account ↔ Facebook gap */
.site-header__account {
  margin-left: -5px !important;  /* reduce gap from Facebook */
}

li:has(i.icon-facebook) {
    margin-right: 12px !important; /* Adjust this value */
}

/* --- START: MINIMIZE FACEBOOK ICON WHITE BACKGROUND --- */

.icon-facebook {
  /* Reduce the width and height to minimize the white circle */
  width: 24px !important;  /* Adjust this value (e.g., 20px, 28px) */
  height: 24px !important; /* Adjust this value (e.g., 20px, 28px) */

  /* Optionally, adjust the 'f' size to fit the smaller circle */
  font-size: 14px !important; /* Adjust this value (e.g., 12px, 16px) */
}

/* --- END: MINIMIZE FACEBOOK ICON WHITE BACKGROUND --- */

/*
 * Center and re-order the Video with Text section
 */
#shopify-section-template--24800320815427__section_video_banner_HrrmVJ .m6as {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; 
  gap: 0px;
}

#shopify-section-template--24800320815427__section_video_banner_HrrmVJ .m6as > figure,
#shopify-section-template--24800320815427__section_video_banner_HrrmVJ .m6as > div {
  width: 100%;
  max-width: 900px; 
  margin-left: auto !important;
  margin-right: auto !important;
}

#shopify-section-template--24800320815427__section_video_banner_HrrmVJ .m6as > div {
  text-align: center;
  /* 👇 THIS IS THE NEW LINE 👇 */
  order: -1; /* This moves the text/heading above the video */
}

/* --- START: COMPLETE SOCIAL ICON FIX --- */

/* 1. Vertically align the Facebook icon (Your working rule) */
#root .l4sc a .icon-facebook::before {
  display: inline-block !important;
  transform: translateY(-10px) !important;
}

/* 2. Neutralize internal horizontal padding on ALL social links */
#root .l4sc.box li a {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3. Add consistent spacing BETWEEN the icons */
#root .l4sc.box li {
  margin: 0 8px 0 0 !important; /* Adds 8px space to the right */
  padding: 0 !important;
}

/* 4. Remove spacing from the very last icon */
#root .l4sc.box li:last-child {
  margin-right: 0 !important;
}

/* 5. 🎯 NEW: Forcefully correct the Facebook icon's built-in space */
#root .l4sc.box li a[href*="facebook.com"] {
  margin-left: -8px !important;  /* Pulls the icon left */
  margin-right: -8px !important; /* Pulls the next icon closer */
}

/* --- END: COMPLETE SOCIAL ICON FIX --- */

/*
==================================================
Collection Page: "Last stock!" Badge
==================================================
*/
.product-card .s1lb.label {
  position: absolute !important;
  bottom: 15px !important; 
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  top: auto !important;
  right: auto !important;
  
  /* Fix for "empty box" */
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

.product-card .s1lb.label span {
  /* This re-applies your theme's blue badge style */
  background-color: #0d6efd; 
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  line-height: 1;
  display: inline-block;
}

/*
==================================================
Product Page: "Last stock!" Badge (Corrected)
==================================================
*/

/* THIS IS THE FIX:
  We make the <li> (the list item) the positioning anchor.
  This is safe and will NOT hide the image.
*/
#main-product .l4pr-container li {
  position: relative;
}

/* This targets the label container *only* on the product page */
#main-product .l4pr-container .s1lb.label {
  position: absolute !important;
  bottom: 15px !important; 
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  top: auto !important;
  right: auto !important;
  
  /* Fix for "empty box" */
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* This styles the text *inside* the container */
#main-product .l4pr-container .s1lb.label span {
  /* This re-applies your theme's blue badge style */
  background-color: #0d6efd; 
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  line-height: 1;
  display: inline-block;
}

/* ==================================================
"Special Offer" Badge & Stacking Logic
==================================================
*/

/* 1. Style the specific "Special Offer" badge (Red) */
.special-offer-badge {
  background-color: #dc3545 !important; /* Red background */
  color: #ffffff !important;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  margin-top: 5px; /* Adds a small gap between this and the badge above it */
}

/* 2. Update the Container to Stack Badges Vertically 
   (Targets both Product and Collection pages) 
*/
.l4pr-container li .s1lb.label,
.product-card .s1lb.label {
  display: flex !important;           /* Enables flexible layout */
  flex-direction: column !important;  /* Forces items to stack top-to-bottom */
  align-items: center !important;     /* Centers them horizontally */
  justify-content: flex-end !important;
}


/* --- Custom styling for newsletter checkbox (v4 - More Specific) --- */



/* 1. Hide the browser's original checkbox */

#newsletter_signup {

  opacity: 0 !important;

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;

}



/* 2. Style the custom box (the one you see) */

ul.check label[for="newsletter_signup"]::before {

  content: "" !important;

  display: inline-block !important;

  width: 18px !important;

  height: 18px !important;

  border: 2px solid #FF8C00 !important; /* PERMANENT ORANGE BORDER */

  background-color: #FFFFFF !important;

  vertical-align: middle !important;

  margin-right: 8px !important;

  position: relative !important;

}



/* 3. Create the checkmark (hidden by default) */

ul.check label[for="newsletter_signup"]::after {

  content: '\2713' !important; /* Checkmark */

  position: absolute !important;

  display: inline-block !important;

  width: 18px !important;

  margin-left: -26px !important; /* (18px box + 8px margin) */

  vertical-align: middle !important;

  text-align: center !important;

  font-size: 16px !important;

  line-height: 1.1 !important;

  font-weight: bold !important;

  color: #FF8C00 !important; /* Orange checkmark */

  opacity: 0 !important; /* Hide it */

  transition: opacity 0.1s ease-in-out !important;

}



/* 4. Show the checkmark when the hidden box is checked */

#newsletter_signup:checked + label[for="newsletter_signup"]::after {

  opacity: 1 !important; /* Show it! */

}

/* Force "Out of Stock" labels inside the standard badge container to be Red */
.s1lb.label .out-of-stock {
    background-color: #dc3545 !important; /* Red color matching your previous badge */
    color: #ffffff !important;
    border-color: #dc3545 !important;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
}

/* STANDARDIZE product cards in Essential Add-ons + Recently Viewed */
#shopify-section-template--24800320979267__recommendations li.product-card,
#shopify-section-template--24800320979267__recently-viewed li.product-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 12px;
}

/* Force image container to uniform height */
#shopify-section-template--24800320979267__recommendations li.product-card img,
#shopify-section-template--24800320979267__recently-viewed li.product-card img {
  height: 200px;
  object-fit: contain;
  width: 100%;
  display: block;
  margin-bottom: 10px;
}

/* Wrap content block under image with a fixed layout */
#shopify-section-template--24800320979267__recommendations li.product-card a,
#shopify-section-template--24800320979267__recently-viewed li.product-card a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  text-align: left;
  box-sizing: border-box;
  position: relative;
}

/* Frame style */
.item-frame {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 2px solid #FF6F00;
  border-radius: 12px;
  pointer-events: none;
  z-index: 1;
}

/* Optional: Badge positioning */
.framed-section [class*="badge"] {
  z-index: 2;
  position: relative;
}

/* Force equal height for Add-ons and Recently Viewed cards */
#shopify-section-template--24800320979267__recommendations ul,
#shopify-section-template--24800320979267__recently-viewed ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

/* Force all cards to be same height */
#shopify-section-template--24800320979267__recommendations li.product-card,
#shopify-section-template--24800320979267__recently-viewed li.product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 350px; /* <- adjust to what fits all content nicely */
}

/* Mobile-only: Reduce badge size and font */
@media (max-width: 768px) {
  .unit-price-badge,
  .quantity-badge {
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 3px;
  }
  
  /* If you have the .l4cl class badges, make them even smaller */
  .l4cl .unit-price-badge,
  .l4cl .quantity-badge {
    font-size: 9px;
    padding: 2px 5px;
  }
}

@media only screen and (max-width: 768px) {
  /* Target the label container on the product page */
  #main-product .l4pr-container .s1lb.label {
    bottom: 80px !important; /* Move it up significantly */
    left: 10px !important;   /* Align left or keep centered with 50% / translate */
    transform: none !important; /* Reset center transform if aligning left */
  }
}

{% comment %}
  Product Card Badge Fixes
  Ensures internal badges (unit price, qty, pack type) don't get squashed on smaller screens
{% endcomment %}

<style>
  /* =====================================================
     PRODUCT CARD INTERNAL BADGES - RESPONSIVE FIXES
     ===================================================== */

  /* Unit price badge (e.g., ~€0.17/unit) */
  .product-card .unit-price-badge,
  .product-card [class*="unit-price"],
  .product-card .price-per-unit {
    font-size: clamp(8px, 1.5vw, 11px) !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
    min-width: auto !important;
  }

  /* Quantity badges (e.g., 50 Per Pack, 200 Per Box) */
  .product-card .qty-badge,
  .product-card [class*="per-pack"],
  .product-card [class*="per-box"],
  .product-card .pack-qty {
    font-size: clamp(8px, 1.5vw, 11px) !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
  }

  /* Pack type badges (Pack, Full Box) */
  .product-card .pack-type-badge,
  .product-card [class*="pack-type"] {
    font-size: clamp(8px, 1.5vw, 10px) !important;
    padding: 2px 5px !important;
  }

  /* =====================================================
     TABLET SPECIFIC FIXES (768px - 1024px)
     ===================================================== */
  
  @media (min-width: 768px) and (max-width: 1024px) {
    /* Make badge container flex-wrap to prevent overflow */
    .product-card figure {
      overflow: visible !important;
    }
    
    /* Top corner badges - scale down */
    .product-card figure > span,
    .product-card figure > div:not(.out-of-stock-badge) {
      font-size: 9px !important;
      padding: 2px 5px !important;
    }

    /* Ensure badges don't overlap */
    .product-card .product-labels,
    .product-card [class*="labels"] {
      gap: 3px !important;
    }
  }

  /* =====================================================
     SMALL TABLET / LARGE MOBILE (600px - 768px)
     ===================================================== */
  
  @media (min-width: 600px) and (max-width: 768px) {
    .product-card figure > span,
    .product-card figure > div:not(.out-of-stock-badge) {
      font-size: 8px !important;
      padding: 2px 4px !important;
    }
  }

  /* =====================================================
     PRICE-PACK-PRODUCTTYPE BADGES SPECIFIC
     ===================================================== */

  /* These are the badges rendered by price-pack-producttype-badges snippet */
  .product-card .badge-unit-price,
  .product-card .badge-pack-qty,
  .product-card .badge-pack-type {
    font-size: clamp(7px, 1.2vw, 10px) !important;
    padding: clamp(2px, 0.5vw, 4px) clamp(4px, 0.8vw, 8px) !important;
    border-radius: 3px !important;
    line-height: 1.2 !important;
  }

  /* Position adjustments for top-left badges */
  .product-card figure .badge-unit-price {
    top: 8px !important;
    left: 8px !important;
  }

  /* Position adjustments for top-right badges */
  .product-card figure .badge-pack-qty {
    top: 8px !important;
    right: 8px !important;
  }

  /* Tablet adjustments */
  @media (max-width: 1024px) {
    .product-card figure .badge-unit-price,
    .product-card figure .badge-pack-qty,
    .product-card figure .badge-pack-type {
      top: 5px !important;
    }
    
    .product-card figure .badge-unit-price {
      left: 5px !important;
    }
    
    .product-card figure .badge-pack-qty {
      right: 5px !important;
    }
  }

  /* =====================================================
     HORIZONTAL SCROLL SECTIONS - CARD WIDTH FIXES
     ===================================================== */

  /* Essential Add-ons */
  @media (min-width: 768px) and (max-width: 1024px) {
    #essential-addons-list.slider > li,
    #essential-addons-list .swiper-slide {
      min-width: 200px !important;
      width: 200px !important;
    }
  }

  /* Recently Viewed */
  @media (min-width: 768px) and (max-width: 1024px) {
    [id^="rvp-grid-"] .swiper-slide {
      min-width: 200px !important;
    }
  }

  /* =====================================================
     FREE DELIVERY BADGE - ENSURE CONSISTENT SIZING
     ===================================================== */

  .fd-badge {
    font-size: clamp(7px, 1.2vw, 10px) !important;
    padding: clamp(3px, 0.5vw, 5px) clamp(5px, 0.8vw, 8px) !important;
    white-space: nowrap !important;
  }

  @media (max-width: 1024px) {
    .fd-badge {
      font-size: 8px !important;
      padding: 3px 5px !important;
    }
  }

  @media (max-width: 768px) {
    .fd-badge {
      font-size: 7px !important;
      padding: 2px 4px !important;
    }
  }
</style>

/* ======================================================
   FIX: Hide duplicate Theme 'Out of Stock' label
   This prevents it from conflicting with the custom .out-of-stock-badge
   ====================================================== */

/* This targets the specific text span inside the theme label */
.product-card .s1lb.label .out-of-stock,
.s1lb.label span.out-of-stock {
    display: none !important;
}

/* Optional: Ensure the custom badge is perfectly centered on mobile */
@media only screen and (max-width: 768px) {
    .out-of-stock-badge {
        bottom: 15px !important; /* Match the theme's bottom spacing if needed */
        width: max-content;      /* Ensure the red box fits the text tightly */
        min-width: auto;
    }
}