/** Shopify CDN: Minification failed

Line 409:51 Unexpected "`"
Line 1256:25 Expected identifier but found "*"
Line 1468:25 Expected identifier but found "*"

**/
/* --- LoamLabs Custom Wheel Builder CSS --- */

/* --- START: Selected Image & Centered Weight --- */

/* This is the main container that holds the image wrapper and the "Add Ons" button */
.component-selected-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 280px;
  padding: 10px;
}

/* This rule remains the same and is correct */
.selected-image-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* This rule remains the same and is correct */
.selected-image-wrapper img {
  max-width: 200px;
  max-height: 180px;
  object-fit: contain;
  margin-bottom: 30px;
}

/* 
  By adding ".selected-image-wrapper" in front, we make it more specific.
*/
.selected-image-wrapper .selected-component-weight-display {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(255, 255, 255, 0.8);
  color: #333;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  
  /* We remove these as they are no longer needed */
  left: auto;
  transform: none;
}

/* This rule for spokes is also made more specific */
.selected-image-wrapper .selected-component-weight-display:has(br) {
    white-space: normal;
    text-align: center;
}

/* --- START: Step 1 Image Slider Styles --- */

.image-slider-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 15px auto 20px auto; /* FURTHER REDUCED top and bottom margins */
    aspect-ratio: 16 / 6;
    border-radius: 8px;
    overflow: hidden;
    background-color: #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.image-slider-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

.slider-image-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Hidden by default */
    transition: opacity 1.2s ease-in-out; /* The fade transition */
    z-index: 1;
}

.slider-image-item.active {
    opacity: 1; /* The active slide is visible */
    z-index: 2; /* Ensure active slide is on top */
}

.slider-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the image fill the container without distortion */
    object-position: center;
}

/* --- END: Step 1 Image Slider Styles --- */

/* --- START: Sticky Header covering Step Titles --- */
.builder-step h2 {
    scroll-margin-top: 60px; /* Adjust this value if needed */
}
/* --- END: Sticky Header covering Step Titles --- */

/* --- Navigation Button Styles (Layout & Aesthetics) --- */
/* 1. Base style for ALL navigation containers (top and bottom) */
.builder-navigation {
    display: flex;
    justify-content: flex-start; /* This aligns items to the LEFT */
    gap: 15px;
    width: 100%;
    margin-top: 20px;
    align-items: center; /* Vertically align items */
}

/* 2. Style for the "Back" button */
.builder-navigation .prev-step-button {
    flex-grow: 0;  /* Do not grow */
    flex-shrink: 0; /* Do not shrink */
    order: 1;      /* Ensure it's the first item */
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #ced4da;
    padding: 12px 25px;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.builder-navigation .prev-step-button:hover {
    background-color: #e9ecef;
}

/* 3. Style for the primary "Next" / "Add to Cart" button */
.builder-navigation .next-step-button,
.builder-navigation .add-to-cart-button {
    flex-grow: 1;  /* This is the key: it allows the button to GROW and fill space */
    order: 2;      /* Ensure it's the second item */
    padding: 12px 30px;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    
    /* --- Enabled (Live) State --- */
    background-color: #28a745;
    color: #fff;
    border: 1px solid #218838;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* --- Hover State for Enabled Button --- */
.builder-navigation .next-step-button:not(:disabled):hover,
.builder-navigation .add-to-cart-button:not(:disabled):hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* --- Disabled State for ALL Nav Buttons --- */
.builder-navigation button:disabled {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    border-color: #ced4da !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* 4. Specifically target the top navigation bar in Step 3 */
.builder-navigation.nav-step-top {
    justify-content: flex-start !important; /* This ensures it overrides other flex rules */
    margin-top: -50px;
    margin-bottom: 20px;
    width: 100%; /* Make it take the full width to allow flex alignment */
    padding-top: 0;
    border-top: none;
}

/* 5. Target the disclaimer text in its new position */
.builder-policy-disclaimer {
    width: 100%;
    text-align: center;
    font-size: 0.9em;
    color: #555;
    margin-top: 15px; /* Space between it and the nav bar above */
}


/* This targets the container for the "Using Your Own Components?" row */
#customer-supplied-section {
    display: flex;
    align-items: center; /* Vertically align items */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    margin-top: 15px;
    transition: opacity 0.3s ease;
}

/* This targets the "Using Your Own Components?" label itself */
#customer-supplied-section .selection-label {
    flex: 1 1 100%; /* Take full width on small screens */
    margin-right: 0;
    margin-bottom: 10px; /* Add space below the label on small screens */
    text-align: left; /* Ensure it's not cut off */
}

/* This targets the container for all the checkboxes */
#customer-supplied-section .selection-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px; /* This creates vertical space between the "Rim" row and the "Hub" row */
}

/* Style for each new row (e.g., the "Rim" row) */
.component-group-row {
    display: flex;
    flex-wrap: nowrap; /* Ensures Front/Rear stay on the same line */
    gap: 20px; /* This creates horizontal space between "Front Rim" and "Rear Rim" */
}

/* Styles for the individual checkbox labels */
#customer-supplied-section .selection-options label {
    margin-right: 20px;
    margin-bottom: 5px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

#customer-supplied-section .selection-options input[type="checkbox"] {
    margin-right: 5px;
}

/* On larger screens, adjust the layout */
@media (min-width: 750px) {
    #customer-supplied-section {
        flex-wrap: nowrap; /* Prevent wrapping on large screens */
    }
    #customer-supplied-section .selection-label {
        flex: 0 0 auto; /* Don't grow, just take up needed space */
        width: 250px; /* Give it a fixed width to align with other labels */
        margin-right: 20px;
        margin-bottom: 0;
        text-align: right; /* Align right on larger screens */
    }
    #customer-supplied-section .selection-options {
        flex: 1 1 auto; /* Take up remaining space */
    }
}

/* This handles the disabled visual state */
#customer-supplied-section.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}
#customer-supplied-section.is-disabled h4 {
    color: var(--color-foreground-secondary, #666);
}

/* This targets the sections inside our consolidated confirmation modal */
#customer-supplied-modal .modal-section {
    margin-bottom: 20px; /* Adds space below each section */
}

/* Optional: Add a subtle border to separate them even more clearly */
#customer-supplied-modal .modal-section:not(:last-child) {
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

/* --- Customer-Supplied Modal Confirm Button Style --- */

/* Style for the button ONLY when it is ENABLED */
#customer-supplied-modal-confirm-btn:not(:disabled) {
  background-color: #f0f0f0; /* Light gray "highlight" */
  border: 1px solid #888;     /* A clear but not overpowering outline */
  color: #333;               /* Ensure text is dark and readable */
  font-weight: bold;          /* Make the text stand out */
}

/* Style for the button when it is ENABLED and being HOVERED over */
#customer-supplied-modal-confirm-btn:not(:disabled):hover {
  background-color: #e0e0e0; /* Slightly darker gray on hover */
  border-color: #666;       /* Darker border on hover */
  cursor: pointer;          /* Ensure the pointer cursor shows */
}

/* Styling for the new validation summary box */
.build-validation-summary {
  padding: 15px 20px;
  margin: 20px auto;
  border: 1px solid #e0e0e0;
  background-color: #fafafa;
  border-radius: 8px;
  max-width: 800px;
  text-align: left;
}

.build-validation-summary h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #c0392b; /* A soft red for attention */
  font-size: 1.1rem;
}

.build-validation-summary p {
  margin-bottom: 15px;
  font-size: 1rem;
}

/* NEW: Flex container for the two columns */
.validation-columns-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-around;
}

/* NEW: Styling for an individual column */
.validation-column {
    flex: 1;
    min-width: 180px; /* Prevent columns from getting too narrow */
}

.validation-column h5 {
    margin-top: 0;
    margin-bottom: 8px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

/* General UL styling within a column */
.validation-column ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

/* Styling for the clickable links */
.validation-column li a {
  display: block;
  padding: 5px 0;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 500;
  color: var(--color-accent-1);
}

.validation-column li a:hover {
  text-decoration: none;
}

/* Highlight effect for when the user clicks a link */
.flash-highlight {
  transition: box-shadow 0.3s ease-out;
  box-shadow: 0 0 15px 5px rgba(251, 197, 49, 0.7); /* Yellow glow */
}

/* --- START: Contextual Mismatch Hint Styling --- */
@keyframes subtleFadeIn {
  from { opacity: 0; transform: scale(0.95) translateX(-50%); }
  to { opacity: 1; transform: scale(1) translateX(-50%); }
}

.mismatch-hint {
  position: absolute;
  top: 10px; /* MOVED from bottom to top */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(240, 240, 240, 0.85); /* CHANGED to faint gray */
  color: #333; /* CHANGED to dark text for readability */
  border: 1px solid rgba(0,0,0,0.1); /* Added a subtle border */
  padding: 6px 12px; /* Slightly tighter padding */
  border-radius: 20px;
  font-size: 0.9em;
  font-weight: 600; /* Bolder font */
  text-align: center;
  white-space: nowrap;
  z-index: 5;
  cursor: pointer; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: subtleFadeIn 0.5s ease-out forwards;
  transition: background-color 0.2s ease, color 0.2s ease; 
}

.mismatch-hint:hover {
    background-color: rgba(220, 220, 220, 0.95); /* CHANGED to a darker gray hover */
}
/* --- END: Contextual Mismatch Hint Styling --- */```

/* --- START: CSS FOR REPOSITIONED ADD ONS BUTTON --- */

/* 1. Make the image container a positioning parent */
.component-selected-image {
    position: relative;
    /* Other existing styles are fine */
}

/* 2. General styles for the Add Ons button itself (selector is now more generic) */
.optional-addons-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1em;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #FFFFFF !important;
    background-color: #28a745;
    background-image: linear-gradient(to bottom, #34d058, #28a745);
    border: 1px solid #22863a;
    border-radius: 6px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.optional-addons-btn:hover {
    background-color: #218838;
    background-image: linear-gradient(to bottom, #2baf49, #218838);
    border-color: #1e7e34;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.optional-addons-btn:active {
    background-color: #1e7e34;
    background-image: none;
    border-color: #1a682b;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
    transform: translateY(1px);
}

/* 3. Absolutely position the button when it's inside the image container */
.component-selected-image .optional-addons-btn {
    position: absolute;
    bottom: 20px; /* Position from the bottom edge of the image container */
    left: 50%;
    transform: translateX(-50%); /* Only transform horizontally to center it */
    z-index: 10;
    min-width: 150px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* --- END: CSS FOR REPOSITIONED ADD ONS BUTTON --- */

.accessory-model-card.model-has-selections {
  background-color: #e6f3ff; 
}

/* Optional: Style for the header within a highlighted card if needed */
.accessory-model-card.model-has-selections .accessory-model-card-header {
  /* background-color: #d0e8ff; */ /* Slightly darker shade for the header, if desired */
  /* border-bottom: 1px solid #b3d7ff; */
}

/* Ensure the click prompt is still readable if background changes */
.accessory-model-card.model-has-selections .accessory-model-click-prompt {
  /* color: #333; */ /* Adjust if needed */
}

/* Lead Time Banners and Info */
.builder-lead-time-banner.is-informational {
    background-color: #fdfae6; /* A soft yellow */
    border-color: #e9e0b1;
    text-align: center;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 23px;
    border-radius: var(--media-border-radius, 6px);
    border: 1px solid;
}

.summary-lead-time-info {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e5e5e5;
    font-size: 16px;
    text-align: center;
}

/* Base & Main Builder Steps */
#variant-builder-container { max-width: 1250px; margin: 20px auto; box-sizing: border-box; }
.builder-step { display: none; margin-bottom: 20px; border-top: 1px solid #a0a0a0; padding-top: 20px; flex-direction: column; align-items: center; }
#step-0 { color: red; border: 1px solid red; padding: 15px; text-align: center; }
#step-1 { display: flex; }
#variant-builder-container h1 { text-align: center; margin-bottom: 20px; }
#variant-builder-container h2 { text-align: center; width: 100%; margin-bottom: 5px; margin-top: 0; padding-bottom: 5px; }
#variant-builder-container h4 { margin-top: -10px; margin-bottom: 10px; text-align: center; width: auto; } /* Main builder h4 */

/* --- START: Final Fix for Save/Load and All Other Buttons --- */

/* This is a more global reset for ALL buttons inside the builder */
#variant-builder-container .builder-button::before,
#variant-builder-container .builder-button::after {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    display: none !important; /* The most powerful reset */
    border-radius: 8px !important;
}

/* This explicitly sets the border-radius for all our custom buttons */
#variant-builder-container .builder-button {
    border-radius: 13px !important;
    font-size: 0.85em;
    padding: 6px;
}

/* General Button Styles */
.builder-button, .builder-step button, .button--secondary, .button--danger, .match-addon-btn, .add-to-list-btn {
 margin: 0; background-color: #fff; color: #333; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; font-size: 14px; 
  text-align: center; vertical-align: middle; line-height: 1.4; box-sizing: border-box; position: relative; z-index: 1; pointer-events: auto !important; border-color: #bdbdbd;
}
.builder-button--cta { background-color: #28a745 !important; color: white !important; border-color: #218838 !important; font-weight: bold; }
.builder-button--cta:hover { background-color: #218838 !important; border-color: #1e7e34 !important; }
.button--danger { background-color: #dc3545 !important; color: white !important; border-color: #bd2130 !important; }
.button--danger:hover { background-color: #c82333 !important; border-color: #b81f2d !important; }
.button--secondary { background-color: #6c757d !important; color: white !important; border-color: #5a6268 !important; }
.button--secondary:hover { background-color: #5a6268 !important; border-color: #545b62 !important; }


/* --- Info Tooltip Styling --- */
.info-tooltip-trigger {
    display: inline-block;
    margin-left: 8px;
    font-weight: bold;
    color: #888;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 22px;
    height: 20px;
    line-height: 17px;
    text-align: center;
    font-size: 14px;
    cursor: default;
    user-select: none;
    transition: background-color 0.2s, color 0.2s;
}

.info-tooltip-trigger:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

/* This is the actual tooltip bubble */
.builder-info-tooltip {
    display: none;
    position: absolute; /* We will use 'absolute' and let JS handle positioning */
    background-color: #333;
    color: #fff;
    padding: 12px 15px;
    border-radius: 6px;
    font-size: 15px;
    z-index: 10000;
    pointer-events: none;
    max-width: 350px;
    line-height: 1.5;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.selection-row .selection-label {
    display: flex;
    align-items: baseline; /* This is the key property for vertical alignment */
    gap: 8px; /* This adds a nice space between the text and the icon */
}

/* Optional: Minor adjustment to the h4 margin if needed */
.selection-row .selection-label h4 {
    margin-bottom: 0; /* Removes default bottom margin that can affect alignment */
}



/* Main Builder Addon Modal Buttons */
.add-addon-to-build-btn.addon-added.remove-mode { background-color: #dc3545 !important; border-color: #bd2130 !important; color: white !important; }
.add-addon-to-build-btn.addon-added.remove-mode:hover { background-color: #c82333 !important; border-color: #b81f2d !important; }
.match-addon-btn { background-color: #e9ecef; color: #495057; border: 1px solid #ced4da; width: 100%; margin-top: 5px; }
.match-addon-btn:hover { background-color: #d6dbdf; border-color: #adb5bd; }
.match-addon-btn.builder-button--cta { background-color: #28a745 !important; color: white !important; border-color: #218838 !important; font-weight: bold; }
.match-addon-btn.builder-button--cta:hover { background-color: #218838 !important; border-color: #1e7e34 !important; }

/* Main Builder Step 1 & 2 */
.options button, .spec-options button { margin: 0; }
.step-1-selection-c.step-1-selection-container, .step-2-selection-container { width: 100%; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 10px; }ontainer, .step-2-selection-container { width: 100%; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 15px; }
.selection-row {
    display: flex;
    flex-direction: column; /* Stack label and options vertically on mobile */
    align-items: flex-start; /* Align to the left */
    gap: 8px; /* REDUCED space between label and options */
    padding: 8px 15px;  /* FURTHER REDUCED top and bottom padding */
    border-bottom: 1px solid #bbb;
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.selection-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Label style for mobile */
.selection-label {
    width: 100%;
    text-align: left;
    margin-bottom: 0;
}

.selection-label h4 {
    margin-bottom: 0;
    text-align: left;
    font-size: 1.1em; /* Slightly larger for better readability on mobile */
}

/* Options container style for mobile */
.selection-options {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap to the next line */
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
}

/* --- Desktop Styles --- */
/* Apply the side-by-side layout ONLY on screens 750px or wider */
@media (min-width: 750px) {
    .selection-row {
        flex-direction: row; /* Go back to side-by-side */
        align-items: center; /* Vertically center label and options */
        gap: 15px;
    }

    .selection-label {
        flex-basis: 180px; /* Give the label a fixed width */
        flex-shrink: 0;
        width: auto; /* Reset width */
        text-align: right; /* Align text to the right */
    }

    .selection-label h4 {
        text-align: right;
        font-size: 1em; /* Reset font size */
    }

    .selection-options {
        flex-grow: 1; /* Allow options to fill remaining space */
        width: auto;
    }
}


/* General button styles within the options container */
.selection-options button {
    white-space: nowrap;
    flex-shrink: 0;
    flex-grow: 0;
    flex-grow: 1;
    flex-basis: auto;
    min-width: auto;
    border-radius: 8px;
    padding: 6px 15px;
    margin: 0;
    font-weight: 500;
}

.selection-options button:not(.active):hover,
.spec-options button:not(.active):hover:not(.is-incompatible) {
    background-color: #f0f0f0;
    border-color: #bbb;
}

.selection-options button.active,
.spec-options button.active {
    background-color: #007bff;
    color: #ffffff;
    border-color: #0056b3;
    font-weight: bold;
}

.spec-options button.is-incompatible {
    opacity: 0.65;
    border-style: dashed;
    cursor: pointer;
    background-color: #f8f8f8;
}

.spec-options button.is-incompatible:hover {
    opacity: 0.85;
    border-color: #aaa;
}

/* Main Builder Step 3 Components */
.component-section { border: 1px solid #e0e0e0; padding: 15px; margin-bottom: 20px; background-color: #fff; border-radius: 8px; width: 100%; box-sizing: border-box; }
.component-position-wrapper { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; position: relative; }
.position-subsection { border-radius: 8px; padding: 10px 15px; flex: 1 1 calc(50% - 10px); min-width: 300px; box-sizing: border-box; display: flex; flex-direction: column; }
.position-subsection h4 {
    text-align: center;
    width: 100%;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #bbb;
    font-weight: 650;     /* <-- ADD THIS LINE */
    font-size: 1.6rem;    /* <-- ADD THIS LINE */
} /* Main Builder position subsection header */
@media (min-width: 769px) { .component-position-wrapper.build-type-wheel-set .position-subsection[data-position="Rear"] { border-left: 1px solid #bbb; padding-left: 20px; } }
#front-valvestem-subsection, #rear-valvestem-subsection { display: flex; flex-direction: column; }
.component-filters { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 15px; }
.vendor-filter-area { flex-grow: 1; min-width: 200px; } /* Applies to main builder and accessories vendor area */
.component-filters h4 { margin-top: 0; margin-bottom: 5px; font-size: 0.9em; text-align: left; border-bottom: none; width: auto; padding-bottom: 0; }
.vendor-filter-options { display: flex; gap: 8px; justify-content: flex-start; padding-bottom: 10px; } /* Base for both */
.main-builder-vendor-filters .vendor-filter-options { /* Main builder specific if needed for scroll */
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #ccc #f0f0f0;
}
.main-builder-vendor-filters .vendor-filter-options::-webkit-scrollbar { height: 6px; }
.main-builder-vendor-filters .vendor-filter-options::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 3px;}
.main-builder-vendor-filters .vendor-filter-options::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px;}
.main-builder-vendor-filters .vendor-filter-options::-webkit-scrollbar-thumb:hover { background: #bbb; }
.vendor-filter-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 5px 10px; margin: 0; border: 1px solid #ddd; cursor: pointer; transition: background-color 0.2s; border-radius: 8px; font-size: 0.9em; white-space: nowrap; vertical-align: middle; flex-shrink: 0; }
.vendor-filter-btn .vendor-logo { display: block; width: auto; max-width: 100%; height: 100%; max-height: 30px; object-fit: contain; object-position: center; }
.vendor-filter-btn span { line-height: 1.2; }
.vendor-filter-btn:hover { background-color: #e9e9e9; }
.vendor-filter-btn.active { background-color: #d1e7fd; border-color: #a6cffc; font-weight: bold; }
.component-options-wrapper { flex-grow: 1; display: flex; flex-direction: column; }
.component-options { display: flex; flex-direction: column; align-items: center; gap: 10px; justify-content: flex-start; min-height: 40px; transition: opacity 0.3s ease, max-height 0.3s ease, visibility 0.3s ease; }
.component-options p.selection-prompt.centered-bold-prompt { text-align: center; font-weight: 700; font-size: 1.1em; width: 100%; padding: 10px 0; margin: 0; }
.component-product-card { border: 1px solid #ccc; padding: 0; cursor: pointer; border-radius: 8px; background-color: #f9f9f9; width: 100%; margin-bottom: 10px; box-sizing: border-box; transition: box-shadow 0.2s, height 0.3s ease-out; display: flex; flex-direction: column; overflow: hidden; }
.component-product-card:last-child { margin-bottom: 0; } .component-product-card:hover { box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.component-product-card .product-card-header { padding: 10px 15px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; background-color: #f1f1f1; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.component-product-card .product-card-header h5 { margin: 0; font-size: 1.0em; text-align: center; flex-grow: 1; width: 100%; font-weight: bold; }
.component-product-card .product-card-header .hub-product-vendor { font-size: 0.8em; color: #666; margin-left: 5px; }
.component-product-card .product-card-body { padding: 10px 15px; flex-grow: 1; } .component-product-card .product-card-body p { margin: 0 0 10px 0; font-size: 0.9em; color: #555; text-align: left; } .component-product-card.expanded .product-card-body p { display: none; }
.component-variant-options { margin-top: 10px; padding-top: 10px; border-top: 1px solid #bbb; display: flex; flex-direction: column; gap: 10px; justify-content: flex-start; min-height: 40px; transition: opacity 0.3s ease, max-height 0.3s ease, visibility 0.3s ease; max-height: 300px; overflow-y: auto; overflow-x: hidden; padding-right: 8px; scrollbar-width: thin; scrollbar-color: #aaa #f0f0f0; }
.component-variant-options::-webkit-scrollbar { width: 8px; } .component-variant-options::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px;} .component-variant-options::-webkit-scrollbar-thumb { background: #aaa; border-radius: 4px;} .component-variant-options::-webkit-scrollbar-thumb:hover { background: #888; }
.component-variant-button { display: flex; align-items: center; width: 100%; padding: 8px; margin: 0; border: 1px solid #ccc; background-color: #fff; color: #333; cursor: pointer; text-align: left; border-radius: 8px; font-size: 0.9em; transition: background-color 0.2s, border-color 0.2s; gap: 10px; }
.component-variant-button .variant-button-image { flex-shrink: 0; width: 80px; height: 80px; object-fit: contain; border: 1px solid #eee; background-color: #f8f8f8; border-radius: 4px; }
.component-variant-button .variant-button-image-placeholder { flex-shrink: 0; width: 80px; height: 80px; border: 1px dashed #eee; background-color: #f8f8f8; display: flex; align-items: center; justify-content: center; font-size: 0.8em; color: #aaa; border-radius: 4px; }
.component-variant-button .variant-button-details { flex-grow: 1; display: flex; flex-direction: column; } .component-variant-button .variant-details { font-weight: bold; margin-bottom: 3px; } .component-variant-button .variant-price { font-weight: normal; font-size: 0.95em; }
.component-variant-button:hover { background-color: #f0f0f0; border-color: #bbb; }
.component-variant-button.selected { border: 2px solid #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); background-color: #e7f3ff; padding: 6px; }
.component-selected-image { margin-top: 0; padding: 10px; border: 1px solid #eee; background-color: #fdfdfd; text-align: center; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .2s ease-in-out; border-radius: 8px; box-sizing: border-box !important; height: 329px; }
.component-selected-image:hover { opacity: 0.85; } .component-selected-image img { max-width: 100%; max-height: 250px; object-fit: contain; } .component-selected-image p { color: #888; font-style: italic; }
.component-selection-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: auto; /* This pushes it to the bottom of the flex container, which is good */
    padding-top: 10px;
    padding-bottom: 10px; /* Added some bottom padding */
    box-sizing: border-box;
    min-height: auto; /* Let the content define the height */
    transition: min-height 0.2s ease-in-out; /* Add a smooth transition */
}
.component-selection-summary > span { display: block; width: 100%; text-align: left; margin-bottom: 8px; line-height: 1.4; margin-top: 0; }
.component-selection-summary .optional-addons-btn {
    display: inline-block;
    align-self: center;
    margin-top: 10px; /* Added a little space above */
    padding: 10px 20px; /* Increased padding for a better size */
    font-size: 1em;
    font-weight: 700; /* Bolder text */
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* Subtle text shadow for depth */
    color: #FFFFFF !important; /* White text */
    background-color: #28a745; /* A nice green, fallback color */
    background-image: linear-gradient(to bottom, #34d058, #28a745); /* Green gradient */
    border: 1px solid #22863a; /* Darker green border */
    border-radius: 6px; /* Slightly more modern border-radius */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2); /* Outer shadow and inner highlight */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.component-selection-summary .optional-addons-btn:hover {
    background-color: #218838;
    background-image: linear-gradient(to bottom, #2baf49, #218838);
    border-color: #1e7e34;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px); /* Slight lift on hover */
}

.component-selection-summary .optional-addons-btn:active {
    background-color: #1e7e34;
    background-image: none; /* Flatten on click */
    border-color: #1a682b;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); /* "Pressed in" effect */
    transform: translateY(1px); /* "Press down" effect */
}

/* --- Final & Polished Vendor Filter Dropdown Styles (v2) --- */

/* 1. LAYOUT: Puts "Vendor:" and dropdown on the same line */
.component-filters .vendor-filter-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.component-filters .vendor-filter-area h4 {
    margin: 0;
    white-space: nowrap;
}

/* 2. DROPDOWN CONTAINER */
.vendor-filter-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
   /* max-width: 350px; */
}

/* 3. TOGGLE BUTTON (Collapsed State) */
.vendor-filter-dropdown .dropdown-toggle .vendor-prompt {
  font-weight: normal; /* The <b> tag in the HTML handles the boldness */
  text-align: center;
  display: block;
  width: 100%;
  color: #2c5cc5; /* You can adjust this color to match your theme's text */
  padding: 5px 0;
  font-size: 1.1em; /* REDUCED font size */
  transition: color 0.2s ease-in-out;
}

.vendor-filter-dropdown .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 42px;
    padding: 5px 12px;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
    text-align: left;
    border-radius: 4px;
    font-size: 1rem;
    -webkit-appearance: none;
    appearance: none;
}

.vendor-filter-dropdown .dropdown-toggle:hover {
    background-color: #f1f1f1;
}

.vendor-filter-dropdown .dropdown-toggle span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.vendor-filter-dropdown .dropdown-toggle .toggle-vendor-logo {
    max-height: 24px;
    max-width: 100px; /* Give a bit more room for wide logos in toggle */
    object-fit: contain;
}

.vendor-filter-dropdown .dropdown-toggle::after {
    content: '▼';
    font-size: 0.7em;
    margin-left: 10px;
    transition: transform 0.2s ease-in-out;
}

.vendor-filter-dropdown.is-open .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* 4. MENU PANEL (Expanded State) */
.vendor-filter-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-top: none;
    z-index: 100;
    overflow-x: hidden;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 0 0 4px 4px;
}

.vendor-filter-dropdown.is-open .dropdown-menu {
    display: block;
}

.vendor-filter-dropdown .dropdown-menu .vendor-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 5. VENDOR BUTTONS (Inside Menu) - THE FIX IS HERE */
.vendor-filter-dropdown .dropdown-menu .vendor-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 0;
    padding: 5px;
    /* --- THIS IS THE FIX --- */
    /* Give buttons a consistent width to create a uniform grid */
    width: 90px;
}

/* Image rule is now correctly constrained by the button's fixed width */
.vendor-filter-dropdown .dropdown-menu .vendor-filter-btn img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.vendor-filter-dropdown .dropdown-menu .vendor-filter-btn span {
    font-weight: 500;
    padding: 0 10px;
}

/* NEW: Styles the "All Vendors" text in the collapsed toggle to look like a button */
.vendor-filter-dropdown .dropdown-toggle .toggle-all-vendors-button {
    display: inline-block;
    padding: 4px 12px;
    font-size: 1.2em;  /* Slightly bigger text */
    font-weight: 600;  /* Bolder (600 is a nice semi-bold) */
    color: #555;      /* A medium-dark gray */
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 4px;
    line-height: 1.5;
}

/* --- Style for "Remove X" Icon on Image (Updated) --- */

/* 1. Ensure the image container is a positioning context */
.component-selected-image {
    position: relative;
}

/* 2. Style and position the icon itself */
.remove-component-icon {
    display: block; /* It should be visible when added */
    position: absolute;
    top: -130px; /* Distance from the top edge */
    right: -70px; /* Distance from the right edge */
    width: 28px;
    height: 28px;
    background-color: rgba(20, 20, 20, 0.7); /* Darker, less blue background */
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 5;
}

.remove-component-icon:hover {
    background-color: #dc3545; /* Red on hover */
    border-color: #FFFFFF;
    transform: scale(1.1);
}

/* 3. Hide the old, bulky button permanently */
.remove-valvestem-button {
    display: none !important;
}

/* --- END: Style for "Remove X" Icon on Image --- */

/* Selected Addons List (Shared by Main Builder and Accessories Nest Box) */
.selected-addons-list { width: 100%; margin-top: 0; margin-bottom: 0; font-size: 0.85em; text-align: left; }
.selected-addons-list ul { list-style-type: none; padding-left: 0; margin: 0; margin-top: 8px; }
.selected-addons-list li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; padding: 4px 0; }
.selected-addon-thumbnail, .selected-addon-thumbnail-placeholder { width: 24px; height: 24px; object-fit: contain; margin-right: 8px; border: 1px solid #eee; border-radius: 3px; flex-shrink: 0; }
.selected-addon-thumbnail-placeholder { background-color: #e0e0e0; }
.selected-addon-name-text { flex-grow: 1; margin-right: 5px; font-size: 0.95em; color: #333; }
.selected-addon-name-text a { text-decoration: none; color: inherit; }
.selected-addon-name-text a:hover { text-decoration: underline; }
.selected-addons-list .remove-selected-addon-btn { background-color: #a0a0a0; border: 1px solid #888; border-radius: 50%; color: white; width: 20px; height: 20px; line-height: 18px; text-align: center; padding: 0; font-size: 15px; font-weight: normal; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.selected-addons-list .remove-selected-addon-btn:hover { background-color: #ffebee; border-color: #ffcdd2; color: #c62828; }
.selected-addons-list .remove-selected-addon-btn:active { background-color: #777; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); }

.component-subsection.change-in-progress { outline: none; }
.position-subsection.selection-made:not(.change-in-progress) .component-options { max-height: 0; opacity: 0; overflow: hidden; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-top: none; visibility: hidden; display: none; }
.position-subsection.selection-made:not(.change-in-progress) .component-filters { opacity: 1; visibility: visible; max-height: none; margin-bottom: 15px; }
.position-subsection:not(.change-in-progress) .cancel-change-button.button--link-style { display: none !important; }
.position-subsection.change-in-progress .component-options { max-height: none; opacity: 1; visibility: visible; display: flex; }
.position-subsection:not(.selection-made):not(.change-in-progress) .component-selected-image { display: none; }
.component-loading { text-align: center; padding: 20px; color: #555; font-style: italic; }
.component-error { text-align: center; padding: 15px; color: #dc3545; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 8px; }
.selection-prompt.centered-bold-prompt { text-align: center; font-weight: bold; font-size: 1.1em; width: 100%; padding: 10px 0; color: #555; }
.conditionally-incompatible { opacity: 0.5; cursor: not-allowed; }
.builder-button.match-pair-button { background-color: #E6F3FF; color: #0056b3; border: 1px solid #b3d7ff; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.builder-button.match-pair-button:hover { background-color: #cce7ff; border-color: #99c2ff; color: #004085; }
.builder-button.cancel-change-button.button--link-style { background-color: #f8f9fa; color: #495057; border: 1px solid #ced4da; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.builder-button.cancel-change-button.button--link-style:hover { background-color: #e9ecef; color: #343a40; border-color: #adb5bd; text-decoration: none; }
.component-action-buttons-container { display: flex; justify-content: center; align-items: center; gap: 21px; margin-top: 0px; margin-bottom: 15px; width: 100%; box-sizing: border-box; }



/* Build Summary */
#build-summary { margin-top: 30px; padding: 15px; background-color: #f9f9f9; border-radius: 8px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; text-align: left; border: 1px solid #e0e0e0; }
#build-summary h2 { margin-bottom: 15px; text-align: center; }
#build-summary h4 { margin-top: 25px; margin-bottom: 15px; border-bottom: 1px solid #bbb; padding-bottom: 10px; text-align: center; width: 100%; font-size: 1.15em; font-weight: 600; color: #333; }
#build-summary h4:first-of-type { margin-top: 0; }
#build-summary ul { list-style: none; padding: 0; margin: 0 0 15px 0; }
#build-summary li { margin-bottom: 8px; display: flex; align-items: flex-start; font-size: 0.95em; }
.summary-item-label-column { flex-basis: 32%; flex-shrink: 0; text-align: left; color: #555; padding-right: 5px; box-sizing: border-box; }
.summary-item-description-column { flex-grow: 1; text-align: left; padding-right: 5px; box-sizing: border-box; min-width: 0; }
.summary-item-description-column strong { font-weight: bold; }
#build-summary .summary-value { flex-basis: 15%; flex-shrink: 0; text-align: right; white-space: nowrap; box-sizing: border-box; padding-left: 5px; }
.summary-specs-table { display: table; width: 100%; table-layout: fixed; margin-bottom: 15px; font-size: 0.95em; border-collapse: collapse; }
.summary-table-row { display: table-row; }
.summary-table-header { font-weight: bold; background-color: #f0f0f0; }
.summary-table-cell { display: table-cell; padding: 6px 8px; vertical-align: top; border-bottom: 1px solid #bbb; box-sizing: border-box; }
.summary-table-row:last-child .summary-table-cell { border-bottom: none; }
.summary-table-cell.label-col { width: 40%; text-align: left; color: #555; padding-left: 0; }
.summary-table-cell.value-col { width: 30%; text-align: center; font-weight: bold; }
#build-summary .summary-table-header .summary-table-cell.value-col { text-align: center !important; font-weight: bold; }
.summary-table-header .summary-table-cell { border-bottom: 1px solid #a00000; }
.summary-specs-table.summary-layout-single .summary-table-row .summary-table-cell.value-col:last-child { width: 60%; text-align: center; }
.summary-specs-table.summary-layout-single .summary-table-header .summary-table-cell.value-col:last-child { text-align: center; }
#build-summary .summary-table-cell:empty::after { content: "-"; color: #999; }
#build-summary #subtotal-display { border-top: 1px solid #a0a0a0; padding-top: 10px; margin-top: 15px; text-align: right; font-weight: bold; font-size: 1.2em; }


/* --- Styles for Discount Offer Feature --- */

/* The banner that appears at the top */
#discount-offer-banner {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: .25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#discount-offer-banner p {
    margin: 0;
    font-size: 1.1em;
    font-weight: 500;
}

#discount-offer-banner .builder-button {
    flex-shrink: 0; /* Prevents the button from shrinking */
}

/* Style for unchecked items in the build summary */
.build-summary ul li.is-not-included,
.build-summary ul li.is-not-included span {
    text-decoration: line-through;
    color: #777;
    opacity: 0.8;
}

/* Ensure the label and checkbox inside remain interactive and visually correct */
.build-summary ul li.is-not-included label,
.build-summary ul li.is-not-included input {
    text-decoration: none; /* Remove strikethrough from the interactive parts */
    opacity: 1; /* Keep the checkbox fully opaque */
}

/* The confirmation message in the build summary */
.summary-discount-info {
    font-weight: 600;
    color: #28a745; /* A success green color */
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ccc;
}

.summary-discount-info .remove-discount-link {
    font-weight: 400;
    font-size: 0.8em;
    color: #6c757d;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 8px;
}

/* Styling for the strikethrough price in the summary */
#subtotal-value strike {
    color: #6c757d;
    font-weight: 400;
    margin-right: 8px;
}

/* --- Styles for Discount Offer in Summary --- */
#summary-discount-offer-container {
    padding: 10px 0;
    margin-top: 15px;
    border-top: 1px solid #e5e5e5;
    text-align: center;
}

#summary-discount-offer-container p {
    margin-bottom: 8px;
}

/* Main Builder Addons Modal Styles */
.addons-modal { display: none; position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
.addons-modal-content { background-color: #fefefe; margin: auto; padding: 25px; border: 1px solid #bbb; border-radius: 8px; width: 90%; max-width: 650px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.2); max-height: 85vh; display: flex; flex-direction: column; }
.addons-modal-close-btn { color: #777; font-size: 32px; font-weight: bold; position: absolute; top: 10px; right: 15px; background: none; border: none; cursor: pointer; line-height: 1; padding: 0; }
.addons-modal-close-btn:hover, .addons-modal-close-btn:focus { color: #333; text-decoration: none; }
#addons-modal-title { margin-top: 0; margin-bottom: 20px; text-align: center; font-size: 1.6em; font-weight: 600; color: #333; }
.addons-modal-body { margin-bottom: 20px; overflow-y: auto; flex-grow: 1; min-height: 150px; padding-right: 10px; scrollbar-width: thin; scrollbar-color: #aaa #f0f0f0; }
.addons-modal-body::-webkit-scrollbar { width: 8px; } .addons-modal-body::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 4px;} .addons-modal-body::-webkit-scrollbar-thumb { background: #aaa; border-radius: 4px;} .addons-modal-body::-webkit-scrollbar-thumb:hover { background: #888; }
.addons-modal-footer { text-align: right; border-top: 1px solid #ddd; padding-top: 20px; }
#addons-modal-done-btn.builder-button { padding: 10px 25px; font-size: 1em; }
.addon-item-card { border: 1px solid #e0e0e0; padding: 15px; margin-bottom: 15px; border-radius: 8px; display: flex; align-items: flex-start; gap: 15px; background-color: #fff; }
.addon-item-image { flex-shrink: 0; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; border: 1px solid #eee; border-radius: 4px; overflow: hidden; }
.addon-item-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.addon-item-details { flex-grow: 1; min-width: 0; }
.addon-item-details h4 { margin-top: 0; margin-bottom: 8px; font-size: 1.2em; font-weight: 600; color: #333; }
.addon-item-details p { margin-bottom: -15px; font-size: 1em; color: #555; }
.addon-item-variants-selection { margin-bottom: 10px; }
.addon-variant-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.addon-variant-buttons button.active { background-color: #007bff; color: white; border-color: #0056b3; }
.addon-variant-selector select, .accessory-model-variant-select { display: block; width: 100%; padding: 10px 12px; margin-top: 4px; font-size: 0.95em; font-weight: 700; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 6px; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; }
.addon-variant-selector select:focus, .accessory-model-variant-select:focus { border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); }
.addon-variant-selector select:disabled, .accessory-model-variant-select:disabled { background-color: #e9ecef; opacity: 1; cursor: not-allowed; }
.addon-option-group { margin-bottom: 15px; }
.addon-option-group label { display: block; margin-bottom: 5px; font-weight: 500; font-size: 0.9em; color: #333; }
.addon-item-actions { text-align: right; margin-top: 10px; }
.addon-item-actions .builder-button { padding: 6px 12px; font-size: 0.9em; border-radius: 6px; }
.addon-item-actions .add-addon-btn { background-color: #28a745; color: white; border-color: #1e7e34; }
.addon-item-actions .add-addon-btn:hover { background-color: #218838; border-color: #1c6c2e; }
.addon-item-actions .remove-addon-btn { background-color: #dc3545; color: white; border-color: #bd2130; }
.addon-item-actions .remove-addon-btn:hover { background-color: #c82333; border-color: #b81f2d; }
.addon-item-actions .addon-added-indicator { color: #28a745; font-weight: bold; font-size: 0.9em; }
.addon-item-card .addon-item-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

/* Main Builder Consistent Width Styling */
:root { --builder-content-max-width: 1100px; }
#step-1 .step-1-selection-container, #step-2 #step-2-spec-container, #step-2 .step-2-selection-container { width: 100%; max-width: var(--builder-content-max-width); margin-left: auto; margin-right: auto; padding: 15px; box-sizing: border-box; }
#step-1 .step-1-selection-container, #step-2 #step-2-spec-container { padding: 25px; }


@media (max-width: 480px) { /* Further mobile refinement for main builder summary/nav */
    .summary-item-label-column { flex-basis: 40%; }
    #build-summary .summary-value { flex-basis: auto; min-width: 60px; }
    .builder-navigation {
    display: flex;
    justify-content: flex-start; /* This aligns items to the LEFT */
    gap: 15px;
    width: 100%;
    margin-top: 10px; /* FURTHER REDUCED space above the buttons */
    align-items: center; /* Vertically align items */
}
    .builder-navigation button { width: 100%; margin: 0; flex-grow: 0; flex-shrink: 0; flex-basis: auto; min-width: 0; margin-bottom: 0 !important; box-sizing: border-box; }
    .builder-navigation .reset-build-button { order: 1; margin-right: 0; }
    .builder-navigation .prev-step-button { order: 2; margin-right: 0; }
    .builder-navigation .next-step-button, .builder-navigation .add-to-cart-button { order: 3; min-width: 0; }
}

/* Save/Load Functionality Styles (Main Builder) */
.builder-save-load-controls { display: flex; justify-content: center; align-items: center; gap: 25px; text-align: center; margin-bottom: 1rem; margin-top: 2rem; padding-top: 10px; }
.saved-builds-list { list-style-type: none; padding: 0; margin: 0; }
.saved-build-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee; }
.saved-build-item:last-child { border-bottom: none; }
.saved-build-info { flex-grow: 1; margin-right: 15px; }
.saved-build-name { display: block; font-weight: 600; font-size: 1.05em; color: #333; margin-bottom: 3px; }
.saved-build-date { display: block; font-size: 0.8em; color: #777; }
.saved-build-actions button { margin-left: 8px; padding: 6px 12px; font-size: 0.9em; }
#my-saved-builds-btn, #save-current-build-btn{
    background-color: #dcd6f4 !important;
    border: 1px solid #FFFFFF !important;
}
:is(#my-saved-builds-btn, #save-current-build-btn):hover {
    background-color:rgb(202, 190, 243) !important;
}

/* General Builder Modal Styles (for save/load modals in main builder) */
.builder-modal { display: none; position: fixed; z-index: 9000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 20px; }
.builder-modal-content { background-color: #ffffff; padding: 25px 30px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); min-width: 300px; max-width: 500px; width: 90%; text-align: left; position: relative; }
.builder-modal-title { margin-top: 0; margin-bottom: 20px; font-size: 1.5em; font-weight: 600; text-align: center; color: #333333; }
.builder-modal-body p { margin-top: 0; margin-bottom: 15px; line-height: 1.6; color: #555555; }
.builder-modal-body p:last-child { margin-bottom: 0; }
.builder-modal-footer { margin-top: 25px; padding-top: 20px; border-top: 1px solid #eeeeee; display: flex; justify-content: flex-end; gap: 10px; }
.builder-modal .builder-button { padding: 10px 20px; font-size: 1em; --buttons-border-opacity: 1 !important; }
.builder-modal-close-btn { position: absolute; top: 10px; right: 15px; font-size: 1.8em; font-weight: bold; color: #aaaaaa; background: none; border: none; padding: 0; cursor: pointer; line-height: 1; }
.builder-modal-close-btn:hover { color: #333333; }


/* --- ACCESSORIES PAGE SPECIFIC STYLES START --- */
#accessories-builder-container { max-width: 1200px; /* Or your theme's standard page width */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px; /* Example page padding */
    padding-right: 15px; /* Example page padding */
}
#accessories-builder-header h1 { text-align: center; margin-bottom: 10px; font-size: 2em; color: #333; }
#accessories-for-build-identifier { text-align: center; color: #666; margin-bottom: 25px; font-size: 1.1em; }
#accessories-loading-overlay { position: relative; min-height: 200px; display: flex; justify-content: center; align-items: center; background-color: #f8f8f8; border-radius: 8px; }
#accessories-content-area {
    background-color: #fff;
    border: 1px solid #ddd; /* Example */
    border-radius: 8px;
    padding: 20px;
    margin-top: 0; /* If summary has margin-bottom */
    width: 100%; /* Make them take full width of their parent container */
    box-sizing: border-box; /* Important if they have padding/border */
    /* max-width: none; /* Remove any individual max-width if you want them to match the parent's width */
}

/* Accessories Page: Top & Bottom Footer Buttons */
.accessories-builder-footer { display: flex; justify-content: center; align-items: center; gap: 15px; padding: 15px 0; }
#accessories-builder-top-footer { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
#accessories-builder-footer { margin-top: 35px; padding-top: 20px; border-top: 1px solid #eee; }
/* Buttons inherit from global .builder-button, .button--secondary, .builder-button--cta */

/* Accessories Page: Global Summary - Columnar Layout */
.selected-accessories-summary.global-summary-section {
    background-color: #f0f0f0; 
    border: 1px solid #e0e0e0; 
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px; /* Space between summary and content area */
}

.selected-accessories-summary #selected-accessories-list-container {
    max-height: none; /* Or adjust if still needed */
    overflow-y: visible; */ /* If max-height removed */
}

.summary-table-row-like {
    display: flex;
    align-items: center; /* Vertically align items in the row */
    padding: 10px 0;
    border-bottom: 1px dashed #cfe2ff; /* Or #ddd like main builder */
}
.summary-table-row-like:last-child {
    border-bottom: none;
}

.summary-table-row-like .summary-cell {
    padding: 0 8px; /* Spacing between cells */
    box-sizing: border-box;
}
.summary-table-row-like .summary-cell:first-child { padding-left: 0; }
.summary-table-row-like .summary-cell:last-child { padding-right: 0; }

.summary-cell.item-position {
    flex-basis: 15%; /* Adjust width */
    min-width: 15%; /* Or a pixel value if preferred, e.g., min-width: 80px; */
    flex-shrink: 0;
    flex-grow: 0; /* Add this to prevent it from growing or shrinking */
    text-align: left; /* Or center */
    font-style: italic;
    color: #555;
}

/* Make sure the text itself doesn't cause an issue if it's empty */
.summary-cell.item-position:empty {
    visibility: hidden; /* This would hide it but keep space if that helps alignment */
}

.summary-cell.item-details {
    flex-grow: 1; /* Takes up remaining space */
    display: flex;
    align-items: center;
    gap: 10px;
}
.summary-cell.item-details .selected-accessory-thumbnail { /* Already styled, but confirm size */
    width: 40px; height: 40px; flex-shrink: 0;
}
.summary-cell.item-details .selected-accessory-name {
    font-weight: normal; /* Or bold if preferred */
}

.summary-cell.item-quantity {
    flex-basis: 80px; /* Fixed width for quantity input */
    flex-shrink: 0;
    text-align: center;
}
.summary-cell.item-quantity .selected-accessory-quantity-input {
    width: 50px; /* Or 100% of its cell if cell width is small */
    /* padding: 5px; */ /* Already styled */
}

.summary-cell.item-price {
    flex-basis: 100px; /* Adjust width */
    flex-shrink: 0;
    text-align: right;
    font-weight: bold;
}

.summary-cell.item-remove {
    flex-basis: 40px; /* Width for remove button */
    flex-shrink: 0;
    text-align: right;
}
.summary-cell.item-remove .remove-selected-accessory-btn {
    /* Already styled, ensure it fits */
}

/* Style for the discount nudge message */
.summary-discount-nudge {
    font-style: italic;
    color: #555;
    background-color: #f9f9f9;
    border: 1px dashed #ccc;
    padding: 10px;
    margin-top: 15px;
    text-align: center;
}

/* Style for the applied discount message */
.summary-discount-info {
    color: #008000; /* Green */
    font-weight: bold;
    background-color: #f0fff0;
    border: 1px solid #c0e0c0;
    padding: 10px;
    margin-top: 15px;
    text-align: center;
}

/* Target the summary container to make the subtotal and message align better */
#build-summary {
    display: flex;
    flex-direction: column;
}

#summary-content {
    order: 1; /* Renders first */
}

#subtotal-display {
    order: 3; /* This will now be the container for the subtotal */
    margin-top: 15px;
    font-size: 1.2em; /* Make subtotal more prominent */
}

/* The container for our new discount messages */
.summary-discount-container {
  order: 2; /* Renders between content and subtotal */
}

/* Accessories Page: Global Selected Accessories Summary - REVISED STYLING */
#selected-accessories-summary {
    background-color: #f9f9f9; 
    border: 1px solid #e0e0e0;   
    border-radius: 8px;
    padding: 20px;
    margin-top: 30px; 
    margin-bottom: 30px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    width: 100%; 
    /* max-width: 1100px; */ /* REMOVE OR COMMENT OUT THIS LINE */
    /* Or, if you want it to exactly match the container's max width: */
    /* max-width: 1200px; */ /* But width: 100% of a 1200px parent should achieve this */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

#selected-accessories-summary h2 {
    text-align: center;
    font-size: 1.6em; /* Was 1.6em, main builder summary h2 is often larger */
    margin-top: 0;
    margin-bottom: 20px;
    /* color: #007bff; /* Original Blue text */
    color: #333; /* Standard dark text for heading */
}
.selected-accessories-list-container { max-height: 300px; overflow-y: auto; padding-right: 10px; }
.selected-accessories-list-container .summary-empty-message { text-align: center; color: #888; font-style: italic; margin-top: 10px; }
.selected-accessory-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed #cfe2ff; position: relative; /* Added for absolute positioning of remove button */ }
.selected-accessory-item:last-child { border-bottom: none; }
.selected-accessory-item-details { display: flex; align-items: center; flex-grow: 1; gap: 10px; }
.selected-accessory-thumbnail { width: 40px; height: 40px; object-fit: contain; border: 1px solid #ddd; border-radius: 4px; flex-shrink: 0; }
.selected-accessory-name { font-weight: bold; flex-grow: 1; color: #333; }
.selected-accessory-name a { text-decoration: none; color: inherit; }
.selected-accessory-name a:hover { text-decoration: underline; }
.selected-accessory-quantity-input { width: 50px; padding: 5px; border: 1px solid #ccc; border-radius: 4px; text-align: center; font-size: 0.9em; flex-shrink: 0; margin-left: 10px; }
.selected-accessory-price { font-weight: bold; font-size: 1em; color: #000; margin-left: 10px; flex-shrink: 0; white-space: nowrap; }
.remove-selected-accessory-btn { background-color: #dc3545; border: none; border-radius: 50%; color: white; width: 24px; height: 24px; line-height: 24px; text-align: center; padding: 0; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.2s ease; flex-shrink: 0; margin-left: 10px; }
.remove-selected-accessory-btn:hover { background-color: #c82333; }
.loamlabs-accessories__summary-total {
    text-align: right;
    margin-top: 20px;
    font-size: 1.4em; /* Was 1.4em, main builder subtotal is 1.2em but bold */
    font-weight: bold; /* Make it bold like main builder subtotal */
    /* color: #000; */ /* Already black, fine */
    border-top: 1px solid #a0a0a0; /* Add separator line like main builder */
    padding-top: 15px; /* Add padding above total line */
}

/* Accessories Page: Category Sections */
.accessory-category-section { margin-bottom: 40px; padding-top: 20px; border-top: 1px solid #ddd; }
.accessory-category-section:first-of-type { padding-top: 0; border-top: none; }
.accessory-category-section h2 { text-align: center; font-size: 1.8em; margin-top: 0; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 2px solid #eee; color: #000; }

/* Accessories Page: Vendor Filters */
.accessory-vendor-filters .vendor-filter-options {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    gap: 8px;
    justify-content: center; /* Center the wrapped buttons */
    padding-bottom: 10px;
    /* overflow-x: auto; /* REMOVED - No longer needed with wrapping */
}

/* Accessories Page: F/R Column Layout */
.accessory-position-wrapper { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; width: 100%; }
.accessory-position-wrapper.build-type-wheel-set > .accessory-subsection { flex: 1 1 calc(50% - 10px); min-width: 300px; display: flex; flex-direction: column; align-self: flex-start; box-sizing: border-box; border: 1px solid #eee; padding: 15px; border-radius: 5px; }
.accessory-position-wrapper.build-type-single > .accessory-subsection { flex: 1 1 100%; max-width: 100%; display: flex; flex-direction: column; box-sizing: border-box; border: 1px solid #eee; padding: 15px; border-radius: 5px; }
.accessory-subsection h4 { text-align: center; margin-top: 0; margin-bottom: 20px; padding-bottom: 5px; border-bottom: 1px solid #ddd; color: #333; font-size: 1.2em; } /* Accessories page subsection header */
.accessory-spec-context { font-size: 0.8em; color: #777; font-weight: normal; }
.accessory-options { display: flex; flex-direction: column; gap: 15px; padding: 5px; }
.accessory-options .accessory-prompt { text-align: center; color: #888; font-style: italic; width: 100%; margin-top: 20px; }

/* --- ACCESSORIES PAGE: MODEL CARD STYLING (V1.2.6 REFINEMENT) --- */

/* Overall Model Card (when "All" vendors) */
.accessory-model-card {
    border: 1px solid #cccccc; /* Match main builder card border */
    border-radius: 8px;
    background-color: #ffffff; /* Base background */
    margin-bottom: 10px;
    overflow: hidden; /* Important for containing the header */
    /* display: flex; and flex-direction: column; are good from parent */
}

/* Accessories Page: Variant display inside an Expanded Model Card - V1.2.7 */
.accessory-variant-card-in-model {
    display: flex;
    flex-direction: column;
    align-items: center;    /* This centers the *internal content* of each variant card */
    gap: 8px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fff;
    margin-bottom: 10px; */ /* Rely on parent's 'gap' for vertical spacing */
    width: auto;
    max-width: 350px;
    box-sizing: border-box;
    margin-left: auto !important;   /* ADD THIS with !important */
    margin-right: auto !important;  /* ADD THIS with !important */
}
/* --- NEW: Style for individual variant cards with a quantity > 0 --- */

/* Select the entire variant card IF it contains an input with the .has-quantity class */
.accessory-variant-card-in-model:has(.accessory-quantity-input.has-quantity) {
    background-color: #e6f3ff; 
    border-color: #b8daff;     /* A slightly lighter border for definition */
}

/* Optional: Make the link slightly dimmer on hover to show interaction */
.accessory-variant-card-in-model:has(.accessory-quantity-input.has-quantity) .variant-in-model-title a:hover {
    color: #007bff;
}

.accessory-variant-card-in-model:last-child { margin-bottom: 0; }
.variant-in-model-image-wrapper { flex-shrink: 0; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border: 1px solid #eee; background-color: #f8f8f8; border-radius: 4px; overflow: hidden; margin-bottom: 8px; /* Added space below image */ }
.variant-in-model-thumbnail { max-width: 100%; max-height: 100%; object-fit: contain; }
.variant-in-model-placeholder-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.8em; color: #aaa; }
.variant-in-model-title-price-line { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin-bottom: 5px; }
.variant-in-model-title { font-weight: 600; font-size: 0.95em; color: #222; line-height: 1.3; text-align: left; margin: 0; flex-grow: 1; padding-right: 5px; }
.variant-in-model-title a { text-decoration: none; color: inherit; }
.variant-in-model-title a:hover { text-decoration: underline; }
.variant-in-model-price { font-weight: bold; font-size: 0.9em; color: #000; margin: 0; text-align: right; white-space: nowrap; flex-shrink: 0; }
.variant-in-model-unit-desc { font-size: 0.8em; color: #666; margin: 0 0 8px 0; text-align: center; width: 100%; }
.variant-in-model-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 5px; width: 100%; }
.variant-in-model-actions .accessory-quantity-input { width: 50px; margin: 0; padding: 6px; }
.variant-in-model-actions .add-to-list-btn { width: auto; flex-grow: 0; padding: 6px 12px; font-size: 0.85em; margin: 0; white-space: nowrap; }

/* Accessories Page: Per-Category "Nest Box" Summary */
.accessory-category-summary { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; display: none; }
/* .selected-addons-list styles are shared from main builder */

/* Model Card Header - THIS IS THE GREY BAR */
.accessory-model-card .accessory-model-card-header {
    background-color: #f0f0f0;  /* Light grey background, adjust to match Step 3 */
    padding: 0;                 /* Remove outer padding */
    margin: 0;                  /* Remove outer margin */
    cursor: pointer;
    display: block;             /* Ensure it takes full width */
    border-bottom: 1px solid #e0e0e0; /* Subtle line below header if expanded */
}
.accessory-model-card.expanded .accessory-model-card-header { /* Slightly different when expanded */
    border-bottom: 1px solid #d0d0d0;
}
.accessory-model-card .accessory-model-card-header:hover {
    background-color: #e0e0e0; /* Darker on hover */
}


/* --- ACCESSORIES PAGE: QUANTITY STEPPER STYLING --- */
.accessory-quantity-stepper {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden; 
}

.accessory-quantity-stepper .accessory-quantity-input { /* Existing rule from your SS4 line 408 */
    width: 40px; 
    height: 30px; 
    text-align: center;
    border: none;
    padding: 5px;
    font-size: 0.9em;
    -moz-appearance: textfield; 
    box-sizing: border-box;
}

.accessory-quantity-stepper .accessory-quantity-input::-webkit-outer-spin-button,
.accessory-quantity-stepper .accessory-quantity-input::-webkit-inner-spin-button { /* Existing rule from your SS4 line 419 */
    -webkit-appearance: none;
    margin: 0; 
}

/* +++ ADD THIS NEW RULE +++ */
.accessory-quantity-stepper .accessory-quantity-input.has-quantity {
    background-color: #ffffff; /* CHANGED from light green to white */
    font-weight: bold; /* Make number bold when it has quantity */
}
/* +++++++++++++++++++++++++ */

.accessory-quantity-stepper .quantity-stepper-btn {
    background-color: #f0f0f0;
    border: none;
    color: #333;
    cursor: pointer;
    font-size: 1.2em; /* Slightly larger font for +/- might also help perceived size */
    font-weight: bold;
    width: 55px; /* quantity button width */
    height: 37px; 
    line-height: 28px; /* May need slight adjustment if font-size changes */
    padding: 0 5px; /* Added some horizontal padding */
    transition: background-color 0.2s;
    box-sizing: border-box;
}
.accessory-quantity-stepper .quantity-stepper-btn:hover {
    background-color: #e0e0e0;
}
.accessory-quantity-stepper .quantity-stepper-btn:active {
    background-color: #d0d0d0;
}
.accessory-quantity-stepper .quantity-stepper-btn:disabled {
    background-color: #f8f8f8;
    color: #bbb;
    cursor: not-allowed;
}

.accessory-quantity-stepper .decrease-qty {
    border-right: 1px solid #ccc; /* Separator line */
    border-top-left-radius: 5px;  /* Match parent radius */
    border-bottom-left-radius: 5px; /* Match parent radius */
}
.accessory-quantity-stepper .increase-qty {
    border-left: 1px solid #ccc;  /* Separator line */
    border-top-right-radius: 5px; /* Match parent radius */
    border-bottom-right-radius: 5px;/* Match parent radius */
}

/* Adjust placement within variant card actions */
.variant-in-model-actions {
    /* display: flex; align-items: center; justify-content: center; gap: 10px; */ /* Already there */
    /* margin-top: 5px; width: 100%; */ /* Already there */
}

/* Model Name Text (H4) within the Header */
.accessory-model-card .accessory-model-card-header h4 {
    padding: 10px 15px;
    margin: 0;
    font-size: 1em;
    font-weight: 600;
    color: #333;
    text-align: center; /* CHANGED from left to center */
    text-decoration: none !important;
    line-height: 1.3;
}

/* "Click to view options..." prompt styling */
.accessory-model-card .accessory-model-click-prompt {
    color: #555;
    font-weight: normal;
    font-size: 0.8em;     /* Smaller font size */
    margin: 0;            /* Remove default paragraph margin */
    padding: 6px 12px;    /* Tighter padding, aligned with header text */
    text-align: left;     /* Align to the left */
    cursor: pointer;
    display: block;       /* Ensure it's visible when not expanded */
    line-height: 1.3;
}
.accessory-model-card .accessory-model-click-prompt:hover {
    color: #007bff;
}

/* Body of the Model Card (contains prompt or variants) */
.accessory-model-card .accessory-model-card-body {
    padding: 0; /* Remove padding here, prompt and variant container will handle their own */
    text-align: left;
}

/* --- START: Fix for scrollable variant lists in accessories builder (V2) --- */

.accessory-variant-options-container {
    min-height: 140px; /* Ensures enough space for at least one full item, preventing cut-offs */
    max-height: 450px; /* Increased height to show 3-4 items before scrolling */
    overflow-y: auto;
    padding-right: 8px; 
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.accessory-variant-options-container::-webkit-scrollbar {
    width: 8px;
}

.accessory-variant-options-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.accessory-variant-options-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.accessory-variant-options-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* --- END: Fix for scrollable variant lists --- */

/* --- START: Fix for narrow grid-style accessory cards (e.g., Tools) --- */

.accessory-grid-options {
    flex-direction: column; /* Stack items vertically */
    align-items: stretch;   /* Make items take full width of their container */
    gap: 15px;
}

.accessory-grid-options .accessory-model-card {
    flex-basis: auto !important;
    max-width: 100% !important; /* Allow the card to be full-width */
    width: 100% !important;
    min-width: 0 !important;
    margin-left: auto;
    margin-right: auto;
}

/* --- END: Fix for narrow grid-style accessory cards --- */

/* Container for expanded variants - centering its children */
.accessory-model-card .accessory-variant-options-container {
    margin-top: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center; /* This will center the children (variant cards) */
    gap: 8px;
    width: 100%;         /* Make this container take full available width */
    box-sizing: border-box; /* Include padding in the 100% width calculation */
    background-color: #ffffff;
}

/* Ensure elements are hidden/shown correctly on expand/collapse */
.accessory-model-card.expanded .accessory-model-click-prompt { display: none; }
.accessory-model-card:not(.expanded) .accessory-variant-options-container { display: none; }

/* Hiding elements not used in the *initial* model card view (header + prompt) */
.accessory-model-card:not(.expanded) .accessory-card-image,
.accessory-model-card:not(.expanded) .accessory-card-details .accessory-variant-select,
.accessory-model-card:not(.expanded) .accessory-card-details .accessory-quantity-input,
.accessory-model-card:not(.expanded) .accessory-card-details .add-to-list-btn,
.accessory-model-card:not(.expanded) .accessory-card-details .accessory-price-display {
    display: none; /* Add the missing rule content */
} 

/* Body of the Model Card */
.accessory-model-card .accessory-model-card-body {
    padding: 0; /* No padding on the body if prompt handles its own */
    text-align: left;
}

/* Image wrapper (thumbnail) - remains centered at the top */
.variant-in-model-image-wrapper {
    flex-shrink: 0;
    width: 70px; 
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    background-color: #f8f8f8;
    border-radius: 4px;
    overflow: hidden;
    /* margin-bottom: 8px; /* Space below image before title/price line */
}
.variant-in-model-thumbnail { max-width: 100%; max-height: 100%; object-fit: contain; }
.variant-in-model-placeholder-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.8em; color: #aaa; }
  
.variant-in-model-details-actions-wrapper { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.variant-in-model-details { text-align: left; }
.variant-in-model-title { font-weight: 600; font-size: 0.95em; margin: 0 0 3px 0; color: #222; line-height: 1.3; text-align: left; }
.variant-in-model-unit-desc { font-size: 0.8em; color: #666; margin: 0 0 5px 0; text-align: left; }
.variant-in-model-price { font-weight: bold; font-size: 0.9em; color: #000; margin: 0; text-align: left; }
.variant-in-model-actions { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.variant-in-model-actions .accessory-quantity-input { width: 50px; margin: 0; padding: 6px; }
.variant-in-model-actions .add-to-list-btn { width: auto; flex-grow: 1; padding: 6px 10px; font-size: 0.85em; margin: 0; white-space: nowrap; align-self: flex-start; }

/* Accessories Page: Grid Layout */
.accessory-grid-wrapper { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; justify-content: center; width: 100%; }
.accessory-grid-options { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 20px; 
    width: 100%; 
    justify-content: center; 
}
.accessory-grid-options .accessory-card,
.accessory-grid-options .accessory-model-card {
    flex-grow: 0; flex-shrink: 1; flex-basis: calc(33.333% - 14px); max-width: calc(33.333% - 14px);
    min-width: 280px; margin-bottom: 0; box-sizing: border-box; width: auto; 
}
.accessory-grid-options .accessory-card:only-child, 
.accessory-grid-options .accessory-model-card:only-child {
    flex-basis: auto; 
    max-width: 450px; 
    /* min-width still applies */
}

/* Accessories Page: Per-Category "Nest Box" Summary (uses .selected-addons-list base styles) */
.accessory-category-summary { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; display: none; }
/* Thumbnail size in nest box is already handled by general .selected-addon-thumbnail in shared .selected-addons-list rules */

/* Accessories Page: Responsive Adjustments */
@media (max-width: 991px) { /* Tablet breakpoint */
    .accessory-grid-options .accessory-card,
    .accessory-grid-options .accessory-model-card { flex-basis: calc(50% - 10px); max-width: calc(50% - 10px); }
}
@media (max-width: 767px) { /* Mobile breakpoint */
    .accessories-builder-container { padding: 15px; }
    .accessory-position-wrapper.build-type-wheel-set > .accessory-subsection { flex-basis: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
    .accessory-position-wrapper.build-type-wheel-set > .accessory-subsection[data-position="Rear"] { border-left: none; padding-left: 15px; border-top: 1px solid #eee; margin-top: 20px; padding-top: 20px; }
    
    .accessory-grid-options { flex-direction: column; align-items: center; } /* Stack grid items */
    .accessory-grid-options .accessory-card,
    .accessory-grid-options .accessory-model-card {
        flex-basis: 100% !important; max-width: 100% !important; width: 100% !important; min-width: 0 !important;
        display: block !important; margin-left: auto; margin-right: auto;
    }
    
    .accessories-builder-footer { flex-direction: column; gap: 10px; }
    .accessories-builder-footer .button.builder-button { width: 100%; max-width: none; }
    .selected-accessory-item { flex-direction: column; align-items: flex-start; gap: 5px; }
    .selected-accessory-item-details { width: 100%; justify-content: space-between; }
    .selected-accessory-quantity-input, .selected-accessory-price { margin-left: 0; margin-right: 5px; }
    .remove-selected-accessory-btn { position: static; margin-left: auto; } /* Reverted from absolute for mobile summary */
}

.position-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.75em;
    font-weight: bold;
    border-radius: 4px;
    margin-left: 5px;
    line-height: 1;
    vertical-align: middle; /* Or baseline */
}
.position-front {
    background-color: #d1e7fd; /* Light blue */
    color: #004085; /* Dark blue */
    border: 1px solid #b8daff;
}
.position-rear {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green */
    border: 1px solid #c3e6cb;
}
  

/* --- ACCESSORIES PAGE SPECIFIC STYLES END --- */

/* --- Styles for Edit Mode Loading Overlay --- */
#builder-edit-loading-overlay {
  display: none; /* Hidden by default */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

#builder-edit-loading-overlay .loading-spinner {
  /* You can reuse your existing spinner styles or use this simple one */
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

#builder-edit-loading-overlay p {
  font-size: 1.2em;
  font-weight: 500;
  color: #333;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* --- START: FINAL & HIGH-SPECIFICITY CSS for ENTIRE WEIGHT FEATURE --- */

/* Part 1: Styling for the buttons in the SELECTION LIST */
/* ================================================================= */

#variant-builder-container .component-variant-button {
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
  width: 100% !important;
  padding: 8px !important;
}

#variant-builder-container .variant-button-image-container {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#variant-builder-container .variant-button-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#variant-builder-container .variant-button-details {
  flex-grow: 1;
}

#variant-builder-container .variant-button-stats {
  flex-shrink: 0;
  width: 120px;
  padding-left: 10px;
  text-align: right;
  font-size: 12px;
  color: #333;
}

#variant-builder-container .variant-button-stats .stat-item strong {
  color: #000;
  font-weight: 600;
}


/* Part 2: Styling for the large SELECTED COMPONENT view */
/* ================================================================= */

#variant-builder-container .component-selected-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 280px;
  padding: 10px;
}

#variant-builder-container .selected-image-wrapper {
  position: relative !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#variant-builder-container .selected-image-wrapper img {
  max-width: 255px;
  object-fit: contain;
  margin-bottom: 25px;
}

#variant-builder-container .selected-image-wrapper .selected-component-weight-display {
  position: absolute !important;
  bottom: 8px;
  right: 8px;
  left: auto !important;
  transform: none !important;
  background-color: rgba(255, 255, 255, 0.8) !important;
  color: #333 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-align: right !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

#variant-builder-container .selected-image-wrapper .selected-component-weight-display:has(br) {
    white-space: normal !important;
    text-align: center !important;
}

/* --- START: FINAL & DEFINITIVE CSS for Build Summary Layout --- */

.build-summary {
  display: flex;
  flex-direction: column;
}

.build-summary-main-content {
  flex-grow: 1;
}

/* This is the key container for the bottom row */
.build-summary-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e5e5;
  width: 100%;
  gap: 20px; /* Add a gap for safety */
}

/* Group for the buttons on the left */
.summary-actions-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0; /* Prevent this group from shrinking */
}

#builder-save-load-controls {
  display: flex;
  gap: 10px;
}

.summary-actions-left .button {
  padding: 0.7rem 1.1rem;
  font-size: 1.5rem;
}

/* This is the new wrapper for the subtotal */
.summary-subtotal-wrapper {
  flex-grow: 1; /* CRITICAL: This tells the wrapper to take up all remaining space */
  display: flex;
  justify-content: flex-end; /* This pushes its child (the subtotal) to the far right */
}

.summary-subtotal {
  text-align: right;
  font-size: 2.2rem;
  font-weight: bold;
}

.summary-subtotal span {
    display: inline-block;
    margin-left: 10px;
}

/* Main Add to Cart button styles (these are correct) */
.nav-bottom-step3 {
  width: 100%;
  margin-top: 1.5rem;
}

.nav-bottom-step3 .button {
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
}

/* --- END: FINAL CSS --- */

/* --- START: CSS for Step 3 UX Enhancement Plan (SECTION 6) --- */

/* Wrapper for the H2 Title and the Back Button - REVISED */
.step-3-header-wrapper {
    position: relative; /* This is the key for alignment */
    display: flex;
    justify-content: center; /* This will now perfectly center the H2 */
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    padding: 10px 0; /* Add a little vertical space */
}
.step-3-header-wrapper h2 {
    margin: 0;
    padding: 0;
}
.step-3-header-wrapper .prev-step-button {
    position: absolute; /* Take the button out of the layout flow */
    left: 0; /* Position it on the hard left */
    top: 50%;
    transform: translateY(-50%); /* Vertically center it */
}

/* Restored button styling */
.prev-step-button {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #ced4da;
    padding: 10px 20px;
    font-weight: bold;
    transition: background-color 0.2s ease;
    text-decoration: none;
    border-radius: 8px !important;
    line-height: 1.4;
}
.prev-step-button:hover {
    background-color: #e9ecef;
}

/* The main outer container, mirroring .component-section */
.spec-adjuster-section {
    margin-bottom: 20px;
    background-color: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* The inner wrapper, mirroring .component-position-wrapper */
.spec-adjuster-position-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

/* The columns, mirroring .position-subsection but with NO PADDING */
.spec-adjuster-column {
    flex: 1 1 calc(50% - 10px);
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f6f6f6;
    padding: 2.5rem;
    margin-bottom: -3rem;
    border-radius: 8px;
    padding-top: 10px;
}

/* --- THE NEW CORNER RADIUS LOGIC --- */
#front-spec-adjusters {
    border-radius: 0; /* Reset all corners first */
}
#rear-spec-adjusters {
    border-radius: 0; /* Reset all corners first */
}

/* Apply radius only to the top-left and bottom-left of the first column */
.spec-adjuster-position-wrapper #front-spec-adjusters {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

/* Apply radius only to the top-right and bottom-right of the second column */
.spec-adjuster-position-wrapper #rear-spec-adjusters {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* The divider logic, applied to the right-hand inner box */
@media (min-width: 769px) {
    .spec-adjuster-position-wrapper.build-type-wheel-set #rear-spec-adjusters {
        padding-left: 20px; /* Space from the divider */
    }
}


.quick-spec-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quick-spec-group label {
    font-weight: 600;
    font-size: 0.9em;
    color: #495057;
}

.quick-spec-group .spec-adjuster-options {
    display: flex;
    gap: 5px;
}

.quick-spec-group .spec-adjuster-options button {
    padding: 5px 10px;
    font-size: 0.85em;
    min-width: 40px;
    border: 1px solid #ced4da;
    background-color: #ffffff;
}

/* Active state for adjuster buttons */
.quick-spec-group .spec-adjuster-options button.active {
    background-color: #007bff !important;
    color: #ffffff !important;
    border-color: #0056b3 !important;
    font-weight: bold;
}

/* Grayed-Out "Incompatible" Component Card Styling */
.component-product-card.is-spec-incompatible {
    opacity: 0.65;
    background-color: #f8f9fa;
    border-style: dashed;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.component-product-card.is-spec-incompatible:hover {
    opacity: 1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.component-product-card.is-spec-incompatible .product-card-header {
    background-color: #e9ecef;
}

/* Step 3 Refresh Loading Overlay */
#builder-step3-refresh-overlay {
  display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.85); z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px; border-radius: 8px;
}
#builder-step3-refresh-overlay .loading-spinner {
  border: 4px solid #f3f3f3; border-top: 4px solid #007bff; border-radius: 50%;
  width: 40px; height: 40px; animation: spin 1s linear infinite; margin-bottom: 15px;
}
#builder-step3-refresh-overlay p { font-size: 1.1em; font-weight: 500; color: #333; }

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    /* Prevents minor horizontal scroll on mobile */
    #variant-builder-container {
        overflow-x: hidden;
    }

    /* Fixes the Step 3 Header Layout */
    .step-3-header-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .step-3-header-wrapper .prev-step-button {
        position: static; /* This is the key fix */
        transform: none;
        width: 100%;
        order: 1; /* Puts button before the title */
    }

    .step-3-header-wrapper h2 {
        order: 2; /* Puts title after the button */
        text-align: center;
    }

    /* Original rules from your file that we need to keep */
    .spec-adjuster-position-wrapper {
        flex-direction: column;
        gap: 15px;
    }
    
    .spec-adjuster-position-wrapper.build-type-wheel-set #rear-spec-adjusters {
        border-left: none;
        border-top: 1px solid #bbb;
        padding-left: 15px;
        margin-left: 0;
        padding-top: 15px;
        width: 100%;
        box-sizing: border-box;
    }
}
/* --- END: CSS for Step 3 UX Enhancement Plan --- */


/* --- START: Mobile Responsive Fixes for Addons Modal --- */
/* Apply these styles only on screens 767px wide or smaller */
@media (max-width: 767px) {

  /* 1. Change the main addon card to a vertical layout */
  .addon-item-card {
    flex-direction: column;  /* Stack items vertically */
  }

  /* 2. Center the image container and add space below it */
  .addon-item-image {
    margin-left: auto;    /* Center the block horizontally */
    margin-right: auto;   /* Center the block horizontally */
    margin-bottom: 15px;  /* Add breathing room between the image and the title */
  }

  /* 3. Adjust the details section to take full width */
  .addon-item-details {
    width: 100%;
    text-align: center; /* Center the title and price for a cleaner look */
  }

  .addon-item-details h4 {
    margin-bottom: 15px; /* Add more space below the title */
  }

  /* 4. Style the actions container to be a full-width block at the bottom */
  .addon-item-card .addon-item-actions {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    align-items: stretch;    /* Make buttons take up full width */
    gap: 10px;               /* Create space between the buttons */
    width: 100%;             /* Ensure the container is full-width */
    margin-top: 15px;        /* Add space above the first button */
  }

  /* 5. Reset any specific margins on buttons that are now handled by the 'gap' property */
  .addon-item-actions .match-addon-btn {
    margin-top: 0;
  }

/* --- END: Mobile Responsive for Addons Modal --- */

/* Responsive adjustments for the columnar summary if needed */
    .summary-table-row-like {
        /* Could flex-wrap or adjust column widths for mobile */
        /* For example, stack position above details */
        flex-wrap: wrap;
    }
    .summary-cell.item-position {
        flex-basis: 100%;
        text-align: left;
        margin-bottom: 5px;
        font-size: 0.9em;
    }
    .summary-cell.item-details {
        flex-basis: calc(100% - 130px); /* Example: Details take width minus qty, price, remove */
    }
    .summary-cell.item-quantity,
    .summary-cell.item-price,
    .summary-cell.item-remove {
        /* Keep their flex-basis or adjust */
    }


/* --- General Navigation & Layout --- */
  .builder-navigation.nav-step-2-3 {
    flex-direction: column; /* Stack Back and Next buttons */
    align-items: stretch;
  }

  .builder-navigation.nav-step-2-3 .button {
    width: 100%; /* Make buttons full-width */
    flex-grow: 1; /* Ensure they fill the space */
  }

  /* --- Step 3: Header Layout --- */
  .step-3-header-wrapper {
    flex-direction: column; /* Stack the button and title */
    align-items: stretch;   /* Make children full-width */
    gap: 15px;              /* Add space between button and title */
    margin-bottom: 15px;    /* Adjust spacing below the header */
  }

  .step-3-header-wrapper .prev-step-button {
    position: static; /* Remove the absolute positioning */
    transform: none;  /* Reset the transform */
    width: 100%;      /* Make the button full-width */
    order: 1;         /* Ensure button comes first */
  }

  .step-3-header-wrapper h2 {
    order: 2; /* Ensure title comes second */
    text-align: center;
  }

  /* --- Step 3: Build Summary Footer --- */
  .build-summary-footer {
    flex-direction: column-reverse; /* Stack buttons below subtotal */
    align-items: stretch; /* Make children take full width */
    gap: 15px;
  }

  .summary-subtotal-wrapper {
    justify-content: flex-end; /* Keep subtotal text to the right */
    width: 100%;
    margin-bottom: 10px; /* Add space above the buttons */
  }

  .summary-actions-left {
    flex-direction: column; /* Stack the button groups */
    align-items: stretch; /* Make children full-width */
    width: 100%;
    gap: 10px;
  }

  #builder-save-load-controls {
    flex-direction: column; /* Stack Save/Load buttons */
    width: 100%;
  }

  .build-summary-footer .button {
    width: 100%;
    justify-content: center;
  }

  #variant-builder-container .selected-image-wrapper .selected-component-weight-display {
   bottom: -10.54px !important;
   right: -9.34px !important;
  }

  .component-selected-image .optional-addons-btn {
   white-space: normal; /* Allow text to wrap */
   height: auto;        /* Allow button to grow taller */
   max-width: 160px;    /* Constrain width to force the wrap */
   padding: 9px 4px;   /* Adjust padding for a better look */
   line-height: 1.3;    /* Adjust line spacing */
  }
}

/* --- END: @media (max-width: 767px) { Consolidated Mobile Responsive --- */

/* --- START: Login Incentive Box Styling (V4.2) --- */
.summary-login-incentive {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 12px 15px;
  margin-top: 15px;
  border: 1px solid #dee2e6; /* Matches your #discount-offer-banner border */
  border-radius: .25rem; /* Matches your #discount-offer-banner border-radius */
  background-color: #f8f9fa; /* Matches your #discount-offer-banner background */
}

.summary-login-incentive span {
  font-size: 1.4rem; /* Uses rem units for better accessibility */
  font-weight: 500;
  line-height: 1.3;
  color: #333;
}

.summary-login-incentive .button {
  flex-shrink: 0; /* Prevents the button from shrinking on small screens */
  padding: 8px 16px; /* A slightly smaller button for the summary context */
  font-size: 1.3rem;
  text-decoration: none; /* Ensures the <a> tag doesn't have an underline */
}

/* Responsive styles for mobile, using your existing 480px breakpoint */
@media screen and (max-width: 480px) {
  .summary-login-incentive {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}
/* --- END: Login Incentive Box Styling --- */

/* --- START: Vendor Availability Styling (V4.3) --- */
.vendor-filter-btn.is-unavailable {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: transparent !important; /* Override hover effects */
}

.vendor-filter-btn.is-unavailable .vendor-logo {
  filter: grayscale(100%);
}

.vendor-filter-btn.is-unavailable:hover {
  transform: none; /* Disable the hover scale effect */
}
/* --- END: Vendor Availability Styling --- */

/* --- START: Quick Spec Adjuster Layout Styling (V4.7 - Centering Fix) --- */
.spec-adjuster-position-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.spec-adjuster-column {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: calc(33.333% - 10px);
  display: flex;
  flex-direction: column;
}

/* On single-wheel builds, make the columns take up more space */
.spec-adjuster-position-wrapper.build-type-single .spec-adjuster-column {
   flex-basis: calc(50% - 10px);
}

#center-spec-adjusters .quick-spec-group,
#front-spec-adjusters .quick-spec-group,
#rear-spec-adjusters .quick-spec-group {
  width: 100%;
}

/* THIS IS THE NEW CENTERING LOGIC */
.quick-spec-group {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the button group horizontally */
}

.quick-spec-group label {
  text-align: center;
  margin-bottom: 5px;
  display: block;
  font-weight: 600; /* Make label slightly bolder */
}

.spec-adjuster-options {
    display: flex;
    justify-content: center; /* Ensure buttons within the group are centered */
}
/* --- END: Quick Spec Adjuster Layout Styling --- */

/* This rule makes the entire "Est. Total Weight" line stand out more */
.summary-line-item.summary-item-weight {
    font-size: 1.1em;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #ccc; /* Adds a nice separator */
}

/* This rule specifically bolds the weight value */
#estimated-weight-value {
    font-weight: bold;
    color: #000;
}