/** Shopify CDN: Minification failed Line 342:2 Unexpected "{" Line 342:3 Expected identifier but found "%" Line 347:15 Expected identifier but found whitespace Line 347:37 Unexpected "/" Line 348:3 Expected identifier but found "%" **/ /* SHOPIFY_STYLESHEETS_VERSION: 1.0 */ /* CSS from section stylesheet tags */ /* START_SECTION:custom-stats (INDEX:17) */ .stats-section { background-size: cover; background-position: center; text-align: center; position: relative; } .stats-border img { width: 100%; height: auto; display: block; } .stats-wrapper { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 40px; max-width: 1000px; margin: 0 auto; padding: 80px 0; } .stat-block { color: #5c2c13; max-width: 280px; width: 100%; } .stat-number { font-family: Jost; font-size: 55px; font-weight: 700; line-height: 100%; letter-spacing: 0px; text-transform: capitalize; color: #6C351F; margin-bottom: 4px; } .stat-number span { font-family: Cormorant Upright; font-size: 85px; font-weight: 700; line-height: 100%; letter-spacing: 0px; text-transform: capitalize; } .stat-line { height: 1px; width: 100%; background-color: #6C351F; margin: 0px; } .stat-label { font-family: Jost; font-weight: 500; font-size: 27px; line-height: 100%; letter-spacing: -1px; text-transform: capitalize; color: #6C351F; margin-top: 4px; } @media screen and (max-width: 480px) { .stats-wrapper { padding: 40px 55px; } .stat-number { font-size: 25px; } .stat-number span { font-size: 35px; } .stat-label { font-size: 25px; } } /* END_SECTION:custom-stats */ /* START_SECTION:faq-accordion (INDEX:18) */ .custom-faq-section { padding: 50px 100px 0 100px; font-family: 'Jost'; } .faq-container { max-width: 1200px; width: 100%; margin: 0 auto; color: #6C351F; } .faq-title { font-family: 'Cormorant Upright', serif; font-size: 32px; font-weight: 700; margin-bottom: 20px; text-align: center; } .faq-description { font-size: 16px; line-height: 1.6; text-align: center; margin-bottom: 40px; } .faq-items .faq-item { border-bottom: 1px solid #d4b6a4; cursor: pointer; padding: 11px 0; margin-top: 20px; } .faq-items .faq-item:first-child { padding-top: 0; margin-top: 0; } .faq-items .faq-item.open { padding-bottom: 20px; border: none; } .faq-question { font-family: jost; font-weight: 600; font-size: 18px; line-height: 100%; letter-spacing: 0px; display: flex; justify-content: space-between; } .faq-item.open .faq-question { font-family: Cormorant Upright; font-weight: 700; font-size: 35px; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; font-size: 18px; font-weight: 400; letter-spacing: 0.28px; text-transform: capitalize; padding: 0; } .faq-item.open .faq-answer { max-height: 300px; padding-top: 20px; } .faq-icon { transition: transform 0.3s ease; font-size: 18px; } .faq-item.open .faq-icon { transform: rotate(180deg); } @media(max-width:999px){ .custom-faq-section{padding: 20px;} } @media(max-width:480px){ .faq-items .faq-item { margin-top: 10px; padding: 10px 0; } .faq-question { font-size: 14px; } .faq-item.open { padding-bottom: 0px !important; } .faq-item.open .faq-question { font-size: 25px; } .faq-answer { font-size: 12px; } .custom-faq-section { padding: 30px 20px 0px 20px; } } /* END_SECTION:faq-accordion */ /* START_SECTION:hero-banner (INDEX:26) */ /* Fonts (Cormorant Upright + Jost) are loaded non-blocking in layout/theme.liquid . The render-blocking @import that used to be here was redundant with that global load. */ .hero-swiper { position: relative; width: 100%; overflow: hidden; } .hero-swiper .swiper-wrapper { display: flex; } .hero-swiper .swiper-slide { width: 100%; flex-shrink: 0; box-sizing: border-box; } .hero-banner-cell { display: flex; flex-wrap: wrap; width: 100%; height: 100%; } .hero-banner-text, .hero-banner-media { width: 50%; box-sizing: border-box; } .hero-banner-text { background-color: #f9f0ea; padding: 60px 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .hero-banner-text h1, .hero-banner-text h2 { margin-top: 0.67em; /* pin UA h1 default so the h2 slides keep identical spacing */ font-family: 'Cormorant Upright', serif; font-size: 65px; font-weight: 600; line-height: 122%; color: #582f1a; margin-bottom: 15px; } .hero-banner-text p { font-family: 'Jost', sans-serif; font-size: 22px; color: #582f1a; margin-top: 0px; margin-bottom: 15px; } .hero-banner-text a { background-color: #582f1a; color: white; padding: 10px 30px; text-decoration: none; border-radius: 5px; font-family: 'Jost', sans-serif; } .hero-banner-media { position: relative; overflow: hidden; } .hero-banner-media img, .hero-banner-media video { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-swiper .swiper-button-prev, .hero-swiper .swiper-button-next { position: absolute; bottom: 20px; top: auto; transform: translateY(0); z-index: 9; background-color: #DBCABC; height: 30px; width: 30px; border-radius: 100%; } .hero-swiper .swiper-button-prev { left: 50%; transform: translateX(-36px); } .hero-swiper .swiper-button-next { left: 50%; transform: translateX(6px); } .swiper-button-next:after, .swiper-button-prev:after { font-size: 15px; font-weight: bolder; color: #FFFFFF; } @media screen and (max-width: 768px) { .hero-banner-cell { flex-direction: column-reverse; } .hero-banner-text, .hero-banner-media { width: 100%; } {%- comment -%} CLS fix (mobile): the cell is stacked here (column-reverse), so .hero-banner-media has no height anchor — on desktop the flex row stretches it to the text height, but stacked it collapsed to 0 until the image/video loaded, then jumped the layout down (CLS ~0.138). Reserving the box with a fixed aspect-ratio means the space is held before the media loads; object-fit: cover crops the image/video to fill it. Adjust the ratio to match your media. {%- endcomment -%} .hero-banner-media { aspect-ratio: 4 / 3; } .hero-banner-media img, .hero-banner-media video { height: 100%; } .hero-banner-text { padding: 30px 20px; align-items: center; text-align: start; } .hero-banner-text h1, .hero-banner-text h2 { font-size: 35px; font-weight: 600; line-height: 120%; text-transform: capitalize; margin-bottom: 10px; } .hero-banner-text p { font-family: Jost; font-size: 16px; font-weight: 400; margin-top: 0; margin-bottom: 10px; display: block; } .hero-banner-text a { padding: 8px 36px; font-family: Jost; font-weight: 400; font-size: 16px; } .hero-swiper .swiper-button-prev, .hero-swiper .swiper-button-next { bottom: 10px; transform: translateX(0); width: 30px; height: 30px; } .hero-swiper .swiper-button-prev { left: calc(90% - 40px); } .hero-swiper .swiper-button-next { left: calc(90% + 0px); } } /* END_SECTION:hero-banner */ /* START_SECTION:new-collection-grid (INDEX:55) */ .coll-carousal { background-size: cover; background-position: center; text-align: center; position: relative; } .coll-carousal-section { background-size: cover; background-position: center; text-align: center; position: relative; } .coll-carousal-border img { width: 100%; height: auto; display: block; } .coll-carousal.bg-not-white .flickity-page-dots { background-color: #ffffff; } .collection-grid-section { padding: 24px 110px; } .heading-flex { display: flex; justify-content: space-between; align-items: center; } .product-slider-title { font-family: 'Cormorant Upright', serif; font-size: 35px; font-weight: 700; line-height: 39.2px; letter-spacing: 0.28px; margin-bottom: 6px; color: #6C3620; text-align: start; } .product-slider-sub-title { font-family: jost; font-weight: 400; font-size: 18px; line-height: 15px; letter-spacing: 0px; text-transform: capitalize; color: #6C3620; margin-top: 12px; } .heading-line { border: none; border-top: 1px solid #6C3620; width: 100%; margin: 0; } .collection-grid-wrapper { padding-top: 20px; display: flex; flex-wrap: wrap; column-gap: 9px; row-gap: 18px; } .collection-grid-wrapper .collection-item:nth-child(-n+3) { flex: 1 1 calc(33.333% - 13.33px); } .collection-grid-wrapper .collection-item:nth-child(n+4) { flex: 1 1 calc(25% - 15px); } .collection-item { position: relative; overflow: hidden; } .collection-item img { width: 100%; height: auto; display: block; } .collection-button { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); padding: 12px 18px; font-weight: 600; font-size: 18px; line-height: 15px; letter-spacing: -3%; border-radius: 4px; text-align: center; opacity: 93%; } .collection-carousel-wrapper .carousel-cell { width: 241px; margin-right: 30px; } @media screen and (max-width: 480px) { .collection-grid-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; grid-gap: 10px; } .collection-grid-wrapper .collection-item { grid-column: span 1; } .collection-grid-wrapper .collection-item:nth-child(3), .collection-grid-wrapper .collection-item:nth-child(4) { grid-column: span 1; } .collection-grid-wrapper .collection-item:nth-child(5) { grid-column: span 2; } .collection-grid-wrapper .collection-item:nth-child(6), .collection-grid-wrapper .collection-item:nth-child(7) { grid-column: span 1; } .collection-item img { width: 100%; height: auto; display: block; } .collection-button { font-size: 14px; padding: 10px 14px; } } .coll-carousal-border { overflow: hidden; width: 100%; position: relative; } .scrolling-wrapper { display: flex; width: 200%; /* Two images side by side */ animation: scroll-horizontal 20s linear infinite; } .coll-carousal-border img { width: 50%; height: auto; flex-shrink: 0; } @keyframes scroll-horizontal { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media(max-width:768px){ .collection-grid-section{padding: 10px 20px;} .collection-carousel-wrapper .carousel-cell{width:135px; margin-right:10px;} } /* END_SECTION:new-collection-grid */