@designcrowd/library.brand-page 6.0.21 → 6.0.22

package/lib/src/brand-page-maker/models/content-settings.js

@@ -232,6 +232,9 @@ export const createInitialMailingListContent = (options) => {
             textStyleType: TEXT_STYLE_TYPES.buttons,
             textAlign: 'center',
         },
+        // Detach the container background from the button fill by copying the current
+        // fill as this block's own colour at creation (BP-5800; matches migration-19).
+        backgroundStyle: { backgroundColor: options?.buttonFillColor },
     };
 };
 export const createInitialRequestPaymentContent = (options) => {
@@ -274,6 +277,9 @@ export const createInitialRequestPaymentContent = (options) => {
             textStyleType: TEXT_STYLE_TYPES.buttons,
             textAlign: 'center',
         },
+        // Detach the container background from the button fill by copying the current
+        // fill as this block's own colour at creation (BP-5800; matches migration-19).
+        backgroundStyle: { backgroundColor: options?.buttonFillColor },
     };
 };
 export const createInitialShopContent = (options) => {
@@ -365,6 +371,9 @@ export const createInitialSupportMeContent = (options) => {
             textStyleType: TEXT_STYLE_TYPES.buttons,
             textAlign: 'center',
         },
+        // Detach the container background from the button fill by copying the current
+        // fill as this block's own colour at creation (BP-5800; matches migration-19).
+        backgroundStyle: { backgroundColor: options?.buttonFillColor },
     };
 };
 export const createInitialContactFormContent = (options) => {
@@ -447,9 +456,12 @@ export const createInitialContactFormContent = (options) => {
         successMessage: contentSettingsTr(`formSuccessMessage`),
         responseEmail: options?.userState.emailAddress || '',
         type: 'contact-form',
-        cardStyle: {
-            backgroundColor: DEFAULT_LOGO_BACKGROUND_COLOR_RGB,
-        },
+        // brand-site: card layouts default to the logo bg. brand-page/brand-contact:
+        // copy the current button fill as the container's own colour so it renders
+        // like the button fill but is detached from it (BP-5800; matches migration-19).
+        cardStyle: options?.brandPageType === BRAND_PAGE_TYPES.brandSite
+            ? { backgroundColor: DEFAULT_LOGO_BACKGROUND_COLOR_RGB }
+            : { backgroundColor: options?.buttonFillColor },
         backgroundStyle: {},
         titleStyle: {
             applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,

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

@@ -1100,9 +1100,15 @@ a.maker-anchor {
 .tw-min-w-8 {
     min-width: 2rem
 }
+.tw-min-w-\[120px\] {
+    min-width: 120px
+}
 .tw-min-w-\[310px\] {
     min-width: 310px
 }
+.tw-min-w-full {
+    min-width: 100%
+}
 .tw-max-w-0 {
     max-width: 0px
 }
@@ -1442,16 +1448,6 @@ a.maker-anchor {
     -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
             transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
-.tw-translate-y-\[-10\%\] {
-    --tw-translate-y: -10%;
-    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-.tw-translate-y-\[-4\%\] {
-    --tw-translate-y: -4%;
-    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
 .tw-translate-y-px {
     --tw-translate-y: 1px;
     -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3025,9 +3021,6 @@ a.maker-anchor {
 .tw-leading-tight {
     line-height: 1.25
 }
-.tw-text-\[var\(--icon-color\)\] {
-    color: var(--icon-color)
-}
 .tw-text-black {
     --tw-text-opacity: 1;
     color: rgb(0 0 0 / var(--tw-text-opacity))
@@ -5662,39 +5655,72 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   max-height: 45vh;
 }
 
-.bp-button-paper-top[data-v-604db8c6] {
-  --tw-translate-y: -10%;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  color: var(--icon-color);
+/* Decorative styles on submit buttons render flush at the bottom. Zero the host
+   button's own margins: its decoration is positioned relative to the WRAPPER, so a
+   margin on the button itself shifts it out of alignment with the decoration. The
+   top gap is instead applied to the wrapper (tw-mt-4 above) so the whole decorated
+   unit moves together and stays flush at the container's bottom edge (BP-5800). */
+.bp-style-wrapper--no-margin[data-v-255edfd5] button {
+  margin-top: 0;
+  margin-bottom: 0;
 }
-.bp-button-paper-bottom[data-v-604db8c6] {
-  --tw-translate-y: -4%;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  color: var(--icon-color);
-}
-.bp-button-paper-top[data-v-604db8c6] svg,
-.bp-button-paper-bottom[data-v-604db8c6] svg {
-  width: 100%;
-  height: auto;
+
+/* Brushstroke: flanking brush-end icons are transformed over the button's
+   left/right edges, so they must not capture clicks (BP-5882). */
+.bp-icon-brush-left[data-v-255edfd5],
+.bp-icon-brush-right[data-v-255edfd5] {
+  pointer-events: none;
 }
-.bp-icon-brush-left[data-v-604db8c6] svg {
+.bp-icon-brush-left[data-v-255edfd5] svg {
   -webkit-transform: translateX(-99%);
           transform: translateX(-99%);
   width: auto;
 }
-.bp-icon-brush-right[data-v-604db8c6] svg {
+.bp-icon-brush-right[data-v-255edfd5] svg {
   width: auto;
 }
-.bp-button-arrow[data-v-604db8c6],
-.device-wrapper--mobile .bp-button-arrow[data-v-604db8c6] {
-  clip-path: polygon(5% 100%, 0% 50%, 5% 0%, 95% 0%, 100% 50%, 95% 100%);
+
+/* Torn-paper: the button-paper icon sits BEHIND the button as its shape. The
+   wrapper is the positioning context; the icon is an inert inset layer that fills
+   the button box exactly (inset:0 + preserveAspectRatio none) without inflating
+   its size or capturing clicks (BP-5882/BP-5883). The button's own fill is made
+   transparent so the icon's colour shows through. */
+.bp-button-shape[data-v-255edfd5] {
+  position: relative;
 }
-@media (min-width: 767px) {
-.bp-button-arrow[data-v-604db8c6] {
-    clip-path: polygon(3% 100%, 0% 50%, 3% 0%, 97% 0%, 100% 50%, 97% 100%);
+.bp-icon-shape[data-v-255edfd5] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.bp-button-shape[data-v-255edfd5] button,
+.bp-button-shape[data-v-255edfd5] a {
+  position: relative; /* sit above the inert background */
+  /* !important to override the host button's inline background-color. */
+  background-color: transparent !important;
 }
+/* button-paper ships hardcoded fill="black"; recolour to the button's fill. CSS
+   fill overrides the presentation attribute; clip-path rects are geometric so
+   recolouring them is harmless. */
+.bp-icon-shape[data-v-255edfd5] path,
+.bp-icon-shape[data-v-255edfd5] rect {
+  fill: currentColor;
+}
+.bp-button-arrow[data-v-255edfd5],
+.device-wrapper--mobile .bp-button-arrow[data-v-255edfd5] {
+  /* Fixed-px arrowhead (not %) so the chevron is equally sharp at any button
+     width — a %-based point collapses on narrow buttons (e.g. the 120px contact
+     form submit) and only reads as an arrow on wide ones. */
+  clip-path: polygon(
+    12px 100%,
+    0 50%,
+    12px 0,
+    calc(100% - 12px) 0,
+    100% 50%,
+    calc(100% - 12px) 100%
+  );
 }
 
 .empty-para[data-v-2520851c] p:empty::after {
@@ -5808,7 +5834,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   text-decoration: underline;
 }
 
-.form-error[data-v-ddbacf5a] {
+.form-error[data-v-b7e55081] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f
@@ -6063,14 +6089,10 @@ select[data-v-14e7c7c7] {
   background-position: right 12px center;
 }
 
-.form-error[data-v-7731d899] {
+.form-error[data-v-0cc4cbbd] {
   font-size: 0.75rem;
   line-height: 1rem;
-  color: #f21b3f;
-}
-.pay-button-disabled[data-v-7731d899] {
-  opacity: 0.5 !important;
-  pointer-events: none;
+  color: #f21b3f
 }
 
 /* TODO: review CSS setup, scoped CSS will not work in slot */
@@ -6166,53 +6188,59 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.form-error[data-v-799d8060] {
+.form-error[data-v-109ad6ae] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-799d8060] {
+.contact-container[data-v-109ad6ae] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-799d8060] {
+.c-text-padding[data-v-109ad6ae] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-799d8060] {
+.device-wrapper--mobile .c-divided-container[data-v-109ad6ae] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-799d8060] {
+.device-wrapper--mobile .c-divided-container-reverse[data-v-109ad6ae] {
   -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-799d8060] {
+.c-button-full[data-v-109ad6ae] {
+    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-109ad6ae] .bp-style-wrapper {
     width: 100%;
 }
-.c-col-span-2[data-v-799d8060] {
+.c-col-span-2[data-v-109ad6ae] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-799d8060] {
+.c-mobile-padding[data-v-109ad6ae] {
     padding: 1rem;
 }
-.c-text-padding[data-v-799d8060] {
+.c-text-padding[data-v-109ad6ae] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-divided-container[data-v-799d8060] {
+.c-divided-container[data-v-109ad6ae] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-799d8060] {
+.c-divided-container-reverse[data-v-109ad6ae] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6220,16 +6248,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-799d8060] {
+.c-aspect-square[data-v-109ad6ae] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-799d8060] {
+.c-divided-container[data-v-109ad6ae] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-799d8060] {
+.c-divided-container-reverse[data-v-109ad6ae] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
@@ -6861,44 +6889,44 @@ select[data-v-14e7c7c7] {
   color: #f21b3f;
 }
 
-.inner-container[data-v-24954146] {
+.inner-container[data-v-c359b5e7] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.outer-container[data-v-24954146] {
+.outer-container[data-v-c359b5e7] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.modal-cart[data-v-24954146] .cart-image {
+.modal-cart[data-v-c359b5e7] .cart-image {
   width: 3rem;
 }
-.modal-cart[data-v-24954146] .cart-option {
+.modal-cart[data-v-c359b5e7] .cart-option {
   width: 100%;
 }
-.success-bar-container[data-v-24954146] .tw-bg-success-500 {
+.success-bar-container[data-v-c359b5e7] .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-24954146] .modal {
+.modal-product-detail[data-v-c359b5e7] .modal {
     min-width: 100vh;
 }
-.modal-cart[data-v-24954146] .modal {
+.modal-cart[data-v-c359b5e7] .modal {
     min-width: 90vh;
     max-height: 90vh;
 }
-.modal-cart[data-v-24954146] .cart-image {
+.modal-cart[data-v-c359b5e7] .cart-image {
     width: 8rem;
 }
-.modal-cart[data-v-24954146] .cart-option {
+.modal-cart[data-v-c359b5e7] .cart-option {
     width: 75%;
 }
-.success-bar[data-v-24954146] {
+.success-bar[data-v-c359b5e7] {
     width: 50%;
 }
 }
 @media (max-width: 640px) {
-.success-bar[data-v-24954146] {
+.success-bar[data-v-c359b5e7] {
     width: 91.666667%;
 }
 }

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

@@ -1521,9 +1521,15 @@ a.maker-anchor {
 .tw-min-w-8 {
   min-width: 2rem;
 }
+.tw-min-w-\[120px\] {
+  min-width: 120px;
+}
 .tw-min-w-\[310px\] {
   min-width: 310px;
 }
+.tw-min-w-full {
+  min-width: 100%;
+}
 .tw-max-w-0 {
   max-width: 0px;
 }
@@ -1863,16 +1869,6 @@ a.maker-anchor {
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.tw-translate-y-\[-10\%\] {
-  --tw-translate-y: -10%;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.tw-translate-y-\[-4\%\] {
-  --tw-translate-y: -4%;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
 .tw-translate-y-px {
   --tw-translate-y: 1px;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3448,9 +3444,6 @@ a.maker-anchor {
 .tw-leading-tight {
   line-height: 1.25;
 }
-.tw-text-\[var\(--icon-color\)\] {
-  color: var(--icon-color);
-}
 .tw-text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -6273,39 +6266,72 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   max-height: 45vh;
 }
 
-.bp-button-paper-top[data-v-604db8c6] {
-  --tw-translate-y: -10%;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  color: var(--icon-color);
-}
-.bp-button-paper-bottom[data-v-604db8c6] {
-  --tw-translate-y: -4%;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  color: var(--icon-color);
+/* Decorative styles on submit buttons render flush at the bottom. Zero the host
+   button's own margins: its decoration is positioned relative to the WRAPPER, so a
+   margin on the button itself shifts it out of alignment with the decoration. The
+   top gap is instead applied to the wrapper (tw-mt-4 above) so the whole decorated
+   unit moves together and stays flush at the container's bottom edge (BP-5800). */
+.bp-style-wrapper--no-margin[data-v-255edfd5] button {
+  margin-top: 0;
+  margin-bottom: 0;
 }
-.bp-button-paper-top[data-v-604db8c6] svg,
-.bp-button-paper-bottom[data-v-604db8c6] svg {
-  width: 100%;
-  height: auto;
+
+/* Brushstroke: flanking brush-end icons are transformed over the button's
+   left/right edges, so they must not capture clicks (BP-5882). */
+.bp-icon-brush-left[data-v-255edfd5],
+.bp-icon-brush-right[data-v-255edfd5] {
+  pointer-events: none;
 }
-.bp-icon-brush-left[data-v-604db8c6] svg {
+.bp-icon-brush-left[data-v-255edfd5] svg {
   -webkit-transform: translateX(-99%);
           transform: translateX(-99%);
   width: auto;
 }
-.bp-icon-brush-right[data-v-604db8c6] svg {
+.bp-icon-brush-right[data-v-255edfd5] svg {
   width: auto;
 }
-.bp-button-arrow[data-v-604db8c6],
-.device-wrapper--mobile .bp-button-arrow[data-v-604db8c6] {
-  clip-path: polygon(5% 100%, 0% 50%, 5% 0%, 95% 0%, 100% 50%, 95% 100%);
+
+/* Torn-paper: the button-paper icon sits BEHIND the button as its shape. The
+   wrapper is the positioning context; the icon is an inert inset layer that fills
+   the button box exactly (inset:0 + preserveAspectRatio none) without inflating
+   its size or capturing clicks (BP-5882/BP-5883). The button's own fill is made
+   transparent so the icon's colour shows through. */
+.bp-button-shape[data-v-255edfd5] {
+  position: relative;
 }
-@media (min-width: 767px) {
-.bp-button-arrow[data-v-604db8c6] {
-    clip-path: polygon(3% 100%, 0% 50%, 3% 0%, 97% 0%, 100% 50%, 97% 100%);
+.bp-icon-shape[data-v-255edfd5] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
 }
+.bp-button-shape[data-v-255edfd5] button,
+.bp-button-shape[data-v-255edfd5] a {
+  position: relative; /* sit above the inert background */
+  /* !important to override the host button's inline background-color. */
+  background-color: transparent !important;
+}
+/* button-paper ships hardcoded fill="black"; recolour to the button's fill. CSS
+   fill overrides the presentation attribute; clip-path rects are geometric so
+   recolouring them is harmless. */
+.bp-icon-shape[data-v-255edfd5] path,
+.bp-icon-shape[data-v-255edfd5] rect {
+  fill: currentColor;
+}
+.bp-button-arrow[data-v-255edfd5],
+.device-wrapper--mobile .bp-button-arrow[data-v-255edfd5] {
+  /* Fixed-px arrowhead (not %) so the chevron is equally sharp at any button
+     width — a %-based point collapses on narrow buttons (e.g. the 120px contact
+     form submit) and only reads as an arrow on wide ones. */
+  clip-path: polygon(
+    12px 100%,
+    0 50%,
+    12px 0,
+    calc(100% - 12px) 0,
+    100% 50%,
+    calc(100% - 12px) 100%
+  );
 }
 
 .empty-para[data-v-2520851c] p:empty::after {
@@ -6419,7 +6445,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   text-decoration: underline;
 }
 
-.form-error[data-v-ddbacf5a] {
+.form-error[data-v-b7e55081] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f
@@ -6674,14 +6700,10 @@ select[data-v-14e7c7c7] {
   background-position: right 12px center;
 }
 
-.form-error[data-v-7731d899] {
+.form-error[data-v-0cc4cbbd] {
   font-size: 0.75rem;
   line-height: 1rem;
-  color: #f21b3f;
-}
-.pay-button-disabled[data-v-7731d899] {
-  opacity: 0.5 !important;
-  pointer-events: none;
+  color: #f21b3f
 }
 
 /* TODO: review CSS setup, scoped CSS will not work in slot */
@@ -6777,53 +6799,59 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.form-error[data-v-799d8060] {
+.form-error[data-v-109ad6ae] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-799d8060] {
+.contact-container[data-v-109ad6ae] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-799d8060] {
+.c-text-padding[data-v-109ad6ae] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-799d8060] {
+.device-wrapper--mobile .c-divided-container[data-v-109ad6ae] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-799d8060] {
+.device-wrapper--mobile .c-divided-container-reverse[data-v-109ad6ae] {
   -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-799d8060] {
+.c-button-full[data-v-109ad6ae] {
+    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-109ad6ae] .bp-style-wrapper {
     width: 100%;
 }
-.c-col-span-2[data-v-799d8060] {
+.c-col-span-2[data-v-109ad6ae] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-799d8060] {
+.c-mobile-padding[data-v-109ad6ae] {
     padding: 1rem;
 }
-.c-text-padding[data-v-799d8060] {
+.c-text-padding[data-v-109ad6ae] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-divided-container[data-v-799d8060] {
+.c-divided-container[data-v-109ad6ae] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-799d8060] {
+.c-divided-container-reverse[data-v-109ad6ae] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6831,16 +6859,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-799d8060] {
+.c-aspect-square[data-v-109ad6ae] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-799d8060] {
+.c-divided-container[data-v-109ad6ae] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-799d8060] {
+.c-divided-container-reverse[data-v-109ad6ae] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
@@ -7472,44 +7500,44 @@ select[data-v-14e7c7c7] {
   color: #f21b3f;
 }
 
-.inner-container[data-v-24954146] {
+.inner-container[data-v-c359b5e7] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.outer-container[data-v-24954146] {
+.outer-container[data-v-c359b5e7] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.modal-cart[data-v-24954146] .cart-image {
+.modal-cart[data-v-c359b5e7] .cart-image {
   width: 3rem;
 }
-.modal-cart[data-v-24954146] .cart-option {
+.modal-cart[data-v-c359b5e7] .cart-option {
   width: 100%;
 }
-.success-bar-container[data-v-24954146] .tw-bg-success-500 {
+.success-bar-container[data-v-c359b5e7] .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-24954146] .modal {
+.modal-product-detail[data-v-c359b5e7] .modal {
     min-width: 100vh;
 }
-.modal-cart[data-v-24954146] .modal {
+.modal-cart[data-v-c359b5e7] .modal {
     min-width: 90vh;
     max-height: 90vh;
 }
-.modal-cart[data-v-24954146] .cart-image {
+.modal-cart[data-v-c359b5e7] .cart-image {
     width: 8rem;
 }
-.modal-cart[data-v-24954146] .cart-option {
+.modal-cart[data-v-c359b5e7] .cart-option {
     width: 75%;
 }
-.success-bar[data-v-24954146] {
+.success-bar[data-v-c359b5e7] {
     width: 50%;
 }
 }
 @media (max-width: 640px) {
-.success-bar[data-v-24954146] {
+.success-bar[data-v-c359b5e7] {
     width: 91.666667%;
 }
 }