@designcrowd/library.brand-page 6.0.6 → 6.0.7-ast-banner-1

package/lib/src/{CreatedOnBrandCrowd-de-de-oGS283ms.js → CreatedOnBrandCrowd-de-de-kVnd7OFP.js}

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

package/lib/src/{CreatedOnBrandCrowd-en-us-Be4Hw8Nr.js → CreatedOnBrandCrowd-en-us-DG29QU7L.js}

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

package/lib/src/{CreatedOnBrandCrowd-es-es-CPBtRSj1.js → CreatedOnBrandCrowd-es-es-DuTyBvo7.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-fr-Cg10f_d-.js → CreatedOnBrandCrowd-fr-ca-CLd7H2W4.js}

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

package/lib/src/{CreatedOnBrandCrowd-fr-ca-Cg10f_d-.js → CreatedOnBrandCrowd-fr-fr-CLd7H2W4.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-pt-B948D0V7.js → CreatedOnBrandCrowd-pt-br-BwR0sCCg.js}

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

package/lib/src/{CreatedOnBrandCrowd-pt-br-B948D0V7.js → CreatedOnBrandCrowd-pt-pt-BwR0sCCg.js}

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

package/lib/src/{CreatedOnDcom-de-de-Dglo-8v1.js → CreatedOnDcom-de-de-DLp2FCNs.js}

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

package/lib/src/{CreatedOnDcom-en-us-BUAHAaS5.js → CreatedOnDcom-en-us-DctDto-b.js}

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

package/lib/src/{CreatedOnDcom-es-es-B2mjCtM2.js → CreatedOnDcom-es-es-B2AXjnem.js}

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

package/lib/src/{CreatedOnDcom-fr-ca-DgiIR-U3.js → CreatedOnDcom-fr-ca-X-iviFNZ.js}

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

package/lib/src/{CreatedOnDcom-fr-fr-DqnZTSPY.js → CreatedOnDcom-fr-fr-C63sxkIx.js}

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

package/lib/src/{CreatedOnDcom-pt-br-ZhHGJYs8.js → CreatedOnDcom-pt-br-DJoDFoQd.js}

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

package/lib/src/{CreatedOnDcom-pt-pt-DulWcYWp.js → CreatedOnDcom-pt-pt-DrmkZyNm.js}

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

package/lib/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.js

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue';
+import { isUnsetOrTransparentColor } from '../../../models';
 export default defineComponent({
     props: {
         context: {
@@ -75,12 +76,16 @@ export default defineComponent({
             const baseStyle = isActive
                 ? this.selectedButtonStyle
                 : this.defaultButtonStyle;
+            const subNavBackgroundColor = this.styles.hamburgerMenuStyle.subNavBackgroundColor ?? '#ffffff';
+            // An active sub-page uses the selected button colour, but when that colour
+            // is transparent/unset it must keep the sub-nav background colour rather
+            // than rendering transparent (BP-5751).
             return {
                 ...baseStyle,
                 paddingLeft: '32px',
-                backgroundColor: isActive
+                backgroundColor: isActive && !isUnsetOrTransparentColor(baseStyle.backgroundColor)
                     ? baseStyle.backgroundColor
-                    : (this.styles.hamburgerMenuStyle.subNavBackgroundColor ?? '#ffffff'),
+                    : subNavBackgroundColor,
             };
         },
         closeSideMenu() {

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

@@ -6277,10 +6277,23 @@ select[data-v-14e7c7c7] {
     text-align: center
 }
 
-.c_banner--with-image-overlay[data-v-805cbaae] {
+.c_banner--with-image-overlay[data-v-e897b770] {
   min-height: 24rem;
 }
-.c_banner--divided-container[data-v-805cbaae] {
+
+/*
+ * Full-background-image banner only. Top/bottom padding must EXPAND the banner
+ * (and its full-bleed image) rather than being swallowed by min-height. Under
+ * the brandPage theme (Tailwind preflight on → box-sizing: border-box) padding
+ * is absorbed into the 24rem min-height, so the banner stays fixed and only the
+ * text shifts. content-box makes the padding additive to the height in every
+ * theme, matching how it renders with preflight off. (BP-5801)
+ */
+.c_banner--expand-padding[data-v-e897b770] {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.c_banner--divided-container[data-v-e897b770] {
   min-height: 30rem;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
@@ -6288,13 +6301,13 @@ select[data-v-14e7c7c7] {
           flex-direction: row;
   gap: 1rem;
 }
-.device-wrapper--mobile .c_banner--divided-container[data-v-805cbaae] {
+.device-wrapper--mobile .c_banner--divided-container[data-v-e897b770] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
-.c_banner-container[data-v-805cbaae] {
+.c_banner-container[data-v-e897b770] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
@@ -6307,61 +6320,61 @@ select[data-v-14e7c7c7] {
  * widen to the full banner and shift left so the image spans edge to edge
  * (1.5rem = tw-px-6). Text blocks stay constrained to the max-width.
  */
-.c_banner-stacked-image--full[data-v-805cbaae] {
+.c_banner-stacked-image--full[data-v-e897b770] {
   width: calc(100cqw + 3rem);
   margin-inline: calc(50% - 50cqw - 1.5rem);
 }
-.c_banner--with-image-flip[data-v-805cbaae] {
+.c_banner--with-image-flip[data-v-e897b770] {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: reverse;
       -ms-flex-direction: row-reverse;
           flex-direction: row-reverse;
 }
-.c_banner--divided-container[data-v-805cbaae] .full-square-image {
+.c_banner--divided-container[data-v-e897b770] .full-square-image {
   width: 100%;
   aspect-ratio: 1/1;
   -o-object-fit: cover;
      object-fit: cover;
 }
 @container (min-width: 640px) {
-.c_banner-container--left-aligned-stacking[data-v-805cbaae] {
+.c_banner-container--left-aligned-stacking[data-v-e897b770] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c_banner-container--right-aligned-stacking[data-v-805cbaae] {
+.c_banner-container--right-aligned-stacking[data-v-e897b770] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
             flex-direction: row-reverse;
 }
-.c_banner-button--stacking[data-v-805cbaae] {
+.c_banner-button--stacking[data-v-e897b770] {
     width: -webkit-fit-content;
     width: -moz-fit-content;
     width: fit-content;
 }
 }
 @container (max-width: 640px) {
-.c_banner-container--left-aligned-stacking[data-v-805cbaae] {
+.c_banner-container--left-aligned-stacking[data-v-e897b770] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c_banner-container--right-aligned-stacking[data-v-805cbaae] {
+.c_banner-container--right-aligned-stacking[data-v-e897b770] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c_banner-item--stacking[data-v-805cbaae] {
+.c_banner-item--stacking[data-v-e897b770] {
     width: 100%;
 }
-.c_banner-button--stacking[data-v-805cbaae] {
+.c_banner-button--stacking[data-v-e897b770] {
     width: 100%;
 }
-.c_banner--divided-container[data-v-805cbaae] {
+.c_banner--divided-container[data-v-e897b770] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6852,44 +6865,44 @@ select[data-v-14e7c7c7] {
   color: #f21b3f;
 }
 
-.inner-container[data-v-a52a6511] {
+.inner-container[data-v-24954146] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.outer-container[data-v-a52a6511] {
+.outer-container[data-v-24954146] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.modal-cart[data-v-a52a6511] .cart-image {
+.modal-cart[data-v-24954146] .cart-image {
   width: 3rem;
 }
-.modal-cart[data-v-a52a6511] .cart-option {
+.modal-cart[data-v-24954146] .cart-option {
   width: 100%;
 }
-.success-bar-container[data-v-a52a6511] .tw-bg-success-500 {
+.success-bar-container[data-v-24954146] .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-a52a6511] .modal {
+.modal-product-detail[data-v-24954146] .modal {
     min-width: 100vh;
 }
-.modal-cart[data-v-a52a6511] .modal {
+.modal-cart[data-v-24954146] .modal {
     min-width: 90vh;
     max-height: 90vh;
 }
-.modal-cart[data-v-a52a6511] .cart-image {
+.modal-cart[data-v-24954146] .cart-image {
     width: 8rem;
 }
-.modal-cart[data-v-a52a6511] .cart-option {
+.modal-cart[data-v-24954146] .cart-option {
     width: 75%;
 }
-.success-bar[data-v-a52a6511] {
+.success-bar[data-v-24954146] {
     width: 50%;
 }
 }
 @media (max-width: 640px) {
-.success-bar[data-v-a52a6511] {
+.success-bar[data-v-24954146] {
     width: 91.666667%;
 }
 }

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

@@ -6888,10 +6888,23 @@ select[data-v-14e7c7c7] {
     text-align: center
 }
 
-.c_banner--with-image-overlay[data-v-805cbaae] {
+.c_banner--with-image-overlay[data-v-e897b770] {
   min-height: 24rem;
 }
-.c_banner--divided-container[data-v-805cbaae] {
+
+/*
+ * Full-background-image banner only. Top/bottom padding must EXPAND the banner
+ * (and its full-bleed image) rather than being swallowed by min-height. Under
+ * the brandPage theme (Tailwind preflight on → box-sizing: border-box) padding
+ * is absorbed into the 24rem min-height, so the banner stays fixed and only the
+ * text shifts. content-box makes the padding additive to the height in every
+ * theme, matching how it renders with preflight off. (BP-5801)
+ */
+.c_banner--expand-padding[data-v-e897b770] {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.c_banner--divided-container[data-v-e897b770] {
   min-height: 30rem;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
@@ -6899,13 +6912,13 @@ select[data-v-14e7c7c7] {
           flex-direction: row;
   gap: 1rem;
 }
-.device-wrapper--mobile .c_banner--divided-container[data-v-805cbaae] {
+.device-wrapper--mobile .c_banner--divided-container[data-v-e897b770] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
-.c_banner-container[data-v-805cbaae] {
+.c_banner-container[data-v-e897b770] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
@@ -6918,61 +6931,61 @@ select[data-v-14e7c7c7] {
  * widen to the full banner and shift left so the image spans edge to edge
  * (1.5rem = tw-px-6). Text blocks stay constrained to the max-width.
  */
-.c_banner-stacked-image--full[data-v-805cbaae] {
+.c_banner-stacked-image--full[data-v-e897b770] {
   width: calc(100cqw + 3rem);
   margin-inline: calc(50% - 50cqw - 1.5rem);
 }
-.c_banner--with-image-flip[data-v-805cbaae] {
+.c_banner--with-image-flip[data-v-e897b770] {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: reverse;
       -ms-flex-direction: row-reverse;
           flex-direction: row-reverse;
 }
-.c_banner--divided-container[data-v-805cbaae] .full-square-image {
+.c_banner--divided-container[data-v-e897b770] .full-square-image {
   width: 100%;
   aspect-ratio: 1/1;
   -o-object-fit: cover;
      object-fit: cover;
 }
 @container (min-width: 640px) {
-.c_banner-container--left-aligned-stacking[data-v-805cbaae] {
+.c_banner-container--left-aligned-stacking[data-v-e897b770] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c_banner-container--right-aligned-stacking[data-v-805cbaae] {
+.c_banner-container--right-aligned-stacking[data-v-e897b770] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
             flex-direction: row-reverse;
 }
-.c_banner-button--stacking[data-v-805cbaae] {
+.c_banner-button--stacking[data-v-e897b770] {
     width: -webkit-fit-content;
     width: -moz-fit-content;
     width: fit-content;
 }
 }
 @container (max-width: 640px) {
-.c_banner-container--left-aligned-stacking[data-v-805cbaae] {
+.c_banner-container--left-aligned-stacking[data-v-e897b770] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c_banner-container--right-aligned-stacking[data-v-805cbaae] {
+.c_banner-container--right-aligned-stacking[data-v-e897b770] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c_banner-item--stacking[data-v-805cbaae] {
+.c_banner-item--stacking[data-v-e897b770] {
     width: 100%;
 }
-.c_banner-button--stacking[data-v-805cbaae] {
+.c_banner-button--stacking[data-v-e897b770] {
     width: 100%;
 }
-.c_banner--divided-container[data-v-805cbaae] {
+.c_banner--divided-container[data-v-e897b770] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -7463,44 +7476,44 @@ select[data-v-14e7c7c7] {
   color: #f21b3f;
 }
 
-.inner-container[data-v-a52a6511] {
+.inner-container[data-v-24954146] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.outer-container[data-v-a52a6511] {
+.outer-container[data-v-24954146] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.modal-cart[data-v-a52a6511] .cart-image {
+.modal-cart[data-v-24954146] .cart-image {
   width: 3rem;
 }
-.modal-cart[data-v-a52a6511] .cart-option {
+.modal-cart[data-v-24954146] .cart-option {
   width: 100%;
 }
-.success-bar-container[data-v-a52a6511] .tw-bg-success-500 {
+.success-bar-container[data-v-24954146] .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-a52a6511] .modal {
+.modal-product-detail[data-v-24954146] .modal {
     min-width: 100vh;
 }
-.modal-cart[data-v-a52a6511] .modal {
+.modal-cart[data-v-24954146] .modal {
     min-width: 90vh;
     max-height: 90vh;
 }
-.modal-cart[data-v-a52a6511] .cart-image {
+.modal-cart[data-v-24954146] .cart-image {
     width: 8rem;
 }
-.modal-cart[data-v-a52a6511] .cart-option {
+.modal-cart[data-v-24954146] .cart-option {
     width: 75%;
 }
-.success-bar[data-v-a52a6511] {
+.success-bar[data-v-24954146] {
     width: 50%;
 }
 }
 @media (max-width: 640px) {
-.success-bar[data-v-a52a6511] {
+.success-bar[data-v-24954146] {
     width: 91.666667%;
 }
 }

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

@@ -6307,10 +6307,23 @@ select[data-v-14e7c7c7] {
     text-align: center
 }
 
-.c_banner--with-image-overlay[data-v-805cbaae] {
+.c_banner--with-image-overlay[data-v-e897b770] {
   min-height: 24rem;
 }
-.c_banner--divided-container[data-v-805cbaae] {
+
+/*
+ * Full-background-image banner only. Top/bottom padding must EXPAND the banner
+ * (and its full-bleed image) rather than being swallowed by min-height. Under
+ * the brandPage theme (Tailwind preflight on → box-sizing: border-box) padding
+ * is absorbed into the 24rem min-height, so the banner stays fixed and only the
+ * text shifts. content-box makes the padding additive to the height in every
+ * theme, matching how it renders with preflight off. (BP-5801)
+ */
+.c_banner--expand-padding[data-v-e897b770] {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.c_banner--divided-container[data-v-e897b770] {
   min-height: 30rem;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
@@ -6318,13 +6331,13 @@ select[data-v-14e7c7c7] {
           flex-direction: row;
   gap: 1rem;
 }
-.device-wrapper--mobile .c_banner--divided-container[data-v-805cbaae] {
+.device-wrapper--mobile .c_banner--divided-container[data-v-e897b770] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: reverse;
       -ms-flex-direction: column-reverse;
           flex-direction: column-reverse;
 }
-.c_banner-container[data-v-805cbaae] {
+.c_banner-container[data-v-e897b770] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
@@ -6337,61 +6350,61 @@ select[data-v-14e7c7c7] {
  * widen to the full banner and shift left so the image spans edge to edge
  * (1.5rem = tw-px-6). Text blocks stay constrained to the max-width.
  */
-.c_banner-stacked-image--full[data-v-805cbaae] {
+.c_banner-stacked-image--full[data-v-e897b770] {
   width: calc(100cqw + 3rem);
   margin-inline: calc(50% - 50cqw - 1.5rem);
 }
-.c_banner--with-image-flip[data-v-805cbaae] {
+.c_banner--with-image-flip[data-v-e897b770] {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: reverse;
       -ms-flex-direction: row-reverse;
           flex-direction: row-reverse;
 }
-.c_banner--divided-container[data-v-805cbaae] .full-square-image {
+.c_banner--divided-container[data-v-e897b770] .full-square-image {
   width: 100%;
   aspect-ratio: 1/1;
   -o-object-fit: cover;
      object-fit: cover;
 }
 @container (min-width: 640px) {
-.c_banner-container--left-aligned-stacking[data-v-805cbaae] {
+.c_banner-container--left-aligned-stacking[data-v-e897b770] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
-.c_banner-container--right-aligned-stacking[data-v-805cbaae] {
+.c_banner-container--right-aligned-stacking[data-v-e897b770] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
         -ms-flex-direction: row-reverse;
             flex-direction: row-reverse;
 }
-.c_banner-button--stacking[data-v-805cbaae] {
+.c_banner-button--stacking[data-v-e897b770] {
     width: -webkit-fit-content;
     width: -moz-fit-content;
     width: fit-content;
 }
 }
 @container (max-width: 640px) {
-.c_banner-container--left-aligned-stacking[data-v-805cbaae] {
+.c_banner-container--left-aligned-stacking[data-v-e897b770] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c_banner-container--right-aligned-stacking[data-v-805cbaae] {
+.c_banner-container--right-aligned-stacking[data-v-e897b770] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c_banner-item--stacking[data-v-805cbaae] {
+.c_banner-item--stacking[data-v-e897b770] {
     width: 100%;
 }
-.c_banner-button--stacking[data-v-805cbaae] {
+.c_banner-button--stacking[data-v-e897b770] {
     width: 100%;
 }
-.c_banner--divided-container[data-v-805cbaae] {
+.c_banner--divided-container[data-v-e897b770] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
@@ -6882,44 +6895,44 @@ select[data-v-14e7c7c7] {
   color: #f21b3f;
 }
 
-.inner-container[data-v-a52a6511] {
+.inner-container[data-v-24954146] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.outer-container[data-v-a52a6511] {
+.outer-container[data-v-24954146] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.modal-cart[data-v-a52a6511] .cart-image {
+.modal-cart[data-v-24954146] .cart-image {
   width: 3rem;
 }
-.modal-cart[data-v-a52a6511] .cart-option {
+.modal-cart[data-v-24954146] .cart-option {
   width: 100%;
 }
-.success-bar-container[data-v-a52a6511] .tw-bg-success-500 {
+.success-bar-container[data-v-24954146] .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-a52a6511] .modal {
+.modal-product-detail[data-v-24954146] .modal {
     min-width: 100vh;
 }
-.modal-cart[data-v-a52a6511] .modal {
+.modal-cart[data-v-24954146] .modal {
     min-width: 90vh;
     max-height: 90vh;
 }
-.modal-cart[data-v-a52a6511] .cart-image {
+.modal-cart[data-v-24954146] .cart-image {
     width: 8rem;
 }
-.modal-cart[data-v-a52a6511] .cart-option {
+.modal-cart[data-v-24954146] .cart-option {
     width: 75%;
 }
-.success-bar[data-v-a52a6511] {
+.success-bar[data-v-24954146] {
     width: 50%;
 }
 }
 @media (max-width: 640px) {
-.success-bar[data-v-a52a6511] {
+.success-bar[data-v-24954146] {
     width: 91.666667%;
 }
 }