@designcrowd/library.brand-page 6.2.11 → 6.2.12

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

@@ -893,8 +893,8 @@ a:not(.tw-lowercase) {
 .tw-max-h-72 {
     max-height: 18rem
 }
-.tw-max-h-9 {
-    max-height: 2.25rem
+.tw-max-h-8 {
+    max-height: 2rem
 }
 .tw-max-h-\[340px\] {
     max-height: 340px
@@ -923,6 +923,9 @@ a:not(.tw-lowercase) {
 .tw-min-h-\[1\.25rem\] {
     min-height: 1.25rem
 }
+.tw-min-h-\[38px\] {
+    min-height: 38px
+}
 .tw-min-h-full {
     min-height: 100%
 }
@@ -1157,12 +1160,15 @@ a:not(.tw-lowercase) {
 .tw-min-w-10 {
     min-width: 2.5rem
 }
-.tw-min-w-8 {
-    min-width: 2rem
+.tw-min-w-7 {
+    min-width: 1.75rem
 }
 .tw-min-w-\[120px\] {
     min-width: 120px
 }
+.tw-min-w-\[220px\] {
+    min-width: 220px
+}
 .tw-min-w-\[310px\] {
     min-width: 310px
 }
@@ -1419,10 +1425,6 @@ a:not(.tw-lowercase) {
     -ms-flex-preferred-size: 0px;
         flex-basis: 0px
 }
-.tw-origin-top-left {
-    -webkit-transform-origin: top left;
-            transform-origin: top left
-}
 .tw-origin-top-right {
     -webkit-transform-origin: top right;
             transform-origin: top right
@@ -2390,6 +2392,10 @@ a:not(.tw-lowercase) {
     --tw-border-opacity: 1;
     border-color: rgb(61 61 61 / var(--tw-border-opacity))
 }
+.tw-border-secondary-800 {
+    --tw-border-opacity: 1;
+    border-color: rgb(24 24 24 / var(--tw-border-opacity))
+}
 .tw-border-success-400 {
     --tw-border-opacity: 1;
     border-color: rgb(121 139 249 / var(--tw-border-opacity))
@@ -2855,9 +2861,6 @@ a:not(.tw-lowercase) {
 .tw-pl-0\.5 {
     padding-left: 0.125rem
 }
-.tw-pl-1 {
-    padding-left: 0.25rem
-}
 .tw-pl-12 {
     padding-left: 3rem
 }
@@ -5698,7 +5701,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   font-family: Lato, Helvetica, sans-serif;
 }
 
-.carousel-wrapper[data-v-907fe6e9] {
+.carousel-wrapper[data-v-1d4fd3e2] {
   position: relative;
   overflow-x: auto;
   overflow-y: hidden;
@@ -5708,15 +5711,15 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   -ms-overflow-style: none;
   width: 100%;
 }
-.scroll-chevron[data-v-907fe6e9] {
+.scroll-chevron[data-v-1d4fd3e2] {
   background: none !important;
   border: none !important;
 }
-.carousel-wrapper[data-v-907fe6e9]:active {
+.carousel-wrapper[data-v-1d4fd3e2]:active {
   cursor: -webkit-grabbing;
   cursor: grabbing;
 }
-.carousel-track[data-v-907fe6e9] {
+.carousel-track[data-v-1d4fd3e2] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -5730,7 +5733,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   margin: 0 auto;
   gap: 8px;
 }
-.carousel-item[data-v-907fe6e9] {
+.carousel-item[data-v-1d4fd3e2] {
   position: relative;
   -ms-flex-negative: 0;
       flex-shrink: 0;
@@ -5741,7 +5744,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
       -ms-flex-align: center;
           align-items: center;
 }
-.carousel-link[data-v-907fe6e9] {
+.carousel-link[data-v-1d4fd3e2] {
   display: block;
   padding: 12px 8px;
   text-decoration: none;
@@ -5754,7 +5757,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   -ms-flex-item-align: stretch;
       align-self: stretch;
 }
-.carousel-chevron[data-v-907fe6e9] {
+.carousel-chevron[data-v-1d4fd3e2] {
   cursor: pointer;
   border-left: none !important;
   padding: 0 12px;
@@ -5768,17 +5771,17 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
       -ms-flex-align: center;
           align-items: center;
 }
-.carousel-chevron[data-v-907fe6e9] svg {
+.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;
 }
-.carousel-chevron--open[data-v-907fe6e9] svg {
+.carousel-chevron--open[data-v-1d4fd3e2] svg {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
-.dropdown-menu[data-v-907fe6e9] {
+.dropdown-menu[data-v-1d4fd3e2] {
   min-width: 150px;
   max-height: 240px;
   overflow-x: hidden;
@@ -5791,7 +5794,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.dropdown-item[data-v-907fe6e9] {
+.dropdown-item[data-v-1d4fd3e2] {
   display: block;
   padding: 12px 16px;
   cursor: pointer;
@@ -5952,7 +5955,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   );
 }
 
-.empty-para[data-v-4418a9fe] p:empty::after {
+.empty-para[data-v-532b5fd8] p:empty::after {
   content: '\00A0';
 }
 
@@ -6063,7 +6066,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   text-decoration: underline;
 }
 
-.form-error[data-v-5c3c6927] {
+.form-error[data-v-a2d29285] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f
@@ -6307,18 +6310,18 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 }
 }
 
-.form-error[data-v-665b8067] {
+.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;
 }
 
-.form-error[data-v-a0d0666b] {
+.form-error[data-v-d41f9828] {
   font-size: 0.75rem;
   line-height: 1rem;
   color: #f21b3f
@@ -6417,59 +6420,59 @@ select[data-v-665b8067] {
   width: 100%;
 }
 
-.form-error[data-v-2e955d80] {
+.form-error[data-v-f317d692] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-2e955d80] {
+.contact-container[data-v-f317d692] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-2e955d80] {
+.c-text-padding[data-v-f317d692] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-2e955d80] {
+.device-wrapper--mobile .c-divided-container[data-v-f317d692] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-2e955d80] {
+.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) {
-.c-button-full[data-v-2e955d80] {
+.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%;
 }
-.c-col-span-2[data-v-2e955d80] {
+.c-col-span-2[data-v-f317d692] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-2e955d80] {
+.c-mobile-padding[data-v-f317d692] {
     padding: 1rem;
 }
-.c-text-padding[data-v-2e955d80] {
+.c-text-padding[data-v-f317d692] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-divided-container[data-v-2e955d80] {
+.c-divided-container[data-v-f317d692] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-2e955d80] {
+.c-divided-container-reverse[data-v-f317d692] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6477,16 +6480,16 @@ select[data-v-665b8067] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-2e955d80] {
+.c-aspect-square[data-v-f317d692] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-2e955d80] {
+.c-divided-container[data-v-f317d692] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-2e955d80] {
+.c-divided-container-reverse[data-v-f317d692] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
@@ -7135,44 +7138,44 @@ select[data-v-665b8067] {
   color: #f21b3f;
 }
 
-.inner-container[data-v-fca616f0] {
+.inner-container[data-v-0f062477] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.outer-container[data-v-fca616f0] {
+.outer-container[data-v-0f062477] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.modal-cart[data-v-fca616f0] .cart-image {
+.modal-cart[data-v-0f062477] .cart-image {
   width: 3rem;
 }
-.modal-cart[data-v-fca616f0] .cart-option {
+.modal-cart[data-v-0f062477] .cart-option {
   width: 100%;
 }
-.success-bar-container[data-v-fca616f0] .tw-bg-success-500 {
+.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) {
-.modal-product-detail[data-v-fca616f0] .modal {
+.modal-product-detail[data-v-0f062477] .modal {
     min-width: 100vh;
 }
-.modal-cart[data-v-fca616f0] .modal {
+.modal-cart[data-v-0f062477] .modal {
     min-width: 90vh;
     max-height: 90vh;
 }
-.modal-cart[data-v-fca616f0] .cart-image {
+.modal-cart[data-v-0f062477] .cart-image {
     width: 8rem;
 }
-.modal-cart[data-v-fca616f0] .cart-option {
+.modal-cart[data-v-0f062477] .cart-option {
     width: 75%;
 }
-.success-bar[data-v-fca616f0] {
+.success-bar[data-v-0f062477] {
     width: 50%;
 }
 }
 @media (max-width: 640px) {
-.success-bar[data-v-fca616f0] {
+.success-bar[data-v-0f062477] {
     width: 91.666667%;
 }
 }
@@ -7996,21 +7999,21 @@ select[data-v-665b8067] {
   padding: 0.25rem var(--page-padding);
 }
 
-.c-page-footer__container[data-v-613305b7] {
+.c-page-footer__container[data-v-ef9d02e0] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
   padding: 0.25rem var(--page-padding);
 }
-.c-page-footer__container-justified[data-v-613305b7] {
+.c-page-footer__container-justified[data-v-ef9d02e0] {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
-.sortable[data-v-613305b7] {
+.sortable[data-v-ef9d02e0] {
   outline-color: #b2bdfb;
   outline-width: 0.2rem;
 }
-.brand-page__content--outline-selected[data-v-613305b7] {
+.brand-page__content--outline-selected[data-v-ef9d02e0] {
   position: relative;
   z-index: 10;
   margin-left: 0.25rem;
@@ -8019,25 +8022,25 @@ select[data-v-665b8067] {
   outline-width: 0.2rem;
   outline-style: dashed;
 }
-.c_footer-container[data-v-613305b7] {
+.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) {
-.c-page-footer__container-justified[data-v-613305b7] {
+.c-page-footer__container-justified[data-v-ef9d02e0] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-page-footer__container-justified[data-v-613305b7] > :nth-child(2) {
+.c-page-footer__container-justified[data-v-ef9d02e0] > :nth-child(2) {
     margin-bottom: 1rem;
 }
 }
 @container (min-width: 640px) {
-.c-page-footer__container-justified-stack[data-v-613305b7] {
+.c-page-footer__container-justified-stack[data-v-ef9d02e0] {
     margin-left: 1rem;
     margin-right: 1rem;
     -webkit-box-pack: justify;
@@ -8046,7 +8049,7 @@ select[data-v-665b8067] {
 }
 }
 
-.c-overlay[data-v-0b2b4f62] {
+.c-overlay[data-v-aa0f82c0] {
   position: fixed;
   inset: 0px;
   z-index: 40;
@@ -8064,15 +8067,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);
 }
-.c-overlay--open[data-v-0b2b4f62] {
+.c-overlay--open[data-v-aa0f82c0] {
   opacity: 0.7;
 }
-.c-overlay--closed[data-v-0b2b4f62] {
+.c-overlay--closed[data-v-aa0f82c0] {
   pointer-events: none;
   display: none;
   opacity: 0;
 }
-.c-sidebar[data-v-0b2b4f62] {
+.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  */
@@ -8092,32 +8095,32 @@ select[data-v-665b8067] {
   max-width: 66%;
 }
 @media (min-width: 768px) {
-.device--mobile .c-sidebar[data-v-0b2b4f62] {
+.device--mobile .c-sidebar[data-v-aa0f82c0] {
     width: 66.666667%;
 }
 }
-.c-sidebar--closed[data-v-0b2b4f62] {
+.c-sidebar--closed[data-v-aa0f82c0] {
   -webkit-transform: translateX(-100%);
           transform: translateX(-100%);
   visibility: hidden;
 }
-.c-sidebar--open[data-v-0b2b4f62] {
+.c-sidebar--open[data-v-aa0f82c0] {
   -webkit-transform: translateX(0%);
           transform: translateX(0%);
 }
-.c-chevron-transform[data-v-0b2b4f62] {
+.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;
 }
-.c-chevron-expanded[data-v-0b2b4f62] {
+.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. */
-.c-sidebar--has-cta[data-v-0b2b4f62] {
+.c-sidebar--has-cta[data-v-aa0f82c0] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8127,35 +8130,35 @@ select[data-v-665b8067] {
           flex-direction: column;
   overflow: hidden;
 }
-.c-sidebar--has-cta .c-sidebar-header[data-v-0b2b4f62] {
+.c-sidebar--has-cta .c-sidebar-header[data-v-aa0f82c0] {
   -ms-flex-negative: 0;
       flex-shrink: 0;
 }
-.c-sidebar--has-cta .c-nav-list[data-v-0b2b4f62] {
+.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;
 }
-.c-sidebar-cta[data-v-0b2b4f62] {
+.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). */
-.c-sidebar-cta[data-v-0b2b4f62] .bp-button {
+.c-sidebar-cta[data-v-aa0f82c0] .bp-button {
   margin-bottom: 0;
   min-height: 0;
 }
-.c-sidebar-cta[data-v-0b2b4f62] .c-button__no-icon {
+.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. */
-.c-sidebar-cta[data-v-0b2b4f62] .c-button__label {
+.c-sidebar-cta[data-v-aa0f82c0] .c-button__label {
   -webkit-transform: none;
           transform: none;
 }
-.c-sidebar--has-cta .c-sidebar-cta[data-v-0b2b4f62] {
+.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;
@@ -8165,7 +8168,7 @@ select[data-v-665b8067] {
 }
 
 /* Thin separator line above the button, faded without dimming the button itself. */
-.c-sidebar-cta[data-v-0b2b4f62]::before {
+.c-sidebar-cta[data-v-aa0f82c0]::before {
   content: '';
   position: absolute;
   top: 0;
@@ -8280,7 +8283,7 @@ to {
   font-family: Lato, Helvetica, sans-serif;
 }
 
-.brand-page__footer[data-v-0a7ac3ed] {
+.brand-page__footer[data-v-1aa33248] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -8288,7 +8291,7 @@ to {
       -ms-flex-pack: center;
           justify-content: center;
 }
-.brand-page__footer-link[data-v-0a7ac3ed] {
+.brand-page__footer-link[data-v-1aa33248] {
   display: block;
   border-radius: 0.5rem;
   padding: 0.75rem;
@@ -8296,25 +8299,25 @@ to {
   -webkit-transition: background 0.2s ease-in-out;
   transition: background 0.2s ease-in-out;
 }
-.brand-page__footer-link[data-v-0a7ac3ed]:hover {
+.brand-page__footer-link[data-v-1aa33248]:hover {
   opacity: 0.9;
 }
-.icon-container[data-v-0a7ac3ed] {
+.icon-container[data-v-1aa33248] {
   width: 20px;
   overflow: hidden;
 }
-.extra-height[data-v-0a7ac3ed] {
+.extra-height[data-v-1aa33248] {
   -webkit-transition: height 0.5s ease-in-out;
   transition: height 0.5s ease-in-out;
   width: 100%;
 }
-.c-button__label[data-v-0a7ac3ed] {
+.c-button__label[data-v-1aa33248] {
   margin: 0 auto;
   word-break: break-word;
   overflow-wrap: anywhere;
   width: auto;
 }
-.c-button[data-v-0a7ac3ed] {
+.c-button[data-v-1aa33248] {
   --icon-h: 1.5rem;
   --icon-m-r: 0.5rem;
   --icon-m-icon: 0.5rem;
@@ -8329,10 +8332,10 @@ to {
       -ms-flex-align: center !important;
           align-items: center !important;
 }
-.button__icon[data-v-0a7ac3ed] {
+.button__icon[data-v-1aa33248] {
   margin-right: var(--icon-m-r);
 }
-.btn-max-width[data-v-0a7ac3ed] {
+.btn-max-width[data-v-1aa33248] {
   max-width: 315px;
   width: 100%;
 }
@@ -8355,14 +8358,14 @@ body {
   visibility: hidden !important;
 }
 
-.brand-page-root[data-v-2debce4b] {
+.brand-page-root[data-v-b1539a54] {
   height: 100%;
 }
-.sortable[data-v-2debce4b] {
+.sortable[data-v-b1539a54] {
   outline-color: #b2bdfb;
   outline-width: 0.2rem;
 }
-.brand-page[data-v-2debce4b] {
+.brand-page[data-v-b1539a54] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -8374,7 +8377,7 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__background-shapes-layer[data-v-2debce4b] {
+.brand-page__background-shapes-layer[data-v-b1539a54] {
   position: fixed;
   top: 0;
   left: 0;
@@ -8385,11 +8388,11 @@ body {
           transform: translate3d(0, 0, 0);
   contain: layout paint;
 }
-.template-preview .brand-page__background-shapes-layer[data-v-2debce4b],
-.device-wrapper .brand-page__background-shapes-layer[data-v-2debce4b] {
+.template-preview .brand-page__background-shapes-layer[data-v-b1539a54],
+.device-wrapper .brand-page__background-shapes-layer[data-v-b1539a54] {
   height: 100%;
 }
-.brand-page__inner--default[data-v-2debce4b] {
+.brand-page__inner--default[data-v-b1539a54] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -8401,16 +8404,16 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--desktop[data-v-2debce4b] {
+.brand-page__inner--desktop[data-v-b1539a54] {
   min-height: 100vh;
 }
-.brand-site__header[data-v-2debce4b] {
+.brand-site__header[data-v-b1539a54] {
   container-type: inline-size;
 }
-.brand-page__header[data-v-2debce4b] {
+.brand-page__header[data-v-b1539a54] {
   padding-top: var(--page-padding);
 }
-.brand-page__content--default[data-v-2debce4b] {
+.brand-page__content--default[data-v-b1539a54] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -8427,7 +8430,7 @@ body {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.brand-page__content--desktop[data-v-2debce4b] {
+.brand-page__content--desktop[data-v-b1539a54] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -8443,15 +8446,15 @@ body {
           flex-direction: column;
   max-width: 100%;
 }
-.brand-page__content--inner[data-v-2debce4b] {
+.brand-page__content--inner[data-v-b1539a54] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.brand-page__content--inner--brandsite[data-v-2debce4b] {
+.brand-page__content--inner--brandsite[data-v-b1539a54] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.brand-page__content--outline-selected[data-v-2debce4b] {
+.brand-page__content--outline-selected[data-v-b1539a54] {
   position: relative;
   z-index: 10;
   outline-color: #b2bdfb;
@@ -8459,20 +8462,20 @@ body {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.brand-page__content--outline-footer-selected[data-v-2debce4b] {
+.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) {
-.brand-page__content--inner--full-width[data-v-2debce4b] {
+.brand-page__content--inner--full-width[data-v-b1539a54] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.brand-page__content--inner--full-width[data-v-2debce4b] {
+.brand-page__content--inner--full-width[data-v-b1539a54] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }
@@ -9412,7 +9415,7 @@ body {
   display: none;
 }
 
-.c-gallery-figure[data-v-63a71bcc] {
+.c-gallery-figure[data-v-f339e255] {
 
     position: relative;
 
@@ -9428,7 +9431,7 @@ body {
 
     border-color: rgb(209 209 209 / var(--tw-border-opacity))
 }
-.c-gallery-image__delete[data-v-63a71bcc] {
+.c-gallery-image__delete[data-v-f339e255] {
 
     cursor: pointer;
 
@@ -9459,7 +9462,7 @@ body {
             transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
 }
 @media (hover: hover) and (pointer: fine) {
-.c-gallery-image__delete[data-v-63a71bcc]:hover {
+.c-gallery-image__delete[data-v-f339e255]:hover {
 
         --tw-text-opacity: 1;
 
@@ -9541,13 +9544,13 @@ body {
             transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
 }
 
-.c-media-btn[data-v-10934b19]:not(.c-media-btn--selected):hover {
+.c-media-btn[data-v-b47f879d]:not(.c-media-btn--selected):hover {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
           box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.c-media-btn__img[data-v-10934b19] {
+.c-media-btn__img[data-v-b47f879d] {
   overflow: hidden;
   -webkit-transition-property: -webkit-box-shadow;
   transition-property: -webkit-box-shadow;
@@ -9563,7 +9566,7 @@ body {
     20px;
   aspect-ratio: 1.09 / 1;
 }
-.c-media-btn__img img[data-v-10934b19] {
+.c-media-btn__img img[data-v-b47f879d] {
   -webkit-margin-after: 100%;
   -webkit-margin-before: 100%;
   -webkit-margin-start: 100%;
@@ -9596,11 +9599,16 @@ body {
   contain-intrinsic-size: auto 36px;
 }
 
-.rich-text-editor[data-v-d27ffcd7]:focus-within {
+.text-style-role-dropdown__item[data-v-44af9b33]:hover {
+  background-color: #eee;
+}
+
+.rich-text-editor[data-v-01903c9e]:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(96 96 96 / var(--tw-border-opacity));
 }
-.style-editor[data-v-d27ffcd7] {
+.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;
@@ -9610,8 +9618,10 @@ body {
           flex-direction: row;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.25rem;
 }
-.style-editor[data-v-d27ffcd7] button:not(.c-button-style) {
+.style-editor[data-v-01903c9e] button:not(.c-button-style) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -9621,22 +9631,39 @@ body {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.style-editor-button[data-v-d27ffcd7] {
+.style-editor-button[data-v-01903c9e] {
   cursor: pointer;
-  padding-left: 0.25rem;
-  padding-top: 0.25rem;
 }
-.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. */
+.style-editor-button-textstyle[data-v-01903c9e],
+.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. */
+.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;
+}
+.toolbar-editor-button.active[data-v-01903c9e] {
   font-weight: 700;
   background: #e3e3e3;
 }
-.toolbar-editor-button[data-v-d27ffcd7] {
+.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;
@@ -9648,7 +9675,7 @@ body {
       -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;
@@ -9661,13 +9688,13 @@ body {
   max-height: 14rem;
   overflow: auto;
 }
-.editor-compact[data-v-d27ffcd7] .ProseMirror {
+.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;
@@ -9676,29 +9703,61 @@ body {
   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;
 }
-.error-message[data-v-d27ffcd7] {
+.error-message[data-v-01903c9e] {
   color: #d32f2f;
   font-size: 0.875rem;
   margin-top: 4px;
 }
-.popup-container[data-v-d27ffcd7] {
+.popup-container[data-v-01903c9e] {
   position: absolute;
   z-index: 10;
   right: 8%;
 }
-.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). */
+.style-modified-anchor[data-v-01903c9e] {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  position: relative;
+}
+.style-modified-toggle[data-v-01903c9e] {
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(227 227 227 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+.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). */
+.style-modified-popup[data-v-01903c9e] {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 6px);
+  width: 300px;
+}
+.hyperlink-preview[data-v-01903c9e] {
   position: absolute;
   z-index: 10;
 }
-.popup-panel[data-v-d27ffcd7] {
+.popup-panel[data-v-01903c9e] {
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 8px;
@@ -9706,17 +9765,17 @@ body {
   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
-.popup-panel[data-v-d27ffcd7] input {
+.popup-panel[data-v-01903c9e] input {
   border: 1px solid #ccc;
   border-radius: 8px;
 }
-.border[data-v-d27ffcd7] {
+.border[data-v-01903c9e] {
   width: 100%;
   --tw-bg-opacity: 1;
   background-color: rgb(209 209 209 / 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;
@@ -9725,7 +9784,7 @@ body {
   color: rgb(38 38 38 / 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(209 209 209 / var(--tw-text-opacity));
   content: attr(data-placeholder);
@@ -9734,56 +9793,11 @@ body {
   pointer-events: none;
 }
 @media (max-width: 399px) {
-.style-editor-button-font[data-v-d27ffcd7],
-  .style-editor-button-textstyle[data-v-d27ffcd7] {
-    max-width: 48%;
-    padding-bottom: 0.25rem;
-}
-.style-editor-button.stepper[data-v-d27ffcd7] {
-    max-width: 40%;
-}
-.style-editor-button-stepper[data-v-d27ffcd7] {
-    max-width: 100%;
-}
-.border.desktop[data-v-d27ffcd7] {
-    display: none;
-}
-.border.mobile[data-v-d27ffcd7] {
-    display: block;
-}
-[data-v-d27ffcd7] .left-align {
-    -webkit-transform: translateX(-48%);
-            transform: translateX(-48%);
-}
-.hyperlink-popup[data-v-d27ffcd7] {
+.hyperlink-popup[data-v-01903c9e] {
     z-index: 10000 !important;
 }
 }
-@media (min-width: 400px) {
-.style-editor-button.stepper[data-v-d27ffcd7] {
-    max-width: 32%;
-}
-.style-editor-button-font[data-v-d27ffcd7] {
-    max-width: 28%;
-}
-.style-editor-button-stepper[data-v-d27ffcd7] {
-    max-width: 100%;
-}
-.style-editor-button-textstyle[data-v-d27ffcd7] {
-    max-width: 25%;
-}
-.border.desktop[data-v-d27ffcd7] {
-    display: block;
-}
-.border.mobile[data-v-d27ffcd7] {
-    display: none;
-}
-[data-v-d27ffcd7] .left-align {
-    -webkit-transform: translateX(-25%);
-            transform: translateX(-25%);
-}
-}
-.drop-down-item[data-v-d27ffcd7]:hover {
+.drop-down-item[data-v-01903c9e]:hover {
   background-color: #eee;
 }
 
@@ -9803,7 +9817,70 @@ input[type='number'][data-v-f3d394d9] {
 }
 }
 
-.testimonial-preview[data-v-bbe8a664] {
+/* The toggle's own positioning context so the popup hangs relative to it. */
+.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
+}
+.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.75rem;
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(227 227 227 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(61 61 61 / var(--tw-text-opacity))
+}
+.text-style-field__modified-toggle--active[data-v-8166878a] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity))
+}
+/* Hangs just below the toggle, aligned to the panel's right edge. */
+.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.75rem;
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(227 227 227 / 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)
+}
+
+.testimonial-preview[data-v-6b1ec164] {
   overflow: hidden;
   text-overflow: ellipsis;
   max-height: 21px;
@@ -9889,15 +9966,15 @@ input[type='number'][data-v-f3d394d9] {
     -4px 0;
 }
 
-.color-matches[data-v-8dfdf8b1] {
+.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;
 }
-.color-matches td[data-v-8dfdf8b1],
-.color-matches th[data-v-8dfdf8b1] {
+.color-matches td[data-v-0f948381],
+.color-matches th[data-v-0f948381] {
   /* Top-aligned, because a wrapped value is taller than its name. */
   vertical-align: top;
   padding-bottom: 0.375rem;
@@ -9907,27 +9984,27 @@ input[type='number'][data-v-f3d394d9] {
      cell rather than widen the table past the sidebar. */
   overflow-wrap: anywhere;
 }
-.color-matches__name[data-v-8dfdf8b1] {
+.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. */
-.color-matches__gutter[data-v-8dfdf8b1] {
+.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. */
-.color-matches__layer[data-v-8dfdf8b1] {
+.color-matches__layer[data-v-0f948381] {
   display: inline-block;
   width: 10px;
   margin-right: 4px;
   font-size: 0.625rem;
 }
-.color-matches__order[data-v-8dfdf8b1] {
+.color-matches__order[data-v-0f948381] {
   letter-spacing: normal;
 }
 
@@ -10056,7 +10133,7 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
 }
 }
 
-.page-settings-section-style_option-title[data-v-8342fc08] {
+.page-settings-section-style_option-title[data-v-45d5d313] {
     font-family: Inter, Helvetica, sans-serif;
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -10065,7 +10142,7 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
     color: rgb(24 24 24 / var(--tw-text-opacity))
 }
 
-.header-button-settings_option-title[data-v-86ff33c1] {
+.header-button-settings_option-title[data-v-29fa6811] {
     font-family: Inter, Helvetica, sans-serif;
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -10113,7 +10190,7 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
   margin: 0 auto;
 }
 
-.header-settings-panel_option-title[data-v-670bf7f8] {
+.header-settings-panel_option-title[data-v-792691ea] {
     font-family: Inter, Helvetica, sans-serif;
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -10217,20 +10294,39 @@ 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. */
+.c-text-style-panel .tw-grow > div + div {
+  margin-top: 0.5rem;
+  margin-bottom: 0px;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(227 160 8 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 246 230 / var(--tw-bg-opacity));
+  padding: 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(91 64 3 / var(--tw-text-opacity));
+}
 .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");
   background-position: top 50% right 0.5rem;
 }
 
-.template-preview-container[data-v-246f2118] {
+.template-preview-container[data-v-dc1d50d6] {
   border-radius: 0.75rem;
   height: 25rem;
   -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
           box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
 }
 @media (min-width: 768px) {
-.template-preview-container[data-v-246f2118] {
+.template-preview-container[data-v-dc1d50d6] {
     -webkit-transition-property: all;
     transition-property: all;
     -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -10240,17 +10336,17 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
     -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
             transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.template-preview-container[data-v-246f2118]:hover {
+.template-preview-container[data-v-dc1d50d6]:hover {
     -webkit-transform: scale(1.01);
             transform: scale(1.01);
 }
 }
 
-.template-preview[data-v-a172382d] {
+.template-preview[data-v-0ece1edb] {
   position: relative;
   background-attachment: initial !important
 }
-.template-preview__overlay[data-v-a172382d] {
+.template-preview__overlay[data-v-0ece1edb] {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -10262,12 +10358,12 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
   opacity: 0;
   z-index: 100
 }
-.template-preview__image-container[data-v-a172382d] {
+.template-preview__image-container[data-v-0ece1edb] {
   pointer-events: none;
   height: 100%;
   width: 100%
 }
-.template-preview__image[data-v-a172382d] {
+.template-preview__image[data-v-0ece1edb] {
   height: 100%;
   width: 100%;
   -o-object-fit: fill;
@@ -10277,13 +10373,13 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
   transition: filter 0.2s ease;
   transition: filter 0.2s ease, -webkit-filter 0.2s ease
 }
-.template-preview__page[data-v-a172382d] {
+.template-preview__page[data-v-0ece1edb] {
   pointer-events: none
 }
-.template-preview[data-v-a172382d] .c-shape-background {
+.template-preview[data-v-0ece1edb] .c-shape-background {
   position: absolute
 }
-.template-preview__image[data-v-a172382d] .c-shape-background {
+.template-preview__image[data-v-0ece1edb] .c-shape-background {
   position: absolute
 }