/** Shopify CDN: Minification failed Line 8694:1 Expected "}" to go with "{" **/ /* ✅ PERFORMANCE OPTIMIZED: Google Fonts moved to theme.liquid for non-blocking loading */ /* Fonts now loaded via optimized link tags in instead of render-blocking @import */ /* ✅ FIXED: Elegant serif font for all headings - No more 404 errors */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .title, .heading, .multicolumn .title h1, .multicolumn .title h2, .multicolumn .title h3, .multicolumn .title h4, .multicolumn .title h5, .multicolumn .title h6 { font-family: 'Playfair Display', 'Cormorant Garamond', 'Times New Roman', 'Georgia', serif !important; color: #484848 !important; } /* Multicolumn section - Change from teal to gray */ .multicolumn .title, .multicolumn .title h1, .multicolumn .title h2, .multicolumn .title h3, .multicolumn h3, .multicolumn-card__info h3, .multicolumn-card__info .card__heading { color: #484848 !important; } /* Responsive styling for "THE essence of DEWY SKIN" heading */ .multicolumn .title-wrapper-with-link .title { font-size: calc(var(--font-heading-scale) * 4.5rem) !important; line-height: 1.2 !important; letter-spacing: 0.03em !important; text-align: center !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; word-spacing: 0.1em !important; padding: 0 15px !important; font-weight: 500 !important; text-transform: none !important; display: inline-block !important; width: 100% !important; overflow-wrap: break-word !important; hyphens: auto !important; } /* Tablet screens */ @media screen and (max-width: 990px) { .multicolumn .title-wrapper-with-link .title { font-size: calc(var(--font-heading-scale) * 3.2rem) !important; word-spacing: 0.05em !important; letter-spacing: 0.05em !important; padding: 0 20px !important; font-weight: 500 !important; } .multicolumn .title-wrapper-with-link { margin-bottom: 2.5rem !important; } } /* Mobile screens */ @media screen and (max-width: 749px) { .multicolumn .title-wrapper-with-link .title { font-size: calc(var(--font-heading-scale) * 2.4rem) !important; line-height: 1.3 !important; word-spacing: normal !important; padding: 0 15px !important; letter-spacing: 0.05em !important; font-weight: 600 !important; } .multicolumn .title-wrapper-with-link { margin-bottom: 2rem !important; padding: 0 10px !important; } } /* Small mobile screens */ @media screen and (max-width: 480px) { .multicolumn .title-wrapper-with-link .title { font-size: calc(var(--font-heading-scale) * 2rem) !important; padding: 0 5px !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: 0.05em !important; } .multicolumn .title-wrapper-with-link { margin-bottom: 1.5rem !important; } } /* ======================================== CSS CUSTOM PROPERTIES (VARIABLES) ======================================== */ :root { /* Brand Colors */ --color-brand-primary: rgb(var(--color-brand-primary)); --color-brand-secondary: rgb(var(--color-brand-secondary)); --color-brand-accent: rgb(var(--color-brand-accent)); --color-text-primary: rgb(var(--color-text-primary)); --color-text-secondary: rgb(var(--color-text-secondary)); --color-background-light: rgb(var(--color-background)); --color-background-accent: rgb(var(--color-background-accent)); --color-white: rgb(var(--color-white)); --color-gray-light: rgb(var(--color-gray-light)); --color-brand-hover: rgb(var(--color-brand-hover)); /* ✅ FIXED: Typography with reliable fallbacks (no more 404 errors) */ --font-heading: 'Playfair Display', 'Cormorant Garamond', 'Times New Roman', 'Georgia', serif; --font-body: 'Noto Sans', 'Helvetica Neue', 'Arial', sans-serif; --font-text: 'Nunito Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; /* Spacing */ --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 32px; --spacing-xl: 48px; /* Border Radius */ --border-radius: 4px; --border-radius-large: 8px; } /* ======================================== FONT FALLBACK SYSTEM - FIXED 404 ERRORS ======================================== */ /* ✅ REMOVED: Invalid @font-face declarations causing 404 errors Original Ogg fonts were pointing to non-existent Shopify CDN files Using elegant serif fallbacks instead for better performance and reliability */ /* Font loading error handling */ @supports not (font-display: swap) { .font-fallback { font-family: 'Times New Roman', Georgia, serif; } } /* ======================================== GLOBAL STYLES ======================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); } body { font-size: 16px; color: var(--color-text-primary); font-family: var(--font-body); } .page-width, .page-width-desktop { max-width: 1500px; /* Updated to 150rem for desktop consistency */ } .text-center { text-align: center; } .position-relative { position: relative; } .desktop-screen { display: block; } .mobile-screen { display: none; } .desktop-hide { display: none; } /* ======================================== COMPONENTS - REVIEWS & TABLES ======================================== */ .jdgm-prev-badge { display: flex; color: var(--color-brand-primary); gap: var(--spacing-xs); } table { font-family: var(--font-body); border-collapse: collapse; width: 100%; text-align: center; border: 1px solid var(--color-brand-primary); } table th, .reward_points_header { font-size: 24px; font-weight: 600; line-height: 32.69px; color: var(--color-brand-primary); justify-content: center; } table th small, table td { font-size: 16px; font-weight: 400; line-height: 24.52px; } table td { color: #424141BF; padding: 1.4em; } td.main { font-weight: 400; line-height: 27.24px; color: var(--color-brand-primary); } /* Mobile table text size reduction for rewards table */ @media screen and (max-width: 749px) { /* Mobile-specific heading styling only */ h2.reward_points_header.mobile-screen, .reward_points_header.mobile-screen { font-size: 16px !important; line-height: 20px !important; margin-bottom: 1rem !important; text-align: center !important; font-weight: 600 !important; color: var(--color-brand-primary) !important; } .reward_points_header.mobile-screen small { font-size: 12px !important; font-weight: 400 !important; display: block !important; margin-top: 4px !important; } table th, .reward_points_header { font-size: 14px !important; line-height: 18px !important; } table th small, table td { font-size: 11px !important; line-height: 14px !important; } table td { padding: 0.7rem !important; } td.main { font-size: 12px !important; line-height: 16px !important; font-weight: 600 !important; } /* Make table more compact on mobile */ table { font-size: 11px !important; } /* Adjust table header structure for mobile */ table th br { display: none; } table th small { display: block !important; margin-top: 4px !important; font-size: 9px !important; line-height: 12px !important; } } .price-wrap { font-family: var(--font-body); } /* body,p,label,a,span{ font-family: 'Noto Sans', sans-serif!important; } */ /* ======================================== COMPONENTS - SHIPPING & LAYOUT ======================================== */ .shipping-box h1, .shipping-box h2, .shipping-box h3, .shipping-box h4 { font-family: var(--font-body); color: var(--color-text-secondary); } .shipping-box h1 { font-size: 32px; font-weight: bold; letter-spacing: 0; } .shipping-box h3 { font-weight: 600; } .shipping-box a { text-decoration: none; color: var(--color-brand-secondary); } footer.footer.color-custom-bg { background: #F3FAFA } /* Footer specific styles */ .footer-block__heading { font-size: calc(var(--font-heading-scale) * 1.8rem); margin-bottom: 0.5rem; margin-top: 0; } /* Reach Out to Us heading style */ .footer-block__heading:contains("Reach Out to Us"), h2.footer-block__heading:contains("Reach Out to Us") { font-size: calc(var(--font-heading-scale) * 1.6rem) !important; white-space: nowrap !important; font-weight: 500 !important; } @media screen and (max-width: 749px) { .footer-block__heading:contains("Reach Out to Us"), h2.footer-block__heading:contains("Reach Out to Us") { font-size: calc(var(--font-heading-scale) * 1.4rem) !important; white-space: nowrap !important; } } /* Newsletter button styles */ .newsletter-form__button { min-width: 80px !important; padding: 12px 15px !important; font-size: 13px !important; font-weight: 600 !important; } @media screen and (max-width: 749px) { .newsletter-form__button { min-width: 60px !important; padding: 12px 10px !important; } } .home-product .inner-grid-item { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; height: 100%; } .position-relative{ position:relative; } /* .prod-img-box { max-width: 213px; } */ .testimonial-image-gap{ display:flex; gap:8px; } .product-info-main{ width: 100%; padding: 8px 30px 0; } .prod-img-box img { max-width: 100%; } .img-box{ display: flex; justify-content: center; flex-direction: column; align-items: center; } .img-box img{ object-fit: contain; } .img-box p { font-family: 'Noto Sans'; text-align:center; max-width:161px; } .main-heading-section { margin: 0; } .main-heading-section h1 { margin:0px; font-weight: 600; } .main-heading-section p { max-width: 800px; margin: 0 auto; line-height: 32px; } .wihslist-meta * { padding-bottom: 8px; } .wishlist-cart { background: var(--color-brand-primary); color: var(--color-white); padding: 12px; } .left-inner-col { display: flex; justify-content: center; align-items: center; gap: 30px; } .custom-testimonial-main .inner-flx.grid { display: flex; } .custom-testimonial-main ul.slick-dots { display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; } .custom-testimonial-main ul.slick-dots li { list-style: none; padding: 4px; /* list-style: circle; */ } .custom-testimonial-main ul.slick-dots li.slick-active button { background: #666666; border-radius: 50%; border: none; } .custom-testimonial-main ul.slick-dots li button{ background: #cccccc; border-radius: 50%; border: none; font-size: 0px; padding: 4px; } .custom-testimonial-main .left-content-inner h4 { font-family: var(--font-body); } .custom-testimonial-main .right-col { border-left: 1px solid #20727E40; padding-left: 24px; } .icon-section-main h1{ font-size:40px; font-weight:600; color:#555555; padding-bottom: 45px; margin:0; } .icon-section-main .inner-flx { display: flex; justify-content: space-between; align-items: center; gap: 35px; } .icon-section-main .inner-flx h3 { font-size: 16px; color: #484848; font-family: 'Noto Sans', sans-serif!important; } .custom-image-main .inner-flx { display: flex; justify-content: space-between; align-items: center; flex-direction: row; line-height: 0; } .custom-image-main .inner-content-block p { font-size: 20px; line-height: normal; } .custom-image-main .shop-btn { display: block; padding: 30px 0 0; } .custom-image-main .inner-content-block { padding: 0 34px 40px 35px; } .custom-image-main .image-blocks img { max-width: 100%; } .custom-image-main .inner-content-block a { color: #fff; text-decoration: none; padding: 7px 20px; font-size: 18px; } .custom-image-main .heading-flx h2 { color: #484848; font-weight: 600; font-size: 40px; margin: 0; } .reward_points_header{ text-align:center; } .image-block img , .image-blocks img { max-height: 367px; object-fit: cover; } .heading-image img { max-width: 100%; } .home-testimonial-image .inner_flx { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; line-height: 0; } .home-testimonial-image .flx-left { flex: 40%; max-width: 40%; } .home-testimonial-image .flx-right { flex: 60%; max-width: 60%; } .home-testimonial-image .image-block img { max-width: 100%; width: 100%; } .home-testimonial-image .quote-img { width: 100%; display: inline-block; } .home-testimonial-image .quote-img img { max-width: 100%; float: right; display: block; } .home-testimonial-image .content-box h4 { font-size: 24px; color: #457164; font-weight: 500; } .home-testimonial-image .content-box p { color: #457164; font-size: 24px; line-height: 36px; margin: 0; } .home-testimonial-image .block-content-box{ padding: 2rem 4rem; } .blog__title { color: #484848; font-size: 40px; text-align: center; } .card__information { background: #F3F8F7; } .product-desc-box p , .product-desc-box li { /* font-size: 18px; */ font-family: 'Noto Sans'; } h3.card__heading.h2 { line-height: 30px; font-size: 20px; font-weight: 500; color: #666666; } p.article-card__excerpt { font-size: 18px; color: #424141; line-height: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .card__information .ArticleItem__Link { color: #666666; font-family: "Playfair Display", "Cormorant Garamond", "Times New Roman", "Georgia", serif; font-size: 20px; font-weight: 500; text-decoration: none; } .footer_block_newsletter_custm .footer-block__newsletter { text-align: left; } .footer__content-bottom.foter-botm_style{ border-top: none; padding-top: 0; padding-bottom: 1rem; background: #F3FAFA; } .foter-botm_style .footer__copyright{ margin-top: 0; font-size: 14px; color: #333; font-weight: 300; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif; } .footer_block_newsletter_custm .join-text-box h2 { font-size: 28px; color: #333; font-weight: 600; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif; margin: 25px 0 0; } .footer_block_newsletter_custm .join-text-box p { font-size: 16px; color: rgb(var(--color-base-text)); font-weight: 300; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif; margin: 4px 0 16px; } .footer_block_newsletter_custm .join-text-box p a { color: #666666; } .list-social.footer_social_icon { justify-content: flex-start; } .list-social.footer_social_icon .list-social__link{ padding: 1.3rem 2.4rem 1.3rem 0; } .field-row .field__input_custom { padding: 15px; width: 100%; border: 2px solid #333; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif; font-weight: 300; transition: border-color 0.3s ease; } .field-row .field__input_custom:focus { border-color: #1f747b; outline: none; } .newsletter-form__field-wrapper .field-row { width: 100%; display: flex; flex-direction: row !important; justify-content: center; gap: 10px; } .field-row .newsletter-form__button{ background: #333 !important; color: #fff; padding: 15px 15px 14px 15px; border: none; font-size: 16px; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif; font-weight: 600; width: auto; transition: all 0.3s ease; position: relative !important; right: auto !important; top: auto !important; } .field-row .newsletter-form__button:hover { background: #222 !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(51, 51, 51, 0.3); } .footer-block__heading{ color: #333; font-weight: 600; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-size: 18px; } /* Footer menu links and text content */ .footer-block__details-content.list-unstyled li a, .footer-block__details-content.rte, .footer-block__details-content.rte p { font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-weight: 300 !important; color: rgb(var(--color-base-text)) !important; } .footer-block__details-content.list-unstyled li a { font-size: 14px !important; text-decoration: none !important; transition: color 0.3s ease !important; } .footer-block__details-content.list-unstyled li a:hover { color: #333 !important; } .announcement-style .announcement-bar__message{ color: #fff; font-size: 14px; } .announcement-bar.color-custom-bg-1 { background: rgb(var(--color-base-custom-bg-1)); } .color-custom-bg-1 { color: rgb(var(--color-base-text)); background-color: rgb(var(--color-base-custom-bg-1)); background: var(--gradient-base-custom-bg-1); } .header.header-style { padding-top:0; padding-bottom:0; } .page-width.banner-style-top { padding-top: 30px; } .header-wrapper--border-bottom { border-bottom: 1px solid #286E8554 !important; } /* Banner button styles now handled by comprehensive button system above */ h2.rich-text__heading.h1 { color: #484848; } .rich-text__wrapper .subtitle { font-size: 16px; color: #484848; } .rich-text__wrapper h2.rich-text__heading.h1{ color: #484848; font-size: 40px; font-weight: 600; } .rich-text__wrapper .rich-text__blocks>*+* { margin-top: 1rem; } .product-bottom { display: flex; justify-content: space-between; align-items: center; border: 1px solid #1A767A; background: #E8F0F2; padding: 0 1rem; } /* .tnc-container{ font-family: Noto Sans; } */ .tns-text{ font-size: 18px; font-weight: 600; line-height: 24.52px; text-align: left; margin-top:0; } .tns-list{ list-style: decimal; padding-left: 30px; } /* Add to cart button styles now handled by comprehensive button system above */ .price-box .price{ color: #1A767A; } /* Product form button pseudo elements handled by comprehensive system */ /* =============================================== PRODUCT RATING OVERLAY ON IMAGES =============================================== */ .prod-img-box, .card__media { position: relative; overflow: hidden; } .rating-badge-no-border { position: absolute !important; top: 8px !important; left: 8px !important; z-index: 999 !important; background: rgba(255, 255, 255, 0.9) !important; border-radius: 6px !important; padding: 4px 8px !important; transition: all 0.3s ease !important; pointer-events: none !important; backdrop-filter: blur(4px) !important; display: block !important; visibility: visible !important; border: none !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important; outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; box-shadow: none !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 12px !important; color: #333 !important; text-decoration: none !important; margin: 0 !important; } /* Remove any borders from rating overlay content */ .product-rating-overlay .rating-content, .product-rating-overlay .rating-stars, .product-rating-overlay .rating-number, .product-rating-overlay .rating-count { border: none !important; outline: none !important; box-shadow: none !important; } .rating-content { display: flex; align-items: center; gap: 3px; white-space: nowrap; } .rating-stars { font-size: 14px; line-height: 1; color: #666; font-weight: normal; letter-spacing: 0; } .rating-number { font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif; font-size: 14px; font-weight: 600; color: #333; line-height: 1; letter-spacing: 0; } .rating-count { font-size: 11px; color: #666; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif; font-weight: 400; } /* Hover effect */ .prod-img-box:hover .product-rating-overlay, .card__media:hover .product-rating-overlay { background: rgba(96, 96, 96, 0.95); } /* Mobile adjustments */ @media screen and (max-width: 749px) { .product-rating-overlay { top: 6px; left: 6px; padding: 3px 6px; border-radius: 3px; } .rating-stars { font-size: 10px; } .rating-number { font-size: 10px; } .rating-count { font-size: 9px; } } /* Additional debugging and specificity for overlay visibility */ body .product-rating-overlay { position: absolute !important; top: 8px !important; left: 8px !important; z-index: 9999 !important; background: rgba(255, 255, 255, 0.9) !important; display: block !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; transform: none !important; clip: none !important; overflow: visible !important; pointer-events: none !important; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; border: 0 !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important; outline: 0 !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; box-shadow: none !important; text-decoration: none !important; border-radius: 6px !important; } /* Maximum specificity - target all possible elements */ html body .product-rating-overlay, html body .product-rating-overlay *, html body .product-rating-overlay::before, html body .product-rating-overlay::after { border: 0 !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important; outline: 0 !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; box-shadow: none !important; text-decoration: none !important; } /* Remove any borders from rating overlay content with high specificity */ body .product-rating-overlay .rating-content, body .product-rating-overlay .rating-stars, body .product-rating-overlay .rating-number, body .product-rating-overlay .rating-count { border: none !important; outline: none !important; box-shadow: none !important; } /* Override any potential badge or theme border styling */ body .product-rating-overlay, body .product-rating-overlay *, body .product-rating-overlay::before, body .product-rating-overlay::after { border: 0 !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important; outline: none !important; box-shadow: none !important; } /* Nuclear option - completely remove all possible border sources */ .product-rating-overlay { border: 0 !important; border-radius: 6px !important; background: rgba(255, 255, 255, 0.9) !important; box-shadow: none !important; outline: 0 !important; text-decoration: none !important; } .product-rating-overlay::before, .product-rating-overlay::after { content: none !important; display: none !important; } /* Remove borders from all child elements */ .product-rating-overlay span, .product-rating-overlay div, .product-rating-overlay .rating-content, .product-rating-overlay .rating-stars, .product-rating-overlay .rating-number, .product-rating-overlay .rating-count { border: 0 !important; outline: 0 !important; box-shadow: none !important; text-decoration: none !important; } /* Ultra high specificity overlay - emergency visibility */ html body .prod-img-box .product-rating-overlay, html body .card__media .product-rating-overlay, html body .media-image .product-rating-overlay { position: absolute !important; top: 8px !important; left: 8px !important; z-index: 99999 !important; background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; display: block !important; visibility: visible !important; opacity: 1 !important; padding: 4px 8px !important; border-radius: 6px !important; color: #333 !important; font-size: 12px !important; line-height: 1.2 !important; } /* Ensure parent containers don't clip the overlay */ body .prod-img-box, body .card__media { overflow: visible !important; } /* Additional specific targeting for different sections */ .home-product .prod-img-box .product-rating-overlay, .swiper-slide .prod-img-box .product-rating-overlay, .grid__item .prod-img-box .product-rating-overlay { position: absolute !important; z-index: 9999 !important; display: block !important; } .home-product .product-info-content h2.product_title { font-size: 20px; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; color: #2c2c2c; font-weight: 400; margin: 0; padding-bottom: 8px; letter-spacing: 0.025em; } .home-product .product-info-content h2.product_title a { color: #2c2c2c !important; text-decoration: none; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-weight: 400; letter-spacing: 0.025em; } .home-product .variant-box { padding-bottom: 10px; } .home-product .variant-box .variant-option span.active { background: transparent; color: #555555; font-weight: 500; box-shadow: none; border: 2px solid #1A767A; } .home-product .variant-box .variant-option span{ border: 1px solid #1A767A; color: #555555; padding: 8px 16px; margin-right: 8px; cursor: pointer; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-weight: 500; font-size: 14px; letter-spacing: 0.025em; border-radius: 0; background: transparent; transition: all 0.3s ease; } .home-product .bottom-box { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: auto; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; border: none; background: transparent; padding-right: 0; } .home-product .cart-box input { background: transparent; border: 1px solid #1A767A; font-size: 14px; color: #555555; text-transform: uppercase; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-weight: 400; letter-spacing: 0.05em; cursor: pointer; padding: 12px 24px; border-radius: 0; transition: all 0.3s ease; } .home-product .qty-box-main { padding-bottom: 14px; } .containerHandler{ display: flex; justify-content: space-between; flex-direction: column; } .qty-box .quantity::after { box-shadow: none; } .qty-box .quantity::before { box-shadow: none; } .qty-box { padding: 10px 0; } .prod-img-box img { max-width: 100%; object-fit: cover; object-position: center; width: 100%; height: auto; /* margin: 0 20px; */ } .prod-img-box { max-width: 380px; /* min-width: 200px; */ height: auto; } .footer-partner-inner h4 { font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-size: 16px; font-weight: 600; color: #333; white-space: nowrap; } .footer-partner-inner { display: flex; justify-content: flex-start; align-items: center; gap: 20px; } .partner-logo img { max-width: 100%; width: max-content; height: 30px; object-fit: contain; } .footer__content-bottom-wrapper .footer__column--info { /* align-items: flex-start !important; */ padding: 0; } .footer-main-wrap .footer-block.footer-block--menu { max-width: 20%; } .footer-main-wrap .footer-block.footer-block--newsletter { max-width: 40%; margin: 0; } /* .footer__column.footer__column--info { max-width: 38%; } .footer__column.footer__column--partner { max-width: 62%; } */ .footer__content-top.footer-main-wrap { padding-bottom: 2rem; } .custom-image-main .heading-image { padding: 26px 0 00; } .title-with-rating{ display:flex; justify-content:space-between; } /* .title-with-rating h2{ max-width:65%; } .title-with-rating .product-rating{ max-width:35%; } */ .jdgm-prev-badge__text { visibility: visible !important; } .product-desc-box { padding-top: 36px; line-height: 25px; } .product-desc-box h2 { font-size: 28px; margin: 0; } .product-desc-box p { } .ingredent-head-box h1 { color: #484848; font-size: 28px; } .ingredent-head-box h3 { font-size: 22px; color: var(--color-brand-primary); font-family: var(--font-body); } hr.product-hr{ margin: 1.5rem 0; background:#42414140; } .Key_ingreients_main .right-image-row { display: flex; justify-content: flex-start; align-items: flex-start; line-height: 0; margin-bottom: 30px; } .Key_ingreients_main .right-image-row.mete-row-reverse { flex-direction: row-reverse; } .Key_ingreients_main .left-box-contnet { padding: 3rem 3rem; } .Key_ingreients_main .left-box-contnet { padding: 3rem 3rem; max-width: 57%; flex: 57%; } .Key_ingreients_main .right-image { max-width: 43%; flex: 43%; } .Key_ingreients_main .left-box-contnet h2 { font-size: 26px; font-weight: 600; margin: 0; font-family: var(--font-body); } .Key_ingreients_main .left-box-contnet p { line-height: 30px; font-size: 18px; } .Key_ingreients_main .right-meta-image img { max-width: 100%; width: 100%; height: auto; } .ingredients_list_main .inner_ingredients_row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 100%; gap: 7px; margin-bottom: 0.8rem; background: #FCFCFC; } .ingredients_list_main .list_left_ingredients { flex: 18%; max-width: 18%; padding: 2rem; } .ingredients_list_main .list_right_ingredients { flex: 80%; max-width: 82%; padding: 1.7rem 2rem; } .ingredients_list_main .list_left_ingredients label { color: var(--color-brand-primary); font-size: 20px; } .ingredients_list_main .list_right_ingredients p { line-height: normal; margin: 0; /* font-size: 17px; */ } /* ======================================== AFFILIATE PROGRAM SECTIONS ======================================== */ .affiliate_banner { margin-top: 40px; display: flex; position: relative; flex-direction: column; } .affiliate_banner_content { padding: 0; display: flex; width: 100%; align-items: center; justify-content: center; z-index: 2; } .affiliate_banner_media img { max-width: 100%; width: 100%; } .affilate-box-content.about-content-box { position: absolute; top: 0; } .affilate-box-content h2 { font-size: 8rem; font-weight: 700; letter-spacing: 0; line-height: normal; margin: 0; } .affilate-box-content h2 span { color: #232222BF; } .affilate-box-content p { font-size: 18px; line-height: normal; } .affilate-box-content { max-width: 70rem; text-align: center; } .why-join-main .heading-box h1 { font-size: 40px; font-weight: 600; text-align: center; margin: 0; } .why-join-main .flex-row { display: flex; gap: 40px; justify-content: flex-start; align-items: flex-start; padding-top: 36px; } .why-join-main span.h2 { font-size: 20px; font-weight: 600; } .why-join-main .flex-col p { word-break: break-all; line-height: normal; } .why-join-main .flex-col { max-width: 31%; padding: 3rem 3rem 0; } .join-our-team-main .flex-inner { display: flex; justify-content: center; align-items: center; } .join-our-team-main .flex-box { padding: 4rem; } .join-our-team-main .flex-box h2 { font-size: 40px; font-weight: 600; margin: 0; } .join-our-team-main .flex-box a { padding: 1rem 3rem; display: inline-block; font-size: 18px; text-decoration: none; margin-top: 10px; } .join-affiliate-program-main .join-top-row { display: flex; align-items: center; justify-content: center; padding-bottom: 36px; } .join-affiliate-program-main .join-top-row p { font-size: 20px; margin: 0; line-height: normal; } .join-affiliate-program-main .affilate_link a { color: var(--color-brand-accent); font-size: 18px; padding-left: 10px; } .join-affiliate-program-main .content-box { padding: 0 2rem 2rem; } .join-affiliate-program-main .content-box label { font-size: 18px; color: var(--color-text-secondary); font-weight: 600; } .join-affiliate-program-main .flex-row p { font-size: 24px; color: #484848; font-weight: 600; margin: 0; padding: 2rem; } .join-affiliate-program-main .content-box ul { margin: 0; padding: 0 0 0 16px; } .join-affiliate-program-main .flex-row.bottom-row p { font-size: 18px; color: #424141; font-weight: normal; line-height: normal; } .join-affiliate-program-main .flex-row.bottom-row p a { color:#555555; } .join-affiliate-program-main .flex-row { margin-bottom: 30px; } .become-partner-main .inner-row { display: flex; align-items: self-start; justify-content: center; line-height: 0; border-radius: 8px; } .become-partner-main .content-box h2 { font-size: 40px; margin: 0; padding: 2rem 0; } .become-partner-main .content-box a { padding: 2rem; display: inline-block; text-decoration: none; font-size: 18px; } .become-partner-main .left-col { padding: 3rem 2rem; flex: 40%; max-width: 40%; } .become-partner-main .right-col { max-width: 60%; flex: 60%; } .become-partner-main .right-col img { max-width: 100%; border-radius: 8px; } .blog__view-all .blog__button { background: transparent; color: #666666; } .header__menu-item{ color: #444444; font-weight: 500; } .about-banner .about-content-box{ transform: translate(0, 65%); position: absolute; padding: 23px; max-width: 107rem; background-size: cover !important; background-position: center center !important; } .about-banner .about-content-box p{ font-family: 'Playfair Display', 'Cormorant Garamond', 'Times New Roman', 'Georgia', serif !important; margin: 0; padding: 0 2rem; font-size: 36px; text-align:left; } .about-image-text-main .inner-flx { display: flex; justify-content: space-between; align-items: center; gap: 50px; } .full-page-width{ width:100%; } .about-image-text-main .full-page-width .inner-flx.row-reverse p{ padding: 0 30px 0 0; } .about-image-text-main .full-page-width .inner-flx p{ padding: 0 30px; } .about-image-text-main .inner-content-block h2{ font-size: 24px; line-height: 28px; } .about-image-text-main .inner-content-block p { font-size: 16px; line-height: 22px; } .about-image-text-main .inner-flx.row-reverse { flex-direction: row-reverse; } .about-image-text-main .image-blocks img { max-width: 100%; border-radius: 8px; } .query-form .field-row { display: flex; justify-content: center; width: 100%; gap: 20px; padding-bottom: 2rem; } .query-form .field-row .field-col { flex: 50%; max-width: 50%; } .query-form .field-row.textarea-row { display: block; } .query-form .field-row .fieldlabel { display: block; color: #212529; font-size: 16px; padding-bottom: 0.5rem; } .query-form .field-col .fieldinput { width: 100%; border: 1px solid #DCDCDC; background: #FDFDFD; height: 46px; font-size: 16px; padding-left: 10px; } .query-form .field-col .fieldinput::placeholder{ color:#DCDCDC; } .query-form .field-row.textarea-row .text-area{ width: 100%; border: 1px solid #DCDCDC; background: #FDFDFD; padding: 10px; font-size: 16px; } .query-form .field-row.textarea-row .text-area::placeholder{ color:#DCDCDC; } .query-form h2.title { color: #212529; font-family: 'Noto Sans', sans-serif!important; font-size: 16px; border-bottom: 1px solid #DCDCDC; padding: 0 0 1rem; } .style-product-info .product__title h1{ font-size:32px; color:#424141; font-family: 'Noto Sans', sans-serif!important; } .style-product-info .product-form__input input[type=radio]+label{ border-radius:0; } .header-style .header__icon, .header__icon--cart .icon { height: 24px; } .coll-banner-main .inner-flx { display: flex; line-height: 0; justify-content: center; align-items: center; } .coll-banner-main .inner-content-box h2 { font-size: 40px; margin: 0; padding-bottom: 10px; } .coll-banner-main .inner-content-box p { line-height: normal; margin: 0; color:#555555; } .coll-banner-main .inner-content-box { padding: 0 8rem 0 2rem; } .coll-banner-main .image-blocks img { width: 100%; } .coll-banner-main .left-box, .coll-banner-main .right-box{ flex:50%; max-width:50%; } .custom-btns { min-height: 41px !important; font-size: 16px; color: #1a767a; background: #E8F0F2; border: 1px solid #1A767A; border-right: none; text-transform: capitalize; font-family: "Noto Sans"; cursor: pointer; text-align: left; justify-content: start !important; padding: 0 12px !important; } .custom-btns:after{ box-shadow:none !important; } .qtydiv label { display: block; margin-bottom: 12px; letter-spacing: 2.8px; color: #747a7b; } .qtydiv .btnqty { display: inline-block; cursor: pointer; user-select: none; font-size: 25px; padding: 5px; line-height: 5px; } .qtydiv .btnqty.qtyminus { margin-right: 4px; } .qtydiv .btnqty.qtyplus { margin-left: 4px; } .qtydiv .quantity-input { border: none; padding: 8px; text-align: center; width: 35px; outline: none; display: inline-block; font-family: var(--font-body); } .qtydiv {display: inline-block;padding-right: 15px;padding-top: 10px;} @media screen and (max-width: 749px){ .desktop-screen{ display:none; } .mobile-screen{ display:flex; margin: 0 !important; } .affiliate_banner_content{ min-height:250px !important; position: absolute; top: 50px; } .back_button svg{ width:12px; } .containerHandler{ display:block; } .prod-img-box{ max-width: 100% !important; } .product-desc-box { padding-top: 16px; } .product-info-main{ width:100%; padding: 8px 0 0; } .ingredients_list_main .inner_ingredients_row { flex-direction: column; align-items: start; } .ingredients_list_main .list_left_ingredients label { font-size: 16px; } .ingredients_list_main .list_left_ingredients , .ingredients_list_main .list_right_ingredients { flex: 100%; max-width: 100%; padding: 1rem 0 0; background: #FCFCFC00; } .ingredients_list_main .list_left_ingredients { padding: 1rem 0 0; } .ingredients_list_main .list_right_ingredients { padding:0; } .coll-banner-main .inner-flx{flex-wrap: wrap;flex-direction: column-reverse;} .coll-banner-main .left-box, .coll-banner-main .right-box {flex: 100%;max-width: 100%;} .coll-banner-main .inner-content-box {padding: 2rem;} .query-form .field-row .field-col {flex: 100%;max-width: 100%;} .query-form .field-row {flex-wrap: wrap;} .testimonial-image-gap{ flex-direction:column; } .why-join-main .heading-box h1{ font-size: 32px; } .affiliate_banner_media img { min-height: 233px; } .card__information .ArticleItem__Link{ font-size: 16px; } .affilate-box-content h2 { font-size: 4rem; /* padding-top: 2rem; */ } .why-join-main .flex-row{ padding-top: 20px; flex-wrap: wrap; gap: 19px; } .why-join-main .flex-col { max-width: 100%; padding: 1rem 2rem 0; } .join-affiliate-program-main .join-top-row p { font-size: 17px; text-align: center; padding-bottom: 10px; } .join-affiliate-program-main .join-top-row{flex-wrap: wrap;} .affilate-box-content p { padding: 0 2rem; } .about-banner .about-content-box{ transform: unset; position: relative; padding: 20px; max-width: 100%; } .about-banner .about-content-box p{ font-size: 24px; } .about-image-text-main .inner-flx{ flex-wrap: wrap; } .about-image-text-main .left-box, .about-image-text-main .right-box { max-width: 100% !important; } .about-image-text-main .full-page-width .inner-flx.row-reverse p { padding: 0 1.5rem; } .become-partner-main .left-col, .become-partner-main .right-col { max-width: 100%; } .become-partner-main .inner-row{ flex-wrap: wrap; flex-direction: column-reverse; } .mobile-hide{display:none;} .home-product.grid .grid__item { max-width:100%; flex: 100%; } .home-product .inner-grid-item{ flex-wrap: wrap; } .rich-text__wrapper h2.rich-text__heading.h1{ font-size: 24px; } .Key_ingreients_main .left-box-contnet , .Key_ingreients_main .right-image { max-width: 100%; flex: 100%; } .Key_ingreients_main .right-image-row , .Key_ingreients_main .right-image-row.mete-row-reverse{ flex-direction:column-reverse; } .main-heading-section h1 { font-size: 22px !important; padding: 10px 33px; } .main-heading-section p { line-height: normal; font-size: 20px !important; padding: 10px 16px; } .icon-section-main h1, .blog__title{ font-size:20px; } .icon-section-main .inner-flx{ flex-wrap: wrap; gap:1px; } .icon-section-main .icon-wrap { max-width: 25%; flex: 0 0 25%; } .custom-image-main .inner-flx{ flex-wrap: wrap; flex-direction: column-reverse; } .custom-image-main .inner-flx .left-box,.custom-image-main .inner-flx .right-box{ max-width: 100% !important; } .custom-image-main .heading-flx h2 { font-size: 24px; } .custom-image-main .inner-content-block { padding: 60px 24px 60px; } .custom-image-main .heading-image { padding: 0; } .card__information { padding: 12px; } .home-testimonial-image .flx-left, .home-testimonial-image .flx-right { flex: 100%; max-width: 100%; } table th, table th small{ font-size: 12px !important; } table td{ font-size: 14px !important; } .ui-tabs .ui-tabs-panel{ padding: 1em 0 !important; } .footer-main-wrap .footer-block.footer-block--menu { max-width: 100%; } .footer-main-wrap .footer-block.footer-block--newsletter { max-width: 100%; } .footer__content-top.footer-main-wrap { padding-left: 2rem; padding-right: 2rem; } .partner-logo img{ width:60px; } .footer__column.footer__column--info { max-width: 100%;justify-content: flex-start;align-items: flex-start;} .footer__column.footer__column--partner {max-width: 100%;} .footer-partner-inner{flex-wrap: wrap;gap: 4px; justify-content:center !important; } .foter-botm_style .footer__content-bottom-wrapper{row-gap: 1rem;flex-direction: column-reverse;} .footer-block.footer-block--newsletter .footer__list-social.list-social {justify-content: flex-start;} .footer__copyright {text-align: left;} .custom-testimonial-main .inner-flx .grid__item { width: 100%;max-width: 100%;} .custom-testimonial-main .left-inner-col{flex-wrap: wrap;} .custom-testimonial-main .left-inner-col h4 { font-size: 16px; margin: 0 0 20px; } .custom-testimonial-main .right-col { border-left: none; padding-left: 0; } .custom-testimonial-main .left-col { border-bottom: 1px solid #20727E40; } .custom-testimonial-main .right-content-box h3 { font-size: 20px; } } @media only screen and (min-width: 768px) and (max-device-width: 1024px){ .become-partner-main .right-col img {min-height: 29vh;} .why-join-main .flex-row {gap: 31px;} .why-join-main .flex-col {padding: 1rem 1rem 0;} .affilate-box-content p {padding: 0 19rem;font-size: 14px;} .affilate-box-content h2 {font-size: 21px; padding-top: 2rem;} .affiliate_banner.banner--small { min-height: 25rem!important;} .about-banner .about-content-box {transform: translate(0, 64%);padding: 23px;max-width: 61rem;} .about-banner .about-content-box p{padding: 0 2rem;font-size: 18px;} .about-image-text-main .inner-content-block p {font-size: 15px;} } @media screen and (min-width: 750px){ .image-block img , .image-blocks img { height:367px; } .desktop-hide{display:none;} .custom_post_box.grid { column-gap: 30px; } .footer_block_newsletter_custm .newsletter-form { margin: 0; max-width: 36rem; } .banner__box{ min-width: 64rem!important; } h2.rich-text__heading.h1 { font-size: 40px; color: #484848; } .affiliate_banner.banner--medium{ min-height: 56rem; } .affiliate_banner.banner--large{ min-height: 72rem; } .affiliate_banner.banner--small{ min-height: 42rem; } .about-image-text-main .inner-content-block p { font-size: 18px !important; line-height: 22px; } } @media screen and (min-width: 990px){ .title-wrapper-with-link { justify-content: center; } .custom_post_box .grid__item{ gap: 30px; max-width: 31.33%; } .footer-block__heading{ font-size:17px !important; } } /* Add hover effects and improve price styling */ .home-product .cart-box input:hover { background: #1A767A; color: white; transform: none; box-shadow: none; } .home-product .custom.price { font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-weight: 500; font-size: 18px; color: #555555; letter-spacing: 0.025em; } /* Improve variant hover effects */ .home-product .variant-box .variant-option span:hover { background: #1A767A; border-color: #1A767A; color: white; } /* Add product rating styling */ .home-product .product-rating { font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-size: 13px; color: #666; margin-top: 4px; } /* Improve quantity controls */ .home-product .qtydiv .quantity-input { font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-weight: 500; font-size: 14px; color: #2c2c2c; } .home-product .qtydiv .btnqty { font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-weight: 600; color: #555555; font-size: 16px; } /* Slideshow, banner, and multicolumn button styles now handled by comprehensive button system above */ /* =================================== COMPREHENSIVE BUTTON DESIGN SYSTEM ===================================*/ /* Primary Button Styles - Main actions like Add to Cart, Checkout */ .button, .button--primary, .product-form__submit, .cart__checkout-button, .btn, .add-to-cart-btn, input[type="submit"].btn, .newsletter-form__button, .search__button, button[type="submit"]:not(.drawer__close):not(.slider-button):not(.quantity__button):not(.cart-remove-button button):not(.modal__close-button):not(.menu-drawer__close-button), .formAtcForm input[type="submit"], .custom-btns { /* Base Styling */ background-color: #fff !important; color: #333 !important; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; /* Layout */ border: 1px solid #ccc !important; border-radius: 4px !important; padding: 14px 28px !important; min-width: auto !important; min-height: auto !important; /* Interaction */ cursor: pointer !important; transition: background-color 0.3s ease, color 0.3s ease !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Remove default shadows */ box-shadow: none !important; } .button:before, .button--primary:before, .product-form__submit:before, .cart__checkout-button:before, .btn:before, .add-to-cart-btn:before, input[type="submit"].btn:before, .newsletter-form__button:before, .search__button:before, .custom-btns:before { display: none !important; box-shadow: none !important; } .button:after, .button--primary:after, .product-form__submit:after, .cart__checkout-button:after, .btn:after, .add-to-cart-btn:after, input[type="submit"].btn:after, .newsletter-form__button:after, .search__button:after, .custom-btns:after { display: none !important; box-shadow: none !important; } /* Primary Button Hover States */ .button:hover, .button--primary:hover, .product-form__submit:hover, .cart__checkout-button:hover, .btn:hover, .add-to-cart-btn:hover, input[type="submit"].btn:hover, .newsletter-form__button:hover, .search__button:hover, button[type="submit"]:not(.drawer__close):not(.slider-button):not(.quantity__button):not(.cart-remove-button button):not(.modal__close-button):not(.menu-drawer__close-button):hover, .formAtcForm input[type="submit"]:hover, .custom-btns:hover { background-color: #666 !important; color: #fff !important; } /* Secondary Button Styles - Supporting actions like View All, Continue Shopping */ .button--secondary, .cart__update-button, .facets__button-no-js, .collection__view-all .button, .template-404 .button, a.button:not(.button--primary):not(.custom-btns):not(.btn) { /* Base Styling */ background-color: transparent !important; color: #333 !important; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; /* Layout */ border: 1px solid #333 !important; border-radius: 4px !important; padding: 13px 27px !important; min-width: auto !important; min-height: auto !important; /* Interaction */ cursor: pointer !important; transition: all 0.3s ease !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Remove default shadows */ box-shadow: none !important; } .button--secondary:before, .cart__update-button:before, .facets__button-no-js:before { display: none !important; box-shadow: none !important; } .button--secondary:after, .cart__update-button:after, .facets__button-no-js:after { display: none !important; box-shadow: none !important; } /* Secondary Button Hover States */ .button--secondary:hover, .cart__update-button:hover, .facets__button-no-js:hover, .collection__view-all .button:hover, .template-404 .button:hover, a.button:not(.button--primary):not(.custom-btns):not(.btn):hover { background-color: #333 !important; color: white !important; border-color: #333 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(51, 51, 51, 0.3) !important; } /* Tertiary Button Styles - Minimal actions like Remove, Close */ .button--tertiary, .cart-remove-button button, .drawer__close, .modal__close-button, .cart-notification__close, .share-button__button, .share-button__close, .share-button__copy, .pickup-availability-button { /* Base Styling */ background-color: transparent !important; color: #666 !important; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0.02em !important; /* Layout */ border: 1px solid #ddd !important; border-radius: 0 !important; padding: 8px 16px !important; min-width: auto !important; min-height: auto !important; /* Interaction */ cursor: pointer !important; transition: all 0.3s ease !important; text-decoration: none !important; /* Remove default shadows */ box-shadow: none !important; } .button--tertiary:before, .cart-remove-button button:before, .drawer__close:before { display: none !important; box-shadow: none !important; } .button--tertiary:after, .cart-remove-button button:after, .drawer__close:after { display: none !important; box-shadow: none !important; } /* Tertiary Button Hover States */ .button--tertiary:hover, .cart-remove-button button:hover, .drawer__close:hover, .modal__close-button:hover, .cart-notification__close:hover, .share-button__button:hover, .share-button__close:hover, .share-button__copy:hover, .pickup-availability-button:hover { background-color: #f5f5f5 !important; color: #333 !important; border-color: #bbb !important; } /* Quantity Control Buttons */ .quantity__button { background-color: transparent !important; color: #1A767A !important; border: 1px solid #ddd !important; border-radius: 0 !important; padding: 8px 12px !important; font-size: 16px !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: none !important; } .quantity__button:hover { background-color: #1A767A !important; color: white !important; border-color: #1A767A !important; } .quantity__button:before, .quantity__button:after { display: none !important; box-shadow: none !important; } /* Slider Navigation Buttons */ .slider-button, .slider-button--prev, .slider-button--next { background-color: transparent !important; color: #1A767A !important; border: 1px solid #ddd !important; border-radius: 50% !important; width: 44px !important; height: 44px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: none !important; } .slider-button:hover, .slider-button--prev:hover, .slider-button--next:hover { background-color: #1A767A !important; color: white !important; border-color: #1A767A !important; transform: scale(1.1) !important; } /* Full Width Button Modifier */ .button--full-width, .product-form__submit.button--full-width { width: 100% !important; justify-content: center !important; } /* Loading State */ .button.loading, .product-form__submit.loading { color: transparent !important; position: relative !important; } .button.loading .loading-overlay__spinner, .product-form__submit.loading .loading-overlay__spinner { display: flex !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } /* Disabled State */ .button:disabled, .button[disabled], .product-form__submit:disabled, .product-form__submit[disabled], .btn:disabled, .btn[disabled] { background-color: #ccc !important; color: #999 !important; border-color: #ccc !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } .button:disabled:hover, .button[disabled]:hover, .product-form__submit:disabled:hover, .product-form__submit[disabled]:hover { background-color: #ccc !important; color: #999 !important; transform: none !important; box-shadow: none !important; } /* Focus States for Accessibility */ .button:focus, .button--primary:focus, .button--secondary:focus, .button--tertiary:focus, .product-form__submit:focus, .btn:focus, .quantity__button:focus, .slider-button:focus { outline: 2px solid #1A767A !important; outline-offset: 2px !important; } /* Specific Overrides for Shopify Payment Buttons */ .shopify-payment-button__button--unbranded { background-color: transparent !important; color: #1A767A !important; border: 1px solid #1A767A !important; border-radius: 0 !important; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0.05em !important; padding: 13px 27px !important; transition: all 0.3s ease !important; text-transform: uppercase !important; } .shopify-payment-button__button--unbranded:hover { background-color: #1A767A !important; color: white !important; } /* Newsletter Form Button Specific */ .field__button, .newsletter-form__button.field__button { background-color: #1A767A !important; color: white !important; border: none !important; border-radius: 0 !important; padding: 14px 20px !important; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.3s ease !important; } .field__button:hover, .newsletter-form__button.field__button:hover { background-color: #145a5d !important; transform: translateY(-1px) !important; } /* ULTIMATE COLLECTION PAGE BUTTON OVERRIDE - Transparent by default, filled on hover */ .product-grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary, .product-grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary, .contains-card .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary, .contains-card .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary, .grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary, .grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary, ul.grid.product-grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary, ul.grid.product-grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary, .product-card-wrapper .button, .card-product .button, .custom-card-product .button, .quick-add__submit, .grid__item .product-form__submit, .home-product .product-form__submit, .collection-tabber .product-form__submit, .coll-tab-sec .btn, .formAtcForm .btn, input[type="submit"].btn, .button--full-width.button--secondary, .button--full-width.quick-add__submit, .product-form__submit.button--full-width, .quick-add__submit.button--full-width, .grid .card-product .button, .grid .product-card-wrapper .button, .product-grid .button, .contains-card .button, .quick-add__submit.button.button--full-width.button--secondary, .product-card-wrapper .quick-add__submit.button--secondary, .card-product .quick-add__submit.button--secondary, .grid .quick-add__submit.button--secondary, .contains-card .quick-add__submit.button--secondary { /* FORCE OVERRIDE ALL STYLES - MAKE TRANSPARENT */ background-color: transparent !important; background: transparent !important; background-image: none !important; color: #1A767A !important; font-family: 'Poppins', 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; /* Override ALL CSS Variables */ --color-button: transparent !important; --color-button-text: #1A767A !important; --alpha-button-background: 0 !important; --color-base-background-1: transparent !important; --color-base-solid-button-labels: #1A767A !important; /* Layout */ border: 1px solid #1A767A !important; border-radius: 8px !important; padding: 12px 16px !important; min-width: auto !important; min-height: 44px !important; /* Interaction */ cursor: pointer !important; transition: all 0.3s ease !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Remove default shadows and effects */ box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; outline: none !important; } /* ULTIMATE COLLECTION PAGE BUTTON HOVER STATES - Transparent with color change only */ .product-grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover, .product-grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover, .contains-card .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover, .contains-card .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover, .grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover, .grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover, ul.grid.product-grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover, ul.grid.product-grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover, .product-card-wrapper .button:hover, .card-product .button:hover, .custom-card-product .button:hover, .quick-add__submit:hover, .grid__item .product-form__submit:hover, .home-product .product-form__submit:hover, .collection-tabber .product-form__submit:hover, .coll-tab-sec .btn:hover, .formAtcForm .btn:hover, input[type="submit"].btn:hover, .button--full-width.button--secondary:hover, .button--full-width.quick-add__submit:hover, .product-form__submit.button--full-width:hover, .quick-add__submit.button--full-width:hover, .grid .card-product .button:hover, .grid .product-card-wrapper .button:hover, .product-grid .button:hover, .contains-card .button:hover, .quick-add__submit.button.button--full-width.button--secondary:hover, .product-card-wrapper .quick-add__submit.button--secondary:hover, .card-product .quick-add__submit.button--secondary:hover, .grid .quick-add__submit.button--secondary:hover, .contains-card .quick-add__submit.button--secondary:hover { /* FORCE OVERRIDE ALL HOVER STYLES - STAY TRANSPARENT */ background-color: transparent !important; background: transparent !important; background-image: none !important; color: #0F6D59 !important; border-color: #0F6D59 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(26, 118, 122, 0.2) !important; /* Override ALL CSS Variables on hover */ --color-button: transparent !important; --color-button-text: #0F6D59 !important; --alpha-button-background: 0 !important; --color-base-background-1: transparent !important; --color-base-solid-button-labels: #0F6D59 !important; } /* NUCLEAR OPTION - FINAL OVERRIDE FOR COLLECTION PAGE BUTTONS - TRANSPARENT ALWAYS */ body .product-grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary, body .product-grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary, body .contains-card .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary, body .contains-card .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary, body .grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary, body .grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary, body ul.grid.product-grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary, body ul.grid.product-grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary { background: transparent !important; background-color: transparent !important; background-image: none !important; color: #1A767A !important; border: 1px solid #1A767A !important; border-radius: 8px !important; font-family: 'Poppins', 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; transition: all 0.3s ease !important; box-shadow: none !important; padding: 12px 16px !important; min-height: 44px !important; } body .product-grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover, body .product-grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover, body .contains-card .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover, body .contains-card .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover, body .grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover, body .grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover, body ul.grid.product-grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover, body ul.grid.product-grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:hover { background: transparent !important; background-color: transparent !important; background-image: none !important; color: #0F6D59 !important; border-color: #0F6D59 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(26, 118, 122, 0.2) !important; } /* ULTIMATE PSEUDO ELEMENT REMOVAL - Remove all pseudo elements that might add background colors */ .product-grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:before, .product-grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:after, .product-grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:before, .product-grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:after, .contains-card .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:before, .contains-card .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:after, .contains-card .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:before, .contains-card .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:after, .grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:before, .grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:after, .grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:before, .grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:after, ul.grid.product-grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:before, ul.grid.product-grid .grid__item .card-product .quick-add .quick-add__submit.button.button--full-width.button--secondary:after, ul.grid.product-grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:before, ul.grid.product-grid .grid__item .product-card-wrapper .quick-add .quick-add__submit.button.button--full-width.button--secondary:after, .product-card-wrapper .button:before, .product-card-wrapper .button:after, .card-product .button:before, .card-product .button:after, .custom-card-product .button:before, .custom-card-product .button:after, .quick-add__submit:before, .quick-add__submit:after, .grid__item .product-form__submit:before, .grid__item .product-form__submit:after, .home-product .product-form__submit:before, .home-product .product-form__submit:after, .collection-tabber .product-form__submit:before, .collection-tabber .product-form__submit:after, .coll-tab-sec .btn:before, .coll-tab-sec .btn:after, .formAtcForm .btn:before, .formAtcForm .btn:after, input[type="submit"].btn:before, input[type="submit"].btn:after, .button--full-width.button--secondary:before, .button--full-width.button--secondary:after, .button--full-width.quick-add__submit:before, .button--full-width.quick-add__submit:after, .product-form__submit.button--full-width:before, .product-form__submit.button--full-width:after, .quick-add__submit.button--full-width:before, .quick-add__submit.button--full-width:after, .grid .card-product .button:before, .grid .card-product .button:after, .grid .product-card-wrapper .button:before, .grid .product-card-wrapper .button:after, .product-grid .button:before, .product-grid .button:after, .contains-card .button:before, .contains-card .button:after, .quick-add__submit.button.button--full-width.button--secondary:before, .quick-add__submit.button.button--full-width.button--secondary:after, .product-card-wrapper .quick-add__submit.button--secondary:before, .product-card-wrapper .quick-add__submit.button--secondary:after, .card-product .quick-add__submit.button--secondary:before, .card-product .quick-add__submit.button--secondary:after, .grid .quick-add__submit.button--secondary:before, .grid .quick-add__submit.button--secondary:after, .contains-card .quick-add__submit.button--secondary:before, .contains-card .quick-add__submit.button--secondary:after { display: none !important; content: none !important; box-shadow: none !important; background: none !important; background-color: transparent !important; } /* Banner and Slideshow Button Overrides */ .banner__buttons .button, .slideshow .button, .multicolumn .button, .banner-btn-style .button { background-color: transparent !important; color: #333 !important; font-size: 14px !important; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif !important; font-weight: 400 !important; letter-spacing: 0.05em !important; border: 1px solid #333 !important; padding: 13px 25px !important; border-radius: 4px !important; text-transform: uppercase !important; transition: all 0.3s ease !important; min-width: auto !important; min-height: auto !important; box-shadow: none !important; } .banner__buttons .button:hover, .slideshow .button:hover, .multicolumn .button:hover, .banner-btn-style .button:hover { background-color: #333 !important; color: white !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(51, 51, 51, 0.3) !important; } .banner__buttons .button::after, .slideshow .button::after, .multicolumn .button::after, .banner-btn-style .button::after, .banner__buttons .button::before, .slideshow .button::before, .multicolumn .button::before, .banner-btn-style .button::before { display: none !important; box-shadow: none !important; } /* Mobile Responsiveness */ @media screen and (max-width: 749px) { .button, .button--primary, .button--secondary, .product-form__submit, .btn { font-size: 13px !important; padding: 12px 20px !important; } .button--full-width, .product-form__submit.button--full-width { padding: 14px 16px !important; } .quantity__button { padding: 6px 10px !important; font-size: 14px !important; } .slider-button { width: 36px !important; height: 36px !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { .button, .button--primary, .product-form__submit, .btn { border: 1px solid #000 !important; } .button--secondary { border: 1px solid #000 !important; color: #000 !important; } } /* Modern Product Card Styles */ .modern-product-card { background: #fff; border-radius: 0; overflow: hidden; transition: all 0.3s ease; position: relative; height: auto; display: flex; flex-direction: column; width: 100%; max-width: 350px; margin: 0 auto; } .product-image-container { position: relative; width: 100%; overflow: hidden; background: #f8f8f8; aspect-ratio: 1; } .product-image-wrapper { position: relative; width: 100%; height: 100%; display: block; } .product-link { display: block; width: 100%; height: 100%; position: relative; } .product-image { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; position: absolute; top: 0; left: 0; } .product-image.secondary-image { opacity: 0; z-index: 1; } /* Image hover effect */ .modern-product-card:hover .product-image.primary-image { opacity: 0; } .modern-product-card:hover .product-image.secondary-image { opacity: 1; } /* Hover Add to Cart Button */ .product-hover-actions { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,0.3)); transform: translateY(100%); transition: transform 0.3s ease; z-index: 10; } .modern-product-card:hover .product-hover-actions { transform: translateY(0); } .product-cart-form { width: 100%; } .add-to-cart-btn { width: 100%; background: #fff; border: 1px solid #333; color: #333; padding: 12px 20px; font-family: 'Nunito Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; border-radius: 0; } .add-to-cart-btn:hover { background: #333; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .add-to-cart-btn:disabled { background: #ccc; color: #666; cursor: not-allowed; border-color: #ccc; } /* Bestseller Badge */ .bestseller-badge { position: absolute; top: 12px; right: 12px; background: #333; color: #fff; padding: 4px 12px; font-family: 'Nunito Sans', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; z-index: 5; border-radius: 0; } /* Product Info Section */ .product-info { padding: 16px 8px 0 8px; flex-grow: 1; display: flex; flex-direction: column; gap: 8px; } .product-brand { font-family: 'Nunito Sans', sans-serif; font-size: 12px; font-weight: 500; color: #666; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 4px; } /* Title and Size Row */ .product-title-size-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; } .product-title { flex: 1; margin: 0; font-family: 'Nunito Sans', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.3; color: #333; } .product-title a { color: inherit; text-decoration: none; transition: color 0.3s ease; } .product-title a:hover { color: #1A767A; } .product-size { font-family: 'Nunito Sans', sans-serif; font-size: 14px; font-weight: 400; color: #666; white-space: nowrap; flex-shrink: 0; } /* Price Row */ .product-price-row { margin-top: auto; } .product-price { display: flex; align-items: center; gap: 8px; } .price-current { font-family: 'Nunito Sans', sans-serif; font-size: 18px; font-weight: 600; color: #333; } .price-original { font-family: 'Nunito Sans', sans-serif; font-size: 14px; font-weight: 400; color: #999; text-decoration: line-through; } /* Rating Badge Adjustments for New Layout */ .rating-badge-no-border { position: absolute !important; top: 8px !important; left: 8px !important; z-index: 6 !important; background: rgba(255, 255, 255, 0.95) !important; border-radius: 6px !important; padding: 4px 8px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 16px !important; color: #333 !important; border: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; } /* HOME PRODUCT SECTION - SWIPER FIXES */ .home-product .carousel-wrapper-outer { width: 100%; overflow: hidden; } .home-product .carousel-wrapper-inner { display: flex; align-items: stretch; width: 100%; } .home-product .swiper-slide { height: auto; width: auto; flex-shrink: 0; display: flex; align-items: stretch; min-height: 500px; } .home-product .modern-product-card { height: 100%; width: 100%; flex: 1; display: flex; flex-direction: column; } /* Fix Swiper Container */ .home-product .swiper { width: 100%; height: auto; } .home-product .swiper-wrapper { display: flex; align-items: stretch; height: auto; } /* Remove any conflicting styles */ .modern-product-card .grid__items, .modern-product-card .inner-grid-item, .modern-product-card .media-image, .modern-product-card .prod-img-box { all: unset; } /* Enhanced hover effects */ .modern-product-card { transition: all 0.3s ease; } .modern-product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } /* Fix for product form in hover state */ .product-cart-form button { width: 100%; border: none; outline: none; } .product-cart-form input[type="hidden"] { display: none; } /* Ensure images don't exceed container */ .product-image-wrapper { overflow: hidden; } .product-image { transition: all 0.3s ease; } /* Responsive Design */ @media (max-width: 768px) { .product-title { font-size: 14px; } .product-size { font-size: 12px; } .price-current { font-size: 16px; } .product-info { padding: 12px 6px 0 6px; gap: 6px; } .product-title-size-row { gap: 8px; } .add-to-cart-btn { padding: 10px 16px; font-size: 12px; } .modern-product-card { max-width: 280px; } .home-product .swiper-slide { min-height: 400px; } } @media (min-width: 1024px) { .product-info { padding: 24px 12px 0 12px; } .modern-product-card { max-width: 400px; } } /* Ensure proper spacing and alignment */ .home-product .page-width { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 20px; } /* Force horizontal layout */ .home-product .swiper-slide { flex-direction: row !important; width: auto !important; height: auto !important; flex-shrink: 0 !important; } /* Fix slider spacing */ .home-product .carousel-wrapper-outer.swiper { padding-bottom: 40px; } /* Navigation Arrow Styles */ .arrow_handler { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; display: flex; justify-content: space-between; pointer-events: none; z-index: 10; } .carousel-btn { width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; pointer-events: auto; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .carousel-btn:hover { background: #1A767A; border-color: #1A767A; transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .carousel-btn:hover svg path { stroke: #fff; } .carousel-btn svg { transition: all 0.3s ease; } .carousel-btn.swiper-button-disabled { opacity: 0.5; cursor: not-allowed; } .carousel-btn.swiper-button-disabled:hover { background: #fff; border-color: #ddd; transform: scale(1); } .carousel-btn.swiper-button-disabled:hover svg path { stroke: #393939; } /* Position arrows outside the slider container */ .home-product .carousel-nav-wrapper { position: relative; } .home-product .arrow_handler { position: absolute; top: 50%; transform: translateY(-50%); left: -60px; right: -60px; display: flex; justify-content: space-between; pointer-events: none; z-index: 10; } /* Responsive navigation */ @media (max-width: 1024px) { .home-product .arrow_handler { left: -40px; right: -40px; } .carousel-btn { width: 35px; height: 35px; } } @media (max-width: 768px) { .home-product .arrow_handler { left: -20px; right: -20px; } .carousel-btn { width: 30px; height: 30px; } .carousel-btn svg { width: 6px; height: 10px; } } /* Ensure slider container has proper positioning */ .home-product .carousel-nav-wrapper { position: relative; overflow: visible; } /* Add margin to page-width container for arrows */ .home-product .page-width { margin: 0 auto; padding: 0 80px; } @media (max-width: 1024px) { .home-product .page-width { padding: 0 60px; } } @media (max-width: 768px) { .home-product .page-width { padding: 0 40px; } } /* Additional Layout Fixes */ .home-product .swiper-slide { width: auto !important; flex-shrink: 0 !important; height: auto !important; max-width: 400px; } /* Specific exception for collection page mobile slider - allow fixed height */ body.template-collection .home-product .collection .product-slider--mobile .swiper-slide { height: unset !important; /* Override the general height: auto rule */ } /* Override home-product styles for collection page mobile slider - REMOVED height: auto to allow fixed height */ body.template-collection .home-product .collection .product-slider--mobile .swiper-slide, html body.template-collection .home-product .collection .product-slider--mobile .swiper-slide { height: unset !important; /* Override any height: auto rules */ display: flex !important; align-items: stretch !important; } .home-product .swiper-wrapper { align-items: stretch !important; height: auto !important; } /* Ensure consistent card sizing */ .home-product .modern-product-card { width: 100%; min-width: 280px; max-width: 350px; } /* Product image container fixes */ .home-product .product-image-container { width: 100%; height: 0; padding-bottom: 100%; /* 1:1 aspect ratio */ position: relative; overflow: hidden; } .home-product .product-image-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Force horizontal layout on all screen sizes */ .home-product .swiper { direction: ltr !important; overflow: hidden; } .home-product .swiper-wrapper { display: flex !important; flex-direction: row !important; width: auto !important; height: auto !important; } /* Prevent vertical stacking */ .modern-product-card { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; } /* Ensure proper spacing between slides */ .home-product .swiper-slide { margin-right: 0 !important; } /* .home-product .swiper-slide:not(:last-child) { margin-right: 10px !important; } */ /* Fix any overflow issues */ .home-product .carousel-wrapper-outer { width: 100%; overflow: hidden; } .home-product .carousel-wrapper-inner { width: 100%; height: auto; } /* Debug styles - remove if not needed */ .home-product .swiper-slide { border: 1px solid transparent; /* Helps visualize slide boundaries */ } /* Ensure all slides are same height */ .home-product .swiper-wrapper { align-items: stretch !important; } .home-product .swiper-slide { display: flex !important; align-items: stretch !important; } .home-product .modern-product-card { flex: 1 !important; display: flex !important; flex-direction: column !important; } /* CRITICAL: Force Horizontal Product Layout */ .home-product { width: 100%; overflow: hidden; } .home-product .page-width { width: 100%; max-width: 1500px; /* Updated to 150rem for desktop consistency */ margin: 0 auto; padding: 0 60px; } .home-product .carousel-nav-wrapper { position: relative; width: 100%; overflow: visible; } .home-product .carousel-wrapper-outer { width: 100% !important; overflow: hidden !important; position: relative; } .home-product .carousel-wrapper-inner { display: flex !important; flex-direction: row !important; align-items: stretch !important; width: auto !important; height: auto !important; transition: transform 0.3s ease !important; } .home-product .swiper-slide { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; min-width: 280px !important; max-width: 400px !important; height: auto !important; flex-shrink: 0 !important; margin-right: 4px !important; /* Further reduced from 12px for tighter spacing */ box-sizing: border-box !important; } .home-product .swiper-slide:last-child { margin-right: 0 !important; } /* Modern Product Card Styles - Updated */ .home-product .modern-product-card { background: #fff; border-radius: 0; overflow: hidden; transition: all 0.3s ease; position: relative; height: 100%; display: flex !important; flex-direction: column !important; width: 100% !important; box-sizing: border-box; } .home-product .product-image-container { position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; background: #f8f8f8; flex-shrink: 0; } .home-product .product-image-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } .home-product .product-link { display: block; width: 100%; height: 100%; position: relative; } .home-product .product-image { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; position: absolute; top: 0; left: 0; } .home-product .product-image.secondary-image { opacity: 0; z-index: 1; } /* Image hover effect */ .home-product .modern-product-card:hover .product-image.primary-image { opacity: 0; } .home-product .modern-product-card:hover .product-image.secondary-image { opacity: 1; } /* Hover Add to Cart Button */ .home-product .product-hover-actions { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,0.3)); transform: translateY(100%); transition: transform 0.3s ease; z-index: 10; } .home-product .modern-product-card:hover .product-hover-actions { transform: translateY(0); } .home-product .product-cart-form { width: 100%; } .home-product .add-to-cart-btn { width: 100%; background: #fff; border: 1px solid #333; color: #333; padding: 12px 20px; font-family: 'Nunito Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; border-radius: 0; } .home-product .add-to-cart-btn:hover { background: #333; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } /* Bestseller Badge */ .home-product .bestseller-badge { position: absolute; top: 12px; right: 12px; background: #333; color: #fff; padding: 4px 12px; font-family: 'Nunito Sans', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; z-index: 5; border-radius: 0; } /* Product Info Section */ .home-product .product-info { padding: 16px 8px 16px 8px; flex-grow: 1; display: flex; flex-direction: column; gap: 8px; min-height: 120px; } .home-product .product-brand { font-family: 'Nunito Sans', sans-serif; font-size: 12px; font-weight: 500; color: #666; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 4px; } /* Title and Size Row */ .home-product .product-title-size-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; } .home-product .product-title { flex: 1; margin: 0; font-family: 'Nunito Sans', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.3; color: #333; } .home-product .product-title a { color: inherit; text-decoration: none; transition: color 0.3s ease; } .home-product .product-title a:hover { color: #1A767A; } .home-product .product-size { font-family: 'Nunito Sans', sans-serif; font-size: 14px; font-weight: 400; color: #666; white-space: nowrap; flex-shrink: 0; } /* Price Row */ .home-product .product-price-row { margin-top: auto; } .home-product .product-price { display: flex; align-items: center; gap: 8px; } .home-product .price-current { font-family: 'Nunito Sans', sans-serif; font-size: 18px; font-weight: 600; color: #333; } .home-product .price-original { font-family: 'Nunito Sans', sans-serif; font-size: 14px; font-weight: 400; color: #999; text-decoration: line-through; } /* Rating Badge */ .home-product .rating-badge-no-border { position: absolute !important; top: 8px !important; left: 8px !important; z-index: 6 !important; background: rgba(255, 255, 255, 0.95) !important; border-radius: 6px !important; padding: 4px 8px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 14px !important; color: #333 !important; border: none !important; box-shadow: none !important; } /* Navigation Arrows */ .home-product .arrow_handler { position: absolute; top: 50%; transform: translateY(-50%); left: -50px; right: -50px; display: flex; justify-content: space-between; pointer-events: none; z-index: 10; } .home-product .carousel-btn { width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; pointer-events: auto; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .home-product .carousel-btn:hover { background: #1A767A; border-color: #1A767A; transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .home-product .carousel-btn:hover svg path { stroke: #fff; } /* Responsive Design */ @media (max-width: 768px) { .home-product .swiper-slide { width: 280px !important; min-width: 260px !important; max-width: 300px !important; margin-right: 16px !important; } .home-product .page-width { padding: 0 40px; } .home-product .arrow_handler { left: -30px; right: -30px; } .home-product .product-title { font-size: 14px; } .home-product .product-size { font-size: 12px; } .home-product .price-current { font-size: 16px; } .home-product .product-info { padding: 12px 6px 12px 6px; min-height: 100px; } } @media (max-width: 480px) { .home-product .swiper-slide { width: 240px !important; min-width: 220px !important; max-width: 260px !important; margin-right: 12px !important; } .home-product .page-width { padding: 0 20px; } .home-product .arrow_handler { left: -15px; right: -15px; } } /* Enhanced hover effects */ .home-product .modern-product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } /* Override any conflicting global styles */ .home-product * { box-sizing: border-box !important; } /* Ensure no margin/padding issues */ .home-product .swiper-wrapper { margin: 0 !important; padding: 0 !important; } .home-product .swiper { margin: 0 !important; padding: 0 !important; width: 100% !important; height: auto !important; } /* Simple Product Card Hover Effects */ .grid__items .prod-img-box { position: relative; overflow: hidden; } .grid__items .prod-img-box:hover .secondary-image { opacity: 1 !important; } .grid__items .prod-img-box:hover .primary-image { opacity: 0; } .grid__items .prod-img-box:hover .hover-add-to-cart { transform: translateY(0) !important; opacity: 1 !important; visibility: visible !important; } .grid__items .hover-add-to-cart button:hover { background: #333 !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } /* Product Info Styling */ .grid__items .product-info-main { padding: 16px 8px 0 8px; } .grid__items .modern-title-row a:hover { color: #1A767A !important; } /* Responsive adjustments */ @media (max-width: 768px) { .grid__items .modern-title-row h2 { font-size: 14px !important; } .grid__items .product-size { font-size: 12px !important; } .grid__items .modern-price-row span { font-size: 16px !important; } } /* Remove conflicting modern styles */ .modern-product-card, .product-image-container, .product-image-wrapper, .product-link, .product-image, .product-hover-actions, .product-cart-form, .add-to-cart-btn, .bestseller-badge, .product-info, .product-brand, .product-title-size-row, .product-title, .product-size, .product-price-row, .product-price, .price-current, .price-original { all: unset; } /* CRITICAL: Force Horizontal Product Layout - SIMPLIFIED */ .home-product .swiper-slide { width: auto !important; flex-shrink: 0 !important; height: auto !important; display: flex !important; flex-direction: column !important; } .home-product .swiper-wrapper { display: flex !important; flex-direction: row !important; align-items: stretch !important; height: auto !important; } .home-product .grid__items { width: 100%; max-width: 350px; min-width: 280px; } /* Navigation Arrows - Simplified */ .home-product .arrow_handler { position: absolute; top: 50%; transform: translateY(-50%); left: -50px; right: -50px; display: flex; justify-content: space-between; pointer-events: none; z-index: 10; } .home-product .carousel-btn { width: 40px; height: 40px; background: #fff; border: 1px solid #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; pointer-events: auto; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .home-product .carousel-btn:hover { background: #1A767A; border-color: #1A767A; transform: scale(1.1); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .home-product .carousel-btn:hover svg path { stroke: #fff; } /* Simple Product Card Hover Effects - Enhanced */ .grid__items .prod-img-box { position: relative; overflow: hidden; transition: all 0.3s ease; } .grid__items .prod-img-box:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } .grid__items .prod-img-box:hover .secondary-image { opacity: 1 !important; } .grid__items .prod-img-box:hover .primary-image { opacity: 0; } .grid__items .prod-img-box:hover .hover-add-to-cart { transform: translateY(0) !important; opacity: 1 !important; visibility: visible !important; } /* Enhanced Add to Cart Button Styling */ .grid__items .hover-add-to-cart { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 16px !important; background: linear-gradient(transparent 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.4) 100%) !important; transform: translateY(100%) !important; transition: all 0.3s ease !important; z-index: 10 !important; opacity: 0 !important; visibility: hidden !important; } .grid__items .hover-add-to-cart button, body .grid__items .hover-add-to-cart button[type="submit"], html body .grid__items .hover-add-to-cart button, .hover-add-to-cart button[type="submit"] { width: 100% !important; background: #fff !important; border: 1px solid #1A767A !important; color: #1A767A !important; padding: 14px 20px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.3s ease !important; border-radius: 0 !important; box-shadow: none !important; position: relative !important; overflow: hidden !important; } .grid__items .hover-add-to-cart button:hover, body .grid__items .hover-add-to-cart button[type="submit"]:hover { background: #1A767A !important; border-color: #1A767A !important; color: #fff !important; transform: translateY(-2px) !important; box-shadow: 0 4px 16px rgba(26, 118, 122, 0.3) !important; } .grid__items .hover-add-to-cart button:disabled { background: #ccc !important; color: #666 !important; cursor: not-allowed !important; box-shadow: none !important; } /* Product Info Styling - Enhanced */ .grid__items .product-info-main { padding: 18px 12px 12px 12px; } .grid__items .modern-title-row { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 12px !important; margin-bottom: 8px !important; } .grid__items .modern-title-row h2 { flex: 1 !important; margin: 0 !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.3 !important; color: #333 !important; } .grid__items .modern-title-row a { color: inherit !important; text-decoration: none !important; transition: color 0.3s ease !important; } .grid__items .modern-title-row a:hover { color: #1A767A !important; } .grid__items .product-size { font-family: 'Nunito Sans', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; color: #666 !important; white-space: nowrap !important; flex-shrink: 0 !important; background: #f8f8f8 !important; padding: 2px 8px !important; border-radius: 3px !important; } .grid__items .modern-price-row { margin-top: 6px !important; } .grid__items .modern-price-row .custom { display: flex !important; align-items: center !important; gap: 8px !important; } .grid__items .modern-price-row span { font-family: 'Nunito Sans', sans-serif !important; font-weight: 600 !important; color: #333 !important; } /* Rating Badge Improvements */ .grid__items .rating-badge-no-border { position: absolute !important; top: 10px !important; left: 10px !important; z-index: 6 !important; background: rgba(255, 255, 255, 0.95) !important; border-radius: 6px !important; padding: 5px 10px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 12px !important; color: #333 !important; border: none !important; box-shadow: none !important; backdrop-filter: blur(4px) !important; } /* Image Transitions */ .grid__items .primary-image, .grid__items .secondary-image { transition: opacity 0.4s ease !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } .grid__items .secondary-image { position: absolute !important; top: 0 !important; left: 0 !important; opacity: 0 !important; transition: opacity 0.4s ease !important; } /* Responsive adjustments */ @media (max-width: 768px) { .grid__items .modern-title-row h2 { font-size: 14px !important; } .grid__items .product-size { font-size: 12px !important; padding: 2px 6px !important; } .grid__items .modern-price-row span { font-size: 15px !important; } .grid__items .hover-add-to-cart { padding: 12px !important; } .grid__items .hover-add-to-cart button { padding: 12px 16px !important; font-size: 12px !important; } .grid__items .product-info-main { padding: 14px 8px 8px 8px; } } /* Bestseller Badge Styling */ .grid__items .prod-img-box > div[style*="position: absolute"][style*="top: 12px"][style*="right: 12px"] { position: absolute !important; top: 10px !important; right: 10px !important; background: #333 !important; color: #fff !important; padding: 5px 10px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; z-index: 5 !important; border-radius: 3px !important; } /* Hide Collection Tabber Add to Cart buttons by default */ .coll-tab-sec .bottom-box, .coll-tab-sec .product-form__buttons { opacity: 0 !important; visibility: hidden !important; transform: translateY(20px) !important; transition: all 0.3s ease !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 10 !important; background: rgba(255, 255, 255, 0.95) !important; padding: 16px !important; backdrop-filter: blur(5px) !important; } /* Show Collection Tabber Add to Cart buttons on hover */ .coll-tab-sec .inner-grid-item:hover .bottom-box, .coll-tab-sec .inner-grid-item:hover .product-form__buttons { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } /* Collection Tabber Button Styling to match site-wide design */ .coll-tab-sec .cart-box .btn, .coll-tab-sec .product-form__submit { background: #fff !important; border: 1px solid #1A767A !important; color: #1A767A !important; padding: 12px 20px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; cursor: pointer !important; transition: all 0.3s ease !important; border-radius: 0 !important; box-shadow: none !important; position: relative !important; overflow: hidden !important; width: 100% !important; } /* Adjust tile sizing to fit 3 tiles per row */ .coll-tab-sec .mx-25 { max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) / 2) !important; flex: 0 0 calc(33.33% - var(--grid-desktop-horizontal-spacing) / 2) !important; } /* Responsive adjustments for tiles */ @media (max-width: 1024px) { .coll-tab-sec .mx-25 { max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2) !important; flex: 0 0 calc(50% - var(--grid-desktop-horizontal-spacing) / 2) !important; } } @media (max-width: 768px) { .coll-tab-sec .mx-25 { max-width: 100% !important; flex: 0 0 100% !important; } } /* Ensure consistent home product section tiles are also 3 per row */ .home-product .grid__item { max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) / 2) !important; flex: 0 0 calc(33.33% - var(--grid-desktop-horizontal-spacing) / 2) !important; } @media (max-width: 1024px) { .home-product .grid__item { max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2) !important; flex: 0 0 calc(50% - var(--grid-desktop-horizontal-spacing) / 2) !important; } } @media (max-width: 768px) { .home-product .grid__item { max-width: 100% !important; flex: 0 0 100% !important; } } /* Remove any right markers or visual elements from tiles */ .grid__item, .grid__item::before, .grid__item::after, .inner-grid-item, .inner-grid-item::before, .inner-grid-item::after, .mx-25, .mx-25::before, .mx-25::after, .prod-img-box, .prod-img-box::before, .prod-img-box::after, .product-info-main, .product-info-main::before, .product-info-main::after { border-right: none !important; margin-right: 0 !important; position: relative !important; } /* Remove debug borders and visual indicators */ .home-product .swiper-slide { border: none !important; border-right: none !important; } .coll-tab-sec .grid__item, .coll-tab-sec .inner-grid-item, .coll-tab-sec .mx-25 { border-right: none !important; margin-right: 0 !important; } /* Remove any list-style markers */ .grid__item, .inner-grid-item, .mx-25 { list-style: none !important; list-style-type: none !important; } /* Remove any outline or focus indicators that might appear as markers */ .grid__item *, .inner-grid-item *, .mx-25 * { outline: none !important; box-shadow: none !important; } .coll-tab-sec .cart-box .btn:hover, .coll-tab-sec .product-form__submit:hover { background: #1A767A !important; border-color: #1A767A !important; color: #fff !important; transform: translateY(-2px) !important; box-shadow: 0 4px 16px rgba(26, 118, 122, 0.3) !important; } /* Remove conflicting modern styles */ .modern-product-card, .product-image-container, .product-image-wrapper, .product-link, .product-image, .product-hover-actions, .product-cart-form, .add-to-cart-btn, .bestseller-badge, .product-info, .product-brand, .product-title-size-row, .product-title, .product-size, .product-price-row, .product-price, .price-current, .price-original { all: unset; } /* CRITICAL: Force Horizontal Product Layout - SIMPLIFIED */ .home-product .swiper-slide { width: auto !important; flex-shrink: 0 !important; height: auto !important; display: flex !important; flex-direction: column !important; } .home-product .swiper-wrapper { display: flex !important; flex-direction: row !important; align-items: stretch !important; height: auto !important; } .home-product .grid__items { width: 100%; max-width: 320px; min-width: 280px; } /* Navigation Arrows - Simplified */ .home-product .arrow_handler { position: absolute; top: 50%; transform: translateY(-50%); left: -50px; right: -50px; display: flex; justify-content: space-between; pointer-events: none; z-index: 10; } .home-product .carousel-btn { width: 44px; height: 44px; background: #fff; border: 1px solid #e0e0e0; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; pointer-events: auto; box-shadow: 0 3px 12px rgba(0,0,0,0.08); } .home-product .carousel-btn:hover { background: #1A767A; border-color: #1A767A; transform: scale(1.05); box-shadow: 0 6px 20px rgba(26, 118, 122, 0.2); } .home-product .carousel-btn:hover svg path { stroke: #fff; } .home-product .page-width { padding: 0 70px; } @media (max-width: 768px) { .home-product .page-width { padding: 0 50px; } .home-product .arrow_handler { left: -35px; right: -35px; } } /* ======================================== SECTION SPACING FIXES ======================================== */ /* Fix only the slideshow section to match other sections' 36px padding */ .slideshow.section { padding-top: 27px !important; /* 36px * 0.75 for mobile */ padding-bottom: 27px !important; } @media screen and (min-width: 750px) { .slideshow.section { padding-top: 36px !important; padding-bottom: 36px !important; } } /* ======================================== PRODUCT GRID LAYOUT - CLEAN MURAD STYLE ======================================== */ /* Mobile-first approach: normal container behavior */ .home-product-full-width { width: 100%; margin: 0; padding: 0; position: relative; } /* Desktop: full-width breakout styles */ @media screen and (min-width: 768px) { .home-product-full-width { width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } } /* Desktop Product Grid Layout */ @media screen and (min-width: 768px) { /* Desktop grid styling */ .product-grid--desktop .grid { display: grid !important; gap: 20px !important; width: 100% !important; align-items: stretch !important; } /* Grid column definitions */ .product-grid--desktop .grid--1-col-desktop { grid-template-columns: repeat(1, 1fr) !important; } .product-grid--desktop .grid--2-col-desktop { grid-template-columns: repeat(2, 1fr) !important; } .product-grid--desktop .grid--3-col-desktop { grid-template-columns: repeat(3, 1fr) !important; } .product-grid--desktop .grid--4-col-desktop { grid-template-columns: repeat(4, 1fr) !important; } .product-grid--desktop .grid--5-col-desktop { grid-template-columns: repeat(5, 1fr) !important; } /* Grid items */ .product-grid--desktop .grid__item { display: flex !important; flex-direction: column !important; height: 100% !important; } /* Container for equal height cards */ .product-grid-container .home-product, .collection .home-product { width: 100%; max-width: none; } /* Make all product tiles equal height */ .product-tile { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 450px !important; /* Standardized minimum height */ background: white; border-radius: 8px; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .product-tile:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } /* Inner grid item takes full height */ .product-tile .inner-grid-item { display: flex !important; flex-direction: column !important; height: 100% !important; flex: 1 !important; } /* Image section - fixed aspect ratio */ .product-tile .media-image { flex: 0 0 auto !important; margin-bottom: 16px !important; } .product-tile .prod-img-box { position: relative !important; width: 100% !important; height: 0 !important; padding-bottom: 100% !important; /* 1:1 aspect ratio */ overflow: hidden !important; border-radius: 4px !important; } /* Product info section - flexible height */ .product-tile .product-info-main { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 0 !important; margin: 0 !important; } .product-tile .product-info-content { display: flex !important; flex-direction: column !important; height: 100% !important; justify-content: space-between !important; } /* Consistent spacing for content rows */ .product-tile .subheading-price-row { margin-bottom: 8px !important; display: flex !important; justify-content: space-between !important; align-items: flex-start !important; min-height: 24px !important; } .product-tile .title-row { flex: 1 !important; margin-bottom: 8px !important; display: flex !important; align-items: flex-start !important; } .product-tile .size-row { margin-bottom: 12px !important; min-height: 20px !important; } /* Typography consistency */ .product-tile .product-main-title { font-size: 16px !important; line-height: 1.3 !important; font-weight: 600 !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; height: auto !important; min-height: 42px !important; /* Ensures consistent space for 2 lines */ } .product-tile .product-sub-title { font-size: 12px !important; line-height: 1.2 !important; color: #666 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin: 0 !important; } .product-tile .product-price { font-size: 14px !important; font-weight: 600 !important; color: #333 !important; margin: 0 !important; } .product-tile .product-size { font-size: 12px !important; color: #888 !important; margin: 0 !important; } /* Quick add button standardization */ .product-tile .quick-add { margin-top: auto !important; padding-top: 12px !important; } .product-tile .quick-add__submit { width: 100% !important; min-height: 44px !important; font-size: 13px !important; font-weight: 600 !important; } } .home-product .product-grid-container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 40px; } .home-product .product-section-heading { font-family: 'Playfair Display', 'Cormorant Garamond', 'Noe Display', 'Times New Roman', 'Georgia', serif !important; font-size: 32px !important; font-weight: 400 !important; color: #333 !important; text-align: left !important; margin: 0 0 40px 0 !important; padding: 0 !important; line-height: 1.2 !important; display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 10 !important; } .home-product .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; /* Reduced from 20px to match collection pages */ width: 100%; align-items: start; } .home-product .product-tile { background: #fff; /* background: #f8f9fa; */ border: 1px solid rgba(0, 0, 0, 0.10); border-radius: 8px; overflow: hidden; transition: all 0.3s ease; position: relative; height: auto; display: flex; flex-direction: column; align-items: stretch; max-width: 400px; width: 100%; min-height: 450px; padding: 5px; } /* Ensure image container doesn't overflow */ .home-product .product-tile .prod-img-box { position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; background: #f8f8f8; border-radius: 0; } .home-product .product-tile:hover { transform: none; box-shadow: none; } .home-product .product-tile .inner-grid-item { display: flex; flex-direction: column; height: 100%; width: 100%; align-items: stretch; } .home-product .product-tile .media-image { position: relative; width: 100%; margin: 0 auto 20px auto; flex-shrink: 0; isolation: isolate; /* Create new stacking context */ } .home-product .product-tile .prod-img-box { position: relative; width: 100%; height: 0; padding-bottom: 100%; /* 1:1 aspect ratio */ overflow: hidden; background: #f8f8f8; border-radius: 8px; isolation: isolate; /* Contain all hover effects within image */ margin: 0 auto !important ; } .home-product .product-tile .prod-img-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity 0.3s ease; } .home-product .product-tile .prod-img-box .secondary-image { opacity: 0; z-index: 2; transition: opacity 0.3s ease; } .home-product .product-tile .prod-img-box .primary-image { opacity: 1; z-index: 1; transition: opacity 0.3s ease; } .home-product .product-tile .prod-img-box:hover .primary-image { opacity: 0 !important; } .home-product .product-tile .prod-img-box:hover .secondary-image { opacity: 1 !important; } /* Rating Badge - Minimal Murad style */ .home-product .product-tile .rating-badge-no-border { position: absolute !important; top: 10px !important; left: 10px !important; z-index: 10 !important; background: rgba(255, 255, 255, 0.95) !important; border-radius: 2px !important; padding: 3px 6px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 12px !important; font-weight: 400 !important; color: #555 !important; border: none !important; box-shadow: none !important; display: flex !important; align-items: center !important; gap: 2px !important; } /* Bestseller Badge - Minimal Murad style */ .home-product .product-tile .bestseller-badge { position: absolute !important; top: 10px !important; right: 10px !important; background: #333 !important; color: #fff !important; padding: 3px 6px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 8px !important; font-weight: 500 !important; letter-spacing: 0.3px !important; text-transform: uppercase !important; z-index: 10 !important; border-radius: 0 !important; } /* Product Info - Murad Style Clean Layout */ .home-product .product-tile .product-info-main { padding: 0; margin: 0; flex-shrink: 0; min-height: auto; display: block; width: 100%; position: relative; z-index: 1; } .home-product .product-tile .product-info-content { width: 100%; } .home-product .product-tile .product-info-content .title-row, .home-product .product-tile .product-info-content .size-row, .home-product .product-tile .product-info-content .subheading-price-row { margin-left: 15px; margin-right: 15px; } /* Brand category - Use product vendor or type */ .home-product .product-tile .product-brand-category { font-family: 'TT Commons', 'APPARAT', 'Nunito Sans', sans-serif !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; color: #999 !important; margin: 0 0 6px 0 !important; display: block !important; line-height: 1.2 !important; } .home-product .product-tile .subheading-price-row { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 2px 0; width: 100%; } .home-product .product-tile .title-row { margin: 0 0 20px 0; width: 100%; } .home-product .product-tile .size-row { margin: 0 0 8px 0; width: 100%; } .home-product .product-tile .product-title-container { flex: 1; display: block; } .home-product .product-tile .product-title-container a { color: inherit !important; text-decoration: none !important; display: block !important; } .home-product .product-tile .product-title-container a:hover { color: #1A767A !important; } /* ======================================== COLLECTION PAGE - MURAD STYLE MATCHING ======================================== */ /* Apply same styling to collection page products - FIXED DOUBLE BORDER */ .collection .card-wrapper, .collection .card { background: transparent !important; border: none !important; border-radius: 0 !important; overflow: visible !important; padding: 0 !important; height: auto !important; min-height: auto !important; box-shadow: none !important; transition: none !important; } /* CRITICAL FIX: Override theme default borders from component-card.css */ .collection .card--card, .collection .card--standard .card__inner { border: none !important; border-radius: 0 !important; border-width: 0 !important; box-shadow: none !important; background: transparent !important; } .collection .card--card:after, .collection .card--standard .card__inner:after { display: none !important; box-shadow: none !important; } .collection .card:hover { transform: none !important; box-shadow: none !important; } .collection .card__inner { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; height: 100% !important; display: block !important; flex-direction: unset !important; } .collection .card__media { margin-bottom: 0 !important; border-radius: 0 !important; overflow: visible !important; background: transparent !important; border: none !important; box-shadow: none !important; flex-shrink: unset !important; } .collection .card__media img { border-radius: 8px !important; width: 100% !important; height: auto !important; transition: opacity 0.3s ease !important; } /* Secondary image hover effect for collection page */ .collection .card__media .media img:not(:first-child) { position: absolute !important; top: 0 !important; left: 0 !important; opacity: 0 !important; transition: opacity 0.3s ease !important; } .collection .card__media:hover .media img:first-child { opacity: 0 !important; } .collection .card__media:hover .media img:not(:first-child) { opacity: 1 !important; } .collection .card__content { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 0 !important; } .collection .card__information { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } .collection .card__information h3, .collection .card__information .card__heading { font-family: 'Playfair Display', 'Cormorant Garamond', 'Noe Display', 'Times New Roman', 'Georgia', serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.3 !important; color: #333 !important; margin: 0 0 8px 0 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; min-width: 0 !important; width: 100% !important; } .collection .card__information .card__heading a { color: #333 !important; text-decoration: none !important; display: block !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; min-width: 0 !important; width: 100% !important; } .collection .card__information .card__heading a:hover { color: #1A767A !important; } .collection .card__content .price { font-family: 'Poppins', 'TT Commons', 'APPARAT', 'Nunito Sans', sans-serif !important; font-size: 16px !important; font-weight: 500 !important; color: #333 !important; margin: 0 !important; margin-top: auto !important; width: 100% !important; min-width: 0 !important; } /* Additional fixes for text display */ .collection .card__heading, .collection .card__heading a, .collection .card__information h3 { overflow: visible !important; text-overflow: clip !important; hyphens: none !important; word-break: normal !important; } /* COMPREHENSIVE UNIT PRICE FIX (ml, etc.) */ body.template-collection .unit-price, html body.template-collection .unit-price { display: block !important; font-size: 14px !important; color: #666 !important; margin-top: 4px !important; opacity: 1 !important; visibility: visible !important; width: 100% !important; min-width: 0 !important; max-width: none !important; } /* Override hidden class for unit price */ body.template-collection .unit-price.hidden, html body.template-collection .unit-price.hidden { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Ensure unit price content is visible */ body.template-collection .unit-price *, html body.template-collection .unit-price * { display: inline !important; visibility: visible !important; opacity: 1 !important; } body.template-collection .price-item, html body.template-collection .price-item { display: inline !important; visibility: visible !important; white-space: nowrap !important; opacity: 1 !important; } body.template-collection .caption, html body.template-collection .caption { display: block !important; font-size: 14px !important; line-height: 1.3 !important; color: #666 !important; visibility: visible !important; opacity: 1 !important; } /* Force display of unit price measurement */ body.template-collection .unit-price-measurement, html body.template-collection .unit-price-measurement { display: inline !important; visibility: visible !important; opacity: 1 !important; } /* COMPREHENSIVE UNIT PRICE AND VOLUME DISPLAY */ /* Force display of all unit price elements */ body.template-collection small.unit-price, body.template-collection .unit-price.caption, body.template-collection small.caption, body.template-collection .unit-price, html body.template-collection small.unit-price, html body.template-collection .unit-price.caption, html body.template-collection small.caption, html body.template-collection .unit-price { display: block !important; visibility: visible !important; opacity: 1 !important; color: #666 !important; font-size: 14px !important; margin-top: 4px !important; height: auto !important; overflow: visible !important; position: static !important; } /* CRITICAL: Override hidden class specifically for unit price */ body.template-collection small.unit-price.hidden, body.template-collection .unit-price.caption.hidden, body.template-collection small.caption.hidden, body.template-collection .unit-price.hidden, html body.template-collection small.unit-price.hidden, html body.template-collection .unit-price.caption.hidden, html body.template-collection small.caption.hidden, html body.template-collection .unit-price.hidden { display: block !important; visibility: visible !important; opacity: 1 !important; position: static !important; height: auto !important; width: auto !important; overflow: visible !important; clip: unset !important; margin: 4px 0 0 0 !important; } /* Show all unit price content */ body.template-collection .unit-price *, body.template-collection small.unit-price *, html body.template-collection .unit-price *, html body.template-collection small.unit-price * { display: inline !important; visibility: visible !important; opacity: 1 !important; color: #666 !important; } /* Add custom volume/ml display after price */ body.template-collection .card-information::after { content: ""; display: block; font-size: 14px; color: #666; margin-top: 4px; } /* Force display of price container and all its children */ body.template-collection .price__container, body.template-collection .price__container *, html body.template-collection .price__container, html body.template-collection .price__container * { display: block !important; visibility: visible !important; opacity: 1 !important; } /* ULTIMATE COLLECTION PAGE FIX */ body.template-collection, html body.template-collection { overflow-x: hidden; } body.template-collection .collection, html body.template-collection .collection { width: 100% !important; max-width: none !important; } body.template-collection #product-grid, html body.template-collection .grid.product-grid, body.template-collection .product-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important; list-style: none !important; grid-auto-rows: auto !important; justify-items: center !important; align-items: stretch !important; } body.template-collection .grid__item, html body.template-collection .grid__item { width: 100% !important; min-width: 300px !important; max-width: none !important; display: block !important; grid-column: auto !important; grid-row: auto !important; } body.template-collection .card-wrapper, html body.template-collection .card-wrapper { width: 100% !important; height: auto !important; display: block !important; } body.template-collection .card, html body.template-collection .card { width: 100% !important; min-width: 300px !important; max-width: none !important; display: flex !important; flex-direction: column !important; background: #f8f9fa !important; border-radius: 12px !important; padding: 16px !important; min-height: 450px !important; } body.template-collection .card__information, html body.template-collection .card__information { width: 100% !important; min-width: 280px !important; max-width: none !important; flex: 1 !important; } /* HOMEPAGE MATCHING TYPOGRAPHY - Product Titles */ body.template-collection .card__heading, html body.template-collection .card__heading, body.template-collection .card__information h3, body.template-collection .card__heading a, html body.template-collection .card__heading a, body.template-collection .card__information h3 a { width: 100% !important; min-width: 280px !important; max-width: none !important; word-wrap: break-word !important; white-space: normal !important; font-family: 'Playfair Display', 'Cormorant Garamond', 'Noe Display', 'Times New Roman', 'Georgia', serif !important; font-size: 20px !important; font-weight: 400 !important; line-height: 1.2 !important; color: #2c2c2c !important; margin: 0 0 8px 0 !important; text-decoration: none !important; letter-spacing: 0.025em !important; } body.template-collection .card__heading a:hover, html body.template-collection .card__heading a:hover, body.template-collection .card__information h3 a:hover { color: #1A767A !important; } /* DUPLICATE TITLES FIXED - Removed duplicate section from card-product.liquid snippet */ /* No additional CSS targeting needed since root cause is resolved */ /* Reset any problematic inherited styles */ body.template-collection * { max-width: none !important; word-break: normal !important; hyphens: none !important; text-overflow: clip !important; } body.template-collection .card__content { width: 100% !important; flex: 1 !important; display: flex !important; flex-direction: column !important; } body.template-collection .card__inner { width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; } body.template-collection .card__media { width: 100% !important; margin-bottom: 16px !important; border-radius: 8px !important; overflow: hidden !important; } /* Fix card-information display */ body.template-collection .card-information, html body.template-collection .card-information { width: 100% !important; display: block !important; margin-top: 8px !important; visibility: visible !important; opacity: 1 !important; } body.template-collection .card-information *, html body.template-collection .card-information * { width: 100% !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; visibility: visible !important; opacity: 1 !important; } /* Ensure price container is visible */ /* HOMEPAGE MATCHING PRICING STYLES */ body.template-collection .price, body.template-collection .price__container, html body.template-collection .price, html body.template-collection .price__container { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; font-family: 'Poppins', 'TT Commons', 'APPARAT', 'Nunito Sans', sans-serif !important; margin-top: 12px !important; } /* Price items styling */ body.template-collection .price-item, body.template-collection .price__regular, body.template-collection .price__sale, html body.template-collection .price-item, html body.template-collection .price__regular, html body.template-collection .price__sale { display: inline-block !important; visibility: visible !important; opacity: 1 !important; font-family: 'Poppins', sans-serif !important; font-size: 18px !important; font-weight: 600 !important; color: #333 !important; margin: 0 !important; } /* Sale price styling */ body.template-collection .price-item--sale, html body.template-collection .price-item--sale { color: #333 !important; margin-right: 8px !important; } body.template-collection .price-item--regular, html body.template-collection .price-item--regular { color: #999 !important; text-decoration: line-through !important; font-size: 14px !important; font-weight: 400 !important; } /* VOLUME/ML INFORMATION DISPLAY - TARGETING CORRECT VISIBLE CARD-INFORMATION */ /* Add volume info after price for each product */ body.template-collection .grid__item:nth-child(1) .card > .card__content .card-information::after, body.template-collection .grid__item:nth-child(1) .card > .card__content .card__information::after { content: "30ml" !important; display: block !important; font-family: 'Poppins', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #666 !important; margin-top: 6px !important; line-height: 1.3 !important; visibility: visible !important; opacity: 1 !important; } body.template-collection .grid__item:nth-child(2) .card > .card__content .card-information::after, body.template-collection .grid__item:nth-child(2) .card > .card__content .card__information::after { content: "150ml" !important; display: block !important; font-family: 'Poppins', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #666 !important; margin-top: 6px !important; line-height: 1.3 !important; visibility: visible !important; opacity: 1 !important; } body.template-collection .grid__item:nth-child(3) .card > .card__content .card-information::after, body.template-collection .grid__item:nth-child(3) .card > .card__content .card__information::after { content: "30ml" !important; display: block !important; font-family: 'Poppins', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #666 !important; margin-top: 6px !important; line-height: 1.3 !important; visibility: visible !important; opacity: 1 !important; } /* Try to show product size from variant options */ body.template-collection .product-size, body.template-collection .variant-option, html body.template-collection .product-size, html body.template-collection .variant-option { display: block !important; visibility: visible !important; opacity: 1 !important; font-family: 'Poppins', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #666 !important; margin-top: 6px !important; } /* Ensure full product title visibility */ body.template-collection .card__heading a { display: block !important; width: 100% !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; word-wrap: break-word !important; hyphens: none !important; } /* Fix any ratio/aspect issues */ .collection .card__inner .ratio { position: relative !important; } .collection .card__inner .ratio img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Ensure proper spacing between elements */ .collection .card__content { gap: 12px !important; } /* Fix quick add button styling if present */ .collection .quick-add { margin-top: 12px !important; } .collection .quick-add .quick-add__submit { width: 100% !important; padding: 12px !important; background: #1A767A !important; color: white !important; border: none !important; border-radius: 6px !important; font-family: 'Poppins', sans-serif !important; font-size: 14px !important; cursor: pointer !important; transition: all 0.3s ease !important; text-transform: uppercase !important; } .collection .quick-add .quick-add__submit:hover { background: #0F6D59 !important; transform: translateY(-1px) !important; } /* Match the 3-column grid layout */ .collection #product-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important; width: 100% !important; list-style: none !important; min-height: auto !important; justify-items: center !important; align-items: stretch !important; } /* Override any conflicting styles */ .collection .product-grid-container .collection { width: 100% !important; max-width: none !important; } .collection .product-grid-container { width: 100% !important; max-width: 1440px !important; } /* Override any conflicting grid classes */ .collection .grid.product-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; width: 100% !important; } .collection .grid--3-col-desktop { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; width: 100% !important; } .collection .grid--1-col-tablet-down { grid-template-columns: repeat(3, 1fr) !important; } /* Force grid layout on all collection grids */ .template-collection .grid.product-grid, .template-collection #product-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; width: 100% !important; max-width: 1500px !important; margin: 0 auto !important; } /* Ensure product cards take full width within grid items */ .collection .grid__item { display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; min-width: 250px !important; max-width: none !important; } .collection .grid__item .card-wrapper { width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; min-width: 250px !important; max-width: none !important; } .collection .card { width: 100% !important; min-width: 250px !important; max-width: none !important; } .collection .card__information { width: 100% !important; min-width: 200px !important; } /* Collection page container styling */ .collection .product-grid-container { max-width: 1440px !important; margin: 0 auto !important; padding: 0 40px !important; } /* Mobile responsive for ultimate fix */ @media (max-width: 1024px) { body.template-collection #product-grid, body.template-collection .grid.product-grid, html body.template-collection #product-grid, html body.template-collection .grid.product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; padding: 0 16px !important; } body.template-collection .grid__item, html body.template-collection .grid__item { min-width: 250px !important; } } @media (max-width: 768px) { body.template-collection #product-grid, body.template-collection .grid.product-grid, html body.template-collection #product-grid, html body.template-collection .grid.product-grid { grid-template-columns: 1fr !important; gap: 24px !important; padding: 0 12px !important; } body.template-collection .card, html body.template-collection .card { min-height: 400px !important; min-width: 280px !important; } body.template-collection .card__heading, body.template-collection .card__information h3, html body.template-collection .card__heading, html body.template-collection .card__information h3 { font-size: 18px !important; min-width: 260px !important; } } /* Collection filters styling */ .collection .facets-wrapper { max-width: 1440px !important; margin: 0 auto !important; padding: 0 40px !important; } .collection .facets { background: #fff !important; border-radius: 8px !important; padding: 20px !important; margin-bottom: 32px !important; /* box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; */ box-shadow: none !important; } @media (max-width: 768px) { .collection .facets-wrapper { padding: 0 16px !important; } } .home-product .product-tile .product-main-title { font-family: 'Playfair Display', 'Cormorant Garamond', 'Noe Display', 'Times New Roman', 'Georgia', serif !important; font-size: 24px !important; font-weight: 600 !important; line-height: 1.2 !important; color: #333 !important; margin: 0 !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .home-product .product-tile .product-sub-title-container { flex: 1; display: block; } .home-product .product-tile .empty-space { flex: 1; display: block; } .home-product .product-tile .product-sub-title-container a { color: inherit !important; text-decoration: none !important; display: block !important; } .home-product .product-tile .product-sub-title-container a:hover { color: #1A767A !important; } .home-product .product-tile .product-sub-title { font-family: 'Poppins', 'TT Commons', 'APPARAT', 'Nunito Sans', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.3 !important; color: #666 !important; margin: 0 !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .home-product .product-tile .product-size { font-family: 'Poppins', 'TT Commons', 'APPARAT', 'Nunito Sans', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; color: #333 !important; margin: 0 !important; display: block !important; line-height: 1.3 !important; } .home-product .product-tile .product-price { font-family: 'Poppins', 'TT Commons', 'APPARAT', 'Nunito Sans', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; color: #333 !important; line-height: 1.3 !important; margin: 0 !important; text-align: right; flex-shrink: 0; margin-right: 30px !important; } /* Hover Add to Cart Button - Strictly within image bounds */ .home-product .product-tile .hover-add-to-cart { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(transparent, rgba(0,0,0,0.3)); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 3; } .home-product .product-tile .prod-img-box:hover .hover-add-to-cart { opacity: 1; visibility: visible; } .home-product .product-tile .hover-add-to-cart .add-to-cart-btn { width: 100%; padding: 12px 20px; font-family: 'TT Commons', 'APPARAT', 'Nunito Sans', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; border: 1px solid #1A767A; background: #1A767A; color: white; border-radius: 0; } .home-product .product-tile .hover-add-to-cart .add-to-cart-btn:hover { background: #0F6D59; border-color: #0F6D59; transform: translateY(-1px); /* box-shadow: 0 2px 8px rgba(26, 118, 122, 0.3); */ box-shadow: none !important; } .home-product .product-tile .hover-add-to-cart .add-to-cart-btn:disabled { background: none !important; color: #666; cursor: not-allowed; } .home-product .product-tile .hover-add-to-cart .add-to-cart-btn:disabled:hover { transform: none; box-shadow: none; } /* Hide the bottom add-to-cart button since we're using hover version */ .home-product .product-tile .product-add-to-cart { display: none; } /* Clean hover effects */ .home-product .product-tile .prod-img-box { cursor: pointer; } /* Responsive adjustments */ @media (max-width: 1024px) { .home-product .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; /* Reduced from 20px to match collection pages */ } .home-product .product-grid-container { padding: 0 16px; } .home-product .product-tile { min-height: 380px; } } @media (max-width: 768px) { .home-product .product-grid { grid-template-columns: 1fr; gap: 18px; } .home-product .product-tile { max-width: 380px; margin: 0 auto; min-height: 320px; } .home-product .product-tile .product-main-title { font-size: 19px !important; font-weight: 600 !important; font-family: 'Cormorant Garamond', 'Playfair Display', 'Noe Display', 'Ogg', serif !important; } .home-product .product-tile .product-sub-title { font-size: 10px !important; font-weight: 400 !important; padding-right: 15px; font-family: 'Poppins', 'TT Commons', 'APPARAT', 'Nunito Sans', sans-serif !important; } .home-product .product-tile .product-size { font-size: 12px !important; font-weight: 300 !important; font-family: 'Poppins', 'TT Commons', 'APPARAT', 'Nunito Sans', sans-serif !important; } .home-product .product-tile .product-price { font-size: 10px !important; font-weight: 300 !important; font-family: 'Poppins', 'TT Commons', 'APPARAT', 'Nunito Sans', sans-serif !important; } .home-product .product-tile .title-row { margin: 0 0 16px 0; } .home-product .product-grid-container { padding: 0 12px; } .home-product .product-tile .product-info-content .title-row, .home-product .product-tile .product-info-content .size-row, .home-product .product-tile .product-info-content .subheading-price-row { margin-left: 10px; margin-right: 10px; } } /* ===================================================== COLLECTION PAGE STYLING - EXACT HOME PAGE MATCH ===================================================== */ /* Collection Page - Apply Home Page Product Tile Styling with Higher Specificity */ html body.template-collection .product-tile, html body[class*="template-collection"] .product-tile, body.template-collection .product-tile { background: #f8f9fa !important; border: 1px solid rgba(26, 118, 122, 0.1) !important; border-radius: 12px !important; overflow: hidden !important; position: relative !important; height: auto !important; min-height: 500px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; padding: 0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; transition: all 0.3s ease !important; box-sizing: border-box !important; } /* Hover Effects */ body.template-collection .product-tile:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important; } /* Inner Structure */ body.template-collection .product-tile .inner-grid-item { display: flex !important; flex-direction: column !important; height: 100% !important; width: 100% !important; align-items: stretch !important; } /* Image Container */ body.template-collection .product-tile .media-image { position: relative !important; width: 100% !important; margin: 0 !important; flex-shrink: 0 !important; flex-grow: 1 !important; } body.template-collection .product-tile .prod-img-box { position: relative !important; width: 100% !important; height: 0 !important; padding-bottom: 130% !important; overflow: hidden !important; background: #f8f8f8 !important; border-radius: 8px !important; margin: 0 !important; } body.template-collection .product-tile .prod-img-box img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transition: opacity 0.3s ease !important; } /* Image Hover Effects */ body.template-collection .product-tile .prod-img-box .secondary-image { opacity: 0 !important; z-index: 2 !important; } body.template-collection .product-tile .prod-img-box .primary-image { opacity: 1 !important; z-index: 1 !important; } body.template-collection .product-tile .prod-img-box:hover .primary-image { opacity: 0 !important; } body.template-collection .product-tile .prod-img-box:hover .secondary-image { opacity: 1 !important; } /* Product Info Structure */ body.template-collection .product-tile .product-info-main { padding: 8px !important; margin: 0 !important; flex-grow: 1 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; width: 100% !important; box-sizing: border-box !important; } /* Subheading and Price Row */ body.template-collection .product-tile .subheading-price-row { display: flex !important; justify-content: space-between !important; align-items: baseline !important; margin: 0 0 4px 0 !important; width: 100% !important; border-bottom: 1px solid #ffffff !important; padding-bottom: 4px !important; } body.template-collection .product-tile .product-brand-category { font-family: 'Poppins', 'TT Commons', 'APPARAT', 'Nunito Sans', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; color: #999 !important; margin: 0 !important; line-height: 1.2 !important; flex: 1 !important; } body.template-collection .product-tile .product-price { font-family: 'Poppins', 'TT Commons', 'APPARAT', 'Nunito Sans', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; color: #1A767A !important; margin: 0 !important; text-align: right !important; flex-shrink: 0 !important; line-height: 1.2 !important; } /* Title Row */ body.template-collection .product-tile .title-row { margin: 0 0 6px 0 !important; width: 100% !important; border-bottom: 1px solid #f0f0f0 !important; padding-bottom: 4px !important; } body.template-collection .product-tile .product-main-title { font-family: 'Nunito Sans', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.3 !important; color: #333 !important; margin: 0 !important; display: block !important; } body.template-collection .product-tile .product-main-title a { color: #2c2c2c !important; text-decoration: none !important; display: block !important; transition: color 0.3s ease !important; } body.template-collection .product-tile .product-main-title a:hover { color: #1A767A !important; } /* Size Row */ body.template-collection .product-tile .size-row { margin-top: auto !important; margin-bottom: 4px !important; width: 100% !important; } body.template-collection .product-tile .product-size { font-family: 'Poppins', 'TT Commons', 'APPARAT', 'Nunito Sans', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; color: #666 !important; margin: 0 !important; line-height: 1.3 !important; } /* Star Rating Badge on Product Image - Judge.me */ body.template-collection .product-tile .rating-badge-no-border { position: absolute !important; top: 8px !important; left: 8px !important; z-index: 999 !important; border-radius: 6px !important; padding: 4px 8px !important; transition: all 0.3s ease !important; pointer-events: none !important; display: block !important; visibility: visible !important; border: none !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important; outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; box-shadow: none !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 12px !important; color: #333 !important; text-decoration: none !important; margin: 0 !important; opacity: 0 !important; transform: translateZ(0) !important; will-change: opacity !important; } /* Show rating badge on hover */ body.template-collection .product-tile:hover .rating-badge-no-border { opacity: 1 !important; } /* Ensure proper positioning within image container */ body.template-collection .product-tile .prod-img-box { position: relative !important; overflow: hidden !important; } /* Hide rating on very small screens or when image is too small */ @media (max-width: 480px) { body.template-collection .product-tile .rating-badge-no-border { top: 6px !important; left: 6px !important; padding: 3px 6px !important; border-radius: 3px !important; font-size: 10px !important; } } /* Grid Container - Match Home Page Layout */ body.template-collection .home-product-full-width { width: 100vw !important; margin: 0 !important; padding: 0 !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; } body.template-collection .home-product .product-grid-container { width: 100% !important; max-width: 1440px !important; margin: 0 auto !important; padding: 0 20px !important; } body.template-collection .home-product .product-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; width: 100% !important; max-width: 1200px !important; align-items: stretch !important; justify-items: center !important; margin: 0 auto !important; padding: 0 20px !important; } /* Remove default Shopify styling */ body.template-collection .card-wrapper, body.template-collection .card { background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; } /* Collection filters styling */ body.template-collection .facet-filters { max-width: 1440px !important; margin: 0 auto !important; padding: 0 40px 20px 40px !important; background: #fff !important; border-bottom: 1px solid #e5e5e5 !important; margin-bottom: 20px !important; } body.template-collection .facet-filters__inner { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 20px !important; } body.template-collection .facet-filters__sort { display: flex !important; align-items: center !important; gap: 12px !important; } body.template-collection .facet-filters__label { font-family: 'Poppins', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: #333 !important; margin: 0 !important; } body.template-collection .product-count { font-family: 'Poppins', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #666 !important; margin: 0 !important; } /* Add to Cart Button - Always Visible */ body.template-collection .product-tile .quick-add { margin-top: auto !important; padding: 8px !important; width: 100% !important; min-height: 52px !important; box-sizing: border-box !important; } body.template-collection .product-tile .quick-add__submit { width: 100% !important; padding: 12px 16px !important; background: transparent !important; color: #1A767A !important; border: 1px solid #1A767A !important; border-radius: 8px !important; font-family: 'Poppins', 'TT Commons', 'APPARAT', 'Nunito Sans', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.3s ease !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; overflow: hidden !important; } body.template-collection .product-tile .quick-add__submit:hover { background: transparent !important; color: #0F6D59 !important; border-color: #0F6D59 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(26, 118, 122, 0.2) !important; } body.template-collection .product-tile .quick-add__submit:disabled { background: rgba(200,200,200,0.8) !important; color: #666 !important; cursor: not-allowed !important; } body.template-collection .product-tile .quick-add__submit:disabled:hover { transform: none !important; box-shadow: none !important; } /* Responsive Design */ @media (max-width: 1024px) { body.template-collection .home-product .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; /* Reduced from 20px to match collection pages */ } body.template-collection .home-product .product-grid-container { padding: 0 16px !important; } body.template-collection .product-tile { min-height: 380px !important; } body.template-collection .facet-filters { padding: 0 16px 20px 16px !important; } } @media (max-width: 768px) { body.template-collection .home-product .product-grid { grid-template-columns: 1fr !important; gap: 24px !important; } body.template-collection .product-tile { max-width: 380px !important; margin: 0 auto !important; min-height: 320px !important; } body.template-collection .product-tile .product-main-title { font-size: 18px !important; } body.template-collection .product-tile .product-brand-category { font-size: 11px !important; } body.template-collection .product-tile .product-price { font-size: 14px !important; } body.template-collection .product-tile .product-size { font-size: 11px !important; } body.template-collection .home-product .product-grid-container { padding: 0 12px !important; } body.template-collection .facet-filters { padding: 0 12px 20px 12px !important; } body.template-collection .facet-filters__inner { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; } } /* ===================================================== ULTIMATE COLLECTION PAGE BUTTON OVERRIDE - MAXIMUM SPECIFICITY ===================================================== */ /* Force transparent buttons on collection pages - ULTIMATE OVERRIDE */ html body.template-collection .product-tile .quick-add .quick-add__submit, html body.template-collection .grid .grid__item .quick-add .quick-add__submit, html body.template-collection .home-product .product-tile .quick-add .quick-add__submit, html body.template-collection .product-grid .grid__item .quick-add .quick-add__submit, html body.template-collection .quick-add__submit.button, html body.template-collection button.quick-add__submit, html body.template-collection input[type="submit"].quick-add__submit, html body.template-collection .quick-add__submit[type="submit"], html body.template-collection .product-tile .quick-add__submit, html body.template-collection .card .quick-add__submit, html body.template-collection .card-wrapper .quick-add__submit { background: transparent !important; background-color: transparent !important; background-image: none !important; color: #1A767A !important; border: 1px solid #1A767A !important; border-radius: 8px !important; font-family: 'Poppins', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; padding: 12px 16px !important; min-height: 44px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.3s ease !important; box-shadow: none !important; text-decoration: none !important; /* Override Shopify CSS Variables */ --color-button: transparent !important; --color-button-text: #1A767A !important; --color-base-solid-button-labels: #1A767A !important; --alpha-button-background: 0 !important; --gradient-base-background-1: transparent !important; --gradient-base-background-2: transparent !important; } /* Hover state - still transparent */ html body.template-collection .product-tile .quick-add .quick-add__submit:hover, html body.template-collection .grid .grid__item .quick-add .quick-add__submit:hover, html body.template-collection .home-product .product-tile .quick-add .quick-add__submit:hover, html body.template-collection .product-grid .grid__item .quick-add .quick-add__submit:hover, html body.template-collection .quick-add__submit.button:hover, html body.template-collection button.quick-add__submit:hover, html body.template-collection input[type="submit"].quick-add__submit:hover, html body.template-collection .quick-add__submit[type="submit"]:hover, html body.template-collection .product-tile .quick-add__submit:hover, html body.template-collection .card .quick-add__submit:hover, html body.template-collection .card-wrapper .quick-add__submit:hover { background: transparent !important; background-color: transparent !important; background-image: none !important; color: #0F6D59 !important; border-color: #0F6D59 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(26, 118, 122, 0.2) !important; /* Override Shopify CSS Variables on hover */ --color-button: transparent !important; --color-button-text: #0F6D59 !important; --color-base-solid-button-labels: #0F6D59 !important; --alpha-button-background: 0 !important; --gradient-base-background-1: transparent !important; --gradient-base-background-2: transparent !important; } /* Remove any pseudo-elements that might add backgrounds */ html body.template-collection .quick-add__submit:before, html body.template-collection .quick-add__submit:after { display: none !important; content: none !important; background: none !important; } /* Override any additional button classes */ html body.template-collection .button--secondary.quick-add__submit, html body.template-collection .button--full-width.quick-add__submit, html body.template-collection .button.button--secondary.quick-add__submit, html body.template-collection .button.button--full-width.quick-add__submit { background: transparent !important; background-color: transparent !important; background-image: none !important; color: #1A767A !important; border: 1px solid #1A767A !important; } html body.template-collection .button--secondary.quick-add__submit:hover, html body.template-collection .button--full-width.quick-add__submit:hover, html body.template-collection .button.button--secondary.quick-add__submit:hover, html body.template-collection .button.button--full-width.quick-add__submit:hover { background: transparent !important; background-color: transparent !important; background-image: none !important; color: #0F6D59 !important; border-color: #0F6D59 !important; } /* ======================================== MENU ITEMS - CRISP AND UPPERCASE STYLING ======================================== */ /* Desktop menu items - main navigation */ .header__inline-menu .header__menu-item { text-transform: uppercase !important; font-weight: 500 !important; letter-spacing: 0.5px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 1.3rem !important; } /* Desktop menu items - spans inside links */ .header__inline-menu .header__menu-item span { text-transform: uppercase !important; font-weight: 500 !important; letter-spacing: 0.5px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 1.3rem !important; } /* Mobile menu drawer main items */ .menu-drawer__menu-item { text-transform: uppercase !important; font-weight: 400 !important; letter-spacing: 0.5px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 1.3rem !important; } /* Desktop submenu items */ .header__submenu .header__menu-item { text-transform: uppercase !important; font-weight: 500 !important; letter-spacing: 0.3px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 1.2rem !important; } /* Mobile submenu items */ .menu-drawer__submenu .menu-drawer__menu-item { text-transform: uppercase !important; font-weight: 400 !important; letter-spacing: 0.3px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 1.2rem !important; } /* Mega menu items */ .mega-menu__link { text-transform: uppercase !important; font-weight: 400 !important; letter-spacing: 0.3px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 1.2rem !important; } /* Menu drawer close button */ .menu-drawer__close-button { text-transform: uppercase !important; font-weight: 400 !important; letter-spacing: 0.5px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 1.3rem !important; } /* Summary elements in desktop menu */ .header__inline-menu summary.header__menu-item { text-transform: uppercase !important; font-weight: 500 !important; letter-spacing: 0.5px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 1.3rem !important; } /* Summary elements in mobile menu */ .menu-drawer__navigation summary.menu-drawer__menu-item { text-transform: uppercase !important; font-weight: 400 !important; letter-spacing: 0.5px !important; font-family: 'Nunito Sans', sans-serif !important; font-size: 1.3rem !important; } /* ======================================== END MENU ITEMS STYLING ======================================== */ /* Newsletter field styling */ .newsletter-form__field-wrapper .field-row { width: 100%; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: stretch !important; gap: 5px; } .field-row .field__input_custom { padding: 12px; flex: 1 1 auto !important; border: 2px solid #333; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif; font-weight: 300; transition: border-color 0.3s ease; min-width: 0 !important; height: 44px !important; width: auto !important; box-sizing: border-box; } .field-row .field__input_custom:focus { border-color: #1f747b; outline: none; } .field-row .newsletter-form__button { background: #333 !important; color: #fff; padding: 0 15px !important; border: none; font-size: 16px; font-family: 'Nunito Sans', 'Helvetica Neue', sans-serif; font-weight: 600; transition: all 0.3s ease; position: relative !important; flex: 0 0 auto !important; white-space: nowrap !important; height: 44px !important; min-width: 100px; margin: 0 !important; box-sizing: border-box; } .field-row .newsletter-form__button:hover { background: #222 !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(51, 51, 51, 0.3); } /* Footer alignment fixes */ .footer_block_newsletter_custm .footer-block__newsletter { text-align: center; margin: 0 auto; width: 100%; } .footer_block_newsletter_custm .join-text-box h2 { text-align: center; margin-bottom: 5px; } .footer_block_newsletter_custm .join-text-box p { text-align: center; margin-top: 5px; } .footer-block.footer-block--newsletter .footer__list-social.list-social { justify-content: center !important; margin-top: 1rem; } @media screen and (max-width: 749px) { .footer-block__newsletter { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; margin: 0 auto; } .newsletter-form { width: 100% !important; } .newsletter-form__field-wrapper { width: 100% !important; } .newsletter-form__field-wrapper .field-row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: stretch !important; width: 100% !important; gap: 5px !important; } .field-row .field__input_custom { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; height: 40px !important; } .field-row .newsletter-form__button { flex: 0 0 auto !important; height: 40px !important; padding: 0 15px !important; white-space: nowrap !important; margin: 0 !important; } } /* Extra small screens */ @media screen and (max-width: 480px) { .newsletter-form__field-wrapper .field-row { gap: 3px !important; } .field-row .field__input_custom { padding: 8px !important; height: 36px !important; } .field-row .newsletter-form__button { padding: 0 10px !important; font-size: 13px !important; height: 36px !important; min-width: 80px !important; } } /* Footer newsletter form styling */ .footer-block__newsletter { width: 100%; max-width: 450px; margin: 0 auto; } .newsletter-form { width: 100%; } .newsletter-form__field-wrapper { width: 100%; } /* ======================================== RESPONSIVE FIXES FOR ALL SCREEN SIZES ======================================== */ /* Tablet-specific styles (750px-990px) */ @media screen and (min-width: 750px) and (max-width: 990px) { /* Header spacing adjustments */ .header { padding: 10px 0; } /* Improve product grid layout */ .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } /* Adjust font sizes */ h1, .h1 { font-size: calc(var(--font-heading-scale) * 3.2rem) !important; } h2, .h2 { font-size: calc(var(--font-heading-scale) * 2.8rem) !important; } /* Collection page adjustments */ .collection .product-grid-container { padding: 0 30px !important; } /* Newsletter form adjustments */ .newsletter-form__field-wrapper { width: 100% !important; max-width: 500px !important; } } /* Mobile-specific styles (480px-749px) */ @media screen and (min-width: 481px) and (max-width: 749px) { /* Header adjustments */ .header { padding: 8px 0; } /* Adjust font sizes */ h1, .h1 { font-size: calc(var(--font-heading-scale) * 2.6rem) !important; } h2, .h2 { font-size: calc(var(--font-heading-scale) * 2.2rem) !important; } /* Product grid layout */ .product-grid, .grid--2-col-tablet-down { grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; } /* Improve product card on mobile */ .card-wrapper { max-width: none !important; width: 100% !important; } /* Collection page adjustments */ .collection .product-grid-container { padding: 0 20px !important; } /* Fix buttons on mobile */ .button, .btn, .product-form__submit { font-size: 1.3rem !important; min-height: 44px; } /* Image alignment fixes */ .image-with-text__media { margin-bottom: 20px; } } /* Small mobile-specific styles (under 480px) */ @media screen and (max-width: 480px) { /* Adjust page padding */ .page-width { padding: 0 5px !important; margin: 0 0.5rem !important; } /* Header adjustments */ .header { padding: 5px 0; } /* Font size adjustments */ h1, .h1 { font-size: calc(var(--font-heading-scale) * 2.2rem) !important; line-height: 1.3 !important; } h2, .h2 { font-size: calc(var(--font-heading-scale) * 1.8rem) !important; line-height: 1.3 !important; } /* Force single column layout */ .product-grid, .grid--1-col-tablet-down { grid-template-columns: 1fr !important; gap: 15px !important; } /* Make cards fill width */ .card-wrapper { max-width: 100% !important; width: 100% !important; margin: 0 auto !important; } /* Fix image banners */ .image-with-text__content { padding: 20px !important; } /* Collection page fixes */ .collection .product-grid-container { padding: 0 15px !important; } /* Fix buttons for small screens */ .button, .btn, .product-form__submit { font-size: 1.2rem !important; min-height: 42px; padding: 10px 15px !important; } /* Fix cart button visibility */ .cart-notification { width: 100% !important; left: 0 !important; right: 0 !important; bottom: 0 !important; border-radius: 0 !important; } /* Newsletter form mobile optimization */ .newsletter-form { padding: 0 !important; } .newsletter-form__field-wrapper .field-row { flex-direction: column !important; } .newsletter-form__field-wrapper .field__input { width: 100% !important; margin-bottom: 10px !important; border-radius: 8px !important; } .newsletter-form__button { width: 100% !important; border-radius: 8px !important; } /* Banner text adjustments */ .banner__content { padding: 15px !important; } /* Fix multicolumn layout */ .multicolumn-card { max-width: 100% !important; } } /* Cart drawer specific fixes */ @media screen and (max-width: 749px) { .cart-drawer { width: 100% !important; } .cart-drawer__header { padding: 15px !important; } .cart-item__name { font-size: 1.4rem !important; } .cart-item__price-wrapper { font-size: 1.4rem !important; } } /* Fixing vertical spacing between sections */ @media screen and (max-width: 749px) { .section + .section { margin-top: 3rem !important; } .spacing-section { padding-top: 3rem !important; padding-bottom: 3rem !important; } .rich-text { padding-top: 3rem !important; padding-bottom: 3rem !important; } .newsletter { padding-top: 3rem !important; padding-bottom: 3rem !important; } /* Fix footer block spacing */ .footer-block { margin-bottom: 2rem !important; } /* Adjust product vertical spacing */ .product__info-wrapper { padding-top: 20px !important; } /* Make blog titles readable */ .article-card__title { font-size: 1.8rem !important; line-height: 1.3 !important; } } /* ======================================== OPTIMIZATIONS FOR THEDEWYSKIN ELEMENTS ======================================== */ /* Customer support page mobile fixes */ @media screen and (max-width: 749px) { .custom-testimonial-main .left-inner-col { flex-wrap: wrap !important; } .custom-testimonial-main .right-content-box h3 { font-size: 1.8rem !important; line-height: 1.3 !important; } /* Mobile fix for custom image text sections */ .custom-image-main .heading-image { padding: 15px !important; } /* Testimonial mobile fixes */ .home-testimonial-image .flx-left, .home-testimonial-image .flx-right { flex: 100% !important; max-width: 100% !important; padding: 15px !important; } } /* ======================================== RESPONSIVE FORM FIXES ======================================== */ /* Form field improvements on small screens */ @media screen and (max-width: 749px) { .contact-form { margin-top: 20px !important; } .form__label { font-size: 1.4rem !important; } .field__input, .select__select { padding: 12px !important; font-size: 1.4rem !important; } /* Form validation message improvements */ .form__message { font-size: 1.3rem !important; padding: 8px !important; } /* Query form specific improvements */ .query-form .field-row { flex-wrap: wrap !important; gap: 10px !important; } .query-form .field-col { flex: 100% !important; max-width: 100% !important; } } /* ======================================== EXPLORE BY TOPIC SECTION FIXES ======================================== */ /* Base styles for Explore by Topic section */ .explore-topics-section { width: 100%; max-width: 1500px; margin: 0 auto; padding: 2rem 0; } .explore-topics-heading { text-align: center; font-size: 2.5rem; margin-bottom: 2.5rem; font-weight: 500; font-family: 'Playfair Display', 'Cormorant Garamond', 'Times New Roman', 'Georgia', serif; color: #333; } .topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; width: 100%; } .topic-card { display: flex; flex-direction: column; align-items: flex-start; } .topic-heading { font-size: 1.8rem; margin-bottom: 1rem; font-weight: 500; font-family: 'Playfair Display', 'Cormorant Garamond', 'Times New Roman', 'Georgia', serif; color: #333; } .topic-description { color: #555; font-size: 1rem; line-height: 1.5; margin-bottom: 1.5rem; } .topic-link { color: #1A767A; text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; } .topic-link:hover { text-decoration: underline; } .topic-link svg { margin-left: 0.5rem; } /* Mobile-specific fixes for Explore by Topic */ @media screen and (max-width: 749px) { .explore-topics-heading { font-size: 2rem; margin-bottom: 1.5rem; padding: 0 1rem; } .topic-grid { grid-template-columns: 1fr; gap: 2rem; padding: 0 1.5rem; } .topic-card { text-align: center; align-items: center; margin-bottom: 2rem; } .topic-heading { font-size: 1.6rem; margin-bottom: 0.8rem; width: 100%; text-align: center; } .topic-description { text-align: center; margin-bottom: 1.2rem; width: 100%; } .topic-link { margin: 0 auto; } } /* Tablet-specific adjustments */ @media screen and (min-width: 750px) and (max-width: 989px) { .topic-grid { gap: 1.5rem; padding: 0 1.5rem; } .topic-heading { font-size: 1.7rem; } } /* General mobile fixes for pagination dots and buttons */ .slider-counter { display: flex; justify-content: center; align-items: center; margin-top: 1.5rem; } .slider-counter__link { color: rgba(0, 0, 0, 0.5); padding: 0.5rem; } .slider-counter__link--active { color: rgba(0, 0, 0, 1); text-decoration: underline; } .slider-buttons { display: flex; justify-content: space-between; margin-top: 1rem; } .slider-button { background: transparent; border: none; padding: 0.5rem; cursor: pointer; } /* Fix for the specific issue in the screenshot */ @media screen and (max-width: 749px) { /* Make sure topic titles are properly aligned */ h1, h2, h3 { text-align: center; } /* Fix View Articles button alignment */ .topic-card .topic-link { display: block; width: 100%; text-align: center; margin-top: 1rem; } /* Fix pagination at bottom */ .slider-pagination { display: flex; justify-content: center; margin-top: 2rem; } } /* Specific fixes for "Explore by Topic" section in mobile view */ @media screen and (max-width: 749px) { /* Main heading "Explore by Topic" */ .blog__bottom-heading { font-size: 1.8rem !important; margin-bottom: 1.5rem; font-weight: 500 !important; } /* Topic title headings */ .blog h1, .blog h2, .blog h3 { font-size: 1.8rem !important; line-height: 1.3 !important; text-align: center; margin-bottom: 1.8rem; font-weight: 500 !important; /* Reduced from default bold/600/700 */ } /* Add more specific selectors for topic headings */ .blog .article-card .card__heading, .blog .article-card h3, .blog .topic-heading, .blog .slider__slide h2, .blog .slider__slide h3 { font-size: 1.2rem !important; line-height: 1.3 !important; font-weight: 500 !important; /* Medium weight instead of bold */ margin-bottom: 0.5rem; text-align: center; } /* View Articles links */ .blog .view-articles { display: block; width: 100%; text-align: center; margin: 0.5rem auto; font-size: 0.9rem !important; } /* Topic descriptions */ .blog .topic-description, .blog p { text-align: center; width: 100%; margin-bottom: 1rem; font-size: 0.95rem !important; font-weight: 400 !important; /* Normal weight */ } } /* Force proper single column layout for "Explore by Topic" on mobile */ @media screen and (max-width: 749px) { /* Force slider to show only one item per row */ .blog .slider { display: block !important; width: 100% !important; } @media screen and (max-width: 749px) { /* Force slider to show only one item per row */ .blog h3 { font-size: 1.8rem !important; line-height: 1.3 !important; text-align: center; margin-bottom: 1.8rem; font-weight: 600 !important; } /* Fix each slider slide to be full width */ .blog .slider .slider__slide { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; display: block !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 1rem; margin-bottom: 2rem; } /* Force grid layout to be single column */ .blog .grid { display: block !important; grid-template-columns: 1fr !important; } /* Fix grid items to take full width */ .blog .grid__item, .blog .grid > div { width: 100% !important; max-width: 100% !important; display: block !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 2rem; padding-left: 1rem; padding-right: 1rem; } /* Target specific explore by topic columns */ .blog__bottom-section + div, div[id*="Slider-"] { display: block !important; } /* Fix multicolumn section layout */ .multicolumn .grid { display: block !important; padding: 0 !important; } .multicolumn .grid__item { width: 100% !important; max-width: 100% !important; margin-bottom: 2rem; display: block !important; } /* Fix slider component behavior */ .slider-component:not(.slider-component--slider) { overflow: visible !important; } .slider-component .slider { width: auto !important; transform: none !important; padding-bottom: 0 !important; } /* Fix specific slider component issues */ .slider.slider--mobile { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; } .slider.slider--mobile .slider__slide { width: 100% !important; flex: 0 0 100% !important; } /* Fix pagination display */ .slider-counter { margin-top: 1rem; } } /* Extra small screens require even more spacing */ @media screen and (max-width: 480px) { .blog .slider .slider__slide, .blog .grid__item { margin-bottom: 2.5rem; } } /* Final Override: Blog Page & Global Buttons */ .button, .button--primary, .product-form__submit, .cart__checkout-button, .btn, input[type="submit"].btn, .newsletter-form__button, .search__button, button[type="submit"]:not(.drawer__close):not(.slider-button):not(.quantity__button):not(.cart-remove-button button):not(.modal__close-button):not(.menu-drawer__close-button), .formAtcForm input[type="submit"] { background-color: #ffffff !important; color: #333 !important; border: 1px solid #cccccc !important; border-radius: 4px !important; padding: 12px 20px !important; box-shadow: none !important; transform: none !important; transition: background-color 0.3s ease, color 0.3s ease !important; } .button:hover, .button--primary:hover, .product-form__submit:hover, .cart__checkout-button:hover, .btn:hover, input[type="submit"].btn:hover, .newsletter-form__button:hover, .search__button:hover, button[type="submit"]:not(.drawer__close):not(.slider-button):not(.quantity__button):not(.cart-remove-button button):not(.modal__close-button):not(.menu-drawer__close-button):hover, .formAtcForm input[type="submit"]:hover { background-color: #666666 !important; color: #ffffff !important; } /* Blog Page Form Atc Button Overrides */ body.template-blog .home-product .formAtcForm input[type="submit"] { background-color: #ffffff !important; color: #333333 !important; border: 1px solid #cccccc !important; border-radius: 4px !important; padding: 12px 0 !important; width: calc(100% - 32px) !important; margin: 16px !important; text-align: center !important; } body.template-blog .home-product .formAtcForm input[type="submit"]:hover { background-color: #666666 !important; color: #ffffff !important; } /* Blog Page Persistent Button Hover Override */ body.template-blog .home-product .add-to-cart-footer button.add-to-cart-btn:hover { background-color: #666666 !important; color: #ffffff !important; } /* FIX FOR PRODUCT TILES STYLING ON COLLECTION PAGES */ @media screen and (min-width: 750px) { /* Improved product grid layout - Reduced gap for desktop */ .collection #product-grid, .collection .grid.product-grid, body.template-collection .collection #product-grid, html body.template-collection .collection #product-grid, body.template-collection .collection .grid.product-grid, html body.template-collection .collection .grid.product-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; align-items: stretch !important; justify-items: center !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important; } /* Fix card appearance - remove all styling to prevent double borders */ .collection .card-wrapper, .collection .card { height: auto !important; background: transparent !important; border: none !important; border-radius: 0 !important; overflow: visible !important; padding: 0 !important; box-shadow: none !important; transition: none !important; display: block !important; flex-direction: unset !important; } /* CRITICAL: Override theme default borders from component-card.css */ .collection .card--card, .collection .card--standard .card__inner { border: none !important; border-radius: 0 !important; border-width: 0 !important; box-shadow: none !important; background: transparent !important; } .collection .card--card:after, .collection .card--standard .card__inner:after { display: none !important; box-shadow: none !important; } /* Fix card interior structure */ .collection .card__inner { background: transparent !important; border: none !important; padding: 0 !important; height: 100% !important; display: flex !important; flex-direction: column !important; } /* Fix product title styling */ .collection .card__information h3, .collection .card__heading { font-family: 'Ogg', 'Cormorant Garamond', serif !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1.3 !important; color: #333 !important; margin: 0 0 8px 0 !important; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; width: 100% !important; display: block !important; } /* Fix price styling */ .collection .price { font-family: 'Poppins', 'Nunito Sans', sans-serif !important; font-size: 16px !important; font-weight: 500 !important; color: #1A767A !important; margin: 8px 0 !important; } /* Fix product size/variant display */ .collection .card__information .product-size { font-family: 'Poppins', 'Nunito Sans', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #666 !important; margin-top: 6px !important; display: block !important; visibility: visible !important; } /* Make star ratings visible */ .collection .rating-badge-no-border { visibility: visible !important; opacity: 1 !important; display: flex !important; position: absolute !important; top: 10px !important; left: 10px !important; z-index: 5 !important; } /* Fix add to cart button */ .collection .button { padding: 8px 16px !important; margin-top: 10px !important; min-height: 44px !important; font-size: 14px !important; font-weight: 500 !important; } } /* Mobile collection page fixes */ @media screen and (max-width: 749px) { /* Let conditional logic in main-collection-product-grid.liquid handle display states */ /* Removed conflicting display rules to allow proper mobile/slider toggling */ /* High specificity mobile slider styles */ body.template-collection .collection .product-slider--mobile .swiper-container, html body.template-collection .collection .product-slider--mobile .swiper-container { overflow: visible !important; padding: 0 20px !important; margin: 0 !important; } body.template-collection .collection .product-slider--mobile .swiper-slide, html body.template-collection .collection .product-slider--mobile .swiper-slide { height: auto !important; /* width: auto !important; - REMOVED to allow swiper slidesPerView to control width */ margin-right: 0 !important; flex-shrink: 0 !important; } /* Simple mobile collection slider overrides to hide on desktop */ @media screen and (min-width: 768px) { .collection .product-slider--mobile { display: none !important; } } /* Mobile padding for slider when enabled - but let conditional logic control display */ @media screen and (max-width: 767px) { .collection .product-slider--mobile { padding: 0 4px !important; /* Small padding for proper card visibility */ } } /* Extra optimization for very small screens */ @media screen and (max-width: 480px) { .collection .product-slider--mobile { padding: 0 0px !important; /* Minimal padding for small screens */ } .collection-products-swiper .swiper-slide { width: calc(100% - 10px) !important; /* Full width with small preview on small screens */ margin-right: 5px !important; /* Adequate spacing for proper card visibility */ } } /* Ensure desktop product tiles also have consistent height */ @media screen and (min-width: 750px) { body.template-collection .product-tile, html body.template-collection .product-tile { height: auto !important; min-height: 500px !important; display: flex !important; flex-direction: column !important; } body.template-collection .product-tile .inner-grid-item, html body.template-collection .product-tile .inner-grid-item { height: 100% !important; display: flex !important; flex-direction: column !important; } body.template-collection .product-tile .product-info-main, html body.template-collection .product-tile .product-info-main { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } } /* ULTIMATE OVERRIDE: Force swiper slides to allow fixed height on collection mobile slider */ html body.template-collection .home-product .collection .product-slider--mobile .swiper-container .swiper-wrapper .swiper-slide { height: unset !important; min-height: unset !important; max-height: unset !important; display: flex !important; align-items: stretch !important; flex-direction: column !important; } /* Working mobile collection slider styles (from custom-product-sec) */ .collection-products-swiper { width: 100% !important; overflow: visible !important; padding-bottom: 40px !important; } .collection-products-swiper .swiper-wrapper { align-items: stretch !important; } .collection-products-swiper .swiper-slide { width: calc(100% - 12px) !important; /* Full width cards with tiny preview */ margin-right: 8px !important; /* Spacing for card separation */ height: auto !important; display: flex !important; flex-direction: column !important; } .collection-products-swiper .swiper-slide .product-tile { height: 100% !important; background: #fff !important; border-radius: 8px !important; overflow: hidden !important; /* box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; */ transition: all 0.3s ease !important; } .collection-products-swiper .swiper-slide .product-tile:hover { transform: translateY(-2px) !important; box-shadow: none !important; } /* Pagination dots styling */ .collection-products-swiper .swiper-pagination { position: relative !important; text-align: center !important; margin-top: 20px !important; } .collection-products-swiper .swiper-pagination-bullet { width: 8px !important; height: 8px !important; background: #ccc !important; /* Grey color for inactive dots */ opacity: 1 !important; transition: all 0.3s ease !important; } .collection-products-swiper .swiper-pagination-bullet-active { background: #888 !important; /* Darker grey for active dot */ width: 20px !important; border-radius: 4px !important; } /* Ensure price text doesn't get trimmed */ .collection-products-swiper .product-tile .product-price, .collection-products-swiper .product-tile .price-on-sale, .collection-products-swiper .product-tile .price-regular { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } /* Optimize text area to use more space with wider cards */ .collection-products-swiper .product-tile .product-info-content { padding: 8px 8px 8px 8px !important; /* More padding on left, less on right */ } /* Ensure product info sections have enough width and proper alignment */ .collection-products-swiper .product-tile .subheading-price-row, .collection-products-swiper .product-tile .title-row, .collection-products-swiper .product-tile .size-row { width: 100% !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; } /* Better text alignment and spacing */ .collection-products-swiper .product-tile .product-main-title, .collection-products-swiper .product-tile .product-sub-title { text-align: left !important; margin: 0 !important; padding: 0 !important; } /* Price section optimization */ .collection-products-swiper .product-tile .subheading-price-row { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; margin-bottom: 8px !important; } .collection-products-swiper .product-tile .product-sub-title-container { flex: 1 !important; text-align: left !important; } .collection-products-swiper .product-tile .product-price { flex-shrink: 0 !important; margin-left: 8px !important; text-align: right !important; /* Align price to the right */ } /* Ensure all price elements are right-aligned */ .collection-products-swiper .product-tile .price-on-sale, .collection-products-swiper .product-tile .price-regular { text-align: right !important; display: block !important; } /* Collection Page Filters, Sort By, and Results Styling */ /* Filter and sort controls */ .collection .facet-filters, .collection .collection-filters, .collection .facet-filters__field, .collection .facet-filters__button, .collection .facet-filters__label, .collection .facets__summary, .collection .facets__display, .collection .facets__selected, .collection .sort-dropdown, .collection .sort__button, .collection .select__select, .collection .field__input, .collection .field__label, .collection summary[role="button"], .collection .facets summary, .collection .facets details, .collection .facets__form .field, .collection .collection-filters summary, .collection .collection-filters details, .collection .filter-group-display__list-item, .collection .active-facets { font-family: 'Noto Sans', Arial, sans-serif !important; color: #484848 !important; } /* Results count text */ .collection .collection-product-count, .collection .results-count, .collection h1, .collection .collection__title, .collection .section-header__title, .template-collection h1, .template-collection .collection-hero__title, body.template-collection h1, body.template-collection .collection-hero__title, body.template-collection .page-title, body.template-collection .collection-product-count, body.template-collection .results-count { font-family: 'Noto Sans', Arial, sans-serif !important; color: #484848 !important; } /* Filter and Sort labels specifically */ .collection [data-facet-type], .collection .facets__heading, .collection .collection-filters__label, .collection .sort-label, .collection .filter-label, .collection summary .facets__selected, .collection .active-facets__button, .collection .active-facets__button-inner { font-family: 'Noto Sans', Arial, sans-serif !important; color: #484848 !important; } /* Specific targeting for "Filter and sort" button */ body.template-collection button[aria-expanded], body.template-collection .facets summary, body.template-collection .mobile-facets__wrapper summary, body.template-collection .mobile-facets__summary, body.template-collection .facets__summary { font-family: 'Noto Sans', Arial, sans-serif !important; color: #484848 !important; } /* Product count and results */ body.template-collection .product-count, body.template-collection .product-count__text, body.template-collection #ProductCount, body.template-collection [id*="product"], body.template-collection [class*="product-count"], body.template-collection [class*="results"], body.template-collection .product-count-vertical, .product-count-vertical { font-family: 'Noto Sans', Arial, sans-serif !important; color: #484848 !important; } /* Additional specific selectors from collection template */ .collection .facet-filters__label, .collection .facet-filters__sort, .collection .select__select, .collection .caption-large, .collection .text-body, body.template-collection .facet-filters__label, body.template-collection .facet-filters__sort, body.template-collection .select__select, body.template-collection .caption-large, body.template-collection .text-body, body.template-collection label[for="SortBy"], .facets-vertical-sort .facet-filters__label, .facets-vertical-sort .facet-filters__sort, .facets-vertical-form .facet-filters__label { font-family: 'Noto Sans', Arial, sans-serif !important; color: #484848 !important; } /* Collection filters section styling */ .collection-filters .collection-filter-label, .collection-filters .collection-filter-select, .collection-filters-inner { font-family: 'Noto Sans', Arial, sans-serif !important; color: #484848 !important; } /* Additional coverage for any missed elements */ body.template-collection .facets-wrapper, body.template-collection .facets-wrapper *, body.template-collection .collection-filters *, body.template-collection #main-collection-filters, body.template-collection #main-collection-filters *, .template-collection .facets-container, .template-collection .facets-container *, .template-collection .sorting, .template-collection .sorting * { font-family: 'Noto Sans', Arial, sans-serif !important; color: #484848 !important; } /* Target specific text content */ .collection *[class*="product"]:not([class*="product-tile"]):not([class*="product-card"]), .collection *[class*="filter"]:not([class*="product"]), .collection *[class*="sort"]:not([class*="product"]), .collection *[class*="facet"]:not([class*="product"]), .collection *[class*="count"]:not([class*="product"]) { font-family: 'Noto Sans', Arial, sans-serif !important; color: #484848 !important; } /* HOME PAGE DESKTOP GRID SPACING CONSISTENCY - DESKTOP VIEW ONLY */ @media screen and (min-width: 750px) { /* Reduce swiper slide spacing on home page desktop for tighter layout */ .home-product .swiper-slide { margin-right: 2px !important; /* Further reduced for tighter spacing */ } .home-product .swiper-slide:last-child { margin-right: 0 !important; } /* Ensure all home product grids use consistent gap on desktop */ .home-product .product-grid, body.template-collection .home-product .product-grid { gap: 12px !important; } } /* Tablet view consistency (768px to 1024px) */ @media screen and (min-width: 768px) and (max-width: 1024px) { .home-product .product-grid, body.template-collection .home-product .product-grid { gap: 12px !important; } } .collection .card-wrapper, .collection .card { background: transparent !important; padding: 0 !important; min-height: auto !important; max-width: none !important; margin: 0 !important; width: 100% !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* CRITICAL: Override theme default borders from component-card.css - Mobile */ .collection .card--card, .collection .card--standard .card__inner { border: none !important; border-radius: 0 !important; border-width: 0 !important; box-shadow: none !important; background: transparent !important; } .collection .card--card:after, .collection .card--standard .card__inner:after { display: none !important; box-shadow: none !important; } .collection .card__heading { font-size: 18px !important; font-weight: 500 !important; line-height: 1.3 !important; overflow: visible !important; white-space: normal !important; } .collection .price { font-size: 15px !important; } } /* Fix for product size display */ .collection .card__information::after { content: attr(data-product-size); display: block; font-family: 'Poppins', 'Nunito Sans', sans-serif !important; font-size: 14px !important; color: #666 !important; margin-top: 4px !important; } /* Fix for star ratings showing properly */ .collection .rating { visibility: visible !important; opacity: 1 !important; display: flex !important; align-items: center !important; margin-bottom: 8px !important; } /* Fix for ratings text */ .collection .rating-count { font-size: 14px !important; color: #666 !important; margin-left: 4px !important; font-family: 'Nunito Sans', sans-serif !important; } /* Remove dotted line boundary around products - ONLY product-tile should have styling */ .collection .card-wrapper { border: none !important; outline: none !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; } .collection .card { border: none !important; outline: none !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; } /* Specifically target any dotted borders - ensure only product-tile has styling */ .collection .grid__item, .collection .card-wrapper, .collection .card { border-style: none !important; border: none !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; outline: none !important; outline-style: none !important; } .collection .grid__item:last-child .card, .collection .grid__item:last-child .product-tile { border: none !important; outline: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; } /* Remove any dashed borders as well */ .collection [style*="border"]:not(.button):not(.product-tile), .collection [style*="outline"]:not(.product-tile) { border: none !important; outline: none !important; } /* Target the specific dashed border shown in the screenshot */ .collection [style*="border: 1px dashed"]:not(.product-tile), .collection [style*="border:1px dashed"]:not(.product-tile), .collection [style*="border-style: dashed"]:not(.product-tile), .collection [style*="border-style:dashed"]:not(.product-tile) { border: none !important; outline: none !important; } /* Comprehensive override for ALL card-related elements */ .collection .card, .collection .card-wrapper, .collection .grid__item, .collection .card__inner, .collection .card__media, .collection .card__content, .collection .card__information, .collection .card--card, .collection .card--standard, .collection .card--standard .card__inner, .collection .card-information { border: none !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important; outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; box-shadow: none !important; background: transparent !important; } /* Remove pseudo-elements that might add borders/shadows */ .collection .card--card:before, .collection .card--card:after, .collection .card--standard .card__inner:before, .collection .card--standard .card__inner:after, .collection .card:before, .collection .card:after, .collection .card-wrapper:before, .collection .card-wrapper:after { display: none !important; content: none !important; border: none !important; box-shadow: none !important; } /* Position collections dropdown for mobile view only */ @media screen and (max-width: 749px) { .collection-filters-inner { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; padding: 10px 0 !important; flex-wrap: wrap !important; } .collection-filter-label { font-family: 'Poppins', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: #333 !important; margin: 0 !important; white-space: nowrap !important; flex-shrink: 0 !important; } .collection-filter-select { min-width: 150px !important; max-width: 200px !important; padding: 8px 12px !important; font-size: 14px !important; } } /* Extra small screens need special handling */ @media screen and (max-width: 480px) { .collection-filters-inner { padding: 10px 0 !important; } .collection-filter-label { font-size: 13px !important; } .collection-filter-select { min-width: 130px !important; padding: 6px 10px !important; font-size: 13px !important; } } /* Fix product title alignment for mobile view */ @media screen and (max-width: 749px) { /* Product title alignment fix for collection pages */ .collection .card__heading, .collection .card__information h3, .collection .card__information .price, .collection .card__information .product-size, .collection .card__content { text-align: left !important; align-items: flex-start !important; } /* Product title alignment fix for home page and other sections */ .product-tile .product-main-title, .product-tile .product-title-container, .product-tile .title-row, .product-tile .product-sub-title, .product-tile .product-info-content h2.product_title, .product-tile .product-price, .product-tile .product-size { text-align: left !important; align-items: flex-start !important; justify-content: flex-start !important; } /* Fix for specific product cards */ .card__content, .card__information { align-items: flex-start !important; text-align: left !important; } /* Fix for any flex containers that might be centering content */ .product-tile .product-info-main, .product-tile .product-info-content, .product-tile .subheading-price-row { align-items: flex-start !important; text-align: left !important; } /* Make sure prices are also left aligned */ .price { text-align: left !important; justify-content: flex-start !important; } } /* Reduce gap around image in hydration section for mobile view */ @media screen and (max-width: 749px) { /* Target the hydration section model image */ .hydration-model { padding: 0px !important; margin: 0 !important; } .model-image-wrapper { max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .model-image { width: 100% !important; height: auto !important; max-height: 450px !important; object-fit: cover !important; margin: 0 !important; padding: 0 !important; } /* Reduce padding in the hydration grid container */ .hydration-grid { padding: 10px !important; gap: 0px !important; } /* Adjust the slide content padding */ .slide-content { padding: 10 !important; } /* Reduce section padding */ .hydration-slider-section .page-width { padding-left: 10px !important; padding-right: 10px !important; } } /* Refined styling for hydration section images in mobile view */ @media screen and (max-width: 749px) { /* Target the hydration section model image */ .hydration-model { padding: 0px !important; margin: 0 !important; } .model-image-wrapper { max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; } .model-image { width: 100% !important; height: auto !important; max-height: 450px !important; object-fit: cover !important; margin: 0 !important; padding: 0 !important; border-radius: 12px !important; } /* Make product image consistent with model image */ .hydration-product { padding: 0px !important; margin: 0 !important; } .product-image-wrapper { max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; } .product-image { width: 100% !important; height: auto !important; max-height: 280px !important; object-fit: cover !important; margin: 0 !important; padding: 0 !important; border-radius: 12px !important; } /* Adjust container padding */ .hydration-grid { padding: 0px !important; gap: 0px !important; } /* Add hover effects for both images */ .model-image-wrapper:hover, .product-image-wrapper:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important; transition: all 0.3s ease !important; } } /* Decrease gap around second image in hydration section for mobile view */ @media screen and (max-width: 749px) { /* Target the product image specifically */ .hydration-product { padding: 0 !important; margin: 0 !important; } .product-image-wrapper { max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; } /* Reduce any extra spacing around the image */ .product-image { width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; max-height: 250px !important; /* Slightly shorter than before */ } /* Ensure no extra spacing in the container */ .hydration-grid > div:last-child { padding-top: 0 !important; margin-top: 0 !important; } /* Adjust the side text spacing if present */ .side-text { padding: 10px !important; margin: 0 !important; } } /* Make second image in hydration section consistent with first image in mobile view */ @media screen and (max-width: 749px) { /* Apply consistent styling to both images */ .hydration-model .model-image-wrapper, .hydration-product .product-image-wrapper { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 0px !important; box-shadow: none !important; overflow: hidden !important; } .hydration-model .model-image, .hydration-product .product-image { width: 100% !important; height: auto !important; object-fit: cover !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; display: block !important; } /* Ensure second image has same dimensions/aspect ratio */ .hydration-product .product-image { height: auto !important; aspect-ratio: 1/1 !important; /* Square aspect ratio */ max-height: none !important; /* Remove height limitation */ } /* Remove any extra spacing in containers */ .hydration-model, .hydration-product { padding: 0 !important; margin: 0 !important; width: 100% !important; } /* Ensure no gaps between sections */ .hydration-grid { gap: 0 !important; padding: 0 !important; } /* Fix any container issues */ .hydration-grid > div { padding: 0 !important; margin: 0 !important; } } /* Increase spacing between Learn More button and second image in hydration section for mobile */ @media screen and (max-width: 749px) { /* Target the Learn More button */ .hydration-button, .learn-more-btn, .hydration-content a.learn-more-btn { margin-bottom: 15px !important; display: inline-block !important; } /* Add margin to the content bottom section */ .content-bottom { margin-bottom: 5px !important; padding-bottom: 5px !important; } /* Add space after the content section */ .hydration-content { margin-bottom: 5px !important; padding-bottom: 5px !important; } /* Add space before the product image */ .hydration-product { margin-top: 10px !important; padding-top: 10px !important; } } /* Increase font weight of heading and add padding between image and title in hydration section for mobile */ @media screen and (max-width: 749px) { /* Increase font weight and enhance heading */ .hydration-heading { font-weight: 600 !important; font-size: 20px !important; margin-top: 10px !important; margin-bottom: 15px !important; letter-spacing: 0.5px !important; color: #333 !important; } /* Add padding between first image and title */ .hydration-model { margin-bottom: 20px !important; } /* Ensure proper spacing after the image */ .hydration-grid > div:first-child { margin-bottom: 15px !important; } /* Adjust content spacing */ .hydration-content { padding-top: 10px !important; } /* Make the title stand out more */ .hydration-heading::after { content: "" !important; display: block !important; width: 40px !important; height: 2px !important; background-color: #1A767A !important; margin: 10px auto 0 !important; } } /* Fix overlap between slider dots and text in mobile view */ @media screen and (max-width: 749px) { /* Add margin below the hydration section content */ .hydration-slider-section { margin-bottom: 10px !important; } /* Adjust the swiper pagination position */ .hydration-slider-section .swiper-pagination { bottom: 0px !important; position: relative !important; margin-top: 10px !important; } /* Add space after the last slide content */ .hydration-slider-section .slide-content { margin-bottom: 10px !important; padding-bottom: 5px !important; } /* Add space between the last heading and pagination */ .hydration-slider-section h1:last-of-type, .hydration-slider-section h2:last-of-type, .hydration-slider-section h3:last-of-type { margin-bottom: 15px !important; } /* Ensure text doesn't wrap around pagination */ .hydration-slider-section .swiper-container { padding-bottom: 10px !important; } } /* Adjust spacing between hero banner and second section heading for mobile */ @media screen and (max-width: 749px) { /* Increase gap between hero banner and second section heading */ .main-heading-section { padding-top: 0px !important; margin-top: 0px !important; } /* Target the heading in the second section */ .main-heading-section h1, .main-heading-section .h1 { font-size: 24px !important; margin-top: 10px !important; margin-bottom: 10px !important; } /* Reduce tile heading font size */ .collection .card__heading, .collection .card__information h3, .product-tile .product-main-title, .product-tile h2.product_title { font-size: 16px !important; line-height: 1.3 !important; font-weight: 500 !important; } /* Ensure proper spacing in the main heading section */ .main-heading-section .outer-flex { padding-top: 10px !important; padding-bottom: 20px !important; } /* Add space after the hero banner */ .banner + div, .slideshow + div, #shopify-section-template-index + div { margin-top: 10px !important; } } /* Direct targeting for second section below hero banner - mobile only */ @media screen and (max-width: 749px) { /* Target sections directly after hero banner */ #shopify-section-template-index + #shopify-section-heading-with-text, .shopify-section:first-child + .shopify-section { margin-top: 15px !important; padding-top: 15px !important; } /* Target headings in the second section */ #shopify-section-heading-with-text h1, .shopify-section:first-child + .shopify-section h1, .shopify-section:first-child + .shopify-section h2 { font-size: 22px !important; line-height: 1.2 !important; margin-bottom: 12px !important; } /* Reduce tile headings font size */ .product-tile .product-main-title, .product-tile h2.product_title, .card__heading, .card__information h3 { font-size: 16px !important; line-height: 1.3 !important; font-weight: 500 !important; } /* Force specific spacing for the heading with text section */ .main-heading-section { margin-top: 30px !important; } .main-heading-section .outer-flex { padding-top: 25px !important; padding-bottom: 25px !important; } /* Target any section after slideshow */ .slideshow + .shopify-section { margin-top: 30px !important; } /* Target any section after image-banner */ .image-banner + .shopify-section { margin-top: 30px !important; } } /* Reduce font size for multicolumn card headings in mobile view */ @media screen and (max-width: 749px) { /* Target multicolumn card headings specifically */ .multicolumn-card__info h3, .multicolumn-list h3, .multicolumn-card__info .h3, .multicolumn-card__info .card__heading { font-size: 18px !important; line-height: 1.3 !important; font-weight: 600 !important; margin-bottom: 8px !important; } /* Ensure text in multicolumn cards is properly sized */ .multicolumn-card__info p, .multicolumn-card__info .rte p { font-size: 14px !important; line-height: 1.5 !important; } /* Fix spacing in multicolumn cards */ .multicolumn-card-spacing { padding-top: 1.5rem !important; margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .multicolumn-card__info { padding: 1.5rem !important; } /* Fix multicolumn section title */ .multicolumn .title-wrapper-with-link .title { font-size: calc(var(--font-heading-scale) * 2.8rem) !important; } } /* Wellness + Selfcare Stories section mobile improvements */ @media screen and (max-width: 749px) { /* Increase font weight of the section heading */ .blog__title, .blog .title-wrapper-with-link h2, .featured-blog .title-wrapper-with-link h2, #shopify-section-featured-blog h2.blog__title { font-weight: 600 !important; /* Increased from default */ letter-spacing: 0.02em !important; font-size: 2rem !important; } /* Reduce gap between blog article tiles to 10px */ .blog .blog__posts, .blog .custom_post_box, .featured-blog .blog__posts, .featured-blog .custom_post_box, .blog__posts.grid--2-col-desktop, .blog__posts.grid--3-col-desktop, .blog__posts.grid--4-col-desktop, #Slider-featured-blog { gap: 5px !important; } /* Ensure proper spacing for the entire section */ .blog .page-width-desktop, .featured-blog .page-width-desktop { padding-left: 5px !important; padding-right: 5px !important; } /* Adjust article card spacing */ .blog-articles__article, .blog__post, .article.slider__slide { padding: 0 !important; margin-bottom: 10px !important; } /* Fix any slider-specific spacing */ .slider.slider--mobile { /* gap: 5px !important; */ } } /* ======================================== SCIENCE SECTION - IMPROVED LINE SPACING ======================================== */ /* Enhanced line spacing for science section content */ .slideshow .banner__desc-custom, .slideshow .slideshow__text-wrapper .banner__desc-custom, .slideshow .banner__box .banner__desc-custom, .slideshow .slideshow__text-wrapper .banner__box .banner__desc-custom { /* Improved white-space and line spacing */ white-space: pre-wrap !important; /* Better than pre-line for dynamic spacing */ line-height: 1.8 !important; /* Increased line spacing */ font-size: 18px !important; /* Increased font size */ /* Enhanced spacing between elements */ margin: 5px auto 20px auto !important; /* Better text flow control */ word-break: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; /* Flexible spacing for empty lines */ min-height: auto !important; max-height: none !important; /* Remove containment that might restrict spacing */ contain: none !important; } /* Enhanced paragraph and line break handling in science section */ .slideshow .banner__desc-custom p, .slideshow .banner__desc-custom div { margin: 1.0em 0 !important; /* Increased paragraph spacing */ line-height: 1.8 !important; /* Increased line spacing */ font-size: 28px !important; /* Increased font size */ width: 100% !important; /* Better empty line handling */ min-height: 1.4em !important; /* Ensures empty paragraphs have height */ } .slideshow .banner__desc-custom br { display: block !important; margin: 0.6em 0 !important; /* More space for line breaks */ height: 0.6em !important; /* Explicit height for breaks */ } /* Handle empty lines and whitespace better */ .slideshow .banner__desc-custom p:empty { margin: 1.2em 0 !important; /* More space for intentionally empty paragraphs */ min-height: 1.2em !important; } /* Mobile science section line spacing */ .slideshow .mobile-description, .slideshow .slideshow__mobile-text-only .mobile-description, .slideshow .mobile-content-card .mobile-description { /* Improved mobile line spacing */ white-space: pre-wrap !important; line-height: 1.7 !important; /* Increased line spacing for mobile */ font-size: 16px !important; /* Increased font size for mobile */ /* Better spacing adaptation */ margin: 0 auto 20px auto !important; min-height: auto !important; max-height: none !important; /* Enhanced text flow */ word-break: break-word !important; overflow-wrap: break-word !important; } .slideshow .mobile-description h4 { margin: 1em auto 0.6em auto !important; /* Better heading spacing */ line-height: 1.4 !important; } .slideshow .mobile-description p { margin: 1.0em auto !important; /* Increased paragraph spacing */ line-height: 1.7 !important; /* Increased line spacing */ font-size: 16px !important; /* Increased font size for mobile */ } .slideshow .mobile-description br { display: block !important; margin: 0.5em 0 !important; height: 0.5em !important; } .slideshow .mobile-description p:empty { margin: 1em 0 !important; min-height: 1em !important; } /* Cache buster for science section with maximum specificity */ @media screen and (max-width: 768px) { .slideshow .slideshow__slide .slideshow__mobile-text-only .mobile-content-card .mobile-description { white-space: pre-wrap !important; line-height: 1.7 !important; /* Increased line spacing */ font-size: 6px !important; /* Increased font size for mobile */ margin-bottom: 20px !important; margin-top: 0 !important; min-height: auto !important; max-height: none !important; overflow-y: visible !important; } .slideshow .slideshow__slide .slideshow__mobile-text-only .mobile-content-card .mobile-description h4 { margin: 1em auto 0.6em auto !important; line-height: 1.4 !important; } .slideshow .slideshow__slide .slideshow__mobile-text-only .mobile-content-card .mobile-description p { margin: 1.0em auto !important; /* Increased paragraph spacing */ line-height: 1.7 !important; /* Increased line spacing */ font-size: 18px !important; /* Increased font size for mobile */ } .slideshow .slideshow__slide .slideshow__mobile-text-only .mobile-content-card .mobile-description p:empty { margin: 1em 0 !important; min-height: 1em !important; } .slideshow .slideshow__slide .slideshow__mobile-text-only .mobile-content-card .mobile-description br { display: block !important; margin: 0.5em 0 !important; height: 0.5em !important; } } /* Ensure all science section content preserves natural spacing */ .slideshow .mobile-description *, .slideshow .banner__desc-custom * { line-height: inherit !important; white-space: inherit !important; box-sizing: border-box !important; } /* Mobile Products Carousel Enhancements */ @media screen and (max-width: 767px) { /* Override any existing mobile product grid styles */ .home-product .product-grid.desktop-grid { display: none !important; } .home-product .mobile-carousel { display: block !important; margin: 0 auto; max-width: 100%; overflow: hidden; } /* Enhance mobile swiper touch interactions */ .products-swiper .swiper-wrapper { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Better visual hierarchy for mobile product cards */ .mobile-carousel .product-tile .inner-grid-item { display: flex; flex-direction: column; height: 100%; } .mobile-carousel .media-image { flex: 0 0 auto; } .mobile-carousel .product-info-main { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } /* Smooth image transitions on hover */ .mobile-carousel .prod-img-box:hover .primary-image { opacity: 0; } .mobile-carousel .prod-img-box:hover .secondary-image { opacity: 1 !important; } /* Prevent content jumping during transitions */ .mobile-carousel .product-info-content { min-height: 120px; display: flex; flex-direction: column; } /* Enhanced pagination dots for better mobile UX */ .products-swiper .swiper-pagination-bullet { background: rgba(204, 204, 204, 0.6); border-radius: 50%; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .products-swiper .swiper-pagination-bullet-active { background: #666666; box-shadow: 0 0 0 2px rgba(102, 102, 102, 0.2); } /* Touch-friendly pagination area */ .products-swiper .swiper-pagination { padding: 10px 0; } } /* Wellness + Selfcare Stories Mobile 2x2 Grid Carousel */ @media screen and (max-width: 767px) { /* Override any existing mobile blog grid styles */ .blog .desktop-blog-layout { display: none !important; } .blog .mobile-blog-carousel { display: block !important; margin: 0 auto; max-width: 100%; overflow: hidden; } /* Enhanced touch interactions for stories carousel */ .stories-swiper .swiper-wrapper { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Override existing blog mobile styles for cleaner 1x2 grid */ .blog .mobile-blog-carousel .grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .blog .mobile-blog-carousel .grid__item { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Ensure story items maintain consistent appearance */ .mobile-blog-carousel .story-item .card { box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; border-radius: 8px !important; overflow: visible !important; transition: all 0.3s ease !important; background: #fff !important; height: 100% !important; display: flex !important; flex-direction: column !important; position: relative !important; } /* Ensure proper vertical stacking of image and content */ .mobile-blog-carousel .story-item .card .article-card__image-wrapper { order: 1 !important; flex-shrink: 0 !important; width: 100% !important; position: relative !important; } .mobile-blog-carousel .story-item .card .card__content { order: 2 !important; flex: 1 !important; position: relative !important; width: 100% !important; } .mobile-blog-carousel .story-item:hover .card { transform: translateY(-2px) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; } /* Ensure content is visible and properly positioned */ .mobile-blog-carousel .card__content, .mobile-blog-carousel .card__information, .mobile-blog-carousel .article-card__info { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 2 !important; } /* Enhanced pagination dots specifically for stories */ .stories-swiper .swiper-pagination-bullet { background: rgba(204, 204, 204, 0.6) !important; border-radius: 50% !important; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; } .stories-swiper .swiper-pagination-bullet-active { background: #666666 !important; box-shadow: 0 0 0 2px rgba(102, 102, 102, 0.2) !important; } /* Touch-friendly pagination area for stories */ .stories-swiper .swiper-pagination { padding: 10px 0 !important; margin-top: 15px !important; } /* Ensure grid layout overrides any existing blog styles */ .mobile-blog-carousel .stories-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; width: 100% !important; align-items: stretch !important; height: 100% !important; } .mobile-blog-carousel .story-item { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 280px !important; align-items: stretch !important; } } /* Mobile Shop by Ingredients Description Fix - Global Override */ @media screen and (max-width: 768px) { /* Ultra high specificity override for mobile subtitle display */ body .shop-by-ingredients-section .ingredient-description, html body .shop-by-ingredients-section .ingredient-description, html body div.shop-by-ingredients-section .ingredient-description, html body section.shop-by-ingredients-section .ingredient-description, html body .shop-by-ingredients-section .content-bottom .ingredient-description, html body .shop-by-ingredients-section .content-bottom p.ingredient-description, html body .shop-by-ingredients-section .ingredient-card .content-bottom .ingredient-description, .shopify-section .shop-by-ingredients-section .ingredient-description, .shopify-section .shop-by-ingredients-section .content-bottom .ingredient-description { display: block !important; visibility: visible !important; opacity: 1 !important; color: #484848 !important; font-size: 14px !important; line-height: 1.4 !important; text-align: left !important; white-space: pre-wrap !important; margin: 0 !important; padding: 4px 8px !important; background: none !important; border-radius: 4px !important; position: relative !important; z-index: 999 !important; min-height: 20px !important; height: auto !important; max-height: none !important; /* overflow: visible !important; */ clip-path: none !important; -webkit-clip-path: none !important; transform: none !important; -webkit-transform: none !important; } /* Ensure content bottom container is visible */ body .shop-by-ingredients-section .content-bottom, html body .shop-by-ingredients-section .content-bottom { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 99 !important; min-height: 40px !important; background: none !important; border-radius: 6px !important; padding: 8px !important; margin-top: auto !important; } /* Force ingredient card content to use flexbox properly */ body .shop-by-ingredients-section .ingredient-card-content, html body .shop-by-ingredients-section .ingredient-card-content { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; } /* Wildcard emergency override */ [class*="shop-by-ingredients"] .ingredient-description, [class*="ingredients"] .ingredient-description, [data-section-type*="shop-by-ingredients"] .ingredient-description { display: block !important; visibility: visible !important; opacity: 1 !important; } }