@designcrowd/library.brand-page 6.0.19-ast-btns → 6.0.19-ast-btns-2

package/lib/src/{CreatedOnBrandCrowd-de-de-BrIpxgMF.js → CreatedOnBrandCrowd-de-de-BI4rJV_V.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-ce4Vsuiu.js";
+import { _ as t } from "./lib-CfENvLvt.js";
 const i = {}, h = {
   width: "275",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-en-us-DQDv2DBf.js → CreatedOnBrandCrowd-en-us-Crf-sBeO.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-ce4Vsuiu.js";
+import { _ as t } from "./lib-CfENvLvt.js";
 const i = {}, h = {
   width: "251",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-es-es-BadaUjK1.js → CreatedOnBrandCrowd-es-es-DE_kK1yb.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-ce4Vsuiu.js";
+import { _ as t } from "./lib-CfENvLvt.js";
 const i = {}, h = {
   width: "250",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-fr-DbrUAAGP.js → CreatedOnBrandCrowd-fr-ca-BXhEu1vY.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-ce4Vsuiu.js";
+import { _ as t } from "./lib-CfENvLvt.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-fr-ca-DbrUAAGP.js → CreatedOnBrandCrowd-fr-fr-BXhEu1vY.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-ce4Vsuiu.js";
+import { _ as t } from "./lib-CfENvLvt.js";
 const i = {}, h = {
   width: "237",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-pt-Cy41WPcW.js → CreatedOnBrandCrowd-pt-br-DG1azcKI.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-ce4Vsuiu.js";
+import { _ as t } from "./lib-CfENvLvt.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnBrandCrowd-pt-br-Cy41WPcW.js → CreatedOnBrandCrowd-pt-pt-DG1azcKI.js}

@@ -1,5 +1,5 @@
 import { openBlock as e, createElementBlock as l, createStaticVNode as a } from "vue";
-import { _ as t } from "./lib-ce4Vsuiu.js";
+import { _ as t } from "./lib-CfENvLvt.js";
 const i = {}, h = {
   width: "263",
   height: "36",

package/lib/src/{CreatedOnDcom-de-de-D6UvcWQ5.js → CreatedOnDcom-de-de-BFL99-ya.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-ce4Vsuiu.js";
+import { _ as e } from "./lib-CfENvLvt.js";
 const M = {}, Z = {
   width: "242",
   height: "36",

package/lib/src/{CreatedOnDcom-en-us-DKUOQjj3.js → CreatedOnDcom-en-us-DqWMpFgs.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-ce4Vsuiu.js";
+import { _ as e } from "./lib-CfENvLvt.js";
 const i = {}, M = {
   width: "231",
   height: "36",

package/lib/src/{CreatedOnDcom-es-es-CftpM7Vk.js → CreatedOnDcom-es-es-Ds0zIzXx.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-ce4Vsuiu.js";
+import { _ as e } from "./lib-CfENvLvt.js";
 const M = {}, Z = {
   width: "230",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-ca-DcCQzJDA.js → CreatedOnDcom-fr-ca-X-GSmpwv.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-ce4Vsuiu.js";
+import { _ as e } from "./lib-CfENvLvt.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-fr-fr-Bodcymjw.js → CreatedOnDcom-fr-fr-Cm1eyNiD.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as e } from "./lib-ce4Vsuiu.js";
+import { _ as e } from "./lib-CfENvLvt.js";
 const i = {}, l = {
   width: "216",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-br-B1OmeM4X.js → CreatedOnDcom-pt-br-BUOePaaJ.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-ce4Vsuiu.js";
+import { _ as M } from "./lib-CfENvLvt.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/{CreatedOnDcom-pt-pt-CGx-k757.js → CreatedOnDcom-pt-pt-CJSZsybQ.js}

@@ -1,5 +1,5 @@
 import { openBlock as H, createElementBlock as V, createStaticVNode as t } from "vue";
-import { _ as M } from "./lib-ce4Vsuiu.js";
+import { _ as M } from "./lib-CfENvLvt.js";
 const Z = {}, e = {
   width: "232",
   height: "36",

package/lib/src/brand-page/components/contact-form/ContactForm.mixin.js

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 import { FORM_FIELD_TYPES } from '@brand-page/models';
 import { getEmailValidationError, getMessageValidationError, getNameValidationError, getPhoneValidationError, } from '@brand-page/utils';
-import { isDecorativeButtonStyle } from '../button/decorative-button-styles';
+import { isDecorativeButtonStyle } from '../../utils/button.util';
 import brandPageClient from '../../clients/brand-page.client';
 import { isEmail } from '../../../utils/validator.util';
 import { ALIGN_CARD_CENTER, ALIGN_CARD_CENTER_IMAGE, ALIGN_CENTERED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, DISPLAY_STYLE_COLLAPSED, RECAPTCHA_ACTION_CONTACT_FORM, TEXT_ONLY, } from '../../constants';

package/lib/src/brand-page/utils/button.util.d.ts

@@ -5,3 +5,8 @@ import type { ButtonStyles } from '../models';
  * @returns The calculated box shadow CSS value
  */
 export declare const getBoxShadowValue: (buttonStyles: ButtonStyles) => string;
+export declare const BUTTON_STYLE_BRUSHSTROKE = "BUTTON_STYLE_19";
+export declare const BUTTON_STYLE_ARROW = "BUTTON_STYLE_20";
+export declare const BUTTON_STYLE_PAPER = "BUTTON_STYLE_21";
+export declare const DECORATIVE_BUTTON_STYLE_IDS: string[];
+export declare const isDecorativeButtonStyle: (styleId?: string) => boolean;

package/lib/src/brand-page/utils/button.util.js

@@ -27,3 +27,16 @@ export const getBoxShadowValue = (buttonStyles) => {
     }
     return boxShadowValue;
 };
+// The "decorative" button styles — brushstroke / arrow / torn-paper — whose visual
+// is drawn by ButtonStyleWrapper rather than plain CSS. Their banner-like SVG
+// decoration needs the button to be reasonably wide to render legibly, so narrow
+// (w-fit) hosts should widen when one of these is active (BP-5800).
+export const BUTTON_STYLE_BRUSHSTROKE = 'BUTTON_STYLE_19';
+export const BUTTON_STYLE_ARROW = 'BUTTON_STYLE_20';
+export const BUTTON_STYLE_PAPER = 'BUTTON_STYLE_21';
+export const DECORATIVE_BUTTON_STYLE_IDS = [
+    BUTTON_STYLE_BRUSHSTROKE,
+    BUTTON_STYLE_ARROW,
+    BUTTON_STYLE_PAPER,
+];
+export const isDecorativeButtonStyle = (styleId) => !!styleId && DECORATIVE_BUTTON_STYLE_IDS.includes(styleId);

package/lib/src/brand-page-maker/constants/config-settings-constant.js

@@ -455,6 +455,10 @@ const testimonialReplaceImageSettings = () => ({
     desiredWidth: undefined,
     mediaType: MEDIA_TYPES.image,
 });
+// Transparent bg is disallowed on the single-page side (brand-page /
+// brand-contact) so the added background colour stays a solid backdrop for the
+// decorative button styles (BP-5800); brand-site sections keep transparent.
+const disableTransparentOffBrandSite = (brandPageType) => brandPageType !== BRAND_PAGE_TYPES.brandSite;
 export const LOGO_SETTINGS_CONFIG = () => ({
     createInitialContent: createInitialLogoContent,
     type: 'logo',
@@ -1470,6 +1474,7 @@ export const MAILING_LIST_CONTENT_SETTINGS_CONFIG = () => ({
             isInline: true,
             showToggle: false,
             title: contentSettingsTr(`backgroundColorTitle`),
+            disableTransparent: disableTransparentOffBrandSite,
             valueConvertor: backgroundColorConvertor,
             defaultGetter: paymentFillColorFieldDefaultGetter,
         },
@@ -1651,6 +1656,7 @@ export const REQUEST_PAYMENT_CONTENT_SETTINGS_CONFIG = () => ({
             isInline: true,
             showToggle: false,
             title: contentSettingsTr(`backgroundColorTitle`),
+            disableTransparent: disableTransparentOffBrandSite,
             valueConvertor: backgroundColorConvertor,
             defaultGetter: paymentFillColorFieldDefaultGetter,
         },
@@ -1726,6 +1732,7 @@ export const SUPPORT_ME_CONTENT_SETTINGS_CONFIG = () => ({
             isInline: true,
             showToggle: false,
             title: contentSettingsTr(`backgroundColorTitle`),
+            disableTransparent: disableTransparentOffBrandSite,
             valueConvertor: backgroundColorConvertor,
             defaultGetter: paymentFillColorFieldDefaultGetter,
         },
@@ -1876,6 +1883,7 @@ export const CONTACT_FORM_SETTINGS_CONFIG = () => ({
             isInline: true,
             showToggle: false,
             title: contentSettingsTr(`backgroundColorTitle`),
+            disableTransparent: disableTransparentOffBrandSite,
             valueConvertor: backgroundColorConvertor,
             defaultGetter: contactFormBackgroundColorDefaultGetter,
         },
@@ -2694,6 +2702,7 @@ export const SHOP_SECTION_SETTINGS_CONFIG = () => ({
             isInline: true,
             showToggle: false,
             title: contentSettingsTr(`backgroundColorTitle`),
+            disableTransparent: disableTransparentOffBrandSite,
             valueConvertor: backgroundColorConvertor,
         },
     },

package/lib/src/brand-page-maker/models/content-settings-configs.d.ts

@@ -90,7 +90,7 @@ export interface ContentSettingsField<TContent> {
     variant?: VariantDisplayModes | ((brandPageType: BrandPageType) => VariantDisplayModes);
     replaceImageSettings?: ContentReplaceImageSettings<TContent>;
     showToggle?: boolean;
-    disableTransparent?: boolean;
+    disableTransparent?: boolean | ((brandPageType: BrandPageType) => boolean);
     valueConvertor?: ValueConvertor<any, any>;
     canReplace?: boolean;
     placeholderAssessor?: PlaceholderTypeAssessor<TContent>;

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

@@ -1106,6 +1106,9 @@ a.maker-anchor {
 .tw-min-w-\[310px\] {
     min-width: 310px
 }
+.tw-min-w-full {
+    min-width: 100%
+}
 .tw-max-w-0 {
     max-width: 0px
 }
@@ -5657,40 +5660,56 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
    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-c2533ae5] button {
+.bp-style-wrapper--no-margin[data-v-255edfd5] button {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-/* The brushstroke ends are transformed over the button's left/right edges, so
-   they must not capture clicks (BP-5882). */
-.bp-icon-brush-left[data-v-c2533ae5],
-.bp-icon-brush-right[data-v-c2533ae5] {
+/* 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;
 }
-
-/* Torn-paper: clip the button itself to a torn silhouette via a CSS alpha mask
-   (the button keeps its own fill). The mask stretches to the button box, so the
-   torn shape always matches the button — it can't overhang neighbours, stretch
-   past the button, or block clicks the way the old absolute overlay did
-   (BP-5882/BP-5883). */
-.bp-button-paper[data-v-c2533ae5] button,
-.bp-button-paper[data-v-c2533ae5] a {
-  -webkit-mask: var(--paper-mask) no-repeat center / 100% 100%;
-  mask: var(--paper-mask) no-repeat center / 100% 100%;
-  -webkit-mask-mode: alpha;
-  mask-mode: alpha;
-}
-.bp-icon-brush-left[data-v-c2533ae5] svg {
+.bp-icon-brush-left[data-v-255edfd5] svg {
   -webkit-transform: translateX(-99%);
           transform: translateX(-99%);
   width: auto;
 }
-.bp-icon-brush-right[data-v-c2533ae5] svg {
+.bp-icon-brush-right[data-v-255edfd5] svg {
   width: auto;
 }
-.bp-button-arrow[data-v-c2533ae5],
-.device-wrapper--mobile .bp-button-arrow[data-v-c2533ae5] {
+
+/* 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;
+}
+.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. */
@@ -6169,53 +6188,59 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.form-error[data-v-a6dab4ce] {
+.form-error[data-v-04e03cb2] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-a6dab4ce] {
+.contact-container[data-v-04e03cb2] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-a6dab4ce] {
+.c-text-padding[data-v-04e03cb2] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-a6dab4ce] {
+.device-wrapper--mobile .c-divided-container[data-v-04e03cb2] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-a6dab4ce] {
+.device-wrapper--mobile .c-divided-container-reverse[data-v-04e03cb2] {
   -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-a6dab4ce] {
+.c-button-full[data-v-04e03cb2] {
+    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-04e03cb2] .bp-style-wrapper {
     width: 100%;
 }
-.c-col-span-2[data-v-a6dab4ce] {
+.c-col-span-2[data-v-04e03cb2] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-a6dab4ce] {
+.c-mobile-padding[data-v-04e03cb2] {
     padding: 1rem;
 }
-.c-text-padding[data-v-a6dab4ce] {
+.c-text-padding[data-v-04e03cb2] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-divided-container[data-v-a6dab4ce] {
+.c-divided-container[data-v-04e03cb2] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-a6dab4ce] {
+.c-divided-container-reverse[data-v-04e03cb2] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6223,16 +6248,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-a6dab4ce] {
+.c-aspect-square[data-v-04e03cb2] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-a6dab4ce] {
+.c-divided-container[data-v-04e03cb2] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-a6dab4ce] {
+.c-divided-container-reverse[data-v-04e03cb2] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;

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

@@ -1527,6 +1527,9 @@ a.maker-anchor {
 .tw-min-w-\[310px\] {
   min-width: 310px;
 }
+.tw-min-w-full {
+  min-width: 100%;
+}
 .tw-max-w-0 {
   max-width: 0px;
 }
@@ -6268,40 +6271,56 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
    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-c2533ae5] button {
+.bp-style-wrapper--no-margin[data-v-255edfd5] button {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-/* The brushstroke ends are transformed over the button's left/right edges, so
-   they must not capture clicks (BP-5882). */
-.bp-icon-brush-left[data-v-c2533ae5],
-.bp-icon-brush-right[data-v-c2533ae5] {
+/* 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;
 }
-
-/* Torn-paper: clip the button itself to a torn silhouette via a CSS alpha mask
-   (the button keeps its own fill). The mask stretches to the button box, so the
-   torn shape always matches the button — it can't overhang neighbours, stretch
-   past the button, or block clicks the way the old absolute overlay did
-   (BP-5882/BP-5883). */
-.bp-button-paper[data-v-c2533ae5] button,
-.bp-button-paper[data-v-c2533ae5] a {
-  -webkit-mask: var(--paper-mask) no-repeat center / 100% 100%;
-  mask: var(--paper-mask) no-repeat center / 100% 100%;
-  -webkit-mask-mode: alpha;
-  mask-mode: alpha;
-}
-.bp-icon-brush-left[data-v-c2533ae5] svg {
+.bp-icon-brush-left[data-v-255edfd5] svg {
   -webkit-transform: translateX(-99%);
           transform: translateX(-99%);
   width: auto;
 }
-.bp-icon-brush-right[data-v-c2533ae5] svg {
+.bp-icon-brush-right[data-v-255edfd5] svg {
   width: auto;
 }
-.bp-button-arrow[data-v-c2533ae5],
-.device-wrapper--mobile .bp-button-arrow[data-v-c2533ae5] {
+
+/* 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;
+}
+.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. */
@@ -6780,53 +6799,59 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.form-error[data-v-a6dab4ce] {
+.form-error[data-v-04e03cb2] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-a6dab4ce] {
+.contact-container[data-v-04e03cb2] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-a6dab4ce] {
+.c-text-padding[data-v-04e03cb2] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-a6dab4ce] {
+.device-wrapper--mobile .c-divided-container[data-v-04e03cb2] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-a6dab4ce] {
+.device-wrapper--mobile .c-divided-container-reverse[data-v-04e03cb2] {
   -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-a6dab4ce] {
+.c-button-full[data-v-04e03cb2] {
+    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-04e03cb2] .bp-style-wrapper {
     width: 100%;
 }
-.c-col-span-2[data-v-a6dab4ce] {
+.c-col-span-2[data-v-04e03cb2] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-a6dab4ce] {
+.c-mobile-padding[data-v-04e03cb2] {
     padding: 1rem;
 }
-.c-text-padding[data-v-a6dab4ce] {
+.c-text-padding[data-v-04e03cb2] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-divided-container[data-v-a6dab4ce] {
+.c-divided-container[data-v-04e03cb2] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-a6dab4ce] {
+.c-divided-container-reverse[data-v-04e03cb2] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6834,16 +6859,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-a6dab4ce] {
+.c-aspect-square[data-v-04e03cb2] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-a6dab4ce] {
+.c-divided-container[data-v-04e03cb2] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-a6dab4ce] {
+.c-divided-container-reverse[data-v-04e03cb2] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;