@designcrowd/library.brand-page 6.0.21 → 6.0.22

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

@@ -1130,9 +1130,15 @@ a:not(.tw-lowercase) {
 .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
 }
@@ -1472,16 +1478,6 @@ a:not(.tw-lowercase) {
     -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));
@@ -3055,9 +3051,6 @@ a:not(.tw-lowercase) {
 .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))
@@ -5692,39 +5685,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 {
@@ -5838,7 +5864,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
@@ -6093,14 +6119,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 */
@@ -6196,53 +6218,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;
@@ -6250,16 +6278,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;
@@ -6891,44 +6919,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-preview.min.css

@@ -1100,9 +1100,15 @@ a.maker-anchor {
 .bp .tw-min-w-8 {
     min-width: 2rem
 }
+.bp .tw-min-w-\[120px\] {
+    min-width: 120px
+}
 .bp .tw-min-w-\[310px\] {
     min-width: 310px
 }
+.bp .tw-min-w-full {
+    min-width: 100%
+}
 .bp .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))
 }
-.bp .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))
-}
-.bp .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))
-}
 .bp .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 {
 .bp .tw-leading-tight {
     line-height: 1.25
 }
-.bp .tw-text-\[var\(--icon-color\)\] {
-    color: var(--icon-color)
-}
 .bp .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 .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 .bp-style-wrapper--no-margin[data-v-255edfd5] button {
+  margin-top: 0;
+  margin-bottom: 0;
 }
-.bp .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 .bp-button-paper-top[data-v-604db8c6] svg,
-.bp .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 .bp-icon-brush-left[data-v-255edfd5],
+.bp .bp-icon-brush-right[data-v-255edfd5] {
+  pointer-events: none;
 }
-.bp .bp-icon-brush-left[data-v-604db8c6] svg {
+.bp .bp-icon-brush-left[data-v-255edfd5] svg {
   -webkit-transform: translateX(-99%);
           transform: translateX(-99%);
   width: auto;
 }
-.bp .bp-icon-brush-right[data-v-604db8c6] svg {
+.bp .bp-icon-brush-right[data-v-255edfd5] svg {
   width: auto;
 }
-.bp .bp-button-arrow[data-v-604db8c6],
-.bp .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 .bp-button-shape[data-v-255edfd5] {
+  position: relative;
 }
-@media (min-width: 767px) {
-.bp .bp-button-arrow[data-v-604db8c6] {
-    clip-path: polygon(3% 100%, 0% 50%, 3% 0%, 97% 0%, 100% 50%, 97% 100%);
+.bp .bp-icon-shape[data-v-255edfd5] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.bp .bp-button-shape[data-v-255edfd5] button,
+.bp .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 .bp-icon-shape[data-v-255edfd5] path,
+.bp .bp-icon-shape[data-v-255edfd5] rect {
+  fill: currentColor;
+}
+.bp .bp-button-arrow[data-v-255edfd5],
+.bp .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%
+  );
 }
 
 .bp .empty-para[data-v-2520851c] p:empty::after {
@@ -5808,7 +5834,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   text-decoration: underline;
 }
 
-.bp .form-error[data-v-ddbacf5a] {
+.bp .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;
 }
 
-.bp .form-error[data-v-7731d899] {
+.bp .form-error[data-v-0cc4cbbd] {
   font-size: 0.75rem;
   line-height: 1rem;
-  color: #f21b3f;
-}
-.bp .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%;
 }
 
-.bp .form-error[data-v-799d8060] {
+.bp .form-error[data-v-109ad6ae] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.bp .contact-container[data-v-799d8060] {
+.bp .contact-container[data-v-109ad6ae] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.bp .c-text-padding[data-v-799d8060] {
+.bp .c-text-padding[data-v-109ad6ae] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.bp .device-wrapper--mobile .c-divided-container[data-v-799d8060] {
+.bp .device-wrapper--mobile .c-divided-container[data-v-109ad6ae] {
   -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-799d8060] {
+.bp .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) {
-.bp .c-button-full[data-v-799d8060] {
+.bp .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%;
 }
-.bp .c-col-span-2[data-v-799d8060] {
+.bp .c-col-span-2[data-v-109ad6ae] {
     grid-column: span 2 / span 2;
 }
-.bp .c-mobile-padding[data-v-799d8060] {
+.bp .c-mobile-padding[data-v-109ad6ae] {
     padding: 1rem;
 }
-.bp .c-text-padding[data-v-799d8060] {
+.bp .c-text-padding[data-v-109ad6ae] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.bp .c-divided-container[data-v-799d8060] {
+.bp .c-divided-container[data-v-109ad6ae] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.bp .c-divided-container-reverse[data-v-799d8060] {
+.bp .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) {
-.bp .c-aspect-square[data-v-799d8060] {
+.bp .c-aspect-square[data-v-109ad6ae] {
     aspect-ratio: 1 / 1;
 }
-.bp .c-divided-container[data-v-799d8060] {
+.bp .c-divided-container[data-v-109ad6ae] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.bp .c-divided-container-reverse[data-v-799d8060] {
+.bp .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;
 }
 
-.bp .inner-container[data-v-24954146] {
+.bp .inner-container[data-v-c359b5e7] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.bp .outer-container[data-v-24954146] {
+.bp .outer-container[data-v-c359b5e7] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.bp .modal-cart[data-v-24954146] .cart-image {
+.bp .modal-cart[data-v-c359b5e7] .cart-image {
   width: 3rem;
 }
-.bp .modal-cart[data-v-24954146] .cart-option {
+.bp .modal-cart[data-v-c359b5e7] .cart-option {
   width: 100%;
 }
-.bp .success-bar-container[data-v-24954146] .tw-bg-success-500 {
+.bp .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) {
-.bp .modal-product-detail[data-v-24954146] .modal {
+.bp .modal-product-detail[data-v-c359b5e7] .modal {
     min-width: 100vh;
 }
-.bp .modal-cart[data-v-24954146] .modal {
+.bp .modal-cart[data-v-c359b5e7] .modal {
     min-width: 90vh;
     max-height: 90vh;
 }
-.bp .modal-cart[data-v-24954146] .cart-image {
+.bp .modal-cart[data-v-c359b5e7] .cart-image {
     width: 8rem;
 }
-.bp .modal-cart[data-v-24954146] .cart-option {
+.bp .modal-cart[data-v-c359b5e7] .cart-option {
     width: 75%;
 }
-.bp .success-bar[data-v-24954146] {
+.bp .success-bar[data-v-c359b5e7] {
     width: 50%;
 }
 }
 @media (max-width: 640px) {
-.bp .success-bar[data-v-24954146] {
+.bp .success-bar[data-v-c359b5e7] {
     width: 91.666667%;
 }
 }

package/lib/src/index.mjs

@@ -1,4 +1,4 @@
-import { A as T, a as E, b as s, c as I, d as S, e as N, f as e, B as A, g as O, h as C, i as t, j as G, k as D, l as P, m as R, n as o, o as L, p as M, q as r, r as n, s as b, t as l, u as F, v as i, w as g, x as c, y as B, z as Y, C as U, D as d, E as u, F as H, G as p, H as y, I as m, J as K, K as k, L as V, M as X, N as v, O as h, P as f, Q as x, R as W, S as z, T as w, U as Z, V as j, W as q, X as J, Y as Q, Z as $, $ as aa, a0 as _a, a1 as Ta, a2 as Ea, a3 as sa, a4 as Ia, a5 as Sa, a6 as Na, a7 as ea, a8 as Aa, a9 as Oa, aa as Ca, ab as ta, ac as Ga, ad as Da, ae as Pa, af as Ra, ag as oa, ah as La, ai as Ma, aj as ra, ak as na, al as ba, am as la, an as Fa, ao as ia, ap as ga, aq as ca, ar as Ba, as as Ya, at as Ua, au as da, av as ua, aw as Ha, ax as pa, ay as ya, az as ma, aA as Ka, aB as ka, aC as Va, aD as Xa, aE as va, aF as ha, aG as fa, aH as xa, aI as Wa, aJ as za, aK as wa, aL as Za, aM as ja, aN as qa, aO as Ja, aP as Qa, aQ as $a, aR as a_, aS as __, aT as T_, aU as E_, aV as s_, aW as I_, aX as S_, aY as N_, aZ as e_, a_ as A_, a$ as O_, b0 as C_, b1 as t_, b2 as G_, b3 as D_, b4 as P_, b5 as R_, b6 as o_, b7 as L_, b8 as M_, b9 as r_, ba as n_, bb as b_, bc as l_, bd as F_, be as i_, bf as g_, bg as c_, bh as B_, bi as Y_, bj as U_, bk as d_, bl as u_, bm as H_, bn as p_, bo as y_, bp as m_, bq as K_, br as k_, bs as V_, bt as X_, bu as v_, bv as h_, bw as f_, bx as x_, by as W_, bz as z_, bA as w_, bB as Z_, bC as j_, bD as q_, bE as J_, bF as Q_, bG as $_, bH as aT, bI as _T, bJ as TT, bK as ET, bL as sT, bM as IT, bN as ST, bO as NT, bP as eT, bQ as AT, bR as OT, bS as CT, bT as tT, bU as GT, bV as DT, bW as PT, bX as RT, bY as oT, bZ as LT, b_ as MT, b$ as rT, c0 as nT, c1 as bT, c2 as lT, c3 as FT, c4 as iT, c5 as gT, c6 as cT, c7 as BT, c8 as YT, c9 as UT, ca as dT, cb as uT, cc as HT, cd as pT, ce as yT, cf as mT, cg as KT, ch as kT, ci as VT, cj as XT, ck as vT, cl as hT, cm as fT, cn as xT, co as WT, cp as zT, cq as wT, cr as ZT, cs as jT } from "./lib-CK2FPBv5.js";
+import { A as T, a as E, b as s, c as I, d as S, e as N, f as e, B as A, g as O, h as C, i as t, j as G, k as D, l as P, m as R, n as o, o as L, p as M, q as r, r as n, s as b, t as l, u as F, v as i, w as g, x as c, y as B, z as Y, C as U, D as d, E as u, F as H, G as p, H as y, I as m, J as K, K as k, L as V, M as X, N as v, O as h, P as f, Q as x, R as W, S as z, T as w, U as Z, V as j, W as q, X as J, Y as Q, Z as $, $ as aa, a0 as _a, a1 as Ta, a2 as Ea, a3 as sa, a4 as Ia, a5 as Sa, a6 as Na, a7 as ea, a8 as Aa, a9 as Oa, aa as Ca, ab as ta, ac as Ga, ad as Da, ae as Pa, af as Ra, ag as oa, ah as La, ai as Ma, aj as ra, ak as na, al as ba, am as la, an as Fa, ao as ia, ap as ga, aq as ca, ar as Ba, as as Ya, at as Ua, au as da, av as ua, aw as Ha, ax as pa, ay as ya, az as ma, aA as Ka, aB as ka, aC as Va, aD as Xa, aE as va, aF as ha, aG as fa, aH as xa, aI as Wa, aJ as za, aK as wa, aL as Za, aM as ja, aN as qa, aO as Ja, aP as Qa, aQ as $a, aR as a_, aS as __, aT as T_, aU as E_, aV as s_, aW as I_, aX as S_, aY as N_, aZ as e_, a_ as A_, a$ as O_, b0 as C_, b1 as t_, b2 as G_, b3 as D_, b4 as P_, b5 as R_, b6 as o_, b7 as L_, b8 as M_, b9 as r_, ba as n_, bb as b_, bc as l_, bd as F_, be as i_, bf as g_, bg as c_, bh as B_, bi as Y_, bj as U_, bk as d_, bl as u_, bm as H_, bn as p_, bo as y_, bp as m_, bq as K_, br as k_, bs as V_, bt as X_, bu as v_, bv as h_, bw as f_, bx as x_, by as W_, bz as z_, bA as w_, bB as Z_, bC as j_, bD as q_, bE as J_, bF as Q_, bG as $_, bH as aT, bI as _T, bJ as TT, bK as ET, bL as sT, bM as IT, bN as ST, bO as NT, bP as eT, bQ as AT, bR as OT, bS as CT, bT as tT, bU as GT, bV as DT, bW as PT, bX as RT, bY as oT, bZ as LT, b_ as MT, b$ as rT, c0 as nT, c1 as bT, c2 as lT, c3 as FT, c4 as iT, c5 as gT, c6 as cT, c7 as BT, c8 as YT, c9 as UT, ca as dT, cb as uT, cc as HT, cd as pT, ce as yT, cf as mT, cg as KT, ch as kT, ci as VT, cj as XT, ck as vT, cl as hT, cm as fT, cn as xT, co as WT, cp as zT, cq as wT, cr as ZT, cs as jT } from "./lib-Dh4vrmod.js";
 import { U as JT, u as QT } from "./useEventTracker-DmQ6AkNn.js";
 import { createPinia as aE, setActivePinia as _E } from "pinia";
 export {