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

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

@@ -1521,6 +1521,9 @@ a.maker-anchor {
 .tw-min-w-8 {
   min-width: 2rem;
 }
+.tw-min-w-\[120px\] {
+  min-width: 120px;
+}
 .tw-min-w-\[310px\] {
   min-width: 310px;
 }
@@ -1863,16 +1866,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 +3441,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 +6263,56 @@ 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-c2533ae5] 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);
+
+/* 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] {
+  pointer-events: none;
 }
-.bp-button-paper-top[data-v-604db8c6] svg,
-.bp-button-paper-bottom[data-v-604db8c6] svg {
-  width: 100%;
-  height: auto;
+
+/* 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-604db8c6] svg {
+.bp-icon-brush-left[data-v-c2533ae5] svg {
   -webkit-transform: translateX(-99%);
           transform: translateX(-99%);
   width: auto;
 }
-.bp-icon-brush-right[data-v-604db8c6] svg {
+.bp-icon-brush-right[data-v-c2533ae5] 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%);
-}
-@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-button-arrow[data-v-c2533ae5],
+.device-wrapper--mobile .bp-button-arrow[data-v-c2533ae5] {
+  /* 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-c90cc6bc] p:empty::after {
@@ -6419,7 +6426,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   text-decoration: underline;
 }
 
-.form-error[data-v-49b27af8] {
+.form-error[data-v-ef964594] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f
@@ -6674,14 +6681,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 +6780,53 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.form-error[data-v-d0a8cdec] {
+.form-error[data-v-a6dab4ce] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-d0a8cdec] {
+.contact-container[data-v-a6dab4ce] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-d0a8cdec] {
+.c-text-padding[data-v-a6dab4ce] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-d0a8cdec] {
+.device-wrapper--mobile .c-divided-container[data-v-a6dab4ce] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-d0a8cdec] {
+.device-wrapper--mobile .c-divided-container-reverse[data-v-a6dab4ce] {
   -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-d0a8cdec] {
+.c-button-full[data-v-a6dab4ce] {
     width: 100%;
 }
-.c-col-span-2[data-v-d0a8cdec] {
+.c-col-span-2[data-v-a6dab4ce] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-d0a8cdec] {
+.c-mobile-padding[data-v-a6dab4ce] {
     padding: 1rem;
 }
-.c-text-padding[data-v-d0a8cdec] {
+.c-text-padding[data-v-a6dab4ce] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-divided-container[data-v-d0a8cdec] {
+.c-divided-container[data-v-a6dab4ce] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-d0a8cdec] {
+.c-divided-container-reverse[data-v-a6dab4ce] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6831,16 +6834,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-d0a8cdec] {
+.c-aspect-square[data-v-a6dab4ce] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-d0a8cdec] {
+.c-divided-container[data-v-a6dab4ce] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-d0a8cdec] {
+.c-divided-container-reverse[data-v-a6dab4ce] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
@@ -7472,44 +7475,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-designCom.min.css

@@ -1130,6 +1130,9 @@ 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
 }
@@ -1472,16 +1475,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 +3048,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 +5682,56 @@ 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-c2533ae5] 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);
+
+/* 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] {
+  pointer-events: none;
 }
-.bp-button-paper-top[data-v-604db8c6] svg,
-.bp-button-paper-bottom[data-v-604db8c6] svg {
-  width: 100%;
-  height: auto;
+
+/* 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-604db8c6] svg {
+.bp-icon-brush-left[data-v-c2533ae5] svg {
   -webkit-transform: translateX(-99%);
           transform: translateX(-99%);
   width: auto;
 }
-.bp-icon-brush-right[data-v-604db8c6] svg {
+.bp-icon-brush-right[data-v-c2533ae5] 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%);
-}
-@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-button-arrow[data-v-c2533ae5],
+.device-wrapper--mobile .bp-button-arrow[data-v-c2533ae5] {
+  /* 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-c90cc6bc] p:empty::after {
@@ -5838,7 +5845,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   text-decoration: underline;
 }
 
-.form-error[data-v-49b27af8] {
+.form-error[data-v-ef964594] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f
@@ -6093,14 +6100,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 +6199,53 @@ select[data-v-14e7c7c7] {
   width: 100%;
 }
 
-.form-error[data-v-d0a8cdec] {
+.form-error[data-v-a6dab4ce] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
-.contact-container[data-v-d0a8cdec] {
+.contact-container[data-v-a6dab4ce] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c-text-padding[data-v-d0a8cdec] {
+.c-text-padding[data-v-a6dab4ce] {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.device-wrapper--mobile .c-divided-container[data-v-d0a8cdec] {
+.device-wrapper--mobile .c-divided-container[data-v-a6dab4ce] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.device-wrapper--mobile .c-divided-container-reverse[data-v-d0a8cdec] {
+.device-wrapper--mobile .c-divided-container-reverse[data-v-a6dab4ce] {
   -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-d0a8cdec] {
+.c-button-full[data-v-a6dab4ce] {
     width: 100%;
 }
-.c-col-span-2[data-v-d0a8cdec] {
+.c-col-span-2[data-v-a6dab4ce] {
     grid-column: span 2 / span 2;
 }
-.c-mobile-padding[data-v-d0a8cdec] {
+.c-mobile-padding[data-v-a6dab4ce] {
     padding: 1rem;
 }
-.c-text-padding[data-v-d0a8cdec] {
+.c-text-padding[data-v-a6dab4ce] {
     grid-column: span 2 / span 2;
     padding-left: 0px;
     padding-right: 0px;
 }
-.c-divided-container[data-v-d0a8cdec] {
+.c-divided-container[data-v-a6dab4ce] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-divided-container-reverse[data-v-d0a8cdec] {
+.c-divided-container-reverse[data-v-a6dab4ce] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6250,16 +6253,16 @@ select[data-v-14e7c7c7] {
 }
 }
 @media (min-width: 767px) {
-.c-aspect-square[data-v-d0a8cdec] {
+.c-aspect-square[data-v-a6dab4ce] {
     aspect-ratio: 1 / 1;
 }
-.c-divided-container[data-v-d0a8cdec] {
+.c-divided-container[data-v-a6dab4ce] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c-divided-container-reverse[data-v-d0a8cdec] {
+.c-divided-container-reverse[data-v-a6dab4ce] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
@@ -6891,44 +6894,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%;
 }
 }