@designcrowd/library.brand-page 6.2.11-builder-v2-1 → 6.2.12

package/lib/src/css/library.brand-page-preview.min.css

@@ -863,8 +863,8 @@ a.maker-anchor {
 .bp .tw-max-h-72 {
     max-height: 18rem
 }
-.bp .tw-max-h-9 {
-    max-height: 2.25rem
+.bp .tw-max-h-8 {
+    max-height: 2rem
 }
 .bp .tw-max-h-\[340px\] {
     max-height: 340px
@@ -893,6 +893,9 @@ a.maker-anchor {
 .bp .tw-min-h-\[1\.25rem\] {
     min-height: 1.25rem
 }
+.bp .tw-min-h-\[38px\] {
+    min-height: 38px
+}
 .bp .tw-min-h-full {
     min-height: 100%
 }
@@ -1127,12 +1130,15 @@ a.maker-anchor {
 .bp .tw-min-w-10 {
     min-width: 2.5rem
 }
-.bp .tw-min-w-8 {
-    min-width: 2rem
+.bp .tw-min-w-7 {
+    min-width: 1.75rem
 }
 .bp .tw-min-w-\[120px\] {
     min-width: 120px
 }
+.bp .tw-min-w-\[220px\] {
+    min-width: 220px
+}
 .bp .tw-min-w-\[310px\] {
     min-width: 310px
 }
@@ -1389,10 +1395,6 @@ a.maker-anchor {
     -ms-flex-preferred-size: 0px;
         flex-basis: 0px
 }
-.bp .tw-origin-top-left {
-    -webkit-transform-origin: top left;
-            transform-origin: top left
-}
 .bp .tw-origin-top-right {
     -webkit-transform-origin: top right;
             transform-origin: top right
@@ -2360,6 +2362,10 @@ a.maker-anchor {
     --tw-border-opacity: 1;
     border-color: rgb(89 89 89 / var(--tw-border-opacity))
 }
+.bp .tw-border-secondary-800 {
+    --tw-border-opacity: 1;
+    border-color: rgb(36 36 36 / var(--tw-border-opacity))
+}
 .bp .tw-border-success-400 {
     --tw-border-opacity: 1;
     border-color: rgb(80 185 64 / var(--tw-border-opacity))
@@ -2825,9 +2831,6 @@ a.maker-anchor {
 .bp .tw-pl-0\.5 {
     padding-left: 0.125rem
 }
-.bp .tw-pl-1 {
-    padding-left: 0.25rem
-}
 .bp .tw-pl-12 {
     padding-left: 3rem
 }
@@ -5668,7 +5671,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   font-family: Lato, Helvetica, sans-serif;
 }
 
-.bp .carousel-wrapper[data-v-37c2e358] {
+.bp .carousel-wrapper[data-v-1d4fd3e2] {
   position: relative;
   overflow-x: auto;
   overflow-y: hidden;
@@ -5678,15 +5681,15 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   -ms-overflow-style: none;
   width: 100%;
 }
-.bp .scroll-chevron[data-v-37c2e358] {
+.bp .scroll-chevron[data-v-1d4fd3e2] {
   background: none !important;
   border: none !important;
 }
-.bp .carousel-wrapper[data-v-37c2e358]:active {
+.bp .carousel-wrapper[data-v-1d4fd3e2]:active {
   cursor: -webkit-grabbing;
   cursor: grabbing;
 }
-.bp .carousel-track[data-v-37c2e358] {
+.bp .carousel-track[data-v-1d4fd3e2] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -5700,7 +5703,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   margin: 0 auto;
   gap: 8px;
 }
-.bp .carousel-item[data-v-37c2e358] {
+.bp .carousel-item[data-v-1d4fd3e2] {
   position: relative;
   -ms-flex-negative: 0;
       flex-shrink: 0;
@@ -5711,7 +5714,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
       -ms-flex-align: center;
           align-items: center;
 }
-.bp .carousel-link[data-v-37c2e358] {
+.bp .carousel-link[data-v-1d4fd3e2] {
   display: block;
   padding: 12px 8px;
   text-decoration: none;
@@ -5724,7 +5727,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   -ms-flex-item-align: stretch;
       align-self: stretch;
 }
-.bp .carousel-chevron[data-v-37c2e358] {
+.bp .carousel-chevron[data-v-1d4fd3e2] {
   cursor: pointer;
   border-left: none !important;
   padding: 0 12px;
@@ -5738,17 +5741,17 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
       -ms-flex-align: center;
           align-items: center;
 }
-.bp .carousel-chevron[data-v-37c2e358] svg {
+.bp .carousel-chevron[data-v-1d4fd3e2] svg {
   -webkit-transition: -webkit-transform 0.2s ease;
   transition: -webkit-transform 0.2s ease;
   transition: transform 0.2s ease;
   transition: transform 0.2s ease, -webkit-transform 0.2s ease;
 }
-.bp .carousel-chevron--open[data-v-37c2e358] svg {
+.bp .carousel-chevron--open[data-v-1d4fd3e2] svg {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
-.bp .dropdown-menu[data-v-37c2e358] {
+.bp .dropdown-menu[data-v-1d4fd3e2] {
   min-width: 150px;
   max-height: 240px;
   overflow-x: hidden;
@@ -5761,7 +5764,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.bp .dropdown-item[data-v-37c2e358] {
+.bp .dropdown-item[data-v-1d4fd3e2] {
   display: block;
   padding: 12px 16px;
   cursor: pointer;
@@ -5922,7 +5925,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   );
 }
 
-.bp .empty-para[data-v-4418a9fe] p:empty::after {
+.bp .empty-para[data-v-532b5fd8] p:empty::after {
   content: '\00A0';
 }
 
@@ -6033,7 +6036,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   text-decoration: underline;
 }
 
-.bp .form-error[data-v-5c3c6927] {
+.bp .form-error[data-v-a2d29285] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f
@@ -6277,18 +6280,18 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 }
 }
 
-.bp .form-error[data-v-665b8067] {
+.bp .form-error[data-v-6de658e0] {
   font-size: 0.75rem;
   line-height: 1rem;
   color: #f21b3f;
 }
-select[data-v-665b8067] {
+select[data-v-6de658e0] {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 12px center;
 }
 
-.bp .form-error[data-v-a0d0666b] {
+.bp .form-error[data-v-d41f9828] {
   font-size: 0.75rem;
   line-height: 1rem;
   color: #f21b3f
@@ -6387,59 +6390,59 @@ select[data-v-665b8067] {
   width: 100%;
 }
 
-.bp .form-error[data-v-2e955d80] {
+.bp .form-error[data-v-f317d692] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.bp .contact-container[data-v-2e955d80] {
+.bp .contact-container[data-v-f317d692] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.bp .c-text-padding[data-v-2e955d80] {
+.bp .c-text-padding[data-v-f317d692] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.bp .device-wrapper--mobile .c-divided-container[data-v-2e955d80] {
+.bp .device-wrapper--mobile .c-divided-container[data-v-f317d692] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.bp .device-wrapper--mobile .c-divided-container-reverse[data-v-2e955d80] {
+.bp .device-wrapper--mobile .c-divided-container-reverse[data-v-f317d692] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
 @media (max-width: 767px) {
-.bp .c-button-full[data-v-2e955d80] {
+.bp .c-button-full[data-v-f317d692] {
     width: 100%;
 }
   /* Match the button's full-width on published mobile. The maker uses the
      isMobileDevice prop for this; the renderer has no such state, so the
      decorative-button wrapper is widened here via the real viewport instead. */
-[data-v-2e955d80] .bp-style-wrapper {
+[data-v-f317d692] .bp-style-wrapper {
     width: 100%;
 }
-.bp .c-col-span-2[data-v-2e955d80] {
+.bp .c-col-span-2[data-v-f317d692] {
     grid-column: span 2 / span 2;
 }
-.bp .c-mobile-padding[data-v-2e955d80] {
+.bp .c-mobile-padding[data-v-f317d692] {
     padding: 1rem;
 }
-.bp .c-text-padding[data-v-2e955d80] {
+.bp .c-text-padding[data-v-f317d692] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.bp .c-divided-container[data-v-2e955d80] {
+.bp .c-divided-container[data-v-f317d692] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.bp .c-divided-container-reverse[data-v-2e955d80] {
+.bp .c-divided-container-reverse[data-v-f317d692] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6447,16 +6450,16 @@ select[data-v-665b8067] {
 }
 }
 @media (min-width: 767px) {
-.bp .c-aspect-square[data-v-2e955d80] {
+.bp .c-aspect-square[data-v-f317d692] {
     aspect-ratio: 1 / 1;
 }
-.bp .c-divided-container[data-v-2e955d80] {
+.bp .c-divided-container[data-v-f317d692] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.bp .c-divided-container-reverse[data-v-2e955d80] {
+.bp .c-divided-container-reverse[data-v-f317d692] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
@@ -7105,44 +7108,44 @@ select[data-v-665b8067] {
   color: #f21b3f;
 }
 
-.bp .inner-container[data-v-fca616f0] {
+.bp .inner-container[data-v-0f062477] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.bp .outer-container[data-v-fca616f0] {
+.bp .outer-container[data-v-0f062477] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.bp .modal-cart[data-v-fca616f0] .cart-image {
+.bp .modal-cart[data-v-0f062477] .cart-image {
   width: 3rem;
 }
-.bp .modal-cart[data-v-fca616f0] .cart-option {
+.bp .modal-cart[data-v-0f062477] .cart-option {
   width: 100%;
 }
-.bp .success-bar-container[data-v-fca616f0] .tw-bg-success-500 {
+.bp .success-bar-container[data-v-0f062477] .tw-bg-success-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(36 168 16 / var(--tw-bg-opacity));
 }
 @media (min-width: 640px) {
-.bp .modal-product-detail[data-v-fca616f0] .modal {
+.bp .modal-product-detail[data-v-0f062477] .modal {
     min-width: 100vh;
 }
-.bp .modal-cart[data-v-fca616f0] .modal {
+.bp .modal-cart[data-v-0f062477] .modal {
     min-width: 90vh;
     max-height: 90vh;
 }
-.bp .modal-cart[data-v-fca616f0] .cart-image {
+.bp .modal-cart[data-v-0f062477] .cart-image {
     width: 8rem;
 }
-.bp .modal-cart[data-v-fca616f0] .cart-option {
+.bp .modal-cart[data-v-0f062477] .cart-option {
     width: 75%;
 }
-.bp .success-bar[data-v-fca616f0] {
+.bp .success-bar[data-v-0f062477] {
     width: 50%;
 }
 }
 @media (max-width: 640px) {
-.bp .success-bar[data-v-fca616f0] {
+.bp .success-bar[data-v-0f062477] {
     width: 91.666667%;
 }
 }
@@ -7966,21 +7969,21 @@ select[data-v-665b8067] {
   padding: 0.25rem var(--page-padding);
 }
 
-.bp .c-page-footer__container[data-v-613305b7] {
+.bp .c-page-footer__container[data-v-ef9d02e0] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
   padding: 0.25rem var(--page-padding);
 }
-.bp .c-page-footer__container-justified[data-v-613305b7] {
+.bp .c-page-footer__container-justified[data-v-ef9d02e0] {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
-.bp .sortable[data-v-613305b7] {
+.bp .sortable[data-v-ef9d02e0] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.bp .brand-page__content--outline-selected[data-v-613305b7] {
+.bp .brand-page__content--outline-selected[data-v-ef9d02e0] {
   position: relative;
   z-index: 10;
   margin-left: 0.25rem;
@@ -7989,25 +7992,25 @@ select[data-v-665b8067] {
   outline-width: 0.2rem;
   outline-style: dashed;
 }
-.bp .c_footer-container[data-v-613305b7] {
+.bp .c_footer-container[data-v-ef9d02e0] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
 @container (max-width: 640px) {
-.bp .c-page-footer__container-justified[data-v-613305b7] {
+.bp .c-page-footer__container-justified[data-v-ef9d02e0] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.bp .c-page-footer__container-justified[data-v-613305b7] > :nth-child(2) {
+.bp .c-page-footer__container-justified[data-v-ef9d02e0] > :nth-child(2) {
     margin-bottom: 1rem;
 }
 }
 @container (min-width: 640px) {
-.bp .c-page-footer__container-justified-stack[data-v-613305b7] {
+.bp .c-page-footer__container-justified-stack[data-v-ef9d02e0] {
     margin-left: 1rem;
     margin-right: 1rem;
     -webkit-box-pack: justify;
@@ -8016,7 +8019,7 @@ select[data-v-665b8067] {
 }
 }
 
-.bp .c-overlay[data-v-0b2b4f62] {
+.bp .c-overlay[data-v-aa0f82c0] {
   position: fixed;
   inset: 0px;
   z-index: 40;
@@ -8034,15 +8037,15 @@ select[data-v-665b8067] {
   -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.bp .c-overlay--open[data-v-0b2b4f62] {
+.bp .c-overlay--open[data-v-aa0f82c0] {
   opacity: 0.7;
 }
-.bp .c-overlay--closed[data-v-0b2b4f62] {
+.bp .c-overlay--closed[data-v-aa0f82c0] {
   pointer-events: none;
   display: none;
   opacity: 0;
 }
-.bp .c-sidebar[data-v-0b2b4f62] {
+.bp .c-sidebar[data-v-aa0f82c0] {
   /* No hardcoded background: the panel background comes from the hamburger
      defaultButtonStyle (bound via :style), so a transparent/unset default bg
      renders transparent instead of being forced white  */
@@ -8062,32 +8065,32 @@ select[data-v-665b8067] {
   max-width: 66%;
 }
 @media (min-width: 768px) {
-.bp .device--mobile .c-sidebar[data-v-0b2b4f62] {
+.bp .device--mobile .c-sidebar[data-v-aa0f82c0] {
     width: 66.666667%;
 }
 }
-.bp .c-sidebar--closed[data-v-0b2b4f62] {
+.bp .c-sidebar--closed[data-v-aa0f82c0] {
   -webkit-transform: translateX(-100%);
           transform: translateX(-100%);
   visibility: hidden;
 }
-.bp .c-sidebar--open[data-v-0b2b4f62] {
+.bp .c-sidebar--open[data-v-aa0f82c0] {
   -webkit-transform: translateX(0%);
           transform: translateX(0%);
 }
-.bp .c-chevron-transform[data-v-0b2b4f62] {
+.bp .c-chevron-transform[data-v-aa0f82c0] {
   -webkit-transition: -webkit-transform 0.3s ease;
   transition: -webkit-transform 0.3s ease;
   transition: transform 0.3s ease;
   transition: transform 0.3s ease, -webkit-transform 0.3s ease;
 }
-.bp .c-chevron-expanded[data-v-0b2b4f62] {
+.bp .c-chevron-expanded[data-v-aa0f82c0] {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
 
 /* Button pinned to the bottom of the side menu; rules only apply when the button is on. */
-.bp .c-sidebar--has-cta[data-v-0b2b4f62] {
+.bp .c-sidebar--has-cta[data-v-aa0f82c0] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8097,35 +8100,35 @@ select[data-v-665b8067] {
           flex-direction: column;
   overflow: hidden;
 }
-.bp .c-sidebar--has-cta .c-sidebar-header[data-v-0b2b4f62] {
+.bp .c-sidebar--has-cta .c-sidebar-header[data-v-aa0f82c0] {
   -ms-flex-negative: 0;
       flex-shrink: 0;
 }
-.bp .c-sidebar--has-cta .c-nav-list[data-v-0b2b4f62] {
+.bp .c-sidebar--has-cta .c-nav-list[data-v-aa0f82c0] {
   /* Lets the link list scroll instead of the panel. */
   min-height: 0;
   overflow-y: auto;
 }
-.bp .c-sidebar-cta[data-v-0b2b4f62] {
+.bp .c-sidebar-cta[data-v-aa0f82c0] {
   position: relative;
   padding: 1rem;
 }
 
 /* The generic Button ships section spacing; the side menu, as the caller, strips it
    (same fit the header row applies in HeaderLayout.vue). */
-.bp .c-sidebar-cta[data-v-0b2b4f62] .bp-button {
+.bp .c-sidebar-cta[data-v-aa0f82c0] .bp-button {
   margin-bottom: 0;
   min-height: 0;
 }
-.bp .c-sidebar-cta[data-v-0b2b4f62] .c-button__no-icon {
+.bp .c-sidebar-cta[data-v-aa0f82c0] .c-button__no-icon {
   display: none;
 }
 /* Base label class, not a specific --offset-* variant, so a future offset swap can't slide it. */
-.bp .c-sidebar-cta[data-v-0b2b4f62] .c-button__label {
+.bp .c-sidebar-cta[data-v-aa0f82c0] .c-button__label {
   -webkit-transform: none;
           transform: none;
 }
-.bp .c-sidebar--has-cta .c-sidebar-cta[data-v-0b2b4f62] {
+.bp .c-sidebar--has-cta .c-sidebar-cta[data-v-aa0f82c0] {
   /* Keeps the button at the bottom whether links underfill or overflow. */
   margin-top: auto;
   -ms-flex-negative: 0;
@@ -8135,7 +8138,7 @@ select[data-v-665b8067] {
 }
 
 /* Thin separator line above the button, faded without dimming the button itself. */
-.bp .c-sidebar-cta[data-v-0b2b4f62]::before {
+.bp .c-sidebar-cta[data-v-aa0f82c0]::before {
   content: '';
   position: absolute;
   top: 0;
@@ -8250,7 +8253,7 @@ to {
   font-family: Lato, Helvetica, sans-serif;
 }
 
-.bp .brand-page__footer[data-v-0a7ac3ed] {
+.bp .brand-page__footer[data-v-1aa33248] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8258,7 +8261,7 @@ to {
       -ms-flex-pack: center;
           justify-content: center;
 }
-.bp .brand-page__footer-link[data-v-0a7ac3ed] {
+.bp .brand-page__footer-link[data-v-1aa33248] {
   display: block;
   border-radius: 0.25rem;
   padding: 0.75rem;
@@ -8266,25 +8269,25 @@ to {
   -webkit-transition: background 0.2s ease-in-out;
   transition: background 0.2s ease-in-out;
 }
-.bp .brand-page__footer-link[data-v-0a7ac3ed]:hover {
+.bp .brand-page__footer-link[data-v-1aa33248]:hover {
   opacity: 0.9;
 }
-.bp .icon-container[data-v-0a7ac3ed] {
+.bp .icon-container[data-v-1aa33248] {
   width: 20px;
   overflow: hidden;
 }
-.bp .extra-height[data-v-0a7ac3ed] {
+.bp .extra-height[data-v-1aa33248] {
   -webkit-transition: height 0.5s ease-in-out;
   transition: height 0.5s ease-in-out;
   width: 100%;
 }
-.bp .c-button__label[data-v-0a7ac3ed] {
+.bp .c-button__label[data-v-1aa33248] {
   margin: 0 auto;
   word-break: break-word;
   overflow-wrap: anywhere;
   width: auto;
 }
-.bp .c-button[data-v-0a7ac3ed] {
+.bp .c-button[data-v-1aa33248] {
   --icon-h: 1.5rem;
   --icon-m-r: 0.5rem;
   --icon-m-icon: 0.5rem;
@@ -8299,10 +8302,10 @@ to {
       -ms-flex-align: center !important;
           align-items: center !important;
 }
-.bp .button__icon[data-v-0a7ac3ed] {
+.bp .button__icon[data-v-1aa33248] {
   margin-right: var(--icon-m-r);
 }
-.bp .btn-max-width[data-v-0a7ac3ed] {
+.bp .btn-max-width[data-v-1aa33248] {
   max-width: 315px;
   width: 100%;
 }
@@ -8325,14 +8328,14 @@ to {
   visibility: hidden !important;
 }
 
-.bp .brand-page-root[data-v-2debce4b] {
+.bp .brand-page-root[data-v-b1539a54] {
   height: 100%;
 }
-.bp .sortable[data-v-2debce4b] {
+.bp .sortable[data-v-b1539a54] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.bp .brand-page[data-v-2debce4b] {
+.bp .brand-page[data-v-b1539a54] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -8344,7 +8347,7 @@ to {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.bp .brand-page__background-shapes-layer[data-v-2debce4b] {
+.bp .brand-page__background-shapes-layer[data-v-b1539a54] {
   position: fixed;
   top: 0;
   left: 0;
@@ -8355,11 +8358,11 @@ to {
           transform: translate3d(0, 0, 0);
   contain: layout paint;
 }
-.bp .template-preview .brand-page__background-shapes-layer[data-v-2debce4b],
-.bp .device-wrapper .brand-page__background-shapes-layer[data-v-2debce4b] {
+.bp .template-preview .brand-page__background-shapes-layer[data-v-b1539a54],
+.bp .device-wrapper .brand-page__background-shapes-layer[data-v-b1539a54] {
   height: 100%;
 }
-.bp .brand-page__inner--default[data-v-2debce4b] {
+.bp .brand-page__inner--default[data-v-b1539a54] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -8371,16 +8374,16 @@ to {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.bp .brand-page__inner--desktop[data-v-2debce4b] {
+.bp .brand-page__inner--desktop[data-v-b1539a54] {
   min-height: 100vh;
 }
-.bp .brand-site__header[data-v-2debce4b] {
+.bp .brand-site__header[data-v-b1539a54] {
   container-type: inline-size;
 }
-.bp .brand-page__header[data-v-2debce4b] {
+.bp .brand-page__header[data-v-b1539a54] {
   padding-top: var(--page-padding);
 }
-.bp .brand-page__content--default[data-v-2debce4b] {
+.bp .brand-page__content--default[data-v-b1539a54] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -8397,7 +8400,7 @@ to {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.bp .brand-page__content--desktop[data-v-2debce4b] {
+.bp .brand-page__content--desktop[data-v-b1539a54] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -8413,15 +8416,15 @@ to {
           flex-direction: column;
   max-width: 100%;
 }
-.bp .brand-page__content--inner[data-v-2debce4b] {
+.bp .brand-page__content--inner[data-v-b1539a54] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.bp .brand-page__content--inner--brandsite[data-v-2debce4b] {
+.bp .brand-page__content--inner--brandsite[data-v-b1539a54] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.bp .brand-page__content--outline-selected[data-v-2debce4b] {
+.bp .brand-page__content--outline-selected[data-v-b1539a54] {
   position: relative;
   z-index: 10;
   outline-color: #F7768C;
@@ -8429,20 +8432,20 @@ to {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.bp .brand-page__content--outline-footer-selected[data-v-2debce4b] {
+.bp .brand-page__content--outline-footer-selected[data-v-b1539a54] {
   outline-color: #f7768c;
   outline-width: 0.2rem;
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
 @media (max-width: 640px) {
-.bp .brand-page__content--inner--full-width[data-v-2debce4b] {
+.bp .brand-page__content--inner--full-width[data-v-b1539a54] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.bp .brand-page__content--inner--full-width[data-v-2debce4b] {
+.bp .brand-page__content--inner--full-width[data-v-b1539a54] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }
@@ -9566,11 +9569,16 @@ to {
   contain-intrinsic-size: auto 36px;
 }
 
-.bp .rich-text-editor[data-v-d27ffcd7]:focus-within {
+.bp .text-style-role-dropdown__item[data-v-44af9b33]:hover {
+  background-color: #eee;
+}
+
+.bp .rich-text-editor[data-v-01903c9e]:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));
 }
-.bp .style-editor[data-v-d27ffcd7] {
+.bp .style-editor[data-v-01903c9e] {
+  /* Spacing lives here: equal padding + gap. Items carry no margin/padding of their own. */
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -9580,8 +9588,10 @@ to {
           flex-direction: row;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.25rem;
 }
-.bp .style-editor[data-v-d27ffcd7] button:not(.c-button-style) {
+.bp .style-editor[data-v-01903c9e] button:not(.c-button-style) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -9591,22 +9601,39 @@ to {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.bp .style-editor-button[data-v-d27ffcd7] {
+.bp .style-editor-button[data-v-01903c9e] {
   cursor: pointer;
-  padding-left: 0.25rem;
-  padding-top: 0.25rem;
 }
-.bp .toolbar-editor-button.active[data-v-d27ffcd7] {
+/* Role + font selectors evenly split the toolbar's first row at every width; the
+   conditional reset tool (roller-brush) sits between them and takes only its own width
+   while shown (it collapses otherwise, so the selectors fill the row).
+   min-width:0 lets them shrink below their content so they never wrap to a second line —
+   the dropdown title truncates instead. */
+.bp .style-editor-button-textstyle[data-v-01903c9e],
+.bp .style-editor-button-font[data-v-01903c9e] {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 0px;
+          flex: 1 1 0;
+  min-width: 0;
+}
+/* The size stepper leads the formatting row (with the icons), so it sits at a fixed width
+   instead of growing. */
+.bp .style-editor-button.stepper[data-v-01903c9e] {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+  /* Two 30px −/+ buttons plus the 28px 3-digit input. A narrower box can't shrink the
+     stepper — its + button paints over the colour picker instead. */
+  width: 88px;
+}
+.bp .toolbar-editor-button.active[data-v-01903c9e] {
   font-weight: 700;
   background: #e3e3e3;
 }
-.bp .toolbar-editor-button[data-v-d27ffcd7] {
+.bp .toolbar-editor-button[data-v-01903c9e] {
   height: 32px;
   width: 32px;
   border-radius: 4px;
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-  margin-left: 0.25rem;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -9618,7 +9645,7 @@ to {
       -ms-flex-pack: center;
           justify-content: center;
 }
-[data-v-d27ffcd7] .ProseMirror {
+[data-v-01903c9e] .ProseMirror {
   border-top: 1px solid #ccc;
   min-height: 150px;
   padding: 8px;
@@ -9631,13 +9658,13 @@ to {
   max-height: 14rem;
   overflow: auto;
 }
-.bp .editor-compact[data-v-d27ffcd7] .ProseMirror {
+.bp .editor-compact[data-v-01903c9e] .ProseMirror {
   min-height: 6rem;
 }
-[data-v-d27ffcd7] .ProseMirror:focus {
+[data-v-01903c9e] .ProseMirror:focus {
   outline: none;
 }
-[data-v-d27ffcd7] .ProseMirror * {
+[data-v-01903c9e] .ProseMirror * {
   text-align: left !important;
   font-size: 16px !important;
   color: #606060 !important;
@@ -9646,29 +9673,61 @@ to {
   background-color: transparent !important;
   font-family: 'Lato' !important;
 }
-[data-v-d27ffcd7] .ProseMirror a s,[data-v-d27ffcd7] .ProseMirror a strike,[data-v-d27ffcd7] .ProseMirror a [data-strike] {
-  text-decoration: line-through !important;
+
+/* A link shows only the decoration it stores (its `<u>`), as on the published page, whose base
+   styles give `a` `text-decoration: inherit`; the browser default would underline every link. */
+[data-v-01903c9e] .ProseMirror a {
+  text-decoration: inherit !important;
 }
-[data-v-d27ffcd7] .ProseMirror a,[data-v-d27ffcd7] .ProseMirror a * {
+[data-v-01903c9e] .ProseMirror a,[data-v-01903c9e] .ProseMirror a * {
   /* Keep in sync with DEFAULT_LINK_COLOR (src/constants/rich-text-editor.constants.ts) — scoped CSS can't import it. */
   color: #0097d7 !important;
-  text-decoration: underline !important;
 }
-.bp .error-message[data-v-d27ffcd7] {
+.bp .error-message[data-v-01903c9e] {
   color: #d32f2f;
   font-size: 0.875rem;
   margin-top: 4px;
 }
-.bp .popup-container[data-v-d27ffcd7] {
+.bp .popup-container[data-v-01903c9e] {
   position: absolute;
   z-index: 10;
   right: 8%;
 }
-.bp .hyperlink-preview[data-v-d27ffcd7] {
+
+/* The toggle's own positioning context, so the popup below it doesn't turn `.style-editor`
+   into a containing block (which would squash the colour-picker popup). */
+.bp .style-modified-anchor[data-v-01903c9e] {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  position: relative;
+}
+.bp .style-modified-toggle[data-v-01903c9e] {
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(230 230 230 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+.bp .style-modified-anchor--hidden[data-v-01903c9e] {
+  display: none;
+}
+/* Hangs just below the toggle (its row), floating over the rows beneath rather than sitting
+   at the toolbar's bottom. Centred on the toggle by default; the inline `left` also clamps
+   it inside the toolbar when the toggle sits too near an edge (keep width in sync with
+   STYLE_MODIFIED_POPUP_WIDTH). */
+.bp .style-modified-popup[data-v-01903c9e] {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 6px);
+  width: 300px;
+}
+.bp .hyperlink-preview[data-v-01903c9e] {
   position: absolute;
   z-index: 10;
 }
-.bp .popup-panel[data-v-d27ffcd7] {
+.bp .popup-panel[data-v-01903c9e] {
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 8px;
@@ -9676,17 +9735,17 @@ to {
   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
-.bp .popup-panel[data-v-d27ffcd7] input {
+.bp .popup-panel[data-v-01903c9e] input {
   border: 1px solid #ccc;
   border-radius: 8px;
 }
-.bp .border[data-v-d27ffcd7] {
+.bp .border[data-v-01903c9e] {
   width: 100%;
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
   height: 1px;
 }
-[data-v-d27ffcd7] .text-dropdown-title {
+[data-v-01903c9e] .text-dropdown-title {
   height: 2rem;
   width: 100%;
   font-size: 0.875rem;
@@ -9695,7 +9754,7 @@ to {
   color: rgb(43 43 43 / var(--tw-text-opacity));
   font-weight: 300;
 }
-[data-v-d27ffcd7] .ProseMirror p.is-editor-empty:first-child::before {
+[data-v-01903c9e] .ProseMirror p.is-editor-empty:first-child::before {
   --tw-text-opacity: 1;
   color: rgb(208 208 208 / var(--tw-text-opacity));
   content: attr(data-placeholder);
@@ -9704,56 +9763,11 @@ to {
   pointer-events: none;
 }
 @media (max-width: 399px) {
-.bp .style-editor-button-font[data-v-d27ffcd7],
-  .bp .style-editor-button-textstyle[data-v-d27ffcd7] {
-    max-width: 48%;
-    padding-bottom: 0.25rem;
-}
-.bp .style-editor-button.stepper[data-v-d27ffcd7] {
-    max-width: 40%;
-}
-.bp .style-editor-button-stepper[data-v-d27ffcd7] {
-    max-width: 100%;
-}
-.bp .border.desktop[data-v-d27ffcd7] {
-    display: none;
-}
-.bp .border.mobile[data-v-d27ffcd7] {
-    display: block;
-}
-[data-v-d27ffcd7] .left-align {
-    -webkit-transform: translateX(-48%);
-            transform: translateX(-48%);
-}
-.bp .hyperlink-popup[data-v-d27ffcd7] {
+.bp .hyperlink-popup[data-v-01903c9e] {
     z-index: 10000 !important;
 }
 }
-@media (min-width: 400px) {
-.bp .style-editor-button.stepper[data-v-d27ffcd7] {
-    max-width: 32%;
-}
-.bp .style-editor-button-font[data-v-d27ffcd7] {
-    max-width: 28%;
-}
-.bp .style-editor-button-stepper[data-v-d27ffcd7] {
-    max-width: 100%;
-}
-.bp .style-editor-button-textstyle[data-v-d27ffcd7] {
-    max-width: 25%;
-}
-.bp .border.desktop[data-v-d27ffcd7] {
-    display: block;
-}
-.bp .border.mobile[data-v-d27ffcd7] {
-    display: none;
-}
-[data-v-d27ffcd7] .left-align {
-    -webkit-transform: translateX(-25%);
-            transform: translateX(-25%);
-}
-}
-.bp .drop-down-item[data-v-d27ffcd7]:hover {
+.bp .drop-down-item[data-v-01903c9e]:hover {
   background-color: #eee;
 }
 
@@ -9773,6 +9787,69 @@ input[type='number'][data-v-f3d394d9] {
 }
 }
 
+/* The toggle's own positioning context so the popup hangs relative to it. */
+.bp .text-style-field__modified-anchor[data-v-8166878a] {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-negative: 0;
+      flex-shrink: 0
+}
+.bp .text-style-field__modified-toggle[data-v-8166878a] {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  width: 2.75rem;
+  cursor: pointer;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(230 230 230 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(89 89 89 / var(--tw-text-opacity))
+}
+.bp .text-style-field__modified-toggle--active[data-v-8166878a] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(244 244 244 / var(--tw-bg-opacity))
+}
+/* Hangs just below the toggle, aligned to the panel's right edge. */
+.bp .text-style-field__modified-popup[data-v-8166878a] {
+  position: absolute;
+  right: 0px;
+  z-index: 20;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 0.25rem;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(230 230 230 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding: 1rem;
+  top: calc(100% + 6px);
+  width: 260px;
+  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3)
+}
+
 .bp .testimonial-preview[data-v-6b1ec164] {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -9859,15 +9936,15 @@ input[type='number'][data-v-f3d394d9] {
     -4px 0;
 }
 
-.bp .color-matches[data-v-8dfdf8b1] {
+.bp .color-matches[data-v-0f948381] {
   border-collapse: collapse;
   /* AUTO layout would hand the wider column to whichever value is longest and
      squeeze the names. A name is an identifier you scan, a value is what you
      read — so the names get the fixed share and the values wrap. */
   table-layout: fixed;
 }
-.bp .color-matches td[data-v-8dfdf8b1],
-.bp .color-matches th[data-v-8dfdf8b1] {
+.bp .color-matches td[data-v-0f948381],
+.bp .color-matches th[data-v-0f948381] {
   /* Top-aligned, because a wrapped value is taller than its name. */
   vertical-align: top;
   padding-bottom: 0.375rem;
@@ -9877,27 +9954,27 @@ input[type='number'][data-v-f3d394d9] {
      cell rather than widen the table past the sidebar. */
   overflow-wrap: anywhere;
 }
-.bp .color-matches__name[data-v-8dfdf8b1] {
+.bp .color-matches__name[data-v-0f948381] {
   width: 45%;
   padding-right: 0.5rem;
 }
 /* Matches the swatch's own 14px box so a swatch-less row still aligns its value.
    `display: block` for the same reason the swatch needs it — a bare `<span>` would
    ignore the width. */
-.bp .color-matches__gutter[data-v-8dfdf8b1] {
+.bp .color-matches__gutter[data-v-0f948381] {
   display: block;
   width: 14px;
   padding-top: 2px;
 }
 /* The stack number: fixed-width so every surface NAME starts at the same x, and
    muted so it reads as an axis tick rather than part of the name. */
-.bp .color-matches__layer[data-v-8dfdf8b1] {
+.bp .color-matches__layer[data-v-0f948381] {
   display: inline-block;
   width: 10px;
   margin-right: 4px;
   font-size: 0.625rem;
 }
-.bp .color-matches__order[data-v-8dfdf8b1] {
+.bp .color-matches__order[data-v-0f948381] {
   letter-spacing: normal;
 }
 
@@ -10035,7 +10112,7 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
     color: rgb(36 36 36 / var(--tw-text-opacity))
 }
 
-.bp .header-button-settings_option-title[data-v-86ff33c1] {
+.bp .header-button-settings_option-title[data-v-29fa6811] {
     font-family: Lato, Helvetica, sans-serif;
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -10187,6 +10264,25 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
+
+/* CollapsiblePanel's subtitle takes text only, so the size order warning (this panel's only
+   subtitle) is boxed from here. StyleSettings.test.ts fails if a library bump moves it. */
+.bp .c-text-style-panel .tw-grow > div + div {
+  margin-top: 0.5rem;
+  margin-bottom: 0px;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(243 175 43 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 239 213 / var(--tw-bg-opacity));
+  padding: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(97 70 17 / var(--tw-text-opacity));
+}
 .bp .c-select {
   background-repeat: no-repeat;
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.46967 9.46967C6.76256 9.17678 7.23744 9.17678 7.53033 9.46967L12 13.9393L16.4697 9.46967C16.7626 9.17678 17.2374 9.17678 17.5303 9.46967C17.8232 9.76256 17.8232 10.2374 17.5303 10.5303L12.5303 15.5303C12.3897 15.671 12.1989 15.75 12 15.75C11.8011 15.75 11.6103 15.671 11.4697 15.5303L6.46967 10.5303C6.17678 10.2374 6.17678 9.76256 6.46967 9.46967Z' fill='%23595959'/%3E%3C/svg%3E%0A");