/** Shopify CDN: Minification failed

Line 120:0 Unexpected "{"
Line 230:0 Unexpected "{"

**/
.card__badge.bottom.left {
    align-self: flex-start;
    grid-row-start: 1;
}


.newsletter-form__field-wrapper .field {
  border: none !important;
}
.newsletter-form__field-wrapper .field:before,
.newsletter-form__field-wrapper .field:after {
  display: none !important;
}
.newsletter-form__field-wrapper .field__input:focus {
  box-shadow: none;
}
/*fonts*/
slideshow-component.slider-mobile-gutter.page-width.mobile-text-below {
  padding-top: 40px;
}
slideshow-component a.button.button--primary {
  /* background: transparent; */
  color: black;
}
.rich-text__text.rte.scroll-trigger.animate--slide-in p,
h3 {
  font-size: clamp(18px, 2vw, 31px);
  
  color: #87415e;
  line-height: 3.75rem;
}
#shopify-section-template--17134411841579__rich_text_9a9TNa .rich-text__text.rte.scroll-trigger.animate--slide-in p, h3 {
    font-size: clamp(18px, 2vw, 31px);
    
    color: #BF7A2D;
    line-height: 3.75rem;
    
}
footer p {
    
    font-size: 16px;
}
p, p strong{
   /* font-family:'Grosa-Regular'; */
    /* font-size: 18px;
  
   color: #000000; */
   
 }

 .video_description_left, .image_right a span,  .image_left a span  {
   font-size: 18px;
 }
.video_sub_heading_left, .video_sub_sub_container_left p{
   font-size: 15px;
  /* font-family:'Grosa-Bold'; */
  
}
.card__information {
   
}
.project_name{
  font-weight:700; }
.text_title_project,  .sub_link_project a{
  font-size:15px; 
}
 .project_date, .project_name_product, .video_description_left, section#shopify-section-template--24422462292348__multicolumn_zzhQUL h3.inline-richtext{
  
 }
.project_name, .text_title_project, .sub_link_project a{
 
}
 .banner__buttons a, a.button.button--primary, .filter__items__collection ul li a, .project_description_product,  .image_right a span,  .image_left a span   {
     
 }
 
   .filter__items__collection ul li a{
     color: #1d1d1b80; 
     font-size:18px;
     text-decoration:none; 
   
 }
   .filter__items__collection ul li a:hover{
     color: #000000; 
   
 }
 .button {
     padding: 16px 20px;
     
 }
 ul.list-menu.list-menu--inline > li > a {
   
    padding: 0 12px !important;
   
}
.banner .rte>*:last-child {
    margin-bottom: 0;
    font-size: 20px;
    color: white;
}
.banner .slideshow__text.banner__box {
    display: flex
;
    margin-top: 74px;
    flex-direction: column;
    justify-content: center;
    max-width: 74.5rem;
}
.banner .banner__box>*:first-child {
    margin-top: 0;
    color: white;
}
  nav.header__inline-menu ul.list-menu.list-menu--inline > li > a, 
{
  
   font-size: 16px;
   color: rgb(255, 255, 255);
 }
  
nav.header__inline-menu ul.list-menu.list-menu--inline li header-menu details summary span, 
ul.icon_sub_container li{
  
   font-size: 16px;
   color: #000000;
 }

.main_text_vidoe_right{
  
   font-size: 20px;
  color: #000000;
}
h2.related-products__heading.inline-richtext.h2{
  
   font-size: 24px;
  color: #000000;
  /* border:1px solid #000000; */
  border-radius:35px;
  width:fit-content;
  padding:10px 15px;
 }
product-recommendations.related-products.page-width{
   /* border-top:1px solid #e3e3e3; */
 }
 .list-menu--inline {
     gap: 10px;
 }
 
 h2.rich-text__heading.rte.inline-richtext.hxxl.scroll-trigger.animate--slide-in, 
 h2.banner__heading.inline-richtext.hxxl,
 h2.title.inline-richtext.hxxl.scroll-trigger.animate--slide-in,
 h2.image-with-text__heading.inline-richtext.hxxl, 
 h2.inline-richtext.hxxl.scroll-trigger.animate--slide-in,
 .imagew-text-image_container.page-width .right_text_image-text h3.main_heading_right_text_image,
 section#shopify-section-template--24505870451068__multicolumn_YmErBg ul#Slider-template--24505870451068__multicolumn_YmErBg li#Slide-template--24505870451068__multicolumn_YmErBg-1 h3.inline-richtext, 
h2.text__left_two_two,.contact_with_image, h2.heading_vidiotext, 
 h1{
  font-size: clamp(30px, 5vw, 92px);
  
   color: #000000;
    line-height:8rem; 
   
 
 }
 
 section#shopify-section-template--24505870451068__multicolumn_YmErBg ul#Slider-template--24505870451068__multicolumn_YmErBg li#Slide-template--24505870451068__multicolumn_YmErBg-2 h3.inline-richtext, 
section#shopify-section-template--24507055473020__multicolumn_bEr9qg ul#Slider-template--24507055473020__multicolumn_bEr9qg li#Slide-template--24507055473020__multicolumn_bEr9qg-1 h3.inline-richtext,
section#shopify-section-template--24507055473020__multicolumn_q9qzBb li#Slide-template--24507055473020__multicolumn_q9qzBb-1 .rte p, h2.rich-text__heading.rte.inline-richtext.h0.scroll-trigger.animate--slide-in,
.video_heading_left,
h2.title.inline-richtext.hxl.scroll-trigger.animate--slide-in , .image-with-text__text.rte.body p strong,
.subtext_right_vidoe,
h2.text__left_process
 {
  font-size: clamp(18px, 3vw, 50px);
   
   color: #000000;
   line-height:5.0rem; 
   
 
 }

.image-with-text__text.rte.body p strong{
  font-weight:normal;
}
h2.title.inline-richtext.hxl.scroll-trigger.animate--slide-in strong {
    font-style: italic;
    font-weight: 100;
}


 section#shopify-section-template--24506772062588__rich_text_93R8qE .rich-text__blocks.left  .rich-text__text.rte.scroll-trigger.animate--slide-in p,
section#shopify-section-template--24506772062588__multicolumn_DfDiFq h3.inline-richtext, .heading_project_product
 {
  font-size: clamp(18px, 3vw, 50px);
  
   color: #000000;
   line-height:5.0rem; 
 }
 
 
 
 
 .banner__text.rte.body p, 
 .image-with-text__text.rte.body p,
 .rich-text__text.rte.scroll-trigger.animate--slide-in p, 
 h3{
   font-size: clamp(18px, 2vw, 31px);
   
   color: #000000;
   line-height: 3.75rem; 
 }
 
 h2{
   font-size: clamp(45px, 4vw, 78px);
   color: #000000;
 }
 h3.card__heading.h2 , h2.footer-block__heading.inline-richtext strong, 
.two_two_right_process.page-width--narrow .one_coloumn h4{
  
   font-size: clamp(12px, 1vw, 18px);
   color: #000000;
  line-height:3.5rem; 
 }
 p.article-card__excerpt.rte-width, .footer-block__details-content.rte p a,
{
  
   /* font-size: clamp(12px, 1vw, 18px); */
   color: #000000;
   line-height:3.5rem; 
 }
 .footer-block__details-content p
 {
  line-height: 34px;
    margin: 0px;
 }
ul.footer-block__details-content.list-unstyled li a {
  font-size:16px;
  
}
  /* .footer-block__details-content .list-menu__item--link{
      font-size:18px;
    } */


 .footer-block__details-content.rte p a{
   text-decoration:none;
  
 }
 
 /* .footer-block__details-content.rte p {
  
   text-align:center; 
 } */
 
 /* h2.footer-block__heading.inline-richtext {
   text-align:center; 
 } */
 
 /*menu*/
 
 .menu_right_container ul {
     padding-left: 0;
     display: flex;
     justify-content: space-between;
     width: 100%;
     gap: 35px;
     align-items: center;
   flex-wrap:wrap;
       line-height: calc(1 + 0.3 / var(--font-body-scale));
 }
 .menu_right_container ul li{
   list-style:none
 }
 .menu_right_container ul li a{
   text-decoration:none;
 }
 
 /*banner-page-width*/
 section#shopify-section-template--24507055473020__banner_page_width_gip4VB .banner_image_page_width ,
 section#shopify-section-template--24507055473020__banner_page_width_gip4VB .banner_image_page_width div#Banner-template--24507055473020__banner_page_width_gip4VB .banner__media.media.scroll-trigger.animate--fade-in img{
     background: #fdfbf8;
 }
 
 /*collection page*/
 .empty-div {
   height: 0;
   visibility: hidden;
 }
 
 .filter__items__collection ul {
     display: flex;
     align-items: center;
     gap: 50px;
     width: 100%;
     justify-content: flex-start;
     flex-wrap: wrap;
 }
 .filter__items__collection ul li {
     list-style: none;
 }
 .filter__items__collection ul li a{
    text-decoration:none; 
 }
 .filter__items__collection ul {
     padding-left: 0px;
 }
 
 /*multiple column text*/
 
 
 .one_coloumn h4 {
     font-weight: 700;
 }
 .one_coloumn p{
   min-height:120px; 
 }
 
 .text_multiple_col_proces{
    display: flex;  /* Display the content side by side */
   justify-content: space-between; /* Adjust space between the images and text */
   align-items: center;  /* Align items at the top to avoid stretching vertically */
   gap:50px; 
 }
 
 .text_multiple_col_process.page-width {
     display: flex;
     justify-content: center;
     width: 100%;
     align-items: flex-start;
     flex-wrap: wrap;
 }
 /*Text two column*/
 
 
 .text_two_col_process{
   display: flex;  /* Display the content side by side */
   justify-content: space-between; /* Adjust space between the images and text */
   align-items: center;  /* Align items at the top to avoid stretching vertically */
   gap:50px; 
   flex-wrap: wrap; 
 }
 .title_right_process {
     max-width: 70%;
   width:100%;
 }
 .title_left_process {
     max-width: 30%;
   width:100%;
 }
 /*Text image text*/
 
 
 .imagew-text-image_container {
   display: flex;  /* Display the content side by side */
   justify-content: space-between; /* Adjust space between the images and text */
   align-items: flex-start;  /* Align items at the top to avoid stretching vertically */
   gap:50px; 
   flex-wrap:wrap; 
 }
 
 .text-image_left, .right_text_image-text {
   flex: 1;  /* Ensure both sections take up equal space */
 }
 
 .text-image_left img, .right_text_image-text img {
   width: 100%; /* Ensure images take full width of their containers */
   height: auto; /* Maintain aspect ratio of the images */
   object-fit: contain; /* Ensure image fits within the container */
 }
 
 /* .button {
   display: inline-block;
   padding: 10px 20px;
   color: white;
   text-decoration: none;
   border-radius: 5px;
   margin-top: 10px;
 }
  */
 
 
 /*video banner*/
 
 .video__banner{ height: 100vh; }
 
 
 /*contact text left right*/
 
 
 .contact_main_container.page-width h1 {
     text-align: center;
 
 }
 
 .contact_left_right_container {
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     margin: 0 auto;
     width: 100%;
     flex-wrap: wrap;
 }
 
 
 
 
 
 /*Button*/
 
 /* .banner__buttons a:before, a.button.button--secondary:before, 
 a.button.button--primary.text-img-text_left_btn:before{
     content: "→";
     display: contents;
     font-size: 25px;
 } */
 
 .banner__buttons a, 
 a.button.button--primary.text-img-text_left_btn{
     font-size: 28px;
 }
 a.button.button--primary.text-img-text_left_btn{
   border: 1px solid #000000; 
 }
 .section-template--24422462292348__image_with_text_KYrdxh-padding.gradient.color-scheme-1  a.button.button--secondary{
   font-size:28px; 
 }
 
 a.button.button--primary {
     /* background: transparent; */
     color:rgb(255, 255, 255);
 }
   a.button.button--primary:after {
    box-shadow:none;
 }
 
 /* a.button.button--primary.contact_left_btn {
     background: #000000;
     color: #ffffff;
 } */
 a.button.button--primary.text-img-text_left_btn {
     margin-top: 90px;
 }
 
 /*General */
 
 section#shopify-section-template--24422462292348__image_banner_efthMC h2.banner__heading.inline-richtext.hxxl, 
 section#shopify-section-template--24422462292348__image_banner_rKBGYN h2.banner__heading.inline-richtext.hxxl, 
 section#shopify-section-template--24422462292348__image_banner_rKBGYN .banner__text.rte.body p, 
 section#shopify-section-template--24510593106300__video_banner_YMJzqF h2.banner__heading.inline-richtext.hxxl, 
 section#shopify-section-template--24505870451068__video_banner_XAqeCL .banner__text.rte.body p
 {
     color: #ffffff;
 }
 section#shopify-section-template--24510593106300__video_banner_YMJzqF a.button.button--secondary {
     background: transparent;
 }
 
 
 section#shopify-section-template--24506772062588__rich_text_93R8qE .rich-text__blocks.left, section#shopify-section-template--24556501008764__rich_text_fWRiQG .rich-text__blocks.left, .rich-text__blocks.left  {
    max-width: 100%;
}
 .text_two_col_process.page-width {
    padding: 0 70px;
}
 
 section#shopify-section-template--24507055473020__banner_page_width_gip4VB .banner_image_page_width {
    padding-top: 50px;
    padding-bottom: 50px;
}
 
 /*project*/
.project_inner_text {
    display: flex;
    justify-content: space-between;
    align-items: center;
  flex-wrap:wrap; 
}
 
 .project_year {
    display: flex;
    gap: 50px;
   flex-wrap:wrap;
}
 .sub_link_project a{
   color: #1d1d1e;
 }
 
/*icon with text product page*/

li.icon-with-text__item span.h4.inline-richtext {
   
    font-size: 10px;
      white-space: nowrap;
}


/*project product*/

.heading_project_product {
    text-align: center;
}

.project_main_container.page-width {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
}

.project_one_container, .project_two_container {
    max-width: 885px;
    width: 100%;
}

.project_name_product {
    display: flex;
    align-items: center;    
    flex-wrap: wrap;
}
.project_hading_product.page-width {
    padding: 50px;
}

/*product page video*/
.video_sub_sub_container_left {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.video_sub_sub_container_left p {
    border: 1px solid #1d1d1e;
    padding: 10px 15px;
    border-radius: 35px;
}
.video_signature_image_left img {
    max-width: 475px;
    width: 100%;
}
.video_signature_image_left {
    display: flex;
    justify-content: flex-end; /* Moves content (image) to the right */
}
.video_signature_image_left img {
    float: right;
}
.video_sub_sub_container_left {
    padding: 40px 0;
}
.video_banner_main.page-width {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 80px;
    padding-bottom: 80px;
}


/*doube image */
 .double_image_container  {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
}

.image_left, .image_right {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.image_left a, .image_right a{
    width: 100%;
    height: 100%;
    display: block;
   /* aspect-ratio: 3 / 4;*/
}





.image_left a span, .image_right a span {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding: 2rem 1.5rem;
    font-size: clamp(20px, 2vw, 31px);
    color: #fff;
}





 /* .image_left a span, .image_right a span  {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2rem 1.5rem;
    font-size: 1.4rem;
    color: #fff;
    top:60%;
    font-size: clamp(20px, 2vw, 31px);
}
 */

/*collection list*/

.card-wrapper.animate-arrow.collection-card-wrapper .card__information {
    display: block;
    position: absolute;
    padding: 20px;
    left: 0;
    top: 85%;
}
.card-wrapper.animate-arrow.collection-card-wrapper .card__information a.full-unstyled-link{
  color:#ffffff;
}
.card-wrapper.animate-arrow.collection-card-wrapper .card__information span.icon-wrap{
  display:none;
}


/*Contact form home pag */
.contact_form_right {
    max-width: 550px;
    width: 100%;
}
.contact_form_right .field {
    margin-bottom: 20px;
}

input.field__input {
    border-bottom: 1px solid #1d1d1e;
}


/*icon with text home page*/

section#shopify-section-template--24422462292348__multicolumn_zzhQUL .multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--third-width.multicolumn-card-spacing {
    max-width: 65px;
    width: 100%;
}

section#shopify-section-template--24422462292348__multicolumn_zzhQUL h3.inline-richtext{
  font-size:15px;
}


/*product detail tab*/

p.heading_dimension, p.frame_head, p.seat_head, p.weight_head {
    font-size: 14px;
    font-weight: 700;
}
.right_des ul, .left_des ul {
    list-style: none;
    padding-left: 0px;
}


.main__info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  gap:10px;
  flex-wrap:wrap;
}
.image_des img {
    max-width: 150px;
    width: 100%;
}
p.weight_head span {
    font-weight: normal;
}


li.seat_height, li.frame_depth, li.frame_width{
    border-top: 1px solid #1d1d1e;
    border-bottom: 1px solid #1d1d1e;
}
/* addition css bage b2b */
div#Banner-template--24580723212668__image_banner_PLbPAq .banner__buttons a {
    border: 1px solid white;
    color: white;
}

.div_btnleft {
    padding-top: 5rem;
}

.div_btnleft a.button.button--primary {
    border: 1px solid black;
}

.div_imgleft img {
  margin-top:3rem;
}

.banner__box.content-container.content-container--full-width-mobile.color-scheme-2de6ec24-918a-449e-8d10-cf5ec8b364f2.gradient h2.banner__heading.inline-richtext.hxxl {
    color: white;
    padding-bottom: 4rem;
}

/* promotional banner */
.banner-desktop-promotion, .banner-mobile-promotion  {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (min-width: 750px){
  .banner-desktop-promotion{
  display: block;
}

.banner-mobile-promotion {
  display: none;
}
}


@media screen and (max-width: 749px) {
  .banner-desktop-promotion {
    display: none;
  }

  .banner-mobile-promotion {
    display: block;
  }
}




 /*Footer */
 @media only screen and (min-width: 1200px) {
 .footer-block.grid__item.scroll-trigger.animate--slide-in {
         /* max-width: 220px;
         width: 100%; */
         margin: 0 auto;
     }
 .footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.grid--3-col-tablet.scroll-trigger.animate--slide-in {
     flex-wrap: nowrap;
 } 
 }
 
 
 @media only screen and (min-width: 767px){
   .contact_main_container.page-width h1 {
     max-width: 1255px;
     margin: 0 auto;
     width: 100%;
     padding-bottom: 40px; 
 }
   .title_right_process {
     max-width:1200px;
   width:100%;
 }
 .title_left_process {
     max-width: 450px;
   width:100%;
 }
.project_name_product {    
    gap: 350px;
  
}
 }


 @media only screen and (max-width: 767px){
.rich-text.content-container {
    padding-top: 10px;
    padding-bottom: 10px;
}
 

 
 
 
 }
   

   @media only screen and (min-width: 768px) and (max-width: 1024px)  {
 
   section#shopify-section-template--24422462194044__main .grid,  section#shopify-section-template--24556501008764__project_loop_GzMGTJ .grid {
        column-gap: 5px;
        row-gap: 5px;
    }
   .color-scheme-5f97271c-8eca-4541-9e19-ef8a5d940d32.gradient.section-template--24507044561276__text_left_contact_right_r8e4hw-padding a.button.button--primary.contact_left_btn {
    margin-bottom: 4rem;
}
    .color-scheme-5f97271c-8eca-4541-9e19-ef8a5d940d32.gradient.section-template--24505870451068__text_left_contact_right_r8e4hw-padding a.button.button--primary.contact_left_btn {
    margin-bottom: 4rem;
}
/* 
     .color-.gradient.section-template--24422462456188__project_product_area_xMfg8P-padding .project_main_container.page-width {
    justify-content: center;
}
 */
    
     
  }
.banner:after, .banner__media:after {
    width: auto !important;
}




/**icon with text image*/
li.main_icon_content {
    border-bottom: 1px solid #000000;
    padding: 20px 0;
}

ul.icon_sub_container {
    list-style: none;
    padding-left: 0;
}
.main_inner_icon {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    align-items: center;
}
.image_icon_content img {
    max-width: 100px;
    width: 100%;
}
.header_icon_contnet {
    font-weight: 700;
}
.contact_form_right.icon_text_block {
    max-width: 650px;
    width: 100%;
}
 
@media only screen and (max-width: 768px) {
   .imagew-text-image_container {
     flex-direction: column;  /* Stack images and text vertically on smaller screens */
     gap: 10px;
   }
 
   .text-image_left, .right_text_image-text {
     flex: 1;
     min-width: 100%;  /* Allow full width on smaller screens */
   }
 
   .text-image_left img, .right_text_image-text img {
     max-width: 100%;  /* Ensure images don't stretch beyond their container */
   }
 
   .button {
     width: 100%;  /* Make the button full width on smaller screens */
     text-align: center;
   }

   .project_name_product {    
    gap: 20px;
  
}

.double_image_container {
    grid-template-columns: 1fr;
}
   ul#Slider-template--24422462292348__collection_list_MDiq7U {
    padding: 0;
}
   .image_left img, 
    .image_right img {
    height: 100% !important;
}
/* custom css responsiv  */
.collection-list-wrapper.page-width.isolate.no-heading.no-mobile-link.section-template--24422462292348__collection_list_MDiq7U-padding 
  {
   
    padding-top: 2rem;
    padding-right: 0;
    padding-left: 0;
}
   /* A blanket 'font-size: 26px !important' used to sit here, inside this 768px
      breakpoint. It hit every secondary button on a phone -- "View all" under each
      carousel and "View cart" in the cart popup -- at nearly twice the body size.
      Removed so they inherit the theme's normal button size. */

  h2.footer-block__heading.inline-richtext {
    margin-bottom: 0px;
}

.footer-block__brand-info {
    /* display: flex; */
    justify-content: center;
}

  .color-.gradient.section-template--24422462456188__project_product_area_xMfg8P-padding .project_main_container.page-width {
    justify-content: center;
}

  
section#shopify-section-template--24506772062588__two_column_text_fWnNKU .title_right_process.page-width--narrow {
    max-width: 100%;
}


section#shopify-section-template--24506772062588__two_column_text_fWnNKU .text_two_col_process.page-width {
    gap: 0px;
}

  
.color-scheme-1.gradient.section-template--24506772062588__two_column_text_fWnNKU-padding .text_two_col_process.page-width {
    padding: 20px;
}

  
.color-scheme-1.gradient.section-template--24506772062588__two_column_text_aEXEmY-padding .title_right_process.page-width--narrow {
    max-width: 100%;
}

  
.color-scheme-1.gradient.section-template--24506772062588__two_column_text_aEXEmY-padding .text_two_col_process.page-width {
    gap: 0px;
}

  
.color-scheme-1.gradient.section-template--24506772062588__two_column_text_aEXEmY-padding .text_two_col_process.page-width {
    padding: 20px;
}

.color-scheme-5f97271c-8eca-4541-9e19-ef8a5d940d32.gradient.section-template--24507044561276__text_left_contact_right_r8e4hw-padding a.button.button--primary.contact_left_btn {
    margin-bottom: 4rem;
}

  .color-scheme-5f97271c-8eca-4541-9e19-ef8a5d940d32.gradient.section-template--24505870451068__text_left_contact_right_r8e4hw-padding a.button.button--primary.contact_left_btn {
    margin-bottom: 4rem;
}

  section#shopify-section-template--24422462194044__rich_text_AYXbFN h2.rich-text__heading.rte.inline-richtext.h0.scroll-trigger.animate--slide-in {
    line-height: 4rem;
}

  .main-blog.page-width.section-template--24422462194044__main-padding p.article-card__excerpt.rte-width {
    line-height: 2.75rem;
}

  .image_left a span, .image_right a span {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2rem 1.5rem;
    font-size: 1.4rem;
    color: #fff;
    top: 70%;
    font-size: clamp(20px, 2vw, 31px);
}


  
 }
 
 
 
 
 
 @media (min-width: 1025px){
   .two_two_right_process.page-width--narrow {
     display: flex;
     gap: 20px;
     justify-content: space-evenly;
     align-items: flex-start;
     width: 100%;
     margin: 0 auto;
 }
   .text_multiple_col_proces{
     flex-wrap:wrap;
   }
      li#Slide-template--24506772062588__multicolumn_DfDiFq-2 {
    margin-top: 100px;}
 .project_year {
    display: flex;
    gap: 50px;
   flex-wrap:wrap;
}

  section#shopify-section-template--24422462194044__main .grid,  section#shopify-section-template--24556501008764__project_loop_GzMGTJ .grid {
        column-gap: 35px;
        row-gap: 35px;
    }


 }
 @media (min-width: 990px){
   .rich-text__blocks.center {
     max-width: 200rem;
     width: 100%;
 }

     section#shopify-section-template--24556501008764__project_loop_GzMGTJ .grid--3-col-desktop .grid__item,
  section#shopify-section-template--24422462194044__main .grid--3-col-desktop .grid__item{
        width: calc(30.33% - var(--grid-desktop-horizontal-spacing)* 2 / 3);
        max-width: calc(30.33% - var(--grid-desktop-horizontal-spacing)* 2 / 3);
    }

.project_main_container.page-width {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
}
   
 }
 
  @media (max-width: 1023px) {
    li.grid__item.empty-div, .grid__item.empty-divs{
      display:none;
    }
  }
 
 
 
 
 @media (max-width: 1024px) {
   .imagew-text-image_container {
     flex-direction: column;  /* Stack images and text vertically */
     gap: 20px;
   }
    .project_year {
    gap: 10px;
}
 
   .text-image_left, .right_text_image-text {
     flex: 1;
     min-width: 100%;
   }
.video_banner_main.page-width {
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
   .icon-with-text--horizontal .icon-with-text__item {
    flex-direction: column !important;
}
   h2.rich-text__heading.rte.inline-richtext.hxxl.scroll-trigger.animate--slide-in, h2.banner__heading.inline-richtext.hxxl, h2.title.inline-richtext.hxxl.scroll-trigger.animate--slide-in, h2.image-with-text__heading.inline-richtext.hxxl, h2.inline-richtext.hxxl.scroll-trigger.animate--slide-in, .imagew-text-image_container.page-width .right_text_image-text h3.main_heading_right_text_image, section#shopify-section-template--24505870451068__multicolumn_YmErBg ul#Slider-template--24505870451068__multicolumn_YmErBg li#Slide-template--24505870451068__multicolumn_YmErBg-1 h3.inline-richtext, h2.text__left_two_two, .contact_with_image, h1{
     line-height:5rem;
   }

   .filter__items__collection ul {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
}

 }


.badge {
    font-size: 2rem;
   
}

.instock-section, .preorder-section{
 
    color: #1d1d1e;
    border: 1px solid #1d1d1e;
    padding: 10px 20px;
      width: fit-content;
}
.media.media--transparent.media--adapt img {
   /* max-width: 200px;*/
    object-fit: contain;
    width: 100%;
}



.video_text_text_container.page-width {
    display: flex; 
    justify-content: space-between;
   gap: 10px;
  flex-wrap:wrap; 
}

div#ImageWithText--template--24580723212668__image_with_text_RLa73G a.button.button--primary {
    background: #000000;
    color: #ffffff;
}

.subtext_right_vidoe {
    max-width: 365px;
   
}
h2.heading_vidiotext {
    text-align: center;
}
.contact_form_right.icon_text_block {
    border-top: 1px solid #000000;
}

@media (min-width: 1024px) {
.one_one_left_video,
  .one_one_left_middle,
  .one_one_left_right{
    width: 28%;
  }
  .subtext_right_vidoe {
    padding: 40px 0;
}
   
}
section#shopify-section-template--24422462292348__featured_collection_ihM8cm h2.title.inline-richtext.hxxl.scroll-trigger.animate--slide-in {
    text-align: center;
}

.card-wrapper.product-card-wrapper.underline-links-hover a {
    font-size: 1.8rem;
}
@media (max-width: 767px) {
.price{
  font-size:1.7rem; 
}
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-scheme-2.gradient.slideshow__text--left.slideshow__text-mobile--center {
    background: #F9E9D8;
    color: #87415E !important;
}
h2.banner__heading.inline-richtext.h0 {
    color: #87415E;
}
slideshow-component.slider-mobile-gutter.page-width.mobile-text-below {
    padding-top: 20px;
}
}

.right_des ul li span {
    font-weight: 600;
}


/* new figma desine css */

body.gradient {
    background: #FFFBF6;
}

#shopify-section-template--16936300576811__slideshow_YwHzgd,
#shopify-section-template--16936300576811__featured_collection_jEhczd {
  max-width:1200px;
  display:block;
  width:100%;
  margin:40px auto 0;
}

#shopify-section-template--16936300576811__slideshow_YwHzgd .slider-mobile-gutter .slideshow__controls .slider-button {
  display: none;
}

#shopify-section-template--16936300576811__slideshow_YwHzgd .slider-mobile-gutter .slideshow__controls .slider-counter.slider-counter--dots .slideshow__control-wrapper .slider-counter__link--active> span {
  width: 32px !important;
  height: 12px !important;
  background: #87415E !important;
  border-radius: 100px;
  opacity: 1 !important;
}

#shopify-section-template--16936300576811__slideshow_YwHzgd .slider-mobile-gutter .slideshow__controls .slider-counter.slider-counter--dots .slideshow__control-wrapper  .slider-counter__link {
    padding: 14px 2px;
}
#shopify-section-template--16936300576811__slideshow_YwHzgd .slider-mobile-gutter .slideshow__controls .slider-counter.slider-counter--dots .slideshow__control-wrapper  .slider-counter__link> span {
   background: #87415E;
   opacity: 40%;
   border: none;
   width: 12px;
   height: 12px;
}
section#shopify-section-template--16936300576811__slideshow_YwHzgd .slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-scheme-2.gradient.slideshow__text--left.slideshow__text-mobile--center h2.banner__heading.inline-richtext.h1 {
    font-size: 72px;
}

section#shopify-section-template--16936300576811__slideshow_YwHzgd .slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-scheme-2.gradient.slideshow__text--left.slideshow__text-mobile--center .banner__text.rte p {
    font-size: 40px;
    color: white;
}

section#shopify-section-template--16936300576811__slideshow_YwHzgd .banner__buttons a.button.button--primary {
    /* background: white; */
    color: black;
}

section#shopify-section-template--16936300576811__slideshow_YwHzgd .banner__buttons {
    background: white;
}
div#collection-template--16936300576811__featured_collection_jEhczd {
    background: #fffbf6;
}

span.price-item.price-item--regular {
    font-size: 18px;
    /* The price sat at 600 while everything around it is regular weight, which
       made it shout. Normal weight here; the figure still leads on size. */
    font-weight: 400;
}

/* .pcard_buut-box {
  border: 1px solid red;
  background: red;
} */
/* Product card "Add to cart" / "Buy It Now" overlay.

   The box is a sibling of .card__inner and covers just the image area (the
   .ratio class gives it the same height). z-index 2 puts it above
   .card__heading a::after, the invisible full-card link, which is what used to
   swallow these clicks and navigate to the product page.

   pointer-events is none on the box and auto on the controls, so a click on the
   image still falls through to the card link and opens the product. */
.pcard_buut-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-short) ease;
}

.product-card-wrapper:hover .pcard_buut-box,
.product-card-wrapper:focus-within .pcard_buut-box {
  opacity: 1;
}

.btn-card-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* The two controls are wrapped in their own forms now, so they are no longer
   siblings -- the flex sizing lives on the wrappers. */
.btn-card-box > * {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.btn-card-box .card-add-form .form,
.btn-card-box form {
  width: 100%;
  display: flex;
}

.btn-card-box .add-to-cart-btn,
.btn-card-box .buy-now-btn {
  position: relative;
  width: 100%;
  padding: 20px;
  border: none;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
}

.btn-card-box .add-to-cart-btn {
  border-right: 1px solid #000;
}

.btn-card-box .add-to-cart-btn--sold-out {
  cursor: default;
}

.btn-card-box .loading__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.8rem;
  height: 1.8rem;
  transform: translate(-50%, -50%);
}

.btn-card-box .add-to-cart-btn.loading > span:not(.hidden) {
  visibility: hidden;
}

/* The overlay is a hover affordance, so it has no place on touch / small
   screens: there is no hover there, and forcing it visible would cover the
   product image permanently. Hidden outright -- shoppers on mobile tap the card
   and add to cart from the product page. */
@media (hover: none), screen and (max-width: 749px) {
  .pcard_buut-box {
    display: none;
  }
}

#shopify-section-template--16936300576811__rich_text_9a9TNa .isolate .rich-text div> div> div> p {
  font-size: 32px;
  max-width: 733px;
  width: 100%;
  margin: 0 auto;
}
#shopify-section-template--16936300576811__rich_text_9a9TNa .isolate .rich-text div> div> div> p br {
  display: none;
}
.slideshow__controls.slider-buttons.slideshow__controls--border-radius-mobile {
    border: unset;
}
@media (min-width: 1098px) {
  .footer-block.grid__item:nth-of-type(1) {
    width: 32% !important;
    max-width: 100% !important;
  }
  .footer-block.grid__item:nth-of-type(2) {
    width: 14%;
  }
  .footer-block.grid__item:nth-of-type(3) {
    width: 14%;
  }
  .footer-block.grid__item:nth-of-type(4) {
    width: 14%;
  }
  .footer-block.grid__item:nth-of-type(5) {
    width: 14%;
  }
  .footer-block .footer-block__brand-info {
    width: 80%;
  }
}
button.slider-counter__link.slider-counter__link--dots.link.slider-counter__link--active .dot{
    width: 32px;
    height: 12px;
    background: #87415E;
    border-radius: 50px;
    border:none;
        opacity: 1;
}
button.slider-counter__link.slider-counter__link--dots.link .dot{
    width: 12px;
    height: 12px;
    background: #87415E;
   opacity:40%;
    border:none;
  
}
slideshow-component .slider-button 
  {
        display: none !important;
  }
.card__content .badge {
    font-size: 2rem;

    background: white;
    color: black;
    font-size: 16px;
}
  @media screen and (max-width: 749px) {
    .footer__content-top {
        padding-bottom: 3rem;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .card-wrapper.product-card-wrapper.underline-links-hover .card__content h3 a {
    color: #1e1c1d;
    font-size: 14px;
}
h2 {
    font-size: 26px !important;
}

.dual-section .title {
    font-size: 26px !important;
    font-weight: 500;
    margin-bottom: 10px;
}.banner__buttons a, a.button.button--primary.text-img-text_left_btn {
    font-size: 18px;
}
.banner--mobile-bottom .banner__box {
    padding: 2rem 3.5rem !important;
}
.banner__text.rte.body p, .image-with-text__text.rte.body p, .rich-text__text.rte.scroll-trigger.animate--slide-in p{
    font-size: 15px !important;
   
    color: #87415e;
    line-height: 25px;
}
    h2.footer-block__heading.inline-richtext {
        margin-bottom: 0px;
        font-size: 16px !important;
    }
    ul.footer-block__details-content.list-unstyled li a {
    font-size: 16px;
    color: white;
    padding-bottom: 0px !important;
}
}

@media screen and (max-width: 767px) {
   .footer .footer__content-top {
 
    width: 100%;
    max-width: 100%;
}
    .footer-block.grid__item{
      margin: 0;
    }
  .footer ul.list-unstyled.list-social.footer__list-social {
    margin-top: 30px;
    justify-content: left;
}
  .footer-block__details-content{
    display: none;
  }
  .footer-block__heading {
    /* border-bottom: solid 1px #ddd;  */
    padding-bottom: 6px;
   }
   .footer-block.grid__item .footer-block__heading::after {
      content: "+";
      position: absolute;
      right: 12%;
      font-weight: bold;
  }
  .footer-block.grid__item .footer-block__heading.active::after{
      content: "-" !important;
    }
   .footer-block.grid__item:nth-of-type(3) h2.footer-block__heading.inline-richtext {
    visibility:visible;
}
   .footer-block__newsletter
   {
            align-items: start;
        gap: 20px;
   }
  }
  .product__title h1{
    word-break: break-word;
    margin-bottom: 1.5rem;
    font-size: 36px !important;
    line-height: 40px !important;
}
  @media screen and (max-width: 749px) {
    footer .footer-block.grid__item {
        padding: 0;
        margin: 2rem 0;
        width: 100%;
    }
    .product__title h1{
    word-break: break-word;
    margin-bottom: 1.5rem;
    font-size: 26px !important;
    line-height: 34px !important;
}
.newsletter__wrapper {
    padding-right: 20px !important;
    padding-left: 20px !important;
}
}
.newsletter__wrapper {
    background: transparent;
    color:rgb(255, 255, 255);
}
.newsletter-bg{
    background-repeat: no-repeat;
    background-position: center;
    color:rgb(255, 255, 255);
    z-index: 1;
    text-align:left;
    position: relative;
    height: 100%;
   
    border-radius:8px;
        margin-bottom: 40px;
    background-image: url(/cdn/shop/files/Frame_48095414.png?v=1765265564);
}
.newsletter h2.inline-richtext.h1.scroll-trigger.animate--slide-in {
    color: white;
        width: 50%;
}
.newsletter .newsletter__subheading {
    max-width: 50%;
    margin-left:0px;
    margin-right: auto;
}
   .newsletter .newsletter-form {
        align-items: flex-start;
        margin: initial;
        max-width: 36rem;
    }
.newsletter .content-container:after {
  /* background: linear-gradient(90.03deg, rgba(54, 29, 1, 0) 4.54%, #361D01 86.43%); */
}
.collection h2.title.inline-richtext.h1.scroll-trigger.animate--slide-in {
    color: #3C1B28;
    font-weight: 100 !important;
}
.product .product-form__buttons {
    max-width: 100%;
}
/* The home page header used to be lifted out of the flow and floated over the
   hero, with white type to suit the photo. It now sits in the flow and takes the
   same solid bar as every other page, so the navbar looks and behaves the same
   everywhere. Restore this block to bring the transparent-over-hero look back. */
.mobile-facets__wrapper {
    margin-left: 0;
    display: flex
;
    justify-content: space-between;
    align-items: center;
}

.collection-hero__inner.page-width.scroll-trigger.animate--fade-in {
    display: block;
}
@media screen and (min-width: 750px) {
   .collection-hero .collection-hero__image-container {
                margin-left: 0px;
        min-height: 340px;
        
    }
}
@media screen and (min-width: 750px) {
    .collection-hero--with-image .collection-hero__text-wrapper {
        padding: 4rem 2rem 4rem 0;
        flex-basis: 50%;
        position: absolute;
         z-index: 2;
        color: white;
        left: 7%;
        top: 10%;
    }
}
.collection-hero__inner.page-width.scroll-trigger.animate--fade-in {
    display: block;
    position: relative;
}
.collection-hero--with-image .collection-hero__title {
    margin: 0;
    color: white;
}
.flex-div {
    display: flex
;
    align-items: flex-start;
    justify-content: space-between;
}
aside.related-blogs {
    flex: 1;
}
.article-template__content.page-width.page-width--narrow.rte.scroll-trigger.animate--slide-in {
    flex: 3;
}
.tab-flex-1 img {
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    height:100%;
}
.tab-flex-div {
    display: flex
;
    align-items: center;
    gap: 10px;
}
span.blog-author {
    font-size: 16px;
    color:#151411;
}
a {
    text-decoration: none;
}
h4.blog-title {
    margin: 0;
    margin-bottom: 10px;
    text-decoration: none;
    text-decoration-line: none;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
    font-size: 20px;
}
.tab-flex-div img {
    height: 40px;
    width: 40px;
}
.tab-flex {
    display: flex
;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.related-blogs ul {
    list-style: none;
    padding: 0px;
}
.tab-flex-1 {
    width: 200px;
    height: 140px;
    overflow: hidden;
    border-radius: 6px;
}
.card-wrapper.product-card-wrapper.underline-links-hover .card__content h3 a {
  
    text-decoration: none !important;
   
}
@media screen and (min-width: 750px) {
    .collection-hero--with-image .collection-hero__description {
        max-width: 100% !important;
        display: -webkit-box;
  -webkit-line-clamp: 2;   /* Show only 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
    }
}

@media screen and (min-width: 750px) {
    .facets__form .product-count {
        grid-column-start: 1!important;
        align-self: flex-start !important;
        text-align: left !important;
    }
    .facets__wrapper {
    
    grid-row: 2 !important;
   
}
}
span.product-badge-view {
    background: #F9E9D8;
    padding: 2px 21px;
    color: #BF7A2D;
    border-radius: 20px;
    font-size: 14px;
}
span#ProductCountDesktop {
    font-size: 30px;
    display: flex
;
    justify-content: start;
    align-items

: center;
    gap: 10px;
}

/* The quantity selector and Add to cart used to be put on one line by lifting
   the button with 'margin-top: -72px' and indenting it 158px. That only held
   while the quantity selector was the element immediately above the button, so
   it broke on gift cards, where the "send as a gift" form sits between the two
   and the button landed on top of it. The layout now lives in
   '.product-form__row' at the end of this file; only the cosmetics stay here. */
@media screen and (min-width: 750px) {
.product-form__submit {
    margin-bottom: 1rem;
    display: block;
    height: 45px;
}
}
@media screen and (max-width: 750px) {
.blog-small {
   
    flex-direction: column;
}
.custom-blog-section .blog-small-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
    background-position: center;
}
.custom-blog-section .blog-small-img {
    width: 100%;
    height: 235px;
}
.blog-large img {
    height: 235px !important;
}
.newsletter .newsletter__subheading {
    max-width: 100%;
    margin-left: 0px;
    margin-right: auto;
}
.newsletter h2.inline-richtext.h1.scroll-trigger.animate--slide-in {
    color: white;
    width: 100%;
}
    h2.footer-block__heading.inline-richtext {
      
        color: white !important;
    }
    .banner .rte>*:last-child {
    margin-bottom: 0;
    font-size: 16px !important;
    color: white !important;
    line-height: normal;
}
    ul.footer-block__details-content.list-unstyled li a

 {
        font-size: 14px !important;
        color: white;
        padding-bottom: 0px !important;
    }
    .menu-drawer__navigation {
    padding: 3rem 0;
    BACKGROUND: #FFFBF6;
}
.menu-drawer__menu-item {
    color: #030202 !important;
}

/* The drawer's "Back" control is a .menu-drawer__close-button, not a
   .menu-drawer__menu-item, so the rule above never reached it and it inherited
   the header's white - invisible against the drawer. Its arrow is currentColor,
   so setting the colour here covers the glyph too. The submenu panel also takes
   its background from the colour scheme rather than the cream applied to
   .menu-drawer__navigation, which made the two drawer levels different shades. */
.menu-drawer__close-button {
    color: #030202;
}

/* When a submenu opens, global.js runs trapFocus() on transitionend and focuses
   this button, at which point Dawn's '.menu-drawer__close-button:focus' repaints
   it with rgb(var(--color-foreground)) - and the drawer's scheme-2 is white on a
   243,243,243 ground, so it vanished a beat after opening. Hover does the same.
   These need to outrank Dawn's (0,2,0) rule, hence the extra class. */
.menu-drawer .menu-drawer__close-button:focus,
.menu-drawer .menu-drawer__close-button:focus-visible,
.menu-drawer .menu-drawer__close-button:hover {
    color: #030202;
    background-color: rgba(3, 2, 2, 0.04);
}

.js .menu-drawer__navigation-container .menu-drawer__submenu {
    background-color: #FFFBF6;
}
.collection-hero--with-image .collection-hero__title {
    margin: 0;
    color: #030202;
}
span#ProductCount {
    font-size: 14px !important;
}
.flex-div {
  
    flex-direction: column;
}
.short.description .article-excerpt {
   
    max-width: 80% !important;

}
span#ProductCountDesktop {
    font-size: 18px!important;
}
}

ul.list-menu.list-menu--inline > li > a {
    padding: 0 12px !important;
    color: black;
}
span.header__active-menu-item {
    color: black;
}
.header__icon .icon {
    
    color: #87415E;
}
sticky-header.header-wrapper{
    background: #FFFBF6;
}

.view-btn {
    border: none !important;
   
    color: white !important;
   
    background:#BF7A2D;
}

.blog-left .blog-author {
   
    color: black;
  
}
.blog-left .blog-tag {
    
    color: black;
 
}

@media screen and (min-width: 750px) {
    .blog-articles {
        grid-template-columns: 1fr 1fr 1fr !important;
        
    }
}

.article-template 
    h2 {
    font-size: 28px;
   
    line-height: normal;
    margin: 10px 0px;

    color: #BF7A2D;
}
.article-card__excerpt {
   
    display: none;
}
img.img-width-author {
    width: 40px;
    height: 40px;
}
.div-img-author {
    display: flex
;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap:wrap;
        margin-bottom: 40px;
}

.short.description .article-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    max-width: 60%;
    margin: auto;
    margin-bottom: 10px;
    text-align: center;
    color: #AFADB5;
}
.div-img-author span {
    color: #121212;
}
@media screen and (min-width: 768px) {
aside.related-blogs {
    flex: 1;
    position: sticky;
    /* Was 'z-index: 9', which beat the header's 3 and painted over the navbar.
       Dropping it below the header fixes that while keeping top: 0, so the column
       still pins flush and the header simply passes over it -- no dead gap. */
    top: 0;
    padding-right: 24px;
    z-index: 1;
}
}
.article-card__info {
    padding-top: .4rem;
    display: flex
;
    align-items: center;
    justify-content: left;
    gap: 14px;
}

.blog-grid .blog-left p {
    color: black;
    line-height: normal;
}
.blog-grid .blog-large-content h3 {
    font-size: 28px;
    margin: 10px 0 8px;
}

.product-card-wrapper .card .media {
    width: 100%;
    background: #FDF6EF;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* ---------------------------------------------------------------------------
   Header -- two-row navbar (Figma "option 1", node 134:1159)

   The logo and the account icons sit on the first row, and the menu spans the
   full width underneath on its own row. Dawn's own '.header--top-left' variant
   already lays the grid out that way, so this only supplies the design's
   spacing, colour and type; the layout itself comes from the theme.

   Desktop only: below 990px Dawn swaps the inline menu for the drawer, which
   the design does not cover.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  /* The row of links is distributed edge to edge, so the header is full-bleed
     with the design's 50px gutter rather than capped at the page width. */
  .header--top-left.page-width {
    max-width: 100%;
    padding-left: 50px;
    padding-right: 50px;
  }

  .header--top-left .header__inline-menu {
    grid-area: navigation;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    /* Dawn adds a 1.05rem nudge to every non-middle header; the two rows sit
       flush here instead. */
    margin-top: 0;
  }

  .header--top-left .header__inline-menu > .list-menu--inline {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    /* Items stretch to the full 50px row so the open item's accent rule lands
       on the row's bottom edge, as in the design. */
    align-items: stretch;
    height: 100%;
    width: 100%;
    gap: 1rem;
  }

  .header--top-left .header__inline-menu .list-menu--inline > li,
  .header--top-left .header__inline-menu .list-menu--inline > li > header-menu {
    display: flex;
  }

  .header--top-left .header__inline-menu .list-menu--inline > li > header-menu > details {
    display: flex;
    flex-direction: column;
  }

  /* An inherited rule pads every menu link by 12px, which would stop the first
     and last link sitting flush with the gutter. */
  .header--top-left .header__inline-menu .list-menu--inline > li > a,
  .header--top-left .header__inline-menu .list-menu--inline > li > header-menu > details > summary {
    padding: 0 !important;
    text-transform: uppercase;
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
  }

  /* The home page keeps its white-on-hero treatment; everywhere else the links
     take the design's near-black. */
  .header--top-left .header__inline-menu .list-menu--inline > li > a,
  .header--top-left .header__inline-menu .list-menu--inline > li > header-menu > details > summary {
    color: #030202;
  }

  /* Row one: logo left, icons right, matched to the design's 30px icon gap.
     Dawn pads the group 0.8rem on the right, which would stop the bag sitting
     flush against the 50px gutter the links line up to. */
  .header--top-left .header__icons {
    gap: 30px;
    padding-right: 0;
    padding-bottom: 0;
  }

  /* The design draws each icon in a 32px box with the glyph inset ~6%, so the
     glyph itself is 28px against Dawn's default 20px. */
  .header--top-left .header__icon {
    height: 32px;
    width: 32px;
  }

  .header--top-left .header__icon .icon {
    height: 2.8rem;
    width: 2.8rem;
  }

  .header--top-left .header__heading,
  .header--top-left .header__heading-link {
    padding-left: 0;
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------------
   NAVBAR DROPDOWN PANELS
   Figma: Aspire-more 184:2455 (COLLECTIONS) and 184:2803 (THE GIFT EDIT),
   nav row 184:2221.

   Two shapes share one numbered-link vocabulary:

   - .nav-panel--compact  200px wide, anchored under its own menu item.
   - .nav-panel--wide     edge to edge under the whole header, with a 3-column
                          numbered grid and an intro column.

   Both open flush with the bottom of the 50px nav row (design y=136, the
   header's own height). The compact panel anchors to its own <details>, which
   Dawn already makes relative; the wide one is made static so it resolves
   against '.header-wrapper' and can run full-bleed. That is the same mechanism
   Dawn's mega menu uses, so sticky-header behaviour is unchanged.

   Desktop only: below 990px Dawn hides the inline menu and uses the drawer.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  /* --- The parent item in the nav row --------------------------------- */
  /* Dawn hangs the caret off the summary's right padding, which the design's
     flush 50px gutters remove - that is what put the glyph on top of the text.
     It becomes a normal inline sibling 6px after the label, 8px wide. */
  .header--top-left .header__inline-menu summary .icon-caret {
    position: static;
    width: 8px;
    height: auto;
    margin-left: 6px;
    flex-shrink: 0;
    color: currentColor;
  }

  /* The design keeps the chevron pointing down while the panel is open. */
  .header__inline-menu details[open] > .header__menu-item .icon-caret {
    transform: none;
  }

  /* Dawn underlines the label of an open parent; the design instead rules the
     whole item - label and caret - along the bottom of the row. */
  .header__inline-menu details.nav-panel-parent > summary {
    border-bottom: 2px solid transparent;
  }

  .header__inline-menu details.nav-panel-parent[open] > summary,
  .header__inline-menu details.nav-panel-parent[open]:hover > summary {
    border-bottom-color: #87415e;
    text-decoration: none;
  }

  .header__inline-menu details.nav-panel-parent[open] > summary > span,
  .header__inline-menu details.nav-panel-parent[open] > summary:hover > span {
    color: #87415e;
    text-decoration: none;
  }


  /* --- Shared panel vocabulary ---------------------------------------- */
  /* Dawn's popup treatment - radius, border, shadow, colour-scheme gradient -
     is dropped for the design's flat sand ground. */
  .header__inline-menu .nav-panel {
    background-color: #e7e0d7;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-image: none;
  }

  /* Every panel link is a 32px number column then a label, on a 20px row. */
  .header__inline-menu .nav-panel__link {
    display: flex;
    align-items: center;
    min-height: 20px;
    padding: 0;
    text-decoration: none;
    background: none;
    border: 0;
  }

  .header__inline-menu .nav-panel__num {
    flex: 0 0 32px;
    font-family: var(--font-heading-family);
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
    color: #90396a;
  }

  .header__inline-menu .nav-panel__label {
    font-family: var(--font-body-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: rgba(29, 25, 27, 0.8);
    transition: color var(--duration-short) ease;
  }

  .header__inline-menu .nav-panel__link:hover .nav-panel__label,
  .header__inline-menu .nav-panel__link--active .nav-panel__label {
    color: #87415e;
  }

  /* --- Compact panel --------------------------------------------------- */
  /* 200x166 for four items: 20px padding, 20px rows, 15.5px between them. */
  .header__inline-menu .nav-panel--compact.list-menu {
    top: 100%;
    left: 0;
    /* 200px suits short labels like Hostess. Collections runs to "The Floral &
       Botanical Edit", which is wider than that and does not wrap, so the panel
       sizes to its longest item and treats 200px as a floor rather than a fixed
       width. */
    width: max-content;
    min-width: 200px;
    max-width: 320px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15.5px;
  }

  .header__inline-menu .nav-panel--compact > li {
    margin: 0;
  }

  /* Third-level items, if a menu ever has them, nest under their parent. */
  .header__inline-menu .nav-panel__link--parent {
    list-style: none;
    cursor: pointer;
  }

  .header__inline-menu .nav-panel__link--parent::-webkit-details-marker {
    display: none;
  }

  .header__inline-menu .nav-panel__link--parent .icon-caret {
    position: static;
    width: 8px;
    height: auto;
    margin-left: auto;
    flex-shrink: 0;
  }

  .header__inline-menu .nav-panel__sublist {
    padding: 12px 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: none;
    margin: 0;
  }

  /* --- Wide panel ------------------------------------------------------ */
  /* Static so the panel's offsets resolve against '.header-wrapper' and it can
     run the full width of the viewport. */
  .header__inline-menu .nav-panel-parent--wide {
    position: static;
  }

  .header__inline-menu .nav-panel--wide {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    /* '.header-wrapper' ends below the nav row by the header's bottom padding,
       so top:100% alone would leave that strip of dead space between the menu
       item and the panel - the pointer crosses it, leaves the item and the panel
       closes before it can be used. header.liquid publishes the value. */
    margin-top: calc(-1 * var(--nav-panel-gap, 0px));
    z-index: 3;
    padding: 20px 50px;
  }

  .header__inline-menu .nav-panel--wide .nav-panel__inner {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 48px;
  }

  /* 11 edits read down each column in turn: 01-04, 05-08, 09-11. Columns take
     their content's width, 48px apart, on a 32.5px row pitch. */
  .header__inline-menu .nav-panel__grid {
    flex: 0 1 984px;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 278fr) minmax(0, 275fr) minmax(0, 335fr);
    grid-template-rows: repeat(4, 20px);
    grid-auto-flow: column;
    column-gap: 48px;
    row-gap: 12.5px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .header__inline-menu .nav-panel__grid > li {
    margin: 0;
  }

  /* 280px including the 1px rule and its 36px inset, leaving 243px of text. */
  .header__inline-menu .nav-panel__aside {
    flex: 0 0 280px;
    width: 280px;
    border-left: 1px solid rgba(169, 164, 157, 0.34);
    padding-left: 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .header__inline-menu .nav-panel__intro {
    margin: 0;
    max-width: 243px;
    font-family: var(--font-heading-family);
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
    color: #1d191b;
  }

  .header__inline-menu .nav-panel__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-top: 24px;
    font-family: var(--font-body-family);
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: normal;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: #90396a;
  }

  .header__inline-menu .nav-panel__cta:hover {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }

  .header__inline-menu .nav-panel__cta-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform var(--duration-short) ease;
  }

  .header__inline-menu .nav-panel__cta-arrow .icon-arrow {
    width: 9px;
    height: auto;
    color: currentColor;
  }

  .header__inline-menu .nav-panel__cta:hover .nav-panel__cta-arrow {
    transform: translateX(3px);
  }
}

/* ---------------------------------------------------------------------------
   "VIEW ALL" BUTTON — MOBILE

   Two earlier rules combined to make this button dominate the phone layout:
   a blanket '.button { width: 100% }' inside the 768px breakpoint, and a
   blanket 26px font size in that same breakpoint. The result was a full-bleed
   65px-tall button with 26px type under each carousel.

   The font-size rule has since been removed at source, so this only has to undo
   the full-width treatment, which other buttons still want.
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
  .collection__view-all a.button,
  .collection__view-all a.button.button--secondary {
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 11px 28px;
    font-size: 15px;
    line-height: 1.4;
  }
}

/* ---------------------------------------------------------------------------
   "MRP" LABEL

   The label sits inside .price-item--regular, which is set to 600, so it was
   inheriting the price's bold. Only the amount should carry that weight -- MRP
   is a legal prefix, not part of the figure.
   --------------------------------------------------------------------------- */
.price-item__mrp {
  font-weight: 400;
  /* The label used to be separated from the figure by a literal space in the
     markup, which the whitespace-stripping tags around it now swallow. A margin
     is not at the mercy of Liquid's whitespace control. */
  margin-right: 0.3em;
}


/* ---------------------------------------------------------------------------
   RELATED POSTS SIDEBAR — TAG

   The tag lives inside the card's <a>, and '.blog-tag' only gets its colour from
   the blog section's own <style>, which this page does not render. So it fell
   back to the browser's default link blue, underlined.
   --------------------------------------------------------------------------- */
.related-blogs .blog-tag {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  text-decoration: none;
  color: #7a7580;
}


/* ---------------------------------------------------------------------------
   PRODUCT CARD PRICE — PHONE WIDTHS

   The card title is clamp(12px, 1vw, 18px), which on a ~390px screen resolves to
   its 12px floor, while the price is a flat 18px -- so the price rendered half
   again larger than the product it belongs to. Brought down so the title leads.

   The selectors carry the extra element qualifier because the rule they override,
   'span.price-item.price-item--regular', is (0,2,1); a plain
   '.card-information .price-item' would lose to it.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 749px) {
  .card-information span.price-item.price-item--regular,
  .card-information span.price-item.price-item--sale,
  .card-information s.price-item.price-item--regular {
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------------
   HOME PAGE — HEADER OVER THE HERO

   The hero photo is composed to sit behind the navigation, so on the home page
   the bar is lifted out of the flow and painted transparent: the image starts at
   the top of the window instead of below a solid strip. The moment the sticky
   header takes over on scroll, every rule here stops matching and the bar is the
   same solid one every other page has.

   The photo's top band measures around 60-85 luminance, so the ink over it is
   white, including the light logo carried in the markup for this state.
   --------------------------------------------------------------------------- */
.index .section-header.shopify-section-group-header-group {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* The scrolled state stays out of the flow as well. Letting it fall back to
   Dawn's 'position: sticky' put the header back into the document the instant it
   appeared, which pushed everything below it down by the header's own height --
   the jump felt when scrolling away from the top. Fixed pins it the same way
   without taking up space. */
.index .section-header.shopify-section-group-header-group.shopify-section-header-sticky {
  position: fixed;
}

/* 'top: 0' above outranks Dawn's hidden-state rule, which would leave the bar
   parked on screen while scrolling down instead of sliding away as it does on
   every other page. Restated here so it wins. */
.index .section-header.shopify-section-group-header-group.shopify-section-header-hidden {
  top: calc(-1 * var(--header-height));
}

/* Not flat transparent: the photo runs from near-black ceiling to bright window,
   and white type measured as low as 3.3:1 over the pale patches. A scrim that is
   strongest at the top and gone by the bottom edge of the bar keeps every item
   legible while the picture still reads through it. */
.index .section-header:not(.shopify-section-header-sticky) sticky-header.header-wrapper,
.index .section-header:not(.shopify-section-header-sticky) .header-wrapper {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.36) 65%,
    rgba(0, 0, 0, 0) 100%
  );
}

.index .section-header:not(.shopify-section-header-sticky) .header__menu-item,
.index .section-header:not(.shopify-section-header-sticky) .header__menu-item span,
.index .section-header:not(.shopify-section-header-sticky) span.header__active-menu-item,
.index .section-header:not(.shopify-section-header-sticky) .header__icon,
.index .section-header:not(.shopify-section-header-sticky) .header__icon .icon {
  color: #fff;
}

/* The light logo is only ever shown by the rule below it. */
.header__logo--over-hero {
  display: none;
}

.index .section-header:not(.shopify-section-header-sticky) .header__logo--solid {
  display: none;
}

.index .section-header:not(.shopify-section-header-sticky) .header__logo--over-hero {
  display: block;
}

/* ---------------------------------------------------------------------------
   HEADER LOGO — KEEP ITS PROPORTIONS ON NARROW SCREENS

   The logo is drawn at a fixed 40px height, while Dawn caps it with
   'max-width: 100%'. On a phone the logo column is only ~155px wide, so the
   width was clamped while the height stayed 40px and the wordmark was squashed
   (measured 155x40 for artwork that is 237x45). 'contain' makes the artwork
   scale to fit that box instead of distorting to fill it.
   --------------------------------------------------------------------------- */
.header__heading-logo-wrapper .header__heading-logo,
.header__heading-link .header__heading-logo {
  object-fit: contain;
  object-position: left center;
}

@media screen and (max-width: 989px) {
  .header__heading-link .header__heading-logo {
    object-position: center;
  }
}


/* ---------------------------------------------------------------------------
   QUANTITY SELECTOR + ADD TO CART ON ONE ROW

   main-product.liquid wraps the quantity selector and the buy buttons in
   .product-form__row whenever the merchant has those two blocks next to each
   other. Here they are laid out as a two column grid:

     column 1   the quantity selector, only as wide as it needs to be
     column 2   Add to cart, filling the rest

   The nested wrappers between the row and the button (the buy buttons block,
   <product-form>, the <form>, .product-form__buttons) are flattened with
   'display: contents' so the button becomes a grid item in its own right.
   Without that, everything inside the form would be stuck in column 2 and the
   "Buy it now" button would be narrowed to match it.

   Everything that is not the quantity selector or Add to cart takes a full
   width row of its own, so content that appears between the two - a gift
   card's "send as a gift" form, say - gets its own space instead of being
   overlapped, which is what the previous negative margin approach did.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 750px) {
  .product-form__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 10px;
    align-items: end;
    /* Replaces the 25px bottom margin that <product-form> carried before it was
       flattened. It collapses with the margin of whatever follows, so the exact
       value rarely shows. */
    margin-bottom: 25px;
  }

  .product-form__row > .product-form__block,
  .product-form__row .product-form,
  .product-form__row .product-form > .form,
  .product-form__row .product-form__buttons {
    display: contents;
  }

  /* Default placement: one full width row each. Listed as the children of the
     flattened wrappers above, which is exactly the set that becomes grid
     items, so nested grids inside the row (the quantity stepper, the recipient
     fields) are left alone. Wrapped in :where() so it carries no specificity
     and the two rules below always win. */
  :where(
    .product-form__row > *,
    .product-form__row > .product-form__block > *,
    .product-form__row .product-form > *,
    .product-form__row .product-form > .form > *,
    .product-form__row .product-form__buttons > *
  ) {
    grid-column: 1 / -1;
  }

  .product-form__row .product-form__quantity {
    grid-column: 1;
    margin-bottom: 0;
  }

  .product-form__row .product-form__submit {
    grid-column: 2;
    width: 100%;
    margin: 0;
  }

  /* Anything sitting between the quantity selector and the button pushes the
     button onto a row of its own, where column 2 alone would leave it half
     width and right aligned. Give it the whole row instead. Two things do
     this: a gift card's recipient form (.customer) and the gift wrap option
     (.gift-wrap). The wrap block keeps its [hidden] attribute until its script
     runs, so :not([hidden]) leaves the usual quantity + button pairing intact
     on products where the option never appears. */
  .product-form__row .customer ~ .product-form__buttons .product-form__submit,
  .product-form__row
    .gift-wrap:not([hidden])
    ~ .product-form__buttons
    .product-form__submit {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------------------
   HEADER NAV — FIT THE FULL MENU BETWEEN 990px AND 1280px

   The inline menu is a nowrap flex row with 'padding: 0' on every link, so its
   natural width is simply the sum of the labels plus the gaps - about 1137px
   for the current ten items. Below roughly 1180px viewport that is wider than
   the page-width container, and the last item ("Shop All") was being pushed off
   the right edge. Dawn only swaps to the hamburger drawer below 990px, so the
   whole 990-1180px band showed a cut off menu.

   Rather than pick new fixed sizes per breakpoint, the label size and the gap
   now scale with the viewport. Both formulas reach their maximum at 1280px, so
   at 1280px and wider nothing changes at all; below that they ease down to a
   12px label and a 4px gap at 990px, which fits with room to spare.

   Placed after the block at the top of this file that sets 'font-size: 1.6rem'
   and 'gap: 1rem'; identical selectors, so source order decides.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 990px) {
  .header--top-left .header__inline-menu > .list-menu--inline {
    gap: clamp(0.35rem, 2.07vw - 1.65rem, 1rem);
  }

  .header--top-left .header__inline-menu .list-menu--inline > li > a,
  .header--top-left .header__inline-menu .list-menu--inline > li > header-menu > details > summary {
    font-size: clamp(1.1rem, 1.6552vw - 0.519rem, 1.6rem);
  }

  /* A rule near the top of this file pins the label inside a dropdown summary
     to a fixed 16px. Left alone, Bundles of Joy, Gifting and Collections would
     stay full size while every other item scaled down around them. That rule
     reads 'nav.header__inline-menu ul.list-menu.list-menu--inline li
     header-menu details summary span', so this one has to out-weigh three
     classes and seven elements - hence the fuller selector. */
  .header--top-left nav.header__inline-menu ul.list-menu.list-menu--inline > li > header-menu > details > summary span {
    font-size: inherit;
  }
}

/* ---------------------------------------------------------------------------
   HERO SLIDESHOW — DOTS OVER THE BANNER

   With auto-rotate switched on, slideshow.liquid renders the controls *before*
   the slider and 'order: 2' pushes them underneath, so the dots sat in a 34px
   strip below the image. Lifting them onto the banner removes that strip - the
   section becomes exactly the height of the image - and puts the dots where
   people expect them on a hero.

   slideshow-component is already position: relative, so this anchors to the
   banner itself. The bar spans the full width, so it is made click-through and
   only the dots take pointer events; otherwise it would swallow clicks across
   the bottom of the banner.
   --------------------------------------------------------------------------- */
slideshow-component .slideshow__controls--top {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.6rem;
  z-index: 2;
  border: 0;
  background: transparent;
  pointer-events: none;
}

slideshow-component .slideshow__controls--top .slider-counter {
  pointer-events: auto;
}

/* The dots were plum at 40% opacity, which reads fine on the white strip they
   used to sit in but disappears over photography. Over the banner they need to
   survive both the dark tray and the pale marble, so the inactive dots become
   translucent white and every dot gets a soft shadow to separate it from
   whatever is behind. The active dot keeps the brand plum.

   The rules these override are written as
   'button.slider-counter__link.slider-counter__link--dots.link .dot', so these
   selectors have to carry more weight - hence the element names. */
slideshow-component .slideshow__controls--top button.slider-counter__link.slider-counter__link--dots.link .dot {
  background: rgba(255, 255, 255, 0.75);
  opacity: 1;
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.45);
}

slideshow-component
  .slideshow__controls--top
  button.slider-counter__link.slider-counter__link--dots.link.slider-counter__link--active
  .dot {
  background: #87415e;
  opacity: 1;
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------------------------
   SALE BADGE — SWITCHED OFF

   The Vase Arrangements and Tray Arrangements products carry a compare-at
   price 10% above what they sell for, so Dawn tagged all 78 of them "Sale".
   Those compare-at prices are deliberate and stay as they are - the
   strikethrough MRP still shows next to the price - but the badge itself is
   not wanted.

   Only the badge on the product CARDS is hidden. The product page keeps its
   badge, relabelled "Now At" via the 'products.product.on_sale' locale string.
   "Sold out" uses the same .badge class and is left alone, which is why
   card-product.liquid now puts a dedicated .card__badge-sale on the sale one.
   Deleting this block turns the card badge back on.
   --------------------------------------------------------------------------- */
/* !important is deliberate: Dawn re-shows these badges from several state
   rules, each with its own specificity, so an off-switch that tried to
   out-weigh them all would be a long and fragile selector list. */
.card__badge-sale {
  display: none !important;
}

/* The "Now At" badge beside the product price. A hand-written rule earlier in
   this file sets every .badge to 'font-size: 2rem', which left this one bigger
   than the price it sits next to (20px against 18px) and hanging 6px below it.
   Scaled down and centred on the price instead.

   '.price > *' sets 'vertical-align: top', hence the override here; two classes
   out-weigh it, and out-weigh the 2rem .badge rule too. */
.price .price__badge-sale {
  font-size: 1.2rem;
  padding: 0.4rem 0.9rem;
  line-height: 1;
  letter-spacing: 0.06rem;
  vertical-align: middle;
}