#cartsliderrow .cartTableWrapper .th.cart--quantities, #cartsliderrow .cartTableWrapper .shoppingcartquantitytext, #cartsliderrow .cartTableWrapper .quantityChanger, .shoppingcart__wrapper .cartTableWrapper .th.cart--quantities, .shoppingcart__wrapper .cartTableWrapper .shoppingcartquantitytext, .shoppingcart__wrapper .cartTableWrapper .quantityChanger {
    width: 10.14286rem;
  }
  
  #modalQuoteIsCreated {
    visibility: hidden;
    position: relative;
  }
  
  #modalQuoteIsCreated::after {
    content: "Thank you for your request. We will contact you with more information within one business day.";
    visibility: visible;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: #333;
    background: #f0f0f0;
    padding: 10px;
    z-index: 1;
  }
  
  .search-container {
    display: none;
  }
  
  [name="savequote-38"] {
    display: none;
  }
  
  [name="savequote-39"] {
    display: none;
  }
  
  .my-addresses-link {
    display: none;
  }
  
  .my-orders-link {
    display: none;
  }
  
  /* .updatecartbutton {
    display: none;
  } */
  
  .continueshoppingbutton {
    display: none;
  }
  
  /*  for the vue js app */
  .product-page field:first-of-type {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  
  a.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
  }
  
  a.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5em;
    height: 1.5em;
    margin-top: -0.75em;
    margin-left: -0.75em;
    border-radius: 50%;
    border: 2px solid #000;
    border-right-color: transparent;
    border-top-color: transparent;
    animation: spinAround 0.5s infinite linear;
  }
  
  @keyframes spinAround {
    from {
      transform: rotate(0deg);
    }
  
    to {
      transform: rotate(359deg);
    }
  }
  
  .invoice-information .modal-card,
  .shipping-information .modal-card,
  .document-information .modal-card {
    position: relative;
    height: 90vh;
    width: min(90%, 70vh) !important;
    margin: 0 auto;
    border: 1px solid #eaeaea;
    overflow: hidden;
    aspect-ratio: 9 / 16;
  }
  
  .invoice-preview-container,
  .document-preview-container {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #eaeaea;
    overflow: hidden;
  }
  
  .invoice-preview-container .overlay,
  .document-preview-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 1rem;
    text-align: center;
    z-index: 5;
  }
  
  .invoice-preview-container .pdf-embed,
  .document-preview-container .pdf-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .invoice-preview-container .download-btn,
  .document-preview-container .download-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
  }
  
  /* popover */
  /* Column filter styles */
  .filter-icon {
    cursor: pointer;
    font-size: 0.8rem;
    color: #888;
    margin-left: 4px;
    display: inline-flex;
  }
  
  .filter-button {
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 0.8rem;
    transition:
      background-color 0.2s,
      color 0.2s;
    position: relative;
    z-index: 5;
    /* Higher z-index to ensure it's clickable */
  }
  
  .filter-button:hover {
    background-color: #f0f0f0;
    color: #3273dc;
  }
  
  .filter-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.25);
  }
  
  .filter-icon:hover {
    color: #3273dc;
  }
  
  .has-active-filter .column-header-container .filter-icon,
  .has-active-filter .column-header-container .filter-button {
    color: #3273dc;
  }
  
  .has-active-filter .column-header-container .filter-button {
    background-color: rgba(50, 115, 220, 0.1);
  }
  
  .column-header-container {
    display: inline-flex;
    align-items: center;
    flex-grow: 1;
    justify-content: space-between;
    width: 100%;
    padding-right: 8px;
  }
  
  .column-title {
    display: inline-block;
    margin-right: auto;
    /* Push the filter button to the right */
  }
  
  .active-filters {
    border-bottom: 1px solid #f0f0f0;
    padding: 8px 16px;
  }
  
  .active-filters .tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  
  .selected-row-highlight {
    background-color: rgba(50, 115, 220, 0.1) !important;
    transition: background-color 0.5s ease;
  }
  
  /* Filter popover styles */
  .filter-popover {
    position: absolute;
    z-index: 100;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-width: 250px;
  }
  
  .filter-popover-content {
    padding: 12px;
  }
  
  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-weight: bold;
  }
  
  .close-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
  }
  
  .filter-body {
    margin-bottom: 12px;
  }
  
  .filter-footer {
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }
  
  /* Table header styling */
  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
  }
  
  .sort-indicator {
    margin-left: 4px;
    font-size: 0.8rem;
  }
  
  /* Make the entire header clickable for sorting */
  th.cursor-pointer {
    cursor: pointer;
    user-select: none;
  }
  
  /* Ensure the entire header is clickable */
  th.cursor-pointer .header-content {
    cursor: pointer;
  }
  
  /* Highlight header when filter is active */
  .has-active-filter {
    background-color: rgba(50, 115, 220, 0.05);
  }
  
  /* Make sure the filter icon is properly aligned */
  .column-header-container .filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Skeleton */
  @keyframes pulse {
    50% {
      opacity: 0.5;
    }
  }
  
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  .rounded-md {
    border-radius: 0.375rem;
  }
  
  .bg-primary {
    --primary: 240 5.9% 10%;
    background-color: hsl(var(--primary) / 0.1);
  }
  
  /* Artwork Details Modal */
  
  .artwork-details-container {
    height: 75vh;
    min-height: 600px;
    max-height: 90vh;
  }
  
  .artwork-details-container .columns {
    height: 100%;
  }
  
  .item-details-column,
  .image-viewer-column,
  .thumbnails-column {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
  }
  
  .panel {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .panel-block {
    flex: 1;
    overflow: hidden;
  }
  
  .thumbnails-column .panel-block {
    overflow-y: auto;
  }
  
  .panel-heading {
    position: relative;
    padding-right: 8rem;
  }
  
  .panel-controls {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 0.25rem;
  }
  
  .field-row {
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
  }
  
  .field-row strong {
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    color: #4a4a4a;
  }
  
  .field-row span {
    padding-left: 0.5rem;
    border-left: 3px solid #dbdbdb;
    font-size: 0.875rem;
  }
  
  .canvas-container {
    position: relative;
    background: #f5f5f5;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .artwork-canvas {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  
  .loading-overlay-artwork,
  .no-selection-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 245, 245, 0.9);
  }
  
  .loader {
    width: 40px;
    height: 40px;
    border: 4px solid #dbdbdb;
    border-top: 4px solid #3273dc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  
  .zoom-indicator {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
  }
  
  .thumbnails-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  
  .thumbnail-item {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 0.5rem;
    transition: all 0.2s ease;
    position: relative;
  }
  
  .thumbnail-item:hover {
    border-color: #3273dc;
    background: #f0f8ff;
  }
  
  .thumbnail-item.is-active {
    border-color: #3273dc;
    background: #e3f2fd;
  }
  
  .thumbnail-item figure {
    position: relative;
    margin-bottom: 0.5rem;
  }
  
  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  
  .thumbnail-item:hover .image-overlay {
    opacity: 1;
  }
  
  .image-overlay .icon {
    color: white;
  }
  
  .thumbnail-label {
    font-size: 0.75rem;
    font-weight: 600;
    word-break: break-word;
    line-height: 1.2;
  }
  
  .no-assets {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
  }
  
  /* Responsive adjustments */
  @media (max-width: 1200px) {
    .artwork-details-container {
      height: 70vh;
      min-height: 500px;
    }
  
    .canvas-container {
      min-height: 300px;
    }
  }
  
  @media (max-width: 768px) {
    .artwork-details-container {
      height: 85vh;
      min-height: 400px;
    }
  
    .columns {
      flex-direction: column;
    }
  
    .canvas-container {
      min-height: 250px;
    }
  
    .thumbnails-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  @media (max-width: 480px) {
    .panel-controls {
      position: relative;
      right: auto;
      top: auto;
      transform: none;
      margin-top: 0.5rem;
    }
  
    .panel-heading {
      padding-right: 0.75rem;
      text-align: center;
      flex-direction: column;
      align-items: center;
    }
  }
  
  .loader-spinner-skeleton {
    width: 48px;
    height: 48px;
    border: 5px solid #999;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -24px;
    margin-left: -24px;
  }
  
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  
  .cursor-pointer {
    cursor: pointer !important;
  }
  
  /* Cart Updates */
  .cart_total--subtotal {
    display: none;
  }
  
  .cart_total--shipping {
    display: none;
  }
  
  .item-image .image img {
    object-fit: contain;
    height: 100%;
  }
  
  .shoppingcart__wrapper .cartform .cartTableWrapper .cart-item-row .cart--pictures .shopping-cart__product__images__item img {
    object-fit: contain;
    height: 100%;
  }
  
  .thumbnail-item img {
    object-fit: contain;
  }
  
  /* landing page */
  .newProductPriceWrapper {
    display: none;
  }
  
  .add-to-cart-buttons-wrapper {
    display: none;
  }
  
  /* My Account */
  .cf_accountlinks_CustomerAddresses {
    display: none;
  }
  
  .customer__section:not(:first-of-type) {
    display: none;
  }
  
  /* Checkout */
  #checkout-confirm-order-load .subtitle,
  #checkout-confirm-order-load .order-summary-body {
      display: none;
  }
  
  .checkout-data-info__orderdetails {
    display:none;
  }
  
  .checkout-data-info__orderid {
    display:none;
  }
  
  #use-same-shipping-address {
    display: none !important;
  }
  
  /* Export button */
  .is-loadingKeepContent {
    min-width: 10rem;
  }
  
  .priceScriptInfo .is-danger {
      background-color: #F7C1C6 !important;
      color: Red;
  }
  
  .priceScriptInfo .is-info {
    background-color: #69afdb !important;
  }
  
  html.page-customer-passwordrecoveryconfirm {
      background: url(/-301791281/Handler/Picture/GU/F/ThemeImages/Color.BlocksCustomerPortal.png);
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      min-height: 100%;
  }
  
  .password-recovery-confirmation {
      position: absolute;
      width: 37rem;
      background: #fff;
      padding: 3rem 0!important;
      right: 0px;
      height: 100%;
      padding-top: 10vh!important;
  }
  
  .password-reset-form input {
      min-width: 100%;
  }
  
  .password-reset-form:before {
      /* content: 'Password must contain 8 characters1 upper case1 lower case1 specialty character @#$%'; */
  }
  
  .password-recovery-confirmation:before {
      content: '';
      display: inline-block;
      height: 9rem;
      width: 9rem;
      background: url(/-559794100/Handler/Picture/GU/F/ThemeImages/FortisLogo1.png);
      background-size: contain;
      background-position: center center;
      background-repeat: no-repeat;
      margin-bottom: 1.5rem;
      margin-left:4.5rem;
  }
  @media screen and (min-width: 1088px) {
   .navbar.ict-navbar .navbar-dropdown {
              top: 100%;
   }
  }
  .navbar>.container {
      justify-content: space-between;
  }
  .header-links-wrapper .adminlinks {
      margin-right: 2rem;
  }
  .registration-page.registration-success.section.is-large .buttons {
      display: none;
  }
  p.registration-page__result {
      font-size: 1.3rem;
      color: #3F51B5;
      font-weight: bold;
  }

  #loginmessage-modal {
    display: none !important;
  }

  #loginmessage-modal.show-login-modal {
    display: flex !important;
  }

  #loginmessage-modal .modal-card-title {
    visibility: hidden;
  }


  /* Hide only the first "title is-5 is-spaced" paragraph */
.OpcDeliveryDatePicker 
.deliveryDetails 
.column 
p.title.is-5.is-spaced:first-of-type {
    visibility: hidden;
    position: relative;
}

/* Inject replacement text */
.OpcDeliveryDatePicker 
.deliveryDetails 
.column 
p.title.is-5.is-spaced:first-of-type::after {
    content: "Up to 15 business days";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}

/* Registration password text & password reset */
.password-reset-form {
  height: 60px;
  width: 100%;
  display: block;
  position: relative;
}

table.table-container.table-container--password,  .password-reset-form {
 &:before {
    content: 'PASSWORD MUST BE AT LEAST 12 CHARACTERS, 1 UPPERCASE, 1 LOWERCASE, 1 SPECIAL CHARACTER (@, #, $).';
    font-weight: bold; 
    color: red;
  }
}

table.table-container.table-container--password {
  tbody {
      padding-top: 1rem;
      display: block;
  }
}

.password-reset-form {
  form {
      padding-top: 1rem;
  }
}

/* login page title buttons */
.page-title-actions {
  display: flex;
  gap: 10px;
  padding-bottom: 3rem;
  a.custom-link {
    outline-offset: 2px;
    border-radius: 4px;
    background-color: #003DA7;
    border-color: transparent;
    border-width: 1px;
    color: #fff;
    cursor: pointer;
    padding: calc(0.75em - 1px) 1.42857rem;
    text-align: center;
    font-size: 1rem;
    width: 50%;
    vertical-align: middle;
    justify-content: center;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
  }
}


/* ============================================================
   FORTIS — Custom Product Estimate Request — Layout Override
   Target: product page /p/68 (estimate request form)

   ALL rules scoped to #productVariantForm to prevent
   any style leakage to header, footer, navigation, or
   other platform pages.
   ============================================================ */

/* ============================================================
   FORTIS — Custom Product Estimate Request — Layout Override
   Target: product page /p/68 (estimate request form)

   ALL rules scoped to #productVariantForm to prevent
   any style leakage to header, footer, navigation, or
   other platform pages.
   ============================================================ */

/* ============================================================
   FORTIS — Custom Product Estimate Request — Layout Override
   Target: product page /p/68 (estimate request form)

   ALL rules scoped to #productVariantForm to prevent
   any style leakage to header, footer, navigation, or
   other platform pages.
   ============================================================ */

/* ── CSS Variables (scoped) ── */
/* ============================================================
   FORTIS — Custom Product Estimate Request — Layout Override
   Target: product page /p/68 (estimate request form)

   ALL rules scoped to #productVariantForm to prevent
   any style leakage to header, footer, navigation, or
   other platform pages.
   ============================================================ */

/* ── CSS Variables (scoped) ── */
#productVariantForm {
  --sbu-blue-50: #E6F1FB;
  --sbu-blue-100: #B5D4F4;
  --sbu-blue-200: #85B7EB;
  --sbu-blue-600: #185FA5;
  --sbu-blue-800: #0C447C;
  --sbu-gray-50: #F7F7F7;
  --sbu-gray-100: #F1F1F1;
  --sbu-gray-200: #E1E1E1;
  --sbu-gray-400: #A0A0A0;
  --sbu-gray-600: #666666;
  --sbu-gray-800: #333333;
  --sbu-gray-900: #1A1A1A;
  --sbu-red-500: #E24B4A;
  --sbu-green-50: #EAF3DE;
  --sbu-green-600: #3B6D11;
  --sbu-radius-md: 8px;
  --sbu-radius-lg: 12px;
}

/* ============================================================
   1. PAGE LAYOUT — Single centered column
   ============================================================ */

.product-wrapper.hide-product-defaults #productVariantForm .picture-wrapper {
  display: none !important;
}

.product-wrapper.hide-product-defaults #productVariantForm  .details-wrapper {
  flex: 0 0 100% !important;
  max-width: 720px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}

.product-wrapper.hide-product-defaults   #productVariantForm .details-wrapper.is-6-desktop {
  width: 100% !important;
}

.product-wrapper.hide-product-defaults  #productVariantForm .product-info-section > .container {
  max-width: 780px !important;
  margin: 0 auto !important;
}

#productVariantForm .product-variant-list {
  background: #fff;
  border-radius: var(--sbu-radius-lg);
  border: 1px solid var(--sbu-gray-200);
  padding: 2rem 2.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ============================================================
   2. PRODUCT TITLE & DESCRIPTION
   ============================================================ */

#productVariantForm h1.title {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--sbu-gray-900) !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}

#productVariantForm .short-description-wrapper {
  font-size: 14px !important;
  color: var(--sbu-gray-600) !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.6 !important;
}

/* ============================================================
   3. SECTION (ATTRIBUTE GROUP) TITLES
   ============================================================ */

#productVariantForm .attribute-group-title {
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--sbu-gray-100) !important;
}

#productVariantForm .attribute-group-title .subtitle.is-5 {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--sbu-gray-400) !important;
  margin: 0 !important;
  padding: 0 !important;
}

#productVariantForm .attribute-group {
  margin-bottom: 2rem !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   4. ATTRIBUTE LABELS
   ============================================================ */

#productVariantForm .attribute .attributeHeader {
  margin-bottom: 5px !important;
}

#productVariantForm .attribute .attributeTitle {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--sbu-gray-800) !important;
  line-height: 1.4 !important;
}

#productVariantForm .attribute .attributeRequired {
  color: var(--sbu-red-500) !important;
  margin-left: 2px !important;
}

/* Tooltip styling moved to section 13 — inline hint text */

/* ============================================================
   5. INPUT / SELECT / TEXTAREA STYLING
   ============================================================ */

/* Style every text-like input/select/textarea inside the form, regardless of
   type or class. The :not() chain excludes inputs whose styling must NOT be
   overridden (checkboxes, file pickers, hidden form data, etc.). */
#productVariantForm .attribute input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not(.fileUpload),
#productVariantForm .attribute select,
#productVariantForm .attribute textarea {
  width: 100% !important;
  font-size: 14px !important;
  padding: 9px 12px !important;
  border: 1px solid var(--sbu-gray-200) !important;
  border-radius: var(--sbu-radius-md) !important;
  background: #fff !important;
  color: var(--sbu-gray-900) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  outline: none !important;
  box-sizing: border-box !important;
  height: auto !important;
  line-height: 1.5 !important;
}

#productVariantForm .attribute input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not(.fileUpload):focus,
#productVariantForm .attribute select:focus,
#productVariantForm .attribute textarea:focus {
  border-color: var(--sbu-blue-200) !important;
  box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.1) !important;
}

#productVariantForm .attribute input::placeholder,
#productVariantForm .attribute textarea::placeholder {
  color: var(--sbu-gray-400) !important;
}

#productVariantForm .attribute textarea {
  resize: vertical !important;
  min-height: 80px !important;
}

#productVariantForm .attribute select {
  cursor: pointer !important;
}

/* ============================================================
   6. ATTRIBUTE FIELD SPACING
   ============================================================ */

#productVariantForm .attribute {
  margin-bottom: 16px !important;
  padding: 0 !important;
}

#productVariantForm .attribute.column.is-12 {
  padding: 0 !important;
}

/* ============================================================
   7. MULTI-COLUMN GRID LAYOUTS PER SECTION
   ============================================================ */

#productVariantForm .attribute-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 14px !important;
  align-items: start !important;
}

#productVariantForm .attribute-group > .attribute-group-title {
  grid-column: 1 / -1 !important;
}

#productVariantForm .attribute-group > .attribute {
  grid-column: 1 / -1 !important;
}

/* ── Requestor Information ──
   Visual order (CSS order property fixes DOM position of newly-added fields):
   Name+Email -> Business+Phone -> Attention+City -> State+Zip -> Country (full) -> Address (full) -> Address2 (full).
   CustomerId is hidden at the attribute level and populated server-side; left at order 99 so a re-enable still works. */
#productVariantForm .attribute.name_CustomerName  { grid-column: 1 / 2 !important; order: 1 !important; }
#productVariantForm .attribute.name_CustomerEmail { grid-column: 2 / 3 !important; order: 2 !important; }
#productVariantForm .attribute.name_BusinessName  { grid-column: 1 / 2 !important; order: 3 !important; }
/* CustomerId (Radius/FlexLink ID) is hidden via the Infigo attribute config and
   populated by the MegaScript at send-time. Keep the rule with a high order so
   a re-enable still slots into the grid; the hidden DOM node does not
   participate in layout when display:none. */
#productVariantForm .attribute.name_CustomerId    { grid-column: 2 / 3 !important; order: 99 !important; }
#productVariantForm .attribute.name_Phone,
#productVariantForm .attribute:has(input[aria-label="Phone"])     { grid-column: 2 / 3 !important; order: 4 !important; }
#productVariantForm .attribute.name_Attention,
#productVariantForm .attribute:has(input[aria-label="Attention"]) { grid-column: 1 / 2 !important; order: 5 !important; }
/* City + State — :has() fallback for uncertain Infigo class name casing */
#productVariantForm .attribute.name_ShipToInformation,
#productVariantForm .attribute:has(input[aria-label="City"])      { grid-column: 2 / 3 !important; order: 6 !important; }
#productVariantForm .attribute.name_Ship_to_State,
#productVariantForm .attribute:has(input[aria-label="State"])     { grid-column: 1 / 2 !important; order: 7 !important; }
/* Zip + Country */
#productVariantForm .attribute.name_ShipToZip,
#productVariantForm .attribute:has(input[aria-label="Zip code"])  { grid-column: 2 / 3 !important; order: 8 !important; }
#productVariantForm .attribute.name_Country,
#productVariantForm .attribute:has(input[aria-label="Country"])   { grid-column: 1 / -1 !important; order: 9 !important; }
/* Address fields — full width, last */
#productVariantForm .attribute.name_ShipToAddress                 { grid-column: 1 / -1 !important; order: 10 !important; }
#productVariantForm .attribute.name_Address_Line_2,
#productVariantForm .attribute.name_ShipToAddress2                { grid-column: 1 / -1 !important; order: 11 !important; }

/* ── Label Specifications ── */
#productVariantForm .attribute.name_Width          { grid-column: 1 / 2 !important; }
#productVariantForm .attribute.name_Height         { grid-column: 2 / 3 !important; }
#productVariantForm .attribute.name_Shape          { grid-column: 1 / 2 !important; }
#productVariantForm .attribute.name_Corner_Radius  { grid-column: 2 / 3 !important; }

/* ── Material & Finish — 3-column (default when Film/Paper liner selected) ── */
#productVariantForm .attribute-group:nth-child(5) {
  grid-template-columns: 1fr 1fr 1fr !important;
}
#productVariantForm .attribute-group:nth-child(5) > .attribute-group-title { grid-column: 1 / -1 !important; }
#productVariantForm .attribute.name_Material             { grid-column: 1 / -1 !important; }
#productVariantForm .attribute.name_MaterialAppearance   { grid-column: 1 / 2 !important; }
#productVariantForm .attribute.name_MaterialLiner        { grid-column: 2 / 3 !important; }
/* MaterialWeightPaper and Film_Specification share column 3 — only one is visible at a time
   based on the Liner dropdown selection (Paper vs Film). */
#productVariantForm .attribute.name_MaterialWeightPaper  { grid-column: 3 / 4 !important; }
#productVariantForm .attribute.name_Film_Specification   { grid-column: 3 / 4 !important; }
#productVariantForm .attribute.name_Finish               { grid-column: 1 / -1 !important; }
#productVariantForm .attribute.name_OtherMaterialNotes   { grid-column: 1 / -1 !important; }

/* When "Other" liner is selected, collapse to 2-column (JS adds .sbu-liner-other) */
#productVariantForm .attribute-group:nth-child(5).sbu-liner-other {
  grid-template-columns: 1fr 1fr !important;
}
#productVariantForm .sbu-liner-other .attribute.name_MaterialAppearance { grid-column: 1 / 2 !important; }
#productVariantForm .sbu-liner-other .attribute.name_MaterialLiner      { grid-column: 2 / 3 !important; }

/* When MaterialAppearance is hidden (Material ≠ Thermal/Semi-gloss/Other), collapse to 2-column (JS adds .sbu-appearance-hidden) */
#productVariantForm .attribute-group:nth-child(5).sbu-appearance-hidden {
  grid-template-columns: 1fr 1fr !important;
}
#productVariantForm .sbu-appearance-hidden .attribute.name_MaterialLiner        { grid-column: 1 / 2 !important; }
#productVariantForm .sbu-appearance-hidden .attribute.name_MaterialWeightPaper  { grid-column: 2 / 3 !important; }
#productVariantForm .sbu-appearance-hidden .attribute.name_Film_Specification   { grid-column: 2 / 3 !important; }

/* Align inputs in Material & Finish 3-column row — only Appearance and Liner
   get flex layout. Film_Specification and MaterialWeightPaper must NOT have
   display: flex !important because the platform hides them via inline
   style="display: none;" which would be overridden. */
#productVariantForm .attribute.name_MaterialAppearance,
#productVariantForm .attribute.name_MaterialLiner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

#productVariantForm .attribute.name_MaterialAppearance .attributeHeader,
#productVariantForm .attribute.name_MaterialLiner .attributeHeader {
  flex: 1 !important;
}

#productVariantForm .attribute.name_MaterialAppearance .attribute-item,
#productVariantForm .attribute.name_MaterialLiner .attribute-item {
  flex-shrink: 0 !important;
}

/* ── Roll & Finishing — 3-column ── */
#productVariantForm .attribute-group:nth-child(7) {
  grid-template-columns: 1fr 1fr 1fr !important;
  align-items: stretch !important;
}
#productVariantForm .attribute-group:nth-child(7) > .attribute-group-title { grid-column: 1 / -1 !important; }
#productVariantForm .attribute.name_Wind_Direction { grid-column: 1 / -1 !important; }
#productVariantForm .attribute.name_Core_Diameter  { grid-column: 1 / 2 !important; }
#productVariantForm .attribute.name_MaxRollOD      { grid-column: 2 / 3 !important; }
#productVariantForm .attribute.name_SlitToAcross   { grid-column: 3 / 4 !important; }

/* Align the 3-column row inputs — flexbox column with auto-margin
   pushes inputs to the bottom of each cell regardless of label height */
#productVariantForm .attribute.name_Core_Diameter,
#productVariantForm .attribute.name_MaxRollOD,
#productVariantForm .attribute.name_SlitToAcross {
  display: flex !important;
  flex-direction: column !important;
}

#productVariantForm .attribute.name_Core_Diameter .attribute-item,
#productVariantForm .attribute.name_MaxRollOD .attribute-item,
#productVariantForm .attribute.name_SlitToAcross .attribute-item {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}
#productVariantForm .attribute.name_Finishing      { grid-column: 1 / -1 !important; }
#productVariantForm .attribute.name_Packaging      { grid-column: 1 / -1 !important; }

/* ── Order Details & Volume ── */
/* All qty break fields full width — extra breaks revealed one at a time via JS */
#productVariantForm .attribute.name_Quantity_Break,
#productVariantForm .attribute.name_Quantity_Break_2,
#productVariantForm .attribute.name_Quantity_Break_3,
#productVariantForm .attribute.name_Quantity_Break_4,
#productVariantForm .attribute:has(input[aria-label="Estimated quantity per order 4"]),
#productVariantForm .attribute.name_Quantity_Break_5,
#productVariantForm .attribute:has(input[aria-label="Estimated quantity per order 5"]) { grid-column: 1 / -1 !important; }
#productVariantForm .attribute.name_EstimatedAnnualVolume { grid-column: 1 / 2 !important; }
#productVariantForm .attribute.name_NumberOfSKUs          { grid-column: 2 / 3 !important; }
#productVariantForm .attribute.name_Frequency             { grid-column: 1 / 2 !important; }
#productVariantForm .attribute.name_Time_Frame            { grid-column: 2 / 3 !important; }
#productVariantForm .attribute.name_Date                  { grid-column: 1 / 2 !important; }

/* Align qty break inputs to bottom of each cell */
#productVariantForm .attribute.name_Quantity_Break,
#productVariantForm .attribute.name_Quantity_Break_2,
#productVariantForm .attribute.name_Quantity_Break_3,
#productVariantForm .attribute.name_Quantity_Break_4,
#productVariantForm .attribute.name_Quantity_Break_5 {
  display: flex !important;
  flex-direction: column !important;
}
#productVariantForm .attribute.name_Quantity_Break .attribute-item,
#productVariantForm .attribute.name_Quantity_Break_2 .attribute-item,
#productVariantForm .attribute.name_Quantity_Break_3 .attribute-item,
#productVariantForm .attribute.name_Quantity_Break_4 .attribute-item,
#productVariantForm .attribute.name_Quantity_Break_5 .attribute-item {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/* ── Artwork & Files — hide individual uploads ── */
#productVariantForm .attribute.name_Artwork_File,
#productVariantForm .attribute.name_ArtworkFile1,
#productVariantForm .attribute.name_ArtworkFile2,
#productVariantForm .attribute.name_ArtworkFile3,
#productVariantForm .attribute.name_ArtworkFile4,
#productVariantForm .attribute.name_ArtworkFile5 {
  display: none !important;
}

#productVariantForm .attribute.type_FileUpload .attribute-item {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ============================================================
   8. CHECKBOX BUTTONS → CHIP / PILL STYLING
   ============================================================ */

#productVariantForm .attribute.type_Checkboxes .attribute-item.columns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#productVariantForm .attribute.type_Checkboxes .attribute-value-item.column {
  flex: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

#productVariantForm .attribute.type_Checkboxes .attribute-value-item .button {
  padding: 7px 16px !important;
  font-size: 13px !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  border: 1px solid var(--sbu-gray-200) !important;
  background: #fff !important;
  color: var(--sbu-gray-800) !important;
  transition: all 0.15s !important;
  user-select: none !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

#productVariantForm .attribute.type_Checkboxes .attribute-value-item .button:hover {
  background: var(--sbu-gray-50) !important;
  border-color: var(--sbu-gray-400) !important;
}

#productVariantForm .attribute.type_Checkboxes .attribute-value-item input:checked + .button,
#productVariantForm .attribute.type_Checkboxes .attribute-value-item .button.is-info,
#productVariantForm .attribute.type_Checkboxes .attribute-value-item .button.is-primary,
#productVariantForm .attribute.type_Checkboxes .attribute-value-item .button.is-active {
  background: var(--sbu-blue-50) !important;
  color: var(--sbu-blue-800) !important;
  border-color: var(--sbu-blue-200) !important;
}

/* ============================================================
   9. BOTTOM PANEL — Price, Qty, Buttons
   ============================================================ */

#productVariantForm .column.price,
#productVariantForm .quantity-wrapper,
#productVariantForm .priceScriptInfo,
#productVariantForm [id^="invalid-price"],
#productVariantForm .add-to-cart-buttons-wrapper {
  display: none !important;
}

#productVariantForm .price-quantity-start-wrapper > .columns.is-multiline {
  display: block !important;
}

#productVariantForm .save-quote-buttons-wrapper {
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin-top: 0.5rem !important;
}

#productVariantForm .productvariantsavequotebutton {
  width: 100% !important;
  padding: 13px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: var(--sbu-radius-md) !important;
  background: var(--sbu-blue-600) !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  margin-top: 1rem !important;
  letter-spacing: 0.3px !important;
}

#productVariantForm .productvariantsavequotebutton:hover {
  background: var(--sbu-blue-800) !important;
}

#productVariantForm .productvariantsavequotebutton:active {
  transform: scale(0.98) !important;
}

#productVariantForm .productvariantsavequotebutton:disabled,
#productVariantForm .productvariantsavequotebutton[disabled] {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* ============================================================
   10. CUSTOM DROPZONE STYLING
   ============================================================ */

/* Force visibility — platform hides non-standard children inside attribute groups */
#productVariantForm .sbu-dropzone-wrapper {
  display: block !important;
  grid-column: 1 / -1 !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
}

#productVariantForm .sbu-dropzone-wrapper .attributeHeader {
  margin-bottom: 5px !important;
}

#productVariantForm .sbu-dropzone-wrapper .attributeTitle {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--sbu-gray-800) !important;
  margin-bottom: 2px !important;
}

#productVariantForm .sbu-dropzone__hint {
  font-size: 12px !important;
  color: var(--sbu-gray-400) !important;
  margin: 2px 0 6px !important;
  display: block !important;
}

#productVariantForm .sbu-dropzone {
  border: 2px dashed var(--sbu-gray-200);
  border-radius: var(--sbu-radius-md);
  padding: 28px;
  text-align: center;
  color: var(--sbu-gray-400);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

#productVariantForm .sbu-dropzone:hover,
#productVariantForm .sbu-dropzone.drag-over {
  border-color: var(--sbu-blue-200);
  background: var(--sbu-blue-50);
}

#productVariantForm .sbu-dropzone__icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  display: block;
  pointer-events: none;
}

#productVariantForm .sbu-dropzone__text {
  pointer-events: none;
}

#productVariantForm .sbu-dropzone__text span {
  font-size: 12px;
  color: var(--sbu-gray-400);
  display: block;
  margin-top: 4px;
}

#productVariantForm .sbu-dropzone__input {
  display: none !important;
}

#productVariantForm .sbu-dropzone__files {
  margin-top: 12px;
  text-align: left;
}

#productVariantForm .sbu-dropzone__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--sbu-gray-50);
  border: 1px solid var(--sbu-gray-200);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--sbu-gray-800);
}

#productVariantForm .sbu-dropzone__file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 12px;
}

#productVariantForm .sbu-dropzone__file-size {
  font-size: 11px;
  color: var(--sbu-gray-400);
  margin-right: 12px;
  flex-shrink: 0;
}

#productVariantForm .sbu-dropzone__file-status {
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}

#productVariantForm .sbu-dropzone__file-status.done {
  color: var(--sbu-green-600);
}

#productVariantForm .sbu-dropzone__file-status.error {
  color: var(--sbu-red-500);
}

#productVariantForm .sbu-dropzone__file-remove {
  background: none;
  border: none;
  color: var(--sbu-gray-400);
  cursor: pointer;
  font-size: 16px;
  padding: 0 0 0 8px;
  line-height: 1;
  transition: color 0.15s;
}

#productVariantForm .sbu-dropzone__file-remove:hover {
  color: var(--sbu-red-500);
}

#productVariantForm .sbu-dropzone__counter {
  font-size: 11px;
  color: var(--sbu-gray-400);
  margin-top: 6px;
  text-align: right;
}

/* ============================================================
   11. DIVIDERS BETWEEN SECTIONS
   ============================================================ */

#productVariantForm .attribute-group + .attribute-group {
  border-top: 1px solid var(--sbu-gray-100);
  padding-top: 2rem !important;
}

/* ============================================================
   12. DATEPICKER STYLING
   ============================================================ */

#productVariantForm .attribute.name_Date .datepicker input,
#productVariantForm .attribute.name_Date .attribute-datepicker__container input {
  width: 100% !important;
  font-size: 14px !important;
  padding: 9px 12px !important;
  border: 1px solid var(--sbu-gray-200) !important;
  border-radius: var(--sbu-radius-md) !important;
  background: #fff !important;
  color: var(--sbu-gray-900) !important;
}

#productVariantForm .attribute.name_Date .datepicker input:focus {
  border-color: var(--sbu-blue-200) !important;
  box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.1) !important;
}

/* ============================================================
   13. TOOLTIP → INLINE HINT TEXT
   Converts hover-only tooltip icons into always-visible hint
   text below the label, matching the reference design.
   ============================================================ */

/* Hide the info-circle icon */
#productVariantForm .attribute .cf-tooltip .fa-info-circle {
  display: none !important;
}

/* Make the tooltip container always visible as inline hint */
#productVariantForm .attribute .cf-tooltip .tooltip-html-container {
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  display: block !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--sbu-gray-400) !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  text-align: left !important;
  pointer-events: none !important;
}

/* Remove the tooltip arrow */
#productVariantForm .attribute .cf-tooltip .tooltip-html-container::before,
#productVariantForm .attribute .cf-tooltip .tooltip-html-container::after {
  display: none !important;
}

/* Reset tooltip wrapper to flow inline */
#productVariantForm .attribute .cf-tooltip {
  display: block !important;
  position: static !important;
  cursor: default !important;
}

/* Tooltip wrapper should not create hover effects */
#productVariantForm .attribute .cf-tooltip:hover .tooltip-html-container,
#productVariantForm .attribute .cf-tooltip:focus .tooltip-html-container {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Fix label flow — ensure hint sits below the label text.
   DOM order is: [tooltip span] [label text node] [required *]
   We want:       [label text] [*]  (line 1)
                  [hint text]       (line 2)
   Use flex-wrap so the tooltip (set to full width) drops to line 2. */
#productVariantForm .attribute .attributeTitle.leftTooltip {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
}

/* Tooltip wrapper: push to a new line by taking full width */
#productVariantForm .attribute .attributeTitle.leftTooltip > .vue-component-wrapper {
  order: 3 !important;
  flex-basis: 100% !important;
  margin-top: 1px !important;
  margin-left: 0 !important;
}

/* Required asterisk stays on same line as label */
#productVariantForm .attribute .attributeTitle.leftTooltip > .attributeRequired {
  order: 2 !important;
}

/* ============================================================
   14. SUBMIT FOOTER & CONFIRMATION
   ============================================================ */

/* Footer hint below the submit button */
#productVariantForm .save-quote-buttons-wrapper::after {
  content: 'Routed to the front-end estimating team for review';
  display: block;
  font-size: 12px;
  color: var(--sbu-gray-400);
  text-align: center;
  margin-top: 10px;
}

/* Confirmation message — green banner */
#productVariantForm .savequoteconfirmationmsg {
  margin-top: 1rem !important;
  padding: 16px 18px !important;
  border-radius: var(--sbu-radius-md) !important;
  background: var(--sbu-green-50) !important;
  border: 1px solid var(--sbu-green-600) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #27500A !important;
  text-align: left !important;
}

/* ============================================================
   15. QTY FIELD REFINEMENT
   ============================================================ */

/* Hide the Qty label text — the field is self-explanatory with placeholder */
#productVariantForm .price-quantity-start-wrapper .quantity-wrapper .title.is-5 {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--sbu-gray-400) !important;
}

/* Style the qty input to match other form fields */
#productVariantForm .price-quantity-start-wrapper .quantityBox {
  font-size: 14px !important;
  padding: 9px 12px !important;
  border: 1px solid var(--sbu-gray-200) !important;
  border-radius: var(--sbu-radius-md) !important;
  background: #fff !important;
  color: var(--sbu-gray-900) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  outline: none !important;
  height: auto !important;
  line-height: 1.5 !important;
}

#productVariantForm .price-quantity-start-wrapper .quantityBox:focus {
  border-color: var(--sbu-blue-200) !important;
  box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.1) !important;
}

/* ============================================================
   16. MISC CLEANUP (scoped)
   ============================================================ */

#productVariantForm .product-variant-line .block.is-medium {
  margin-bottom: 0 !important;
}

#productVariantForm .attributes.columns.is-multiline {
  display: block !important;
  margin: 0 !important;
}

#productVariantForm .attributes > .catfish-classes {
  display: none !important;
}

#productVariantForm .attributes__loading-overlay {
  display: none !important;
}

#productVariantForm .notification {
  display: none !important;
}

#productVariantForm #sci-holder-id {
  display: none !important;
}

/* ============================================================
   17. VALIDATION ERROR STYLING
   ============================================================ */

#productVariantForm .attribute.sbu-validation-error .attributeTitle {
  color: var(--sbu-red-500) !important;
}

#productVariantForm .sbu-dropzone-wrapper .attributeRequired {
  color: var(--sbu-red-500) !important;
  margin-left: 2px !important;
}

#productVariantForm .sbu-dropzone-wrapper.sbu-validation-error .attributeTitle {
  color: var(--sbu-red-500) !important;
}

#productVariantForm .sbu-dropzone-wrapper.sbu-validation-error .sbu-dropzone {
  border-color: var(--sbu-red-500) !important;
  box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.12) !important;
}

#productVariantForm .sbu-input-error {
  border-color: var(--sbu-red-500) !important;
  box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.12) !important;
}

#productVariantForm .sbu-error-msg {
  margin-top: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--sbu-red-500) !important;
  line-height: 1.4 !important;
}

@keyframes sbu-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

#productVariantForm .sbu-shake {
  animation: sbu-shake 0.5s ease-in-out !important;
}

/* ============================================================
   18. QUANTITY BREAK EXPANDER BUTTON
   ============================================================ */

#productVariantForm .sbu-qty-add-btn {
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sbu-blue-600) !important;
  background: var(--sbu-blue-50) !important;
  border: 1px solid var(--sbu-blue-100) !important;
  border-radius: var(--sbu-radius-md) !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: background 0.15s, border-color 0.15s !important;
  margin-bottom: 16px !important;
  height: auto !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}

#productVariantForm .sbu-qty-add-btn:hover {
  background: var(--sbu-blue-100) !important;
  border-color: var(--sbu-blue-200) !important;
}

#productVariantForm .sbu-qty-add-btn.is-disabled,
#productVariantForm .sbu-qty-add-btn:disabled {
  color: #6b7280 !important;
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

#productVariantForm .sbu-qty-add-btn.is-disabled:hover,
#productVariantForm .sbu-qty-add-btn:disabled:hover {
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
}

/* Two-button row (Add / Remove last) shown below the last visible quantity
   break. Spans the full grid width like the original add button. */
#productVariantForm .sbu-qty-btn-row {
  grid-column: 1 / -1 !important;
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

#productVariantForm .sbu-qty-btn-row .sbu-qty-add-btn {
  flex: 1 1 0 !important;
  margin-bottom: 0 !important; /* row owns the spacing */
}

#productVariantForm .sbu-qty-remove-btn {
  flex: 0 0 auto !important;
  min-width: 140px !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #b91c1c !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: var(--sbu-radius-md) !important;
  cursor: pointer !important;
  text-align: center !important;
  height: auto !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: background 0.15s, border-color 0.15s !important;
}

#productVariantForm .sbu-qty-remove-btn:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
}

#productVariantForm .sbu-qty-remove-btn.is-disabled,
#productVariantForm .sbu-qty-remove-btn:disabled {
  color: #9ca3af !important;
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

#productVariantForm .sbu-qty-remove-btn.is-disabled:hover,
#productVariantForm .sbu-qty-remove-btn:disabled:hover {
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
}

/* Stack the two buttons on narrow screens. */
@media (max-width: 480px) {
  #productVariantForm .sbu-qty-btn-row {
    flex-direction: column !important;
  }
  #productVariantForm .sbu-qty-btn-row .sbu-qty-remove-btn {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ============================================================
   19. RESPONSIVE — Mobile
   ============================================================ */

@media (max-width: 768px) {
  #productVariantForm .product-variant-list {
    padding: 1.5rem 1.25rem;
  }

  /* Collapse every attribute-group (including the 3-column Material group at
     :nth-child(5)) to a single column. */
  #productVariantForm .attribute-group,
  #productVariantForm .attribute-group:nth-child(5),
  #productVariantForm .attribute-group.sbu-liner-other {
    grid-template-columns: 1fr !important;
  }

  /* The [id] attribute selector adds a class-level specificity bump so this
     rule beats the per-field `:has(input[aria-label="..."])` desktop rules
     (which would otherwise keep Phone/Attention/Zip/Country side-by-side). */
  #productVariantForm[id] .attribute-group > .attribute,
  #productVariantForm[id] .attribute-group > .sbu-dropzone-wrapper {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Restore visibility of fields that desktop CSS moves to grid-column 2/3
     etc. — width:100% above is enough, but ensure flex children don't shrink. */
  #productVariantForm[id] .attribute-group > .attribute > .attributeHeader,
  #productVariantForm[id] .attribute-group > .attribute > .attribute-item {
    width: 100% !important;
  }

  /* Section titles span full width (they already do, but force it on mobile
     in case desktop overrides leak through). */
  #productVariantForm[id] .attribute-group > .attribute-group-title {
    grid-column: 1 / -1 !important;
  }
}


.manage-users-page .form-section:has(select[aria-label="State or Province"]) {
  display: none !important;
}


#productVariantForm .attribute.name_Date .datepicker input, #productVariantForm .attribute.name_Date .attribute-datepicker__container input{
  padding: 8px 34px !important;
}

@media screen and (min-width: 768px) {

  #productVariantForm .attribute-group:not(.name_Wind_Direction):has(.name_BusinessName),
  #productVariantForm .attribute-group:not(.name_Wind_Direction):has(.name_CustomerId),
  #productVariantForm .attribute-group:not(.name_Wind_Direction):has(.name_MaterialAppearance),
  #productVariantForm .attribute-group:not(.name_Wind_Direction):has(.name_MaterialLiner),
  #productVariantForm .attribute-group:not(.name_Wind_Direction):has(.name_Film_Specification){
    gap: 14px 14px !important
  }

  #productVariantForm .attribute.name_MaterialLiner .attributeHeader{
    flex: none !important;
  }

  #productVariantForm .attribute:not(.name_Wind_Direction).name_Film_Specification,
  #productVariantForm .attribute:not(.name_Wind_Direction).name_MaterialWeightPaper{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #productVariantForm .attribute:not(.name_Wind_Direction).name_BusinessName,
  #productVariantForm .attribute:not(.name_Wind_Direction).name_CustomerId,
  #productVariantForm .attribute:not(.name_Wind_Direction).name_Phone,
  #productVariantForm .attribute:not(.name_Wind_Direction):has(input[aria-label="Phone"]),
  #productVariantForm .attribute:not(.name_Wind_Direction).name_Attention,
  #productVariantForm .attribute:not(.name_Wind_Direction):has(input[aria-label="Attention"]),
  #productVariantForm .attribute:not(.name_Wind_Direction).name_ShipToInformation,
  #productVariantForm .attribute:not(.name_Wind_Direction):has(input[aria-label="City"]),
  #productVariantForm .attribute:not(.name_Wind_Direction).name_Ship_to_State,
  #productVariantForm .attribute:not(.name_Wind_Direction):has(input[aria-label="Ship to State"]),
  #productVariantForm .attribute:not(.name_Wind_Direction):has(input[aria-label="State"]),
  #productVariantForm .attribute:not(.name_Wind_Direction).name_ShipToZip,
  #productVariantForm .attribute:not(.name_Wind_Direction):has(input[aria-label="Zip code"]),
  #productVariantForm .attribute:not(.name_Wind_Direction).name_Country,
  #productVariantForm .attribute:not(.name_Wind_Direction):has(input[aria-label="Country"]) {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #productVariantForm .attribute:not(.name_Wind_Direction).name_MaterialAppearance,
  #productVariantForm .attribute:not(.name_Wind_Direction).name_MaterialLiner,
  #productVariantForm .attribute:not(.name_Wind_Direction).name_Film_Specification,
  #productVariantForm .attribute:not(.name_Wind_Direction).name_MaterialWeightPaper{
    height: 100%;
  }

  #productVariantForm .attribute:not(.name_Wind_Direction).name_BusinessName .attribute-item,
  #productVariantForm .attribute:not(.name_Wind_Direction).name_CustomerId .attribute-item,
  #productVariantForm .attribute:not(.name_Wind_Direction).name_Phone .attribute-item,
  #productVariantForm .attribute:not(.name_Wind_Direction):has(input[aria-label="Phone"]) .attribute-item,
  #productVariantForm .attribute:not(.name_Wind_Direction).name_Attention .attribute-item,
  #productVariantForm .attribute:not(.name_Wind_Direction):has(input[aria-label="Attention"]) .attribute-item,
  #productVariantForm .attribute:not(.name_Wind_Direction).name_ShipToInformation .attribute-item,
  #productVariantForm .attribute:not(.name_Wind_Direction):has(input[aria-label="City"]) .attribute-item,
  #productVariantForm .attribute:not(.name_Wind_Direction).name_Ship_to_State .attribute-item,
  #productVariantForm .attribute:not(.name_Wind_Direction):has(input[aria-label="Ship to State"]) .attribute-item,
  #productVariantForm .attribute:not(.name_Wind_Direction):has(input[aria-label="State"]) .attribute-item,
  #productVariantForm .attribute:not(.name_Wind_Direction).name_ShipToZip .attribute-item,
  #productVariantForm .attribute:not(.name_Wind_Direction):has(input[aria-label="Zip code"]) .attribute-item,
  #productVariantForm .attribute:not(.name_Wind_Direction).name_Country .attribute-item,
  #productVariantForm .attribute:not(.name_Wind_Direction):has(input[aria-label="Country"]) .attribute-item {
    margin-top: auto !important;
    flex-shrink: 0 !important;
  }
}

/* Date picker - Input fix */
#productVariantForm .attribute.name_Date .datepicker .control.has-icons-left input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]):not(.fileUpload){
  padding-left: 2.5rem !important;
}

#productVariantForm .attribute.name_Date .datepicker .select:not(.is-multiple):not(.is-loading)::after{
  display: none;
}

.producttags-box {
    display: none !important;
}