@designcrowd/library.brand-page 6.1.3 → 6.1.4-ast-prepurchase

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

@@ -749,6 +749,9 @@ a.maker-anchor {
 .tw-z-50 {
   z-index: 50;
 }
+.tw-z-\[1000\] {
+  z-index: 1000;
+}
 .tw-z-\[100\] {
   z-index: 100;
 }
@@ -2750,6 +2753,9 @@ a.maker-anchor {
   --tw-border-opacity: 1;
   border-color: rgb(29 134 13 / var(--tw-border-opacity));
 }
+.tw-border-transparent {
+  border-color: transparent;
+}
 .tw-border-warning-300 {
   --tw-border-opacity: 1;
   border-color: rgb(248 207 128 / var(--tw-border-opacity));
@@ -2809,6 +2815,10 @@ a.maker-anchor {
   --tw-bg-opacity: 1;
   background-color: rgb(94 94 94 / var(--tw-bg-opacity));
 }
+.tw-bg-grayscale-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(43 43 43 / var(--tw-bg-opacity));
+}
 .tw-bg-grayscale-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 21 23 / var(--tw-bg-opacity));
@@ -3008,6 +3018,10 @@ a.maker-anchor {
   padding-left: 0px !important;
   padding-right: 0px !important;
 }
+.\!tw-px-3 {
+  padding-left: 0.75rem !important;
+  padding-right: 0.75rem !important;
+}
 .\!tw-py-3 {
   padding-top: 0.75rem !important;
   padding-bottom: 0.75rem !important;
@@ -3833,6 +3847,11 @@ a.maker-anchor {
     background-color: rgb(208 208 208 / var(--tw-bg-opacity));
   }
 
+  .hover\:tw-bg-grayscale-600:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(94 94 94 / var(--tw-bg-opacity));
+  }
+
   .hover\:tw-bg-grayscale-700:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(43 43 43 / var(--tw-bg-opacity));
@@ -4588,6 +4607,10 @@ a.maker-anchor {
     gap: 1rem;
   }
 
+  .lg\:tw-gap-5 {
+    gap: 1.25rem;
+  }
+
   .lg\:tw-overflow-hidden {
     overflow: hidden;
   }
@@ -4613,6 +4636,16 @@ a.maker-anchor {
     padding: 1.25rem;
   }
 
+  .lg\:\!tw-px-4 {
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+  }
+
+  .lg\:\!tw-px-6 {
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
+  }
+
   .lg\:tw-px-0 {
     padding-left: 0px;
     padding-right: 0px;
@@ -6341,7 +6374,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   content: '\00A0';
 }
 
-.c-button[data-v-8c623b57] {
+.c-button[data-v-cfb314a8] {
   --icon-h: 1.5rem;
   --icon-m-r: 2rem;
   --icon-m-icon: 0.5rem;
@@ -6355,7 +6388,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 
 /* Shape-library icons (vector, nested in .c-shape, no class on the img):
    render at the default icon size, centered in normal flow like the SVG icons. */
-.bp-button[data-v-8c623b57] .c-button__icon-img img {
+.bp-button[data-v-cfb314a8] .c-button__icon-img img {
   max-width: none;
   -o-object-fit: cover;
      object-fit: cover;
@@ -6365,7 +6398,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
 
 /* Raster image thumbnails (FallbackImage renders <img class="c-image">):
    render larger/prominent and centered over the icon slot. */
-.bp-button[data-v-8c623b57] .c-button__icon-img img.c-image {
+.bp-button[data-v-cfb314a8] .c-button__icon-img img.c-image {
   --icon-img-size: 2.3rem;
   position: absolute;
   top: calc(var(--icon-img-size) / -2 + var(--icon-h) / 2);
@@ -6373,49 +6406,49 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
   width: var(--icon-img-size);
   height: var(--icon-img-size);
 }
-.c-button--disabled[data-v-8c623b57] {
+.c-button--disabled[data-v-cfb314a8] {
   pointer-events: none;
 }
-.c-button[data-v-8c623b57]:hover .c-button__label p {
+.c-button[data-v-cfb314a8]:hover .c-button__label p {
   text-decoration: underline;
 }
-.c-button__icon[data-v-8c623b57] {
+.c-button__icon[data-v-cfb314a8] {
   margin-right: var(--icon-m-r);
 }
-.bp-button[data-v-8c623b57] .c-button__icon-img {
+.bp-button[data-v-cfb314a8] .c-button__icon-img {
   margin-right: var(--icon-m-r);
   width: var(--icon-w);
   height: var(--icon-h);
 }
-.c-button__label[data-v-8c623b57] {
+.c-button__label[data-v-cfb314a8] {
   margin: 0 auto;
   word-break: break-word;
   overflow-wrap: anywhere;
   width: auto;
 }
-.c-button__label--offset-sm[data-v-8c623b57] {
+.c-button__label--offset-sm[data-v-cfb314a8] {
   -webkit-transform: translateX(-1.5rem);
           transform: translateX(-1.5rem);
 }
-.c-button__label--offset-md[data-v-8c623b57] {
+.c-button__label--offset-md[data-v-cfb314a8] {
   -webkit-transform: translateX(-1.75rem);
           transform: translateX(-1.75rem);
 }
-.c-button__label--offset-lg[data-v-8c623b57] {
+.c-button__label--offset-lg[data-v-cfb314a8] {
   -webkit-transform: translateX(-1.5rem);
           transform: translateX(-1.5rem);
 }
-.c-button__no-icon[data-v-8c623b57] {
+.c-button__no-icon[data-v-cfb314a8] {
   margin-right: var(--icon-m-r);
   width: var(--icon-w);
   height: var(--icon-h);
 }
-.device-wrapper--mobile .c-button__icon[data-v-8c623b57] {
+.device-wrapper--mobile .c-button__icon[data-v-cfb314a8] {
   margin: 0;
   margin-right: var(--icon-m-r);
 }
 @media (min-width: 767px) {
-.c-button__icon[data-v-8c623b57] {
+.c-button__icon[data-v-cfb314a8] {
     margin: 0 var(--icon-m-icon);
 }
 }
@@ -6647,7 +6680,7 @@ input[data-v-4cd691db]::-webkit-inner-spin-button {
        object-fit: cover
 }
 
-.c-masonry-img[data-v-3d176f57] {
+.c-masonry-img[data-v-fff781da] {
     width: 100%;
     cursor: pointer
 }
@@ -6747,7 +6780,7 @@ select[data-v-665b8067] {
   padding: 4px;
 }
 
-.payment-option-prices[data-v-85948035] {
+.payment-option-prices[data-v-1acc14e8] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -6758,7 +6791,7 @@ select[data-v-665b8067] {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap
 }
-.payment-option-prices-thumbnail[data-v-85948035] {
+.payment-option-prices-thumbnail[data-v-1acc14e8] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -6769,15 +6802,15 @@ select[data-v-665b8067] {
   gap: 0.5rem
 }
 @media (min-width: 768px) {
-.device--mobile .payment-options[data-v-85948035] {
+.device--mobile .payment-options[data-v-1acc14e8] {
     display: block
 }
 }
-.device--mobile .payment-option[data-v-85948035] {
+.device--mobile .payment-option[data-v-1acc14e8] {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem
 }
-.payment-width[data-v-85948035] {
+.payment-width[data-v-1acc14e8] {
   margin: 0.375rem;
   -ms-flex-negative: 1;
       flex-shrink: 1;
@@ -6789,12 +6822,12 @@ select[data-v-665b8067] {
   min-width: calc(16.666667% - 0.5rem)
 }
 
-.c-video[data-v-3dac5093] {
+.c-video[data-v-566eb57a] {
   --video-size: 8rem;
   --video-spacing: 0.75rem;
   margin-bottom: 1rem;
 }
-.c-video__frame[data-v-3dac5093] {
+.c-video__frame[data-v-566eb57a] {
   aspect-ratio: 16 / 9;
   border-radius: calc(var(--video-size) / 16);
   display: block;
@@ -6879,7 +6912,7 @@ select[data-v-665b8067] {
 }
 }
 
-.c-social-links__links-container[data-v-a26f1145] {
+.c-social-links__links-container[data-v-62606e3c] {
 
     display: -webkit-box;
 
@@ -6893,7 +6926,7 @@ select[data-v-665b8067] {
 
             justify-content: center
 }
-.c-social-links__icon-container[data-v-a26f1145] {
+.c-social-links__icon-container[data-v-62606e3c] {
 
     margin-left: 0.75rem;
 
@@ -7240,11 +7273,11 @@ select[data-v-665b8067] {
 }
 }
 
-.c-image--height-limited[data-v-5f5adc60] {
+.c-image--height-limited[data-v-8dbe7933] {
   max-height: 55vh;
 }
 
-.c_testimonial-image[data-v-fde01e54] {
+.c_testimonial-image[data-v-809e9165] {
   --avatar-border-colour: #fff;
   --avatar-size: 3rem;
   --avatar-spacing: 2rem;
@@ -7261,16 +7294,16 @@ select[data-v-665b8067] {
   padding-right: 1.5rem;
 }
 @media (min-width: 767px) {
-.c_testimonial-image[data-v-fde01e54] {
+.c_testimonial-image[data-v-809e9165] {
     padding-left: 4rem;
     padding-right: 4rem;
 }
 }
-.c-testimonial-container[data-v-fde01e54] {
+.c-testimonial-container[data-v-809e9165] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.c_testimonial-image--items[data-v-fde01e54] {
+.c_testimonial-image--items[data-v-809e9165] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7280,17 +7313,17 @@ select[data-v-665b8067] {
           flex-direction: column;
 }
 @media (min-width: 768px) {
-.c_testimonial-image--items[data-v-fde01e54] {
+.c_testimonial-image--items[data-v-809e9165] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
 }
-.c_testimonial-image--items[data-v-fde01e54] {
+.c_testimonial-image--items[data-v-809e9165] {
   gap: 2rem;
 }
-.c_testimonial-image--item[data-v-fde01e54] {
+.c_testimonial-image--item[data-v-809e9165] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7298,18 +7331,18 @@ select[data-v-665b8067] {
   display: flex;
   width: 100%;
 }
-.c_testimonial-image[data-v-fde01e54] .swiper-pagination-bullet {
+.c_testimonial-image[data-v-809e9165] .swiper-pagination-bullet {
   border-radius: 0.5rem;
 }
-.c_testimonial-title[data-v-fde01e54] {
+.c_testimonial-title[data-v-809e9165] {
   overflow-wrap: anywhere;
 }
-.c_testimonial-image[data-v-fde01e54] .swiper-slide {
+.c_testimonial-image[data-v-809e9165] .swiper-slide {
   width: 100%;
   max-width: 100%;
   /* width: fit-content !important; /* swiper.update() does not reflow slide's width, override dynamic width to fit to content (only when slidesPerView:1) */
 }
-.device--mobile .c_testimonial-image--items[data-v-fde01e54] {
+.device--mobile .c_testimonial-image--items[data-v-809e9165] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
@@ -7317,7 +7350,7 @@ select[data-v-665b8067] {
 }
 
 /* BIG IMAGE */
-.c_testimonial-big-image__items[data-v-fde01e54] {
+.c_testimonial-big-image__items[data-v-809e9165] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7328,77 +7361,77 @@ select[data-v-665b8067] {
   gap: 1rem;
 }
 @media (min-width: 768px) {
-.c_testimonial-big-image__items[data-v-fde01e54] {
+.c_testimonial-big-image__items[data-v-809e9165] {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
 }
 }
-.device--desktop .c_testimonial-big-image__items[data-v-fde01e54] {
+.device--desktop .c_testimonial-big-image__items[data-v-809e9165] {
   min-width: 60vw;
 }
-.device--mobile .c_testimonial-big-image__items[data-v-fde01e54] {
+.device--mobile .c_testimonial-big-image__items[data-v-809e9165] {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.c_testimonial-big-image[data-v-fde01e54] {
+.c_testimonial-big-image[data-v-809e9165] {
   width: 100%;
 }
 @media (min-width: 768px) {
-.c_testimonial-big-image[data-v-fde01e54] {
+.c_testimonial-big-image[data-v-809e9165] {
     width: 33.333333%;
 }
 }
-.device--mobile .c_testimonial-big-image[data-v-fde01e54] {
+.device--mobile .c_testimonial-big-image[data-v-809e9165] {
   width: 100%;
 }
-.c_testimonial-big-image__text[data-v-fde01e54] {
+.c_testimonial-big-image__text[data-v-809e9165] {
   width: 100%;
 }
 @media (min-width: 768px) {
-.c_testimonial-big-image__text[data-v-fde01e54] {
+.c_testimonial-big-image__text[data-v-809e9165] {
     width: 66.666667%;
 }
 }
-.device--mobile .c_testimonial-big-image__text[data-v-fde01e54] {
+.device--mobile .c_testimonial-big-image__text[data-v-809e9165] {
   width: 100%;
 }
-.c_testimonial-big-image__text-item[data-v-fde01e54] {
+.c_testimonial-big-image__text-item[data-v-809e9165] {
   text-align: center;
 }
 @media (min-width: 768px) {
-.c_testimonial-big-image__text-item[data-v-fde01e54] {
+.c_testimonial-big-image__text-item[data-v-809e9165] {
     text-align: left;
 }
 }
-.device--mobile .c_testimonial-big-image__text-item[data-v-fde01e54] {
+.device--mobile .c_testimonial-big-image__text-item[data-v-809e9165] {
   text-align: center;
 }
-.device--mobile .c_testimonial-big-image__text[data-v-fde01e54] {
+.device--mobile .c_testimonial-big-image__text[data-v-809e9165] {
   width: 100%;
 }
-.c_testimonial-big-image__text-item[data-v-fde01e54] {
+.c_testimonial-big-image__text-item[data-v-809e9165] {
   text-align: center;
 }
 @media (min-width: 768px) {
-.c_testimonial-big-image__text-item[data-v-fde01e54] {
+.c_testimonial-big-image__text-item[data-v-809e9165] {
     text-align: left;
 }
 }
-.device--mobile .c_testimonial-big-image__text-item[data-v-fde01e54] {
+.device--mobile .c_testimonial-big-image__text-item[data-v-809e9165] {
   text-align: center;
 }
-.c_testimonial-big-image[data-v-fde01e54] .c_testimonial-aspect-ratio {
+.c_testimonial-big-image[data-v-809e9165] .c_testimonial-aspect-ratio {
   aspect-ratio: 1/1;
   -o-object-fit: cover;
      object-fit: cover;
 }
 
 /* AVATAR */
-.c_testimonial-profile__avatar[data-v-fde01e54] {
+.c_testimonial-profile__avatar[data-v-809e9165] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7412,7 +7445,7 @@ select[data-v-665b8067] {
   width: var(--avatar-size);
   overflow: hidden;
 }
-.c_testimonial-profile__avatar[data-v-fde01e54] .c_testimonial-profile__avatar-img {
+.c_testimonial-profile__avatar[data-v-809e9165] .c_testimonial-profile__avatar-img {
   -o-object-fit: cover;
      object-fit: cover;
   width: 100%;
@@ -7491,56 +7524,56 @@ select[data-v-665b8067] {
 }
 }
 
-.cart-item-grid[data-v-b43ea95a] {
+.cart-item-grid[data-v-c817131e] {
   grid-template-columns: 1fr 8rem;
 }
-.remove-btn[data-v-b43ea95a] {
+.remove-btn[data-v-c817131e] {
   color: #67b3f5;
 }
-.form-error[data-v-b43ea95a] {
+.form-error[data-v-c817131e] {
   font-size: 0.875rem;
   line-height: 1.25rem;
   color: #f21b3f;
 }
 
-.inner-container[data-v-1662021f] {
+.inner-container[data-v-eca04583] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.outer-container[data-v-1662021f] {
+.outer-container[data-v-eca04583] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.modal-cart[data-v-1662021f] .cart-image {
+.modal-cart[data-v-eca04583] .cart-image {
   width: 3rem;
 }
-.modal-cart[data-v-1662021f] .cart-option {
+.modal-cart[data-v-eca04583] .cart-option {
   width: 100%;
 }
-.success-bar-container[data-v-1662021f] .tw-bg-success-500 {
+.success-bar-container[data-v-eca04583] .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-1662021f] .modal {
+.modal-product-detail[data-v-eca04583] .modal {
     min-width: 100vh;
 }
-.modal-cart[data-v-1662021f] .modal {
+.modal-cart[data-v-eca04583] .modal {
     min-width: 90vh;
     max-height: 90vh;
 }
-.modal-cart[data-v-1662021f] .cart-image {
+.modal-cart[data-v-eca04583] .cart-image {
     width: 8rem;
 }
-.modal-cart[data-v-1662021f] .cart-option {
+.modal-cart[data-v-eca04583] .cart-option {
     width: 75%;
 }
-.success-bar[data-v-1662021f] {
+.success-bar[data-v-eca04583] {
     width: 50%;
 }
 }
 @media (max-width: 640px) {
-.success-bar[data-v-1662021f] {
+.success-bar[data-v-eca04583] {
     width: 91.666667%;
 }
 }
@@ -8000,21 +8033,21 @@ select[data-v-665b8067] {
   padding: 0.25rem var(--page-padding);
 }
 
-.c-page-footer__container[data-v-5d279c8a] {
+.c-page-footer__container[data-v-613305b7] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
   padding: 0.25rem var(--page-padding);
 }
-.c-page-footer__container-justified[data-v-5d279c8a] {
+.c-page-footer__container-justified[data-v-613305b7] {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
-.sortable[data-v-5d279c8a] {
+.sortable[data-v-613305b7] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.brand-page__content--outline-selected[data-v-5d279c8a] {
+.brand-page__content--outline-selected[data-v-613305b7] {
   position: relative;
   z-index: 10;
   margin-left: 0.25rem;
@@ -8023,25 +8056,25 @@ select[data-v-665b8067] {
   outline-width: 0.2rem;
   outline-style: dashed;
 }
-.c_footer-container[data-v-5d279c8a] {
+.c_footer-container[data-v-613305b7] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
 @container (max-width: 640px) {
-.c-page-footer__container-justified[data-v-5d279c8a] {
+.c-page-footer__container-justified[data-v-613305b7] {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
 }
-.c-page-footer__container-justified[data-v-5d279c8a] > :nth-child(2) {
+.c-page-footer__container-justified[data-v-613305b7] > :nth-child(2) {
     margin-bottom: 1rem;
 }
 }
 @container (min-width: 640px) {
-.c-page-footer__container-justified-stack[data-v-5d279c8a] {
+.c-page-footer__container-justified-stack[data-v-613305b7] {
     margin-left: 1rem;
     margin-right: 1rem;
     -webkit-box-pack: justify;
@@ -9513,11 +9546,11 @@ body {
   contain-intrinsic-size: auto 36px;
 }
 
-.rich-text-editor[data-v-14187e07]:focus-within {
+.rich-text-editor[data-v-2f00a6b3]:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));
 }
-.style-editor[data-v-14187e07] {
+.style-editor[data-v-2f00a6b3] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -9528,7 +9561,7 @@ body {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.style-editor[data-v-14187e07] button:not(.c-button-style) {
+.style-editor[data-v-2f00a6b3] button:not(.c-button-style) {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -9538,16 +9571,16 @@ body {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.style-editor-button[data-v-14187e07] {
+.style-editor-button[data-v-2f00a6b3] {
   cursor: pointer;
   padding-left: 0.25rem;
   padding-top: 0.25rem;
 }
-.toolbar-editor-button.active[data-v-14187e07] {
+.toolbar-editor-button.active[data-v-2f00a6b3] {
   font-weight: 700;
   background: #e3e3e3;
 }
-.toolbar-editor-button[data-v-14187e07] {
+.toolbar-editor-button[data-v-2f00a6b3] {
   height: 32px;
   width: 32px;
   border-radius: 4px;
@@ -9565,7 +9598,7 @@ body {
       -ms-flex-pack: center;
           justify-content: center;
 }
-[data-v-14187e07] .ProseMirror {
+[data-v-2f00a6b3] .ProseMirror {
   border-top: 1px solid #ccc;
   min-height: 150px;
   padding: 8px;
@@ -9578,13 +9611,13 @@ body {
   max-height: 14rem;
   overflow: auto;
 }
-.editor-compact[data-v-14187e07] .ProseMirror {
+.editor-compact[data-v-2f00a6b3] .ProseMirror {
   min-height: 6rem;
 }
-[data-v-14187e07] .ProseMirror:focus {
+[data-v-2f00a6b3] .ProseMirror:focus {
   outline: none;
 }
-[data-v-14187e07] .ProseMirror * {
+[data-v-2f00a6b3] .ProseMirror * {
   text-align: left !important;
   font-size: 16px !important;
   color: #606060 !important;
@@ -9593,28 +9626,28 @@ body {
   background-color: transparent !important;
   font-family: 'Lato' !important;
 }
-[data-v-14187e07] .ProseMirror a s,[data-v-14187e07] .ProseMirror a strike,[data-v-14187e07] .ProseMirror a [data-strike] {
+[data-v-2f00a6b3] .ProseMirror a s,[data-v-2f00a6b3] .ProseMirror a strike,[data-v-2f00a6b3] .ProseMirror a [data-strike] {
   text-decoration: line-through !important;
 }
-[data-v-14187e07] .ProseMirror a,[data-v-14187e07] .ProseMirror a * {
+[data-v-2f00a6b3] .ProseMirror a,[data-v-2f00a6b3] .ProseMirror a * {
   color: #0097d7 !important;
   text-decoration: underline !important;
 }
-.error-message[data-v-14187e07] {
+.error-message[data-v-2f00a6b3] {
   color: #d32f2f;
   font-size: 0.875rem;
   margin-top: 4px;
 }
-.popup-container[data-v-14187e07] {
+.popup-container[data-v-2f00a6b3] {
   position: absolute;
   z-index: 10;
   right: 8%;
 }
-.hyperlink-preview[data-v-14187e07] {
+.hyperlink-preview[data-v-2f00a6b3] {
   position: absolute;
   z-index: 10;
 }
-.popup-panel[data-v-14187e07] {
+.popup-panel[data-v-2f00a6b3] {
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 8px;
@@ -9622,17 +9655,17 @@ body {
   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
-.popup-panel[data-v-14187e07] input {
+.popup-panel[data-v-2f00a6b3] input {
   border: 1px solid #ccc;
   border-radius: 8px;
 }
-.border[data-v-14187e07] {
+.border[data-v-2f00a6b3] {
   width: 100%;
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
   height: 1px;
 }
-[data-v-14187e07] .text-dropdown-title {
+[data-v-2f00a6b3] .text-dropdown-title {
   height: 2rem;
   width: 100%;
   font-size: 0.875rem;
@@ -9641,7 +9674,7 @@ body {
   color: rgb(43 43 43 / var(--tw-text-opacity));
   font-weight: 300;
 }
-[data-v-14187e07] .ProseMirror p.is-editor-empty:first-child::before {
+[data-v-2f00a6b3] .ProseMirror p.is-editor-empty:first-child::before {
   --tw-text-opacity: 1;
   color: rgb(208 208 208 / var(--tw-text-opacity));
   content: attr(data-placeholder);
@@ -9650,56 +9683,56 @@ body {
   pointer-events: none;
 }
 @media (max-width: 399px) {
-.style-editor-button-font[data-v-14187e07],
-  .style-editor-button-textstyle[data-v-14187e07] {
+.style-editor-button-font[data-v-2f00a6b3],
+  .style-editor-button-textstyle[data-v-2f00a6b3] {
     max-width: 48%;
     padding-bottom: 0.25rem;
 }
-.style-editor-button.stepper[data-v-14187e07] {
+.style-editor-button.stepper[data-v-2f00a6b3] {
     max-width: 40%;
 }
-.style-editor-button-stepper[data-v-14187e07] {
+.style-editor-button-stepper[data-v-2f00a6b3] {
     max-width: 100%;
 }
-.border.desktop[data-v-14187e07] {
+.border.desktop[data-v-2f00a6b3] {
     display: none;
 }
-.border.mobile[data-v-14187e07] {
+.border.mobile[data-v-2f00a6b3] {
     display: block;
 }
-[data-v-14187e07] .left-align {
+[data-v-2f00a6b3] .left-align {
     -webkit-transform: translateX(-48%);
             transform: translateX(-48%);
 }
-.hyperlink-popup[data-v-14187e07] {
+.hyperlink-popup[data-v-2f00a6b3] {
     z-index: 10000 !important;
 }
 }
 @media (min-width: 400px) {
-.style-editor-button.stepper[data-v-14187e07] {
+.style-editor-button.stepper[data-v-2f00a6b3] {
     max-width: 32%;
 }
-.style-editor-button-font[data-v-14187e07] {
+.style-editor-button-font[data-v-2f00a6b3] {
     max-width: 28%;
 }
-.style-editor-button-stepper[data-v-14187e07] {
+.style-editor-button-stepper[data-v-2f00a6b3] {
     max-width: 100%;
 }
-.style-editor-button-textstyle[data-v-14187e07] {
+.style-editor-button-textstyle[data-v-2f00a6b3] {
     max-width: 25%;
 }
-.border.desktop[data-v-14187e07] {
+.border.desktop[data-v-2f00a6b3] {
     display: block;
 }
-.border.mobile[data-v-14187e07] {
+.border.mobile[data-v-2f00a6b3] {
     display: none;
 }
-[data-v-14187e07] .left-align {
+[data-v-2f00a6b3] .left-align {
     -webkit-transform: translateX(-25%);
             transform: translateX(-25%);
 }
 }
-.drop-down-item[data-v-14187e07]:hover {
+.drop-down-item[data-v-2f00a6b3]:hover {
   background-color: #eee;
 }
 
@@ -9885,7 +9918,7 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
 }
 
 @media (min-width: 1024px) {
-.img-width[data-v-f3af581c] img {
+.img-width[data-v-d4db1988] img {
         max-width: 12rem
 }
 }
@@ -10047,6 +10080,120 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
     margin-bottom: 1.5rem
 }
 
+.c-preview-modal__device[data-v-62bbbe55] {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 2rem;
+  width: 2rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  border-radius: 0.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(230 230 230 / var(--tw-text-opacity));
+  -webkit-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-duration: 150ms;
+          transition-duration: 150ms;
+}
+.c-preview-modal__device--active[data-v-62bbbe55] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(43 43 43 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+/* Dark chrome buttons in the header — must not compete with the Publish CTA.
+   Padding/size mirror fe-shared-lib's `small-medium`; the transparent border
+   matches its `tw-border-2` so these line up with Publish at 36px. `border-solid`
+   is required — preflight is off for these themes, so a width-only border
+   computes to zero (same reason every fe-shared-lib variant spells it out). */
+.c-preview-modal__close[data-v-62bbbe55],
+.c-preview-modal__chrome-btn[data-v-62bbbe55] {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: 0.25rem;
+  border-width: 2px;
+  border-style: solid;
+  border-color: transparent;
+  --tw-bg-opacity: 1;
+  background-color: rgb(43 43 43 / var(--tw-bg-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  -webkit-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-duration: 150ms;
+          transition-duration: 150ms;
+}
+@media (hover: hover) and (pointer: fine) {
+.c-preview-modal__close[data-v-62bbbe55]:hover,
+.c-preview-modal__chrome-btn[data-v-62bbbe55]:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(94 94 94 / var(--tw-bg-opacity));
+}
+}
+.c-preview-modal__publishing[data-v-62bbbe55] {
+  position: absolute;
+  inset: 0px;
+  z-index: 10;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.6;
+}
+.c-preview-modal__frame[data-v-62bbbe55] {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-transition-duration: 300ms;
+          transition-duration: 300ms;
+  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+          transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+.c-preview-modal__frame--desktop[data-v-62bbbe55] {
+  height: 100%;
+  width: 100%;
+}
+
+/* Phone-frame the mobile preview, reusing the editor Device.vue geometry. */
+.c-preview-modal__frame--mobile[data-v-62bbbe55] {
+  width: 358px;
+  height: 734px;
+  max-height: calc(100% - 4rem);
+  border-radius: 3rem;
+  -webkit-box-shadow: 0 0 0 0.625rem #3a3a3a;
+          box-shadow: 0 0 0 0.625rem #3a3a3a;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 /* The upgrade glyph (`upgrade-alt`) is a hairline faceted gem that barely reads
    at button size. Give it a stroke in the current text colour so the icon is
    distinguishable from afar. Scoped to the CTA button via the `ai-cta-button`
@@ -10266,7 +10413,7 @@ to {
     overflow: hidden
 }
 
-.c-brand-page-maker[data-v-7ed18bee] {
+.c-brand-page-maker[data-v-29e3ff4e] {
   --navigation-height-desktop: 64px;
   --navigation-height-mobile: 96px;
   --maker-height: 100vh;
@@ -10276,10 +10423,10 @@ to {
   height: calc(var(--maker-height) - var(--mobile-sidebar-bottom-height));
   padding-top: var(--navigation-height-mobile);
 }
-.c-brand-page-maker__inner[data-v-7ed18bee] {
+.c-brand-page-maker__inner[data-v-29e3ff4e] {
   height: 100%;
 }
-.c-save-bar[data-v-7ed18bee] {
+.c-save-bar[data-v-29e3ff4e] {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -10301,7 +10448,7 @@ to {
   -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
           transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.c-save-bar--visible[data-v-7ed18bee] {
+.c-save-bar--visible[data-v-29e3ff4e] {
   visibility: visible !important;
   --tw-translate-y: 0px !important;
   -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)) !important;
@@ -10311,11 +10458,11 @@ to {
           transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 @media (min-width: 1024px) {
-.c-brand-page-maker[data-v-7ed18bee] {
+.c-brand-page-maker[data-v-29e3ff4e] {
     height: calc(var(--maker-height) - var(--navigation-height-desktop));
     padding-top: 0px;
 }
-.c-brand-page-maker__inner[data-v-7ed18bee] {
+.c-brand-page-maker__inner[data-v-29e3ff4e] {
     height: 100%;
 }
 }