/** Shopify CDN: Minification failed Line 3474:6 Expected ":" **/ /* ============================================ CUSTOM.CSS - CUSTOM STYLES & OVERRIDES ============================================ This file contains all custom styling and overrides specifically for AuSin Shopify theme. Organized by page and section for easy maintenance. Last Updated: 2026-03-17 ============================================ */ /* ============================================ GLOBAL FIXES ============================================ */ /* ------------------------------------------ FIX #1: Search Result Page Blog thumbnail 16:9 aspect ratio (Currently showing as square) ------------------------------------------ */ .predictive-search__result-group .article-card__image img, .template-search .article-card__image img, .search-results .article-card__image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; } .predictive-search__result-group .article-card__image, .template-search .article-card__image, .search-results .article-card__image { aspect-ratio: 16 / 9; overflow: hidden; } /* ------------------------------------------ FIX #2: Product Page Right-align 2nd column info text (Was only applied at 834px and below) ------------------------------------------ */ .pdt_additional_info .info_content ul li:nth-child(2) { text-align: right; } /* FIX #3: Cart — force left-align pricing when discount applied */ .cart-item__discounted-prices, .cart-item__price-wrapper, .cart-item .price, .cart-item .price--end { text-align: left !important; justify-content: flex-start !important; } /* ------------------------------------------ FIX #4: Cart Drawer Increase checkout button font size to 18px ------------------------------------------ */ .cart__ctas button, .cart__ctas a, #cart-notification button, #CartDrawer .cart__ctas button, #CartDrawer .cart__ctas a, .cart-drawer__checkout, #checkout { font-size: 18px !important; } /* ------------------------------------------ FIX #6: Mobile — Home Page Increase review section content height so reviews don't get cut off ------------------------------------------ */ @media screen and (max-width: 749px) { .shopify-section .judge-me-review-widget, .shopify-section .jdgm-widget, .shopify-section [class*="review"] .section-template--content, .shopify-section [class*="review"] { min-height: auto !important; max-height: none !important; overflow: visible !important; height: auto !important; } } /* FIX #7: Mobile — Center collection page title + image-with-text content */ .image-with-text__grid--reverse>.image-with-text__text-item .image-with-text__content { padding-left: 2rem !important; padding-right: 2rem !important; max-width: 100% !important; } /* ------------------------------------------ FIX #8: Mobile — Collection Pages Increase content width of page title (visible on phone resolutions other than iPhone 15 Pro Max) ------------------------------------------ */ @media screen and (max-width: 749px) { .collection-hero__inner, .template-collection .page-width, .collection .title-wrapper-with-link { width: 100% !important; max-width: 100% !important; padding-left: 0px !important; padding-right: 0px !important; } } /* ------------------------------------------ FIX #9: Mobile — All Pages Increase content width of text area in all Image-with-Text sections ------------------------------------------ */ @media screen and (max-width: 749px) { .imgtxtfull .image-with-text__content, .imgtxtfull .image-with-text__content .rte, .imgtxtfull .image-with-text__content .rich-text__blocks { width: 100% !important; max-width: 100% !important; padding-left: 0px !important; padding-right: 0px !important; } } /* ------------------------------------------ FIX #11: About V'Emperor Page Force 1-column layout for sections (Try theme editor first. If CSS is overwriting it, use this override.) ------------------------------------------ */ .template-page .page-vemperor .multicolumn-list, .vemperor-section .multicolumn-list, [class*="v-emperor"] .multicolumn-list, [class*="vemperor"] .multicolumn-list { grid-template-columns: 1fr !important; } /* ------------------------------------------ FIX #12: About V'Emperor Page Reduce font size to 18px ------------------------------------------ */ .template-page .page-vemperor .multicolumn-card__info p, .template-page .page-vemperor .rte p, .vemperor-section .rte p, [class*="v-emperor"] .rte p, [class*="vemperor"] .rte p { font-size: 18px !important; } /* ------------------------------------------ FIX #13 & #14: iPad — Home Page Fix logo overlapping text + Buy Now button blocking promotion ------------------------------------------ */ @media screen and (min-width: 750px) and (max-width: 1100px) { .banner__content { padding: 20px !important; } .banner__heading, .banner .banner__content h2 { font-size: 1.5rem !important; } .banner__text, .banner .banner__content .rte { font-size: 0.9rem !important; } .banner__buttons { margin-top: 10px !important; } .banner__buttons .button { font-size: 14px !important; padding: 8px 16px !important; } .banner__box img, .banner__content img { max-width: 120px !important; height: auto !important; } } /* ============================================ END OF QC FIXES ============================================ */ /* Prevent horizontal scroll caused by 100vw elements */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } /* ============================================ HEADER STYLES ============================================ */ /* Navigation Font Styling */ .header__menu-item, .list-menu__item, .mega-menu__link { font-family: "DM Sans"; font-weight: 700; font-size: 18px; text-transform: uppercase; } @media screen and (max-width: 1200px) { .header__menu-item, .list-menu__item, .mega-menu__link { font-size: 16px; } } @media screen and (max-width: 990px) { .header__menu-item, .list-menu__item, .mega-menu__link { font-size: 14px; } } .header__icon--cart svg { transform: scale(0.9) !important; } /* ============================================ 1. HOMEPAGE STYLES ============================================ */ /* 1.1 Hero Section */ /* Make slideshow text content container (like single banner page-width) */ /* Background image stays full width, but text + button are constrained */ /*.slideshow__text-wrapper.banner__content--middle-left .slideshow__text, .slideshow__text-wrapper.banner__content--middle-left { padding-left: 5rem !important; padding-right: 0 !important; }*/ /* Constrain slideshow text width to container size */ .slideshow__text.content-container { max-width: var(--page-width) !important; width: 100% !important; margin: 0 auto !important; } /* Green Kare Slide - First Slide Typography */ #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_N693t8 .banner__heading-slide_N693t8 { font-family: DM Sans !important; font-weight: 700 !important; font-style: normal !important; font-size: 64px !important; line-height: 100% !important; letter-spacing: 0% !important; color: #133263 !important; padding-left: clamp(15px, 3vw, 100px); } @media (max-width: 1440px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_N693t8 .banner__heading-slide_N693t8 { font-size: 42px !important; } } /* 1366 x 768 override */ @media (max-width: 1366px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_N693t8 .banner__heading-slide_N693t8 { font-size: 36px !important; } } @media screen and (min-width: 820px) and (max-width: 860px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_N693t8 .banner__heading-slide_N693t8 { font-size: 30px !important; } } #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_N693t8 .banner__text { font-family: DM Sans !important; font-weight: 350 !important; font-style: normal !important; font-size: 24px !important; line-height: 100% !important; letter-spacing: 0% !important; padding-left: clamp(15px, 3vw, 100px); } #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_N693t8 .banner__text * { color: #333333 !important; font-size: 24px !important; } @media (max-width: 1440px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_N693t8 .banner__text * { font-size: 20px !important; } } /* 1366 x 768 override */ @media (max-width: 1366px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_N693t8 .banner__text * { font-size: 18px !important; } } @media screen and (min-width: 820px) and (max-width: 860px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_N693t8 .banner__text * { font-size: 18px !important; } } @media screen and (max-width: 810px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_N693t8 .banner__text * { font-size: 18px !important; } } #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_N693t8 .banner__buttons { padding-left: clamp(15px, 3vw, 100px); } /* Green Kare Mobile View */ @media screen and (max-width: 767px) { /* RESET semua wrapper tinggi paksa */ #shopify-section-template--19953745133722__slideshow_DmaWTF .banner, #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow, #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__media, #shopify-section-template--19953745133722__slideshow_DmaWTF .media { height: auto !important; min-height: unset !important; padding-top: 0 !important; } /* FIX image */ #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__media img { position: relative !important; width: 100% !important; height: auto !important; object-fit: contain !important; } } #shopify-section-template--19953745133722__slideshow_DmaWTF .media::before { display: none !important; } /* Ali King Slide - Second Slide Typography (White) */ #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_VUnAJY .banner__heading-slide_VUnAJY { font-family: DM Sans !important; font-weight: 700 !important; font-style: normal !important; font-size: 64px !important; line-height: 100% !important; letter-spacing: 0% !important; color: #FFFFFF !important; padding-left: clamp(15px, 3vw, 100px); } @media (max-width: 1440px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_VUnAJY .banner__heading-slide_VUnAJY { font-size: 42px !important; } } /* 1366 x 768 override */ @media (max-width: 1366px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_VUnAJY .banner__heading-slide_VUnAJY { font-size: 36px !important; } } @media screen and (min-width: 820px) and (max-width: 860px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_VUnAJY .banner__heading-slide_VUnAJY { font-size: 30px !important; } } #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_VUnAJY .banner__text { font-family: DM Sans !important; font-weight: 350 !important; font-style: normal !important; font-size: 24px !important; line-height: 100% !important; letter-spacing: 0% !important; color: #FFFFFF !important; padding-left: clamp(15px, 3vw, 100px); } #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_VUnAJY .banner__text * { font-size: 24px !important; } @media (max-width: 1440px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_VUnAJY .banner__text * { font-size: 20px !important; } } /* 1366 x 768 override */ @media (max-width: 1366px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_VUnAJY .banner__text * { font-size: 18px !important; } } @media screen and (min-width: 820px) and (max-width: 860px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_VUnAJY .banner__text * { font-size: 18px !important; } } @media screen and (max-width: 810px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_VUnAJY .banner__text * { font-size: 18px !important; } } #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_VUnAJY .banner__buttons { padding-left: clamp(15px, 3vw, 100px); } /* V'Emperor Slide - Third Slide Typography (White) */ #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_HkGz8Q .banner__heading-slide_HkGz8Q { font-family: DM Sans !important; font-weight: 700 !important; font-style: normal !important; font-size: 64px !important; line-height: 100% !important; letter-spacing: 0% !important; color: #FFFFFF !important; padding-left: clamp(15px, 3vw, 100px); } @media (max-width: 1440px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_HkGz8Q .banner__heading-slide_HkGz8Q { font-size: 42px !important; } } /* 1366 x 768 override */ @media (max-width: 1366px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_HkGz8Q .banner__heading-slide_HkGz8Q { font-size: 36px !important; } } @media screen and (min-width: 820px) and (max-width: 860px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_HkGz8Q .banner__heading-slide_HkGz8Q { font-size: 30px !important; } } #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_HkGz8Q .banner__text { font-family: DM Sans !important; font-weight: 350 1 !important; font-style: normal !important; font-size: 24px !important; line-height: 100% !important; letter-spacing: 0% !important; color: #FFFFFF !important; padding-left: clamp(15px, 3vw, 100px); } #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_HkGz8Q .banner__text * { font-size: 24px !important; } @media (max-width: 1440px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_HkGz8Q .banner__text * { font-size: 20px !important; } } /* 1366 x 768 override */ @media (max-width: 1366px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_HkGz8Q .banner__text * { font-size: 18px !important; } } @media screen and (min-width: 820px) and (max-width: 860px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_HkGz8Q .banner__text * { font-size: 18px !important; } } @media screen and (max-width: 810px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_HkGz8Q .banner__text * { font-size: 18px !important; } } #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_HkGz8Q .banner__buttons { padding-left: clamp(15px, 3vw, 100px); } /* Mobile - adjust font sizes for all slides */ @media screen and (max-width: 810px) { #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_N693t8 .banner__heading-slide_N693t8, #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_VUnAJY .banner__heading-slide_VUnAJY, #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_HkGz8Q .banner__heading-slide_HkGz8Q { font-size: 32px !important; line-height: 1.3 !important; } #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_N693t8 .banner__text, #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_VUnAJY .banner__text, #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__text.stextt-slide_HkGz8Q .banner__text { font-size: 17px !important; line-height: 1.5 !important; } } /* Hero Text Spacing */ /* 1280px down to 768px */ @media screen and (max-width: 1280px) and (min-width: 768px) { .slideshow__text.content-container { width: 65% !important; margin: 0 !important; } } /* iPad view (portrait ~834px) */ @media screen and (min-width: 820px) and (max-width: 834px) { .slideshow__text .banner__buttons { margin-top: 0px !important; } } /* Product Banner on Homepage */ /* 1280px down to 768px */ @media screen and (max-width: 1280px) and (min-width: 768px) { .banner__box { width: 65% !important; } } /* Testimonial Top Spacing on About Us Page for Mobile */ /* Add top spacing for testimonial content on mobile view only */ @media screen and (max-width: 767px) { /* Add spacing between top section and entire testimonial block */ .testimonial_inner { margin-top: 30px !important; /* Adjust overall top spacing */ } /* Add spacing specifically above author (Jacob + Businessman) */ .author_details { margin-top: 10px !important; /* Space between top content and author info */ } /* Add spacing above the avatar / image area */ .gallery_testi_inner { margin-top: 10px !important; /* Space between author text and image */ } } /* Add To Cart Button for Mobile */ /* Make Add to Cart button full width like Buy It Now on mobile */ @media screen and (max-width: 767px) { /* Force product form buttons to stack vertically */ .product-form__buttons { display: flex !important; flex-direction: column !important; width: 100% !important; } /* Make Add to Cart button full width */ .product-form__buttons button[name="add"] { width: 100% !important; max-width: 100% !important; } /* Ensure Buy It Now button is also full width (safety) */ .shopify-payment-button { width: 100% !important; } .shopify-payment-button__button { width: 100% !important; } /* Optional: add spacing between buttons */ .product-form__buttons button[name="add"] { margin-bottom: 10px !important; } } /* Remove white background behind mobile banner image */ @media screen and (max-width: 767px) { .slider-cont.color-scheme-6da4a4aa-37cf-4ff0-98db-d818f3bb09fb .slideshow__media.banner__media.media.hidden-desktop { background: transparent !important; } .slider-cont.color-scheme-6da4a4aa-37cf-4ff0-98db-d818f3bb09fb .slideshow__media.banner__media.media.hidden-desktop img { background: transparent !important; } } /* Adjust padding for larger screens */ @media screen and (min-width: 1200px) { .slideshow__text.content-container { padding-left: 5rem !important; padding-right: 5rem !important; } } /* Slideshow body text size (specific to slideshow only) */ .slideshow__text .banner__text { font-size: 18px !important; line-height: 130% !important; font-weight: 400 !important; } /* Mobile slideshow body text */ @media screen and (max-width: 810px) { .slideshow__text .banner__text { font-size: 16px !important; } } /* Instagram Widget Movile View */ /* Khusus social / insta slider saja di mobile */ @media screen and (max-width: 767px) { .swipesocial .swiper-slide .ratio { aspect-ratio: 1 / 1 !important; height: auto !important; } .swipesocial .swiper-slide .banner__media.media, .swipesocial .swiper-slide .media { aspect-ratio: 1 / 1 !important; height: auto !important; min-height: unset !important; } .swipesocial .swiper-slide .banner__media.media img, .swipesocial .swiper-slide .media img { width: 100% !important; height: 100% !important; object-fit: cover !important; } } /* Mobile: set horizontal padding for icon button without affecting other buttons */ @media screen and (max-width: 767px) { .swipesocial .insta_link .button.button--primary { padding-left: 20px !important; padding-right: 20px !important; width: auto !important; /* prevent full width stretching */ max-width: unset !important; } } /* Add To Cart Button for Mobile */ /* Mobile: force Add To Cart text to stay in one line */ @media screen and (max-width: 767px) { .quick-add__submit span { white-space: nowrap !important; /* prevent line break */ font-size: 12px !important; /* slightly reduce size */ } } /* Logo Images on Mobile */ /* Mobile: show full image without cropping in multicolumn section */ @media screen and (max-width: 767px) { .multicolumn-list__item .media--adapt { padding-bottom: 0 !important; /* remove forced aspect ratio */ height: auto !important; } .multicolumn-list__item .media--adapt img { position: relative !important; left: auto !important; transform: none !important; width: 100% !important; height: auto !important; object-fit: contain !important; /* ensure full image is visible */ } } /* Bullets Vertical Center for Mobile */ /* Mobile: remove custom bullet and use native list bullet */ @media screen and (max-width: 767px) { .rte ul li::before, .article-template__content ul li::before { content: none !important; /* remove fake bullet */ } } /* Ensure native bullet is used */ @media screen and (max-width: 767px) { .rte ul li, .article-template__content ul li { display: list-item !important; } } /* 1.2 Featured Collections */ /* Add dark overlay to collection list card images for better text readability */ .collection-list-wrapper .card__media .media::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); pointer-events: none; z-index: 1; } /*.collection-list-wrapper .card__media { margin-top: 10px !important; margin-left: 10px !important; margin-right: 10px !important; margin-bottom: 10px !important; }*/ /* Collection Margin */ #shopify-section-template--19953745133722__featured_collection_tpf8eE { margin-top: 20px !important; margin-left: 10px !important; margin-right: 10px !important; margin-bottom: 30px !important; } /* Product Collection Margin */ #shopify-section-template--19953745133722__featured_collection_wxYHKN { margin-top: 20px !important; margin-left: 10px !important; margin-right: 10px !important; margin-bottom: 30px !important; } #shopify-section-template--19953745133722__featured_collection_LgMBjf { margin-top: 20px !important; margin-left: 10px !important; margin-right: 10px !important; margin-bottom: 30px !important; } #shopify-section-template--19953745133722__social_media_list_MgE3UP { margin-top: 20px !important; } /* Collection list pagination dots color */ .collection-list-wrapper .swiper-pagination-bullet { background-color: #D9D9D9 !important; opacity: 1 !important; } .collection-list-wrapper .swiper-pagination-bullet-active { background-color: #133263 !important; opacity: 1 !important; } /* Collection List Typography - Over Image Style */ #shopify-section-template--19953745133722__collection_list_VxwCqJ .collection-list-wrapper.over_image .card__heading, #shopify-section-template--19953745133722__collection_list_VxwCqJ .collection-list-wrapper.over_image .card__heading h3, #shopify-section-template--19953745133722__collection_list_VxwCqJ .collection-list-wrapper.over_image .card__heading a { font-family: DM Sans !important; font-weight: 700 !important; font-style: normal !important; font-size: 18px !important; line-height: 100% !important; letter-spacing: 0% !important; text-align: left !important; } @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .card__heading a span { font-size: 16px !important; } } /* Universal Section Heading H3 Typography */ .section-head.inline-richtext.h1 { font-family: DM Sans !important; font-weight: 700 !important; font-style: normal !important; font-size: 42px !important; line-height: 100% !important; letter-spacing: 0% !important; } /* 1440px dan bawah */ @media screen and (max-width: 1440px) { .section-head.inline-richtext.h1 { font-size: 32px !important; } } /* 1366px dan bawah */ @media screen and (max-width: 1366px) { .section-head.inline-richtext.h1 { font-size: 24px !important; } } /* Mobile - Universal H3 adjustments */ /*@media screen and (max-width: 810px) { .section-head.inline-richtext.h1 { font-size: 32px !important; } }*/ /* Universal H4 Rich Text Heading Typography */ .rich-text__text h4 { font-family: DM Sans !important; font-weight: 700 !important; font-style: normal !important; font-size: 32px !important; line-height: 110% !important; letter-spacing: 0% !important; text-align: center !important; } /* iPad 834px width (portrait) tanpa max-height */ @media screen and (min-width: 800px) and (max-width: 834px) { .rich-text__text h4 { font-size: 24px !important; } } /* Mobile - Universal H4 adjustments */ @media screen and (max-width: 810px) { .rich-text__text h4 { font-size: 24px !important; } } /* Universal Card Vendor Typography */ .card_vendor { font-family: DM Sans !important; font-weight: 700 !important; font-style: normal !important; font-size: 14px !important; line-height: 100% !important; letter-spacing: 0% !important; text-align: center !important; text-transform: uppercase !important; } /* Product Card Typography - Universal Selectors */ .card__heading h3, .card__heading h3 a, .card__heading a, .card-information .card__heading a, .card__heading .h3, h3.card__heading, a.h3.card__heading { font-family: DM Sans !important; font-weight: 700 !important; font-style: normal !important; font-size: 18px !important; line-height: 100% !important; letter-spacing: 0% !important; text-align: center !important; } /* Pricing of Product */ /* Strong override for Lyra */ .card__information .price.price--on-sale .price-item--regular { color: #828282 !important; font-size: 14px !important; } /* Universal Price Typography - Sale Price (Red) */ .price__container .price-item--sale, .price .price-item--sale, .price-item--sale, span.price-item--sale { font-family: DM Sans !important; font-weight: 400 !important; font-style: normal !important; font-size: 18px !important; line-height: 100% !important; letter-spacing: 0% !important; text-align: center !important; color: #E60013 !important; } /* Universal Price Typography - Regular/Compare At Price (Gray, Strikethrough) */ .price__container .price-item--regular, .price .price-item--regular, .price-item--regular, span.price-item--regular, .price__regular, .price__compare-at, span.price__compare-at * { font-family: DM Sans !important; font-weight: 400 !important; font-style: normal !important; font-size: 18px !important; line-height: 100% !important; letter-spacing: 0% !important; text-align: center !important; color: #828282 !important; text-decoration: line-through !important; } /* Universal Price Container - Center alignment */ .price__container, .price, .price__wrapper, .card-information .price { font-family: DM Sans !important; text-align: center !important; } /* Remove border radius from Shopify Lyra cart drawer */ #CartDrawer .drawer__inner, #CartDrawer .drawer__inner.gradient, #CartDrawer .drawer__footer, #CartDrawer .drawer__header, #CartDrawer .cart-drawer, #CartDrawer .cart-drawer__warnings, #CartDrawer .drawer__inner-empty { border-radius: 0 !important; } /* Background for "Your cart" header */ #CartDrawer .drawer__header { background-color: #DEF1F5 !important; } /* Capitalize Cart Heading */ #CartDrawer .drawer__heading { text-transform: capitalize !important; } /* Change close icon color */ #CartDrawer .drawer__close svg { stroke: #133263 !important; stroke-width: 0.5 !important; } /* Khusus price di cart drawer */ .cart-items .cart-item__details .product-option.price { text-align: left !important; justify-content: flex-start !important; display: block; } /* Cart Drawer Product Name */ /* BRAND */ #CartDrawer-CartItems .cart_vendor { font-size: 14px !important; font-weight: 600 !important; color: #258FAB !important; } /* PRODUCT NAME */ #CartDrawer-CartItems .cart-item__name { font-size: 18px !important; font-weight: 600 !important; color: #333333 !important; line-height: 1.3 !important; } /* Force bullet to normal black disc */ .multicolumn-card .rte ul { list-style-type: disc !important; padding-left: 20px !important; /* ensure space for bullet */ } .multicolumn-card .rte li { list-style-type: disc !important; } /* Fix rich text width issue specifically on desktop */ /*@media screen and (min-width: 1200px) { #shopify-section-template--19953745199258__rich_text_MNgXAe .rich-text__wrapper { all: unset; display: block; max-width: var(--page-width); margin: 0 auto; padding-left: 5rem; padding-right: 5rem; width: 100%; } }*/ /* 1600x900 Heading and Paragraph Alignment for About Page */ @media screen and (min-width: 1500px) and (max-width: 1650px) { /* Samakan alignment dengan breadcrumb container */ #shopify-section-template--19953745199258__rich_text_MNgXAe .rich-text__wrapper--left.page-width { max-width: var(--page-width); margin-left: auto; margin-right: auto; padding-left: 15px !important; padding-right: 0 !important; } /* Optional: kalau masih geser sedikit, bisa fine-tune */ #shopify-section-template--19953745199258__rich_text_MNgXAe .rich-text__blocks { padding-left: 0 !important; } } /* 1600x900 Heading and Paragraph Alignment for Blog Page */ @media screen and (min-width: 1500px) and (max-width: 1650px) { /* Samakan alignment dengan breadcrumb container */ #shopify-section-template--19953744740506__rich_text_XxD4Ai .rich-text__wrapper--left.page-width { max-width: var(--page-width); margin-left: auto; margin-right: auto; padding-left: 15px !important; padding-right: 0 !important; } /* Optional: kalau masih geser sedikit, bisa fine-tune */ #shopify-section-template--19953744740506__rich_text_XxD4Ai .rich-text__blocks { padding-left: 0 !important; } } /* 1600x900 Heading and Paragraph Alignment for Contact Page */ @media screen and (min-width: 1500px) and (max-width: 1650px) { /* Samakan alignment dengan breadcrumb container */ #shopify-section-template--19953745232026__rich_text_iGPJgM .rich-text__wrapper--left.page-width { max-width: var(--page-width); margin-left: auto; margin-right: auto; padding-left: 15px !important; padding-right: 0 !important; } /* Optional: kalau masih geser sedikit, bisa fine-tune */ #shopify-section-template--19953745232026__rich_text_iGPJgM .rich-text__blocks { padding-left: 0 !important; } } /* 1.3 Featured Products */ /* Add featured products styles here */ /* 1.4 Universal Single Banner Typography */ /* Universal H2 Heading for all single banners */ .banner__heading.inline-richtext.h1 { font-family: DM Sans !important; font-weight: 700 !important; font-style: normal !important; font-size: 64px !important; line-height: 120% !important; letter-spacing: 0% !important; } @media (max-width: 1440px){ .banner__heading.inline-richtext.h1 { font-size: 42px !important; } } /* 1366 x 768 override */ @media (max-width: 1366px) { .banner__heading.inline-richtext.h1 { font-size: 36px !important; } } /* Override --ratio-percent custom property */ .card-media { --ratio-percent: 80% !important; /* Ganti 80% sesuai dengan kebutuhan */ } /* Fix Add To Cart button layout on mobile quick view */ @media screen and (max-width: 767px) { #ProductSubmitButton-template--19953745428634__quick_view_jbCP38 { flex: 1 1 auto !important; min-width: 120px !important; height: 48px !important; padding: 0 14px !important; white-space: nowrap !important; text-align: center !important; } #ProductSubmitButton-template--19953745428634__quick_view_jbCP38 span { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; white-space: nowrap !important; line-height: 1 !important; font-size: 13px !important; } #ProductSubmitButton-template--19953745428634__quick_view_jbCP38 svg { flex-shrink: 0 !important; width: 18px !important; height: 18px !important; } } /* Fix Choose Option button width on mobile product grid */ @media screen and (max-width: 767px) { .collection .product-grid .card-wrapper .quick-add { width: 100% !important; max-width: 100% !important; } .collection .product-grid .card-wrapper .quick-add__submit { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 8px 6px !important; font-size: 10px !important; line-height: 1.2 !important; white-space: nowrap !important; text-align: center !important; box-sizing: border-box !important; } .collection .product-grid .card-wrapper .quick-add__submit svg { width: 12px !important; height: 12px !important; flex-shrink: 0 !important; } .collection .product-grid .card-wrapper .quick-add__submit span, .collection .product-grid .card-wrapper .quick-add__submit { overflow: hidden !important; text-overflow: ellipsis !important; } } /* Product Banners Headings on Homepage size iPad */ @media screen and (min-width: 820px) and (max-width: 860px) { #shopify-section-template--19953745133722__single_banner_FezVPt .banner__heading.inline-richtext { font-size: 30px !important; } } @media screen and (min-width: 820px) and (max-width: 860px) { #shopify-section-template--19953745133722__single_banner_imW4bT .banner__heading.inline-richtext { font-size: 30px !important; } } /* Universal H5 Body Text for all single banners */ .banner__text.rte.subtitle, .banner__text.rte.subtitle strong { font-family: DM Sans !important; font-weight: 700 !important; font-style: normal !important; font-size: 24px !important; line-height: 100% !important; letter-spacing: 0% !important; } @media (max-width: 1440px) { .banner__text.rte.subtitle, .banner__text.rte.subtitle strong { font-size: 20px !important; } } /* 1366 x 768 override */ @media (max-width: 1366px) { .banner__text.rte.subtitle, .banner__text.rte.subtitle strong { font-size: 18px !important; } } @media (max-width: 1440px) { .rich-text:not(.rich-text--full-width) .rich-text__wrapper { width: 100% !important; } } /* Product Banners Subheading on Homepage size iPad */ @media screen and (min-width: 768px) and (max-width: 1024px) { .banner__text.rte.subtitle, .banner__text.rte.subtitle strong { font-size: 16px !important; } .banner__box, .banner__content { max-width: 90% !important; } } /* Search page - fix white space under Stories article images */ .template-search .article-card-wrapper .card__inner.ratio, .template-search .article-card .card__inner.ratio { --ratio-percent: 56.25% !important; height: auto !important; min-height: 0 !important; } /* Make article image fill the fixed ratio area */ .template-search .article-card-wrapper .card__media, .template-search .article-card-wrapper .article-card__image-wrapper, .template-search .article-card-wrapper .media, .template-search .article-card .card__media, .template-search .article-card .article-card__image-wrapper, .template-search .article-card .media { height: 100% !important; min-height: 0 !important; } /* Force image crop properly */ .template-search .article-card-wrapper img, .template-search .article-card img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } /* Remove extra internal blank area/content from image box */ .template-search .article-card-wrapper .card__inner .card__content, .template-search .article-card .card__inner .card__content { display: none !important; } /* Awaken Banner on Ipad */ /* iPad: use mobile-style layout for this featured collection section */ @media screen and (min-width: 768px) and (max-width: 1024px) { #shopify-section-template--19953745133722__featured_collection_UYXh3b .product_with_image_grid, #shopify-section-template--19953745133722__featured_collection_UYXh3b .grid { display: flex !important; flex-direction: column !important; gap: 0 !important; } /* Banner on top */ #shopify-section-template--19953745133722__featured_collection_UYXh3b .grid__item.banner, #shopify-section-template--19953745133722__featured_collection_UYXh3b .banner { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; order: 1 !important; margin: 0 !important; } /* Product area below */ #shopify-section-template--19953745133722__featured_collection_UYXh3b .grid__item:not(.banner), #shopify-section-template--19953745133722__featured_collection_UYXh3b .collection, #shopify-section-template--19953745133722__featured_collection_UYXh3b .featured_collection { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; order: 2 !important; margin: 0 !important; } /* Product list should behave like mobile layout */ #shopify-section-template--19953745133722__featured_collection_UYXh3b .featured_collection ul, #shopify-section-template--19953745133722__featured_collection_UYXh3b .product-grid, #shopify-section-template--19953745133722__featured_collection_UYXh3b .grid.product-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; width: 100% !important; } /* Each product card */ #shopify-section-template--19953745133722__featured_collection_UYXh3b .product-grid > li, #shopify-section-template--19953745133722__featured_collection_UYXh3b .grid.product-grid > .grid__item, #shopify-section-template--19953745133722__featured_collection_UYXh3b .card-wrapper, #shopify-section-template--19953745133722__featured_collection_UYXh3b .product-card-wrapper { width: 100% !important; max-width: 100% !important; flex: unset !important; margin: 0 !important; } /* Make product buttons fit better on iPad */ #shopify-section-template--19953745133722__featured_collection_UYXh3b .quick-add__submit { width: 100% !important; max-width: 100% !important; } #shopify-section-template--19953745133722__featured_collection_UYXh3b .quick-add__submit span { white-space: nowrap !important; font-size: 12px !important; } } /* Testimonial Pagination on About Us Page */ .testi_pagination { color: #FFFFFF; } /* Mobile - Universal banner typography adjustments */ @media screen and (max-width: 810px) { .banner__heading.inline-richtext.h1 { font-size: 30px !important; } .banner__text.rte.subtitle, .banner__text.rte.subtitle strong { font-size: 18px !important; } } /* Force image-with-text items to full width on iPad (834x1091 portrait) */ @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .image-with-text .image-with-text__media-item, .image-with-text .image-with-text__text-item.grid__item { width: 100% !important; max-width: 100% !important; } } /* Responsive font size for all section H2 headers (e.g. "Latest Articles") */ /* Default: 1920px and below */ .section-head.inline-richtext.h1 { font-size: 42px !important; } /* ≤ 1440px */ @media screen and (max-width: 1440px) { .section-head.inline-richtext.h1 { font-size: 32px !important; } } /* ≤ 1366px */ @media screen and (max-width: 1366px) { .section-head.inline-richtext.h1 { font-size: 24px !important; } } /* Responsive font size for "About Us" (image-with-text heading) */ /* Default: 1920px and below */ .image-with-text__heading.inline-richtext.h1 { font-size: 42px !important; } /* ≤ 1440px */ @media screen and (max-width: 1440px) { .image-with-text__heading.inline-richtext.h1 { font-size: 32px !important; } } /* ≤ 1366px */ @media screen and (max-width: 1366px) { .image-with-text__heading.inline-richtext.h1 { font-size: 24px !important; } } /* iPad portrait – make image-with-text behave like mobile */ @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { /* 1. Force single column grid (LIKE MOBILE) */ .image-with-text .image-with-text__grid { display: grid !important; grid-template-columns: 1fr !important; } /* 2. Reset item width properly */ .image-with-text .image-with-text__media-item, .image-with-text .image-with-text__text-item.grid__item { width: 100% !important; max-width: 100% !important; } /* 3. Fix image container ratio (IMPORTANT) */ .image-with-text .image-with-text__media { width: 100% !important; height: auto !important; } /* 4. Ensure image scales properly */ .image-with-text .image-with-text__media img { width: 100% !important; height: auto !important; object-fit: cover !important; } /* 5. Add spacing between image and text */ .image-with-text .image-with-text__media-item { margin-bottom: 20px !important; } } /* Set accordion title font size to 18px on iPad (834x1091) */ @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { /* Target accordion titles */ .accordion__title, .accordion summary, .accordion__heading { font-size: 18px !important; line-height: 1.3 !important; /* Improve readability */ } } /* Fix banner image not cropped on mobile */ @media screen and (max-width: 768px) { .slideshow__media { background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; background: transparent !important; } } /* 1.5 Section-Specific Color Overrides */ /* Modern Science Refines the Wisdom of TCM - Color Overrides */ #shopify-section-template--19953745133722__single_banner_FezVPt .banner__heading.inline-richtext.h1 { color: #133263 !important; } #shopify-section-template--19953745133722__single_banner_FezVPt .banner__text.rte.subtitle, #shopify-section-template--19953745133722__single_banner_FezVPt .banner__text.rte.subtitle strong { color: #333333 !important; } /* Loved By Our Community - Color Override */ #shopify-section-template--19953745133722__social_media_list_MgE3UP .section-head.inline-richtext.h1 { text-align: center !important; color: #133263 !important; } /* Universal Button Typography & Sizing - Pill Shape */ .button.button--primary, .banner__buttons .button, .slideshow__btn, .button.button--secondary { font-family: DM Sans !important; font-weight: 700 !important; font-style: normal !important; font-size: 18px !important; line-height: 100% !important; letter-spacing: 0% !important; text-transform: uppercase !important; border-radius: 100px !important; padding-top: 12px !important; padding-right: 20px !important; padding-bottom: 12px !important; padding-left: 20px !important; min-height: 47px !important; } /* Fixed width buttons (specific sections) */ #shopify-section-template--19953745133722__single_banner_FezVPt .banner__buttons .button.button--primary, #shopify-section-template--19953745133722__slideshow_DmaWTF .slideshow__btn { width: 246px !important; } /* Mobile - responsive button width */ @media screen and (max-width: 810px) { .button.button--primary, .banner__buttons .button, .slideshow__btn { width: 100% !important; max-width: 246px !important; } } /* 1.6 GET YOUR ENERGY BACK - Button Width */ /* Inherits universal banner typography, only button width specified */ #shopify-section-template--19953745133722__single_banner_imW4bT .banner__buttons .button.button--primary { width: 246px !important; } /* 1.7 Banner Sections */ /* Scrolling promotion bar image height */ #shopify-section-template--19953745133722__scrolling_promotion_HLnw7E .scroll_imgtext img { width: 168.75px !important; height: 90px !important; object-fit: contain !important; } /* Image with text - align text content with container */ /* Use section ID for ultra-specific targeting - won't affect footer or other sections */ /* Make section full width - extend beyond container to both edges */ #shopify-section-template--19953744838810__image_with_text_DYjHTL .section-full { width: 100vw !important; margin-left: calc(-50% + 50vw) !important; } /* Add linear gradient overlay from left to right */ #shopify-section-template--19953744838810__image_with_text_DYjHTL .imgtxtfull .img_double .image-with-text__media-item::after { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(to right, #EFF5F6 0%, rgba(239, 245, 246, 0) 20%) !important; pointer-events: none !important; z-index: 1 !important; } /* Align text content with container */ /*#shopify-section-template--19953744838810__image_with_text_DYjHTL .imgtxtfull .img_double .image-with-text__content.content-container { padding-left: 10rem !important; padding-right: 4rem !important; }*/ /* Mobile - reduce padding */ @media screen and (max-width: 810px) { #shopify-section-template--19953744838810__image_with_text_DYjHTL .imgtxtfull .img_double .image-with-text__content.content-container { padding-left: 2rem !important; padding-right: 2rem !important; } } /* Ali King Brand Story Section - Full Width */ /* #shopify-section-template--20420621238426__image_with_text_64wGtC .section-full { width: 100vw !important; margin-left: calc(-50% + 50vw) !important; } */ /* Ali King R&D Team Section - Full Width */ /*#shopify-section-template--20420621238426__image_with_text_mEFjFi .section-full { width: 100.7vw !important; }*/ /* Align text content with container */ /*#shopify-section-template--20420621238426__image_with_text_64wGtC .imgtxtfull .img_double .image-with-text__content.content-container { padding-left: 10rem !important; padding-right: 10rem !important; }*/ /* Mobile - reduce padding */ @media screen and (max-width: 810px) { #shopify-section-template--20420621238426__image_with_text_64wGtC .imgtxtfull .img_double .image-with-text__content.content-container { padding-left: 2rem !important; padding-right: 2rem !important; } } /* Align text content with container */ /*#shopify-section-template--20420621238426__image_with_text_mEFjFi .imgtxtfull .img_double .image-with-text__content.content-container { padding: 0 5rem !important; max-width: calc(var(--page-width) / 2) !important; }*/ /* Mobile - reduce padding */ @media screen and (max-width: 810px) { #shopify-section-template--20420621238426__image_with_text_mEFjFi .imgtxtfull .img_double .image-with-text__content.content-container { padding-left: 2rem !important; padding-right: 2rem !important; } } /* Brand Focus Rich Text Section - Full Width */ /*#shopify-section-template--20420621238426__rich_text_tcG9mJ .section-full { width: 100vw !important; margin-left: calc(-50% + 50vw) !important; }*/ /* What is Tongkat Ali Section - Full Width */ /*#shopify-section-template--20420621238426__image_with_text_8J4JGt .section-full { width: 100vw !important; margin-left: calc(-50% + 50vw) !important; }*/ /* Align text content with padding-left: 10rem */ /*#shopify-section-template--20420621238426__image_with_text_8J4JGt .imgtxtfull .img_double .image-with-text__content.content-container { padding-left: 10rem !important; padding-right: 10rem !important; }*/ /* Mobile - reduce padding */ @media screen and (max-width: 810px) { #shopify-section-template--20420621238426__image_with_text_8J4JGt .imgtxtfull .img_double .image-with-text__content.content-container { padding-left: 2rem !important; padding-right: 2rem !important; } } /* Functional Credibility Rich Text Section - Full Width */ /*.section-template--20420621238426__rich_text_6EbHxB.section-full { width: 100vw !important; margin-left: calc(-50% + 50vw) !important; }*/ /* Green Kare Section - Full Width */ /*#shopify-section-template--20433956569242__image_with_text_64wGtC .section-full { width: 100vw !important; margin-left: calc(-50% + 50vw) !important; }*/ /* Align text content with padding-left and padding-right: 10rem */ /*#shopify-section-template--20433956569242__image_with_text_64wGtC .imgtxtfull .img_double .image-with-text__content.content-container { padding-left: 10rem !important; padding-right: 10rem !important; }*/ /* Mobile - reduce padding */ @media screen and (max-width: 810px) { #shopify-section-template--20433956569242__image_with_text_64wGtC .imgtxtfull .img_double .image-with-text__content.content-container { padding-left: 2rem !important; padding-right: 2rem !important; } } /* Premium Herbal Extracts Section - Full Width */ /*#shopify-section-template--20433956569242__image_with_text_mEFjFi .section-full { width: 100vw !important; margin-left: calc(-50% + 50vw) !important; }*/ /* Align text content with padding-left and padding-right: 10rem */ /*#shopify-section-template--20433956569242__image_with_text_mEFjFi .imgtxtfull .img_double .image-with-text__content.content-container { padding-left: 10rem !important; padding-right: 10rem !important; }*/ /* Mobile - reduce padding */ @media screen and (max-width: 810px) { #shopify-section-template--20433956569242__image_with_text_mEFjFi .imgtxtfull .img_double .image-with-text__content.content-container { padding-left: 2rem !important; padding-right: 2rem !important; } } /* V'Emperor Section - Full Width */ /*#shopify-section-template--20434280546458__image_with_text_64wGtC .section-full { width: 100vw !important; margin-left: calc(-50% + 50vw) !important; }*/ /* Align text content with padding-left and padding-right: 10rem */ /*#shopify-section-template--20434280546458__image_with_text_64wGtC .imgtxtfull .img_double .image-with-text__content.content-container { padding-left: 10rem !important; padding-right: 10rem !important; }*/ /* Mobile - reduce padding */ @media screen and (max-width: 810px) { #shopify-section-template--20434280546458__image_with_text_64wGtC .imgtxtfull .img_double .image-with-text__content.content-container { padding-left: 2rem !important; padding-right: 2rem !important; } } /* V'Emperor Mindset Section - Full Width */ /*#shopify-section-template--20434280546458__image_with_text_mEFjFi .section-full { width: 100vw !important; margin-left: calc(-50% + 50vw) !important; }*/ /* Align text content with padding-left and padding-right: 10rem */ /*#shopify-section-template--20434280546458__image_with_text_mEFjFi .imgtxtfull .img_double .image-with-text__content.content-container { padding-left: 10rem !important; padding-right: 10rem !important; }*/ /* Mobile - reduce padding */ @media screen and (max-width: 810px) { #shopify-section-template--20434280546458__image_with_text_mEFjFi .imgtxtfull .img_double .image-with-text__content.content-container { padding-left: 2rem !important; padding-right: 2rem !important; } } /* Product Details Heading */ .pdt_additional_info .info_heading h3 { color: #333333 !important; font-size: 24px !important; } @media (max-width: 1440px) { .pdt_additional_info .info_heading h3 { color: #333333 !important; font-size: 20px !important; } } /* 1366 x 768 override */ @media (max-width: 1366px) { .pdt_additional_info .info_heading h3 { color: #333333 !important; font-size: 18px !important; } } .pdt_additional_info .accordion__title { color: #333333 !important; font-size: 24px !important; } @media (max-width: 1440px) { .pdt_additional_info .accordion__title { color: #333333 !important; font-size: 20px !important; } } /* 1366 x 768 override */ @media (max-width: 1366px) { .pdt_additional_info .accordion__title { color: #333333 !important; font-size: 18px !important; } } .metafield-rich_text_field h3 { color: #333333 !important; font-size: 24px !important; } @media (max-width: 1440px) { .metafield-rich_text_field h3 { color: #333333 !important; font-size: 20px !important; } } /* 1366 x 768 override */ @media (max-width: 1366px) { .metafield-rich_text_field h3 { color: #333333 !important; font-size: 18px !important; } } .multicolumn-card__info h3.inline-richtext { color: #333333 !important; font-size: 18px !important; } /* 1366 x 768 override */ @media (max-width: 1366px) { .metafield-rich_text_field h4 { font-size: 18px !important; } } /* Review Number */ .jm-review-widget-header__average-rating-display .jm-text:first-child { font-size: 24px !important; font-weight: bolder; } /* Most Recent Review Box */ .jm-sort-filter__select { border-radius: 999px !important; border: 1px solid #333333 !important; padding: 8px 16px !important; background-color: #fff !important; text-align: center !important; } /* Product Tags */ /*.product-tags .tag a { padding: 3px 10px !important; font-size: 16px !important; display: inline-block; }*/ /* Price Spacing on Product page */ .product__info-container .price { margin-top: 30px !important; margin-bottom: 30px !important; } /* Adjust H5 size in rich text section */ .rich-text__text.rte h5 { font-size: 24px !important; /* adjust sesuai kebutuhan */ line-height: 1.4 !important; font-weight: 600 !important; margin-bottom: 8px !important; } /* 1440px dan ke bawah */ @media screen and (max-width: 1440px) { .rich-text__text.rte h5 { font-size: 20px !important; } } /* 1366px dan ke bawah */ @media screen and (max-width: 1366px) { .rich-text__text.rte h5 { font-size: 18px !important; } } /* Product Detail Label */ #shopify-section-template--19953745395866__product_information_UrRWBY strong { font-weight: 600 !important; } /* Ensure text inside h5 & h6 also black */ h5, h6, h5 *, h6 * { color: #333333 !important; } /* Fix alignment for image-with-text content */ .image-with-text__grid > .image-with-text__text-item .image-with-text__content { padding-left: 10rem !important; padding-right: 5rem !important; max-width: calc(var(--page-width) / 2) !important; } /* Remove extra padding from heading */ .image-with-text__grid > .image-with-text__text-item .image-with-text__heading { padding: 0 !important; } .image-with-text__grid--reverse>.image-with-text__text-item .image-with-text__content { padding-left: 2rem !important; padding-right: 2rem !important; max-width: 100% !important; } /* Special: 2 images */ .img_double .image-with-text__grid .content_smallwidth .image-with-text__content { padding-left: 5rem !important; padding-right: 5rem !important; } /* CSS untuk mobile view */ @media screen and (max-width: 768px) { .multicolumn-list { display: block !important; /* Ubah layout menjadi block sehingga menjadi satu kolom */ } } /* CSS untuk mobile view */ @media screen and (max-width: 768px) { .multicolumn-card { margin-top: 20px !important; /* Menambahkan jarak atas antara card */ } } /*@media screen and (min-width: 1440px) { .image-with-text__content { padding: 0 5rem !important; max-width: calc(var(--page-width) / 2) !important; } }*/ /* ===== MULTICOLUMN TEXT (FINAL) ===== */ /* Desktop / Global */ .multicolumn-card__info .rte p { font-size: 17px !important; /* adjust sesuai kebutuhan */ line-height: 1.5 !important; margin: 0 !important; } /* ===== MOBILE ===== */ @media screen and (max-width: 768px) { .multicolumn-card__info .rte p { font-size: 16px !important; line-height: 1.5 !important; } } /* 1.8 Testimonials/Reviews */ /* Add testimonials styles here */ /* 1.9 Homepage Specific Components */ /* Add other homepage-specific styles here */ /* 1.10 Typography System */ /* Override heading and body text sizes using CSS variables */ /* Font-family: DM Sans (already set in theme) */ /* This approach is simpler - just override 2 variables per breakpoint */ /* Desktop (>1440px) - Base sizes */ :root { --font-heading-scale: 1.086 !important; /* H1: 76px, H2: 54px, H3: 43px, H4: 38px, H5: 27px, H6: 22px */ --font-body-scale: 1.125 !important; /* Body: 18px */ } /* Responsive breakpoint: 1440px and below */ @media screen and (max-width: 1440px) { :root { --font-heading-scale: 0.771 !important; /* H1: 54px, H2: 39px, H3: 31px, H4: 27px, H5: 19px, H6: 15px */ --font-body-scale: 1.125 !important; /* Body: 18px */ } /* Override H1 Subpages to be 42px instead of 54px */ .page-title, .collection-hero__title, .product__title { font-size: 42px !important; } } /* Responsive breakpoint: 1366px and below */ @media screen and (max-width: 1366px) { :root { --font-heading-scale: 0.6 !important; /* H1: 42px, H2: 30px, H3: 24px, H4: 21px, H5: 15px, H6: 12px */ --font-body-scale: 1.125 !important; /* Body: 18px */ } } /* Responsive breakpoint: 810px and below (mobile) */ @media screen and (max-width: 810px) { :root { --font-heading-scale: 0.429 !important; /* H1: 30px, H2: 21px, H3: 17px, H4: 15px, H5: 11px, H6: 9px */ --font-body-scale: 1.0 !important; /* Body: 16px */ } /* Override H2-H5 to match guide (variables too small for mobile) */ h2, .h2 { font-size: 30px !important; } h3, .h3 { font-size: 24px !important; } h4, .h4 { font-size: 20px !important; } h5, .h5 { font-size: 18px !important; } h6, .h6 { font-size: 14px !important; } } /* ============================================ 2. COLLECTION / SHOP ALL PAGE STYLES ============================================ */ /* 2.1 Collection Header */ /* Fix filter bar width to stay within page width (exclude homepage) */ @media (min-width: 1200px) { body:not(.page-index) #main-collection-filters { max-width: var(--page-width); } body:not(.page-index) .vertical_filter { max-width: var(--page-width); margin-left: auto; margin-right: auto; padding: 0 5rem; } } /* 2.2 Filter & Sort Sidebar */ /* Make dropdown sort by and filter rounded like add to cart button */ .facet-filters__sort, .facet-filters__field .select, .mobile-facets__sort .select, .facet-filters__field .select__select, .mobile-facets__sort .select__select { border-radius: var(--buttons-radius) !important; } .mobile-facets__open, .facets__summary { border-radius: var(--buttons-radius) !important; } /* Filter button background color #0F9EC4 with white text */ .mobile-facets__open { background-color: #0F9EC4 !important; color: #FFFFFF !important; border-color: #0F9EC4 !important; } /* Filter button text and icon color white */ .mobile-facets__open .mobile-facets__open-label, .mobile-facets__open .icon-filter, .mobile-facets__open svg { color: #FFFFFF !important; stroke: #FFFFFF !important; } /* Filter button hover state */ .mobile-facets__open:hover, .mobile-facets__open:focus { background-color: #005A72 !important; border-color: #005A72 !important; } /* 2.3 Product Grid */ /* Force add to cart button to appear in collection page (exclude homepage) */ body:not(.page-index) .card--card .quick-add.addcart_over { margin-top: 10px; grid-row-start: 4; opacity: 1; } /* Disable hover movement effect on add to cart button (exclude homepage) */ body:not(.page-index) .product-card-wrapper:hover .quick-add.addcart_over, body:not(.page-index) .product-card-wrapper:focus-within .quick-add.addcart_over { margin-top: 10px !important; } body:not(.page-index) .product-card-wrapper:hover .card--card .quick-add.addcart_over { margin-top: 10px !important; } body:not(.page-index) .product-card-wrapper:hover .quick-add.addcart_over.cartanimated, body:not(.page-index) .product-card-wrapper:focus-within .quick-add.addcart_over.cartanimated { margin-top: 10px !important; } /* Parent container centering for vendor card */ .card-information, .card__inner { text-align: center !important; } /* Vendor card styling - white background, blue outline, uppercase, centered */ .card_vendor { background-color: #FFFFFF !important; color: #0F9EC4 !important; text-transform: uppercase !important; border: 1px solid #0F9EC4 !important; padding: 1px 4px !important; border-radius: 4px !important; font-weight: 600 !important; letter-spacing: 0.5px !important; display: inline-flex !important; justify-content: center !important; width: fit-content !important; max-width: 100% !important; margin: 0 auto !important; } /* Product badge positioning - move from left to right */ .product_badge { position: absolute !important; right: 0px !important; left: auto !important; } /* 2.4 Pagination */ /* Add pagination styles here */ /* 2.5 Collection Page Components */ /* Hide layout switcher (list/grid view toggle buttons) */ .button_switcher .wblistgridbtn, .button_switcher div.wblistgridbtn, .button_switcher .list_grid.wblistgridbtn { display: none !important; } /* ============================================ 3. PRODUCT PAGE STYLES ============================================ */ /* 3.1 Product Gallery */ /* Add product gallery styles here */ /* 3.2 Product Information */ /* Product summary styling - Quality & Safety Assurance and details */ .product_summary .info_content .grid { gap: 15px; } .pdt_additional_info li.grid__item.icon-with-text__item { align-items: baseline; justify-content: left; text-align: left; max-width: none; width: 100%; padding-bottom: 15px; border-bottom: #E0E0E0 solid 1px; display: inline; } .pdt_additional_info li.grid__item.icon-with-text__item:last-child { border-bottom: 0px; padding-bottom: 0px; } .info_details ul { display: block; justify-content: normal; padding-left: 15px; list-style: disc; } .product_summary img { max-width: 100%; } /* 3.3 Product Form (Add to Cart) */ /* Buy it now button styling - override Shopify CSS variables */ .shopify-payment-button__button--unbranded, button.shopify-payment-button__button, shopify-buy-it-now-button button { --color-button: 15, 158, 196 !important; --color-button-hover: 0, 90, 114 !important; --color-secondary-button: 15, 158, 196 !important; --color-secondary-button-text: 255, 255, 255 !important; } button.shopify-payment-button__button, button.shopify-payment-button__button--unbranded, shopify-buy-it-now-button button, shopify-buy-it-now-button>button, button[class*="shopify-payment-button__button"], .product-form__buttons .shopify-payment-button button, .product-form__buttons button.shopify-payment-button__button { background-color: rgb(15, 158, 196) !important; background: rgb(15, 158, 196) !important; background-image: none !important; color: rgb(255, 255, 255) !important; border: 1px solid rgb(15, 158, 196) !important; border-color: rgb(15, 158, 196) !important; box-shadow: none !important; text-shadow: none !important; } button.shopify-payment-button__button:hover, button.shopify-payment-button__button:focus, button.shopify-payment-button__button--unbranded:hover, button.shopify-payment-button__button--unbranded:focus, shopify-buy-it-now-button button:hover, shopify-buy-it-now-button button:focus, shopify-buy-it-now-button>button:hover, shopify-buy-it-now-button>button:focus, button[class*="shopify-payment-button__button"]:hover, button[class*="shopify-payment-button__button"]:focus, .product-form__buttons .shopify-payment-button button:hover, .product-form__buttons button.shopify-payment-button__button:hover { background-color: rgb(0, 90, 114) !important; background: rgb(0, 90, 114) !important; background-image: none !important; color: rgb(255, 255, 255) !important; border: 1px solid rgb(0, 90, 114) !important; border-color: rgb(0, 90, 114) !important; box-shadow: none !important; text-shadow: none !important; } /* Quantity buttons rounded corners */ .quantity .quantity__button, .quantity button.quantity__button, .quantity input~.quantity__button, .product-form__quantity .quantity__button, .quantity button[name="minus"], .quantity button[name="plus"], .quantity__button:not([disabled]), button.quantity__button[name="minus"], button.quantity__button[name="plus"], price-per-item__container .quantity__button { border-radius: var(--buttons-radius) !important; } /* 3.4 Product Accordion/Tabs */ /* Add product accordion/tabs styles here */ /* 3.5 Related Products */ /* Add related products styles here */ /* 3.6 Product Page Components */ /* Product tags styling - red box, uppercase, white text */ .product-tags .tag { background-color: #BB0000 !important; color: #FFFFFF !important; text-transform: uppercase !important; padding: 3px 10px !important; font-weight: 600 !important; font-size: 16px !important; letter-spacing: 0.5px !important; display: inline-block !important; } .product-tags .tag a { color: #FFFFFF !important; text-decoration: none !important; } /* Image With Text Section */ /* Article Title */ /* Align article title to left */ .article-card .card__information { text-align: left !important; } .article-card h3.card__heading_small a.full-unstyled-link { text-align: left !important; display: block; } .header__icon--account svg path { stroke-width: 2.3 !important; } /* Product Name and Price on Review About Us */ /* Specific: testimonial_with_image product card */ product-info[id*="testimonial_with_image"] .card__information, product-info[id*="testimonial_with_image"] .card__heading, product-info[id*="testimonial_with_image"] .price { text-align: left !important; } /* Pastikan link di dalam heading ikut left */ product-info[id*="testimonial_with_image"] .card__heading a { text-align: left !important; display: block; } /* Optional: rapikan spacing kalau perlu */ product-info[id*="testimonial_with_image"] .card__information { align-items: flex-start !important; } /* TESTIMONIAL WIDGET ONLY */ #ProductInfo-template--19953745199258__testimonial_with_image_itzpFn-8825283838106 .card__information, #ProductInfo-template--19953745199258__testimonial_with_image_itzpFn-8825283838106 .price, #ProductInfo-template--19953745199258__testimonial_with_image_itzpFn-8825283838106 .price__container, #ProductInfo-template--19953745199258__testimonial_with_image_itzpFn-8825283838106 .price__regular, #ProductInfo-template--19953745199258__testimonial_with_image_itzpFn-8825283838106 .price__sale { text-align: left !important; justify-content: flex-start !important; } /* Default / regular price */ #ProductInfo-template--19953745199258__testimonial_with_image_itzpFn-8825283838106 .price__regular .price-item.price-item--regular { font-size: 14px !important; color: #333333 !important; } /* Sale price */ #ProductInfo-template--19953745199258__testimonial_with_image_itzpFn-8825283838106 .price__sale .price-item.price-item--sale.price-item--last { font-size: 14px !important; color: #E60013 !important; } /* Strikethrough price */ #ProductInfo-template--19953745199258__testimonial_with_image_itzpFn-8825283838106 .price__sale s.price-item.price-item--regular { font-size: 12px !important; color: #828282 !important; } /* Force strikethrough color in case theme styles inner text */ #ProductInfo-template--19953745199258__testimonial_with_image_itzpFn-8825283838106 .price__sale s.price-item.price-item--regular *, #ProductInfo-template--19953745199258__testimonial_with_image_itzpFn-8825283838106 .price__sale s { color: #828282 !important; } /* Accordion Text */ .accordion__content p { margin-top: 15px !important; } @media (max-width: 1440px) { .accordion__title { font-size: 20px !important; line-height: 1.4 !important; } } @media screen and (max-width: 768px) { .accordion__title { font-size: 16px !important; line-height: 1.4 !important; } } /* Product Explanation Cards */ @media screen and (max-width: 768px) { /*.multicolumn-list { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; }*/ /*.multicolumn-list__item { width: 100% !important; max-width: 100% !important; }*/ } /* Paragraph alignment on iPad */ @media screen and (max-width: 1024px) and (orientation: portrait) { .image-with-text__grid > .image-with-text__text-item .image-with-text__content, .image-with-text__grid--reverse>.image-with-text__text-item .image-with-text__content { margin: auto; padding-left:0px; padding-right:0px; padding-bottom: 40px; width: 100%; } } /* CSS untuk mobile view */ @media screen and (max-width: 768px) { .image-with-text__text_content p { padding: 0 15px !important; /* Sesuaikan padding kiri dan kanan */ margin: 0 !important; /* Hapus margin jika ada */ } } /* Product Tags */ /* Add spacing above product tags container */ .product-tags { margin-top: 12px !important; } /* Add spacing between rows if wrapping happens */ .product-tags .tag { margin-bottom: 6px; } /* Optional: spacing between each tag */ .product-tags .tag { margin-right: 6px; } /* h2 about 1440 x 900 */ /* Safer selector */ @media screen and (min-width: 1400px) and (max-width: 1440px) { .rich-text__heading { font-size: 42px !important; } } /* 1366 x 768 */ @media screen and (min-width: 1300px) and (max-width: 1366px) { .rich-text__heading { font-size: 36px !important; } } @media screen and (max-width: 1024px) and (orientation: portrait) { .img_double .image-with-text__grid .content_smallwidth .image-with-text__content { width:100% !important; } } /* Product Price */ /* Style sale price */ /*.price-item.price-item--sale { color: #133263 !important; font-size: 42px !important; font-weight: 700 !important; } */ /* Optional: kalau mau harga normal (coret) tetap lebih kecil */ /*.price-item.price-item--regular { font-size: 30px !important; color: #133263 !important; text-decoration: none !important; } */ /* NORMAL PRICE (tidak sale) */ .price:not(.price--on-sale) .price-item--regular { font-size: 18px !important; color: #133263 !important; text-decoration: none !important; } /* Target ONLY product main price */ #price-template--19953745395866__main .price:not(.price--on-sale) .price-item--regular { font-size: 42px !important; color: #133263 !important; text-decoration: none !important; font-weight: 700 !important; } /* Laptop ~1440px width */ @media screen and (min-width: 1400px) and (max-width: 1440px) { #price-template--19953745395866__main .price:not(.price--on-sale) .price-item--regular { font-size: 32px !important; } } /* COMPARE PRICE (harga lama saat sale) */ .price--on-sale .price-item--regular { text-decoration: line-through !important; color: #828282 !important; font-size: 30px !important; } @media (max-width: 1440px) { .price--on-sale .price-item--regular { font-size: 24px !important; } } /* 1366 x 768 override */ @media (max-width: 1366px) { .price--on-sale .price-item--regular { font-size: 20px !important; } } /* SALE PRICE (harga diskon) */ .price--on-sale .price-item--sale { font-size: 42px !important; color: #E60013 !important; font-weight: 700 !important; } @media (max-width: 1440px) { .price--on-sale .price-item--sale { font-size: 32px !important; } } /* 1366 x 768 override */ @media (max-width: 1366px) { .price--on-sale .price-item--sale { font-size: 24px !important; } } /* Price Per Item */ /* Add border radius to price per item box */ .price-per-item__container { border-radius: 50px !important; overflow: hidden; /* penting supaya isi ikut rounded */ border: 1px solid #333333 !important; } /* Wordbreak */ /* Apply to all viewports */ .rte li { word-break: normal !important; list-style-position: outside !important; } /* Product info on iPad 834 x 1091 (portrait) */ @media screen and (min-width: 820px) and (max-width: 860px) and (min-height: 1080px) and (max-height: 1120px) and (orientation: portrait) { .pdt_additional_info .info_content ul li:nth-child(2) { text-align: right; } } /* Set font size of the vendor name in the cart to 14px */ .cart_vendor { font-size: 14px !important; /* Ensure it overrides other styles */ } /* Change background color of the Add To Cart button */ #ProductSubmitButton-template--19953745428634__quick_view_jbCP38 { background-color: #87BA45 !important; } /* Make product image to always be clear */ .card__media img, .card__inner .media img { opacity: 1 !important; filter: none !important; transform: none !important; } /* Disable hover-only clarity effect */ .card__inner:hover .media img, .card:hover .media img { opacity: 1 !important; filter: none !important; transform: none !important; } .card__media, .media { filter: none !important; opacity: 1 !important; } /* Reduce multicolumn image size on iPad 834px view */ @media screen and (min-width: 820px) and (max-width: 860px) { #shopify-section-template--19953745199258__multicolumn_GXy6Uy .multicolumn-card__image { width: 65% !important; max-width: 260px !important; height: auto !important; } #shopify-section-template--19953745199258__multicolumn_GXy6Uy .media--adapt img.multicolumn-card__image { left: 50% !important; transform: translateX(-50%) !important; } } /* Reduce image container height and spacing on iPad 834px view */ @media screen and (min-width: 820px) and (max-width: 860px) { #shopify-section-template--19953745199258__multicolumn_GXy6Uy .multicolumn-card__image-wrapper .media--adapt { padding-bottom: 70% !important; } #shopify-section-template--19953745199258__multicolumn_GXy6Uy .multicolumn-card__image-wrapper { margin-bottom: 8px !important; } #shopify-section-template--19953745199258__multicolumn_GXy6Uy .multicolumn-card__info { padding-top: 0 !important; margin-top: 0 !important; } } /* Testimonial Section of About Us Page on iPad */ @media screen and (min-width: 820px) and (max-width: 860px) { .testimonial .testi_swiper_slide .testi_first_slide { flex-wrap: wrap; } .testi_image_width.testi_width_both.test_img_only { width: 100%; } .testi_content_width { width: 100%; margin-left: auto; margin-right: auto; } .testi_product h3 { font-size: calc(var(--font-body-scale)* 14px); margin-bottom: 6px; } .testi_product .price { font-size: calc(var(--font-body-scale)* 14px); } .testi_product > div { gap: 10px; } .testi_product { margin-top: 20px; padding: 10px; max-width: 350px; } .single_testimonial .grid__item { max-width: 100%; width: 100%; } .single_testimonial .swiper-slide:only-child { width: 100% !important; } .review_content { margin-top: 10px; } .mpos_testi-top { align-items: flex-start; } .mpos_testi-bottom { align-items: flex-end; } .malign_testi-left .banner__box { text-align: left; } .malign_testi-right .banner__box { text-align: right; } .malign_testi-left { justify-content: left; } .malign_testi-right { justify-content: end; } .testimonial .testi_swiper_slide .testi_first_slide { flex-direction: column; gap: 20px; } .testimonial_inner { margin-top: 20px !important; } .testi_with_image .testimonial_inner, .testi_image_width.testi_width_both.test_img_only { width: 100%; max-width: 100%; } .testi_pagination .swiper-pagination { bottom: 15px; left: 15px; transform: translate(0%, 0%); top: unset; } .testi_with_image span.swiper-pagination-current { font-size: calc(var(--font-body-scale)* 20px); } .testi_with_image .fraction-separator { font-size: calc(var(--font-body-scale)* 14px); } .testi_pagination .swiper-pagination { padding: 10px; } .testi_pagination .swiper-pagination { height: 90px; width: 90px; } .testi_p .left h3 { font-size: calc(var(--font-body-scale)* 14px); } .testi_swiper_slide.swiper-slide-prev, .testi_swiper_slide.swiper-slide-next { opacity: 0; transition: all 0.3s; } .testi_with_image.slide_full .media, .testi_with_image.slide_full .media>img, .testi_with_image.slide_full .media svg.placeholder-svg { border-radius: 0 } } /* Make logo icons display in 2 columns on mobile */ @media screen and (max-width: 767px) { .multicolumn-list.grid--2-col-tablet-down { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 24px 16px !important; } .multicolumn-list .multicolumn-list__item { width: 100% !important; max-width: 100% !important; } .multicolumn-card__image-wrapper { display: flex !important; justify-content: center !important; align-items: center !important; } .multicolumn-card__image-wrapper img { max-width: 120px !important; width: 100% !important; height: auto !important; object-fit: contain !important; } } /* Match Buy It Now size & typography to Add to Cart */ .shopify-payment-button__button { font-size: 18px !important; font-weight: 700 !important; text-transform: uppercase !important; border-radius: 50px !important; height: 50px !important; min-height: 50px !important; line-height: normal !important; padding: 0 20px !important; display: flex !important; align-items: center; justify-content: center; } /* Paragraph on About Us page */ #shopify-section-template--19953745199258__image_with_text_mEFjFi p { padding: 0 !important; } /* left side review */ .testimonial_inner { padding-left: 15rem !important; } @media screen and (max-width: 768px) { .testimonial_inner { padding-left: 1rem !important; } } /* Default */ .review_author { font-weight: bold !important; color: #133263 !important; font-size: 24px !important; } /* Occupation Review */ .testimonial_inner .review_occ { font-size: 18px !important; } /* Paragraph Review */ .testimonial_inner .review_content p { font-size: 28px !important; } @media screen and (max-width: 1440px) { .testimonial_inner .review_content p { font-size: 20px !important; } } @media screen and (max-width: 1366px) { .testimonial_inner .review_content p { font-size: 18px !important; } } /* Product Name Center Align */ /* Khusus product card (featured collection) */ /* Force center tanpa ganggu section lain */ /*.card__information .card-information .card__heading a { display: flex; justify-content: center; text-align: center !important; }*/ /* Product Name on Review About Us Page */ /*.card__information > .card-information .card__heading a { text-align: left !important; }*/ /* Center align ONLY product titles using product-specific attribute */ [data-product-id] .card__heading { display: block !important; text-align: center !important; } [data-product-id] .card__heading a { display: block !important; width: 100% !important; text-align: center !important; } @media screen and (max-width: 810px) { .testimonial_inner .review_occ { font-size: 16px !important; } } /* 1440px dan ke bawah */ @media screen and (max-width: 1440px) { .review_author { font-size: 20px !important; } } /* 1366px dan ke bawah */ @media screen and (max-width: 1366px) { .review_author { font-size: 18px !important; } } /* Ensure inner text also follows */ .shopify-payment-button__button * { font-size: inherit !important; font-weight: inherit !important; text-transform: inherit !important; } /* Remove default Shopify style inconsistencies */ .shopify-payment-button__button--unbranded { box-shadow: none !important; } /* Product Social Share */ /* Change social icon color */ .fix_content.social_share ul li a { color: #133263 !important; } /* If icon is SVG */ .fix_content.social_share ul li a svg { fill: #133263 !important; } /* Change border color of social icons */ .fix_content.social_share ul li a { border: 1px solid #133263 !important; } /* Kalau bentuknya bulat */ .fix_content.social_share ul li a { border-radius: 50%; } /* Hover effect for social icons */ .fix_content.social_share ul li a:hover { color: #258FAB !important; border: 1px solid #258FAB !important; } /* SVG fill on hover */ .fix_content.social_share ul li a:hover svg { fill: #258FAB !important; } /* SVG stroke (kalau icon pakai outline) */ .fix_content.social_share ul li a:hover svg path { stroke: #258FAB !important; } /* ===== ICON WITH TEXT SECTION ===== */ /* ===== QUALITY & SAFETY ASSURANCE - FORCE MATCH DESIGN ===== */ /* Main wrapper */ .fix_content.icon-with-text.list-unstyled { display: block !important; margin: 0 !important; padding: 0 10px !important; } /* Each row */ .fix_content.icon-with-text.list-unstyled .grid__item.icon-with-text__item { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; gap: 18px !important; padding: 18px 0 !important; margin: 0 !important; text-align: left !important; border-bottom: 1px solid #d9d9d9 !important; } /* Remove last divider */ .fix_content.icon-with-text.list-unstyled .grid__item.icon-with-text__item:last-child { border-bottom: none !important; } /* Prevent inner elements from centering */ .fix_content.icon-with-text.list-unstyled .grid__item.icon-with-text__item > * { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } /* Icon */ .fix_content.icon-with-text.list-unstyled .grid__item.icon-with-text__item img { width: 42px !important; height: 42px !important; min-width: 42px !important; max-width: 42px !important; object-fit: contain !important; display: block !important; flex-shrink: 0 !important; } /* Text */ .fix_content.icon-with-text.list-unstyled .grid__item.icon-with-text__item .inline-richtext { display: block !important; flex: 1 1 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; font-size: 16px !important; line-height: 1.35 !important; font-weight: 400 !important; color: #333333 !important; } /* Remove richtext paragraph spacing */ .fix_content.icon-with-text.list-unstyled .grid__item.icon-with-text__item .inline-richtext p { margin: 0 !important; text-align: left !important; } /* Force text children left */ .fix_content.icon-with-text.list-unstyled .grid__item.icon-with-text__item .inline-richtext, .fix_content.icon-with-text.list-unstyled .grid__item.icon-with-text__item .inline-richtext * { text-align: left !important; } /* Mobile */ @media screen and (max-width: 768px) { .fix_content.icon-with-text.list-unstyled { padding: 0 22px !important; } .fix_content.icon-with-text.list-unstyled .grid__item.icon-with-text__item { gap: 14px !important; padding: 16px 0 !important; } .fix_content.icon-with-text.list-unstyled .grid__item.icon-with-text__item img { width: 38px !important; height: 38px !important; min-width: 38px !important; max-width: 38px !important; } .fix_content.icon-with-text.list-unstyled .grid__item.icon-with-text__item .inline-richtext { font-size: 16px !important; line-height: 1.35 !important; } } /* Fix bullet for mobile */ @media screen and (max-width: 768px) { .image-with-text__text ul { padding-left: 1rem !important; margin: 0.6rem 0 !important; } .image-with-text__text ul li { margin-bottom: 0.3rem !important; line-height: 1.5 !important; list-style-position: outside !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; hyphens: none !important; } .image-with-text__text ul li::marker { font-size: 0.7em; } } /* Product Accordion Left Alignment */ @media screen and (max-width: 768px) { .pdt_additional_info .accordion summary { text-align: left !important; } } @media screen and (max-width: 768px) { /* Reset list spacing */ .accordion__content ul { padding-left: 0 !important; margin: 0 !important; } /* Create custom bullet layout using flex */ .accordion__content ul li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; line-height: 1.5; /* Prevent awkward word breaking */ word-break: normal !important; overflow-wrap: break-word !important; white-space: normal !important; } /* Custom bullet dot */ .accordion__content ul li::before { content: "•"; flex-shrink: 0; line-height: 1.5; margin-top: 2px; } /* Ensure text takes full width so next line aligns properly */ .accordion__content ul li span, .accordion__content ul li p, .accordion__content ul li { width: 100%; } } /* Target table inside rich text (rte) within accordion */ .accordion__content.rte table { margin-top: 20px; } @media screen and (max-width: 768px) { /* Make table container scroll horizontally on mobile */ .accordion__content table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; } /* Prevent table from shrinking too much */ .accordion__content table tbody, .accordion__content table thead, .accordion__content table tr { width: 100%; } /* Ensure cells have proper spacing and readability */ .accordion__content table th, .accordion__content table td { padding: 8px 10px; font-size: 13px; line-height: 1.4; text-align: left; white-space: nowrap; /* prevent text from breaking awkwardly */ } /* Improve header readability */ .accordion__content table th { font-weight: 600; } /* Add subtle border for clarity */ .accordion__content table, .accordion__content table th, .accordion__content table td { border: 1px solid #e5e5e5; } /* Optional: add spacing around table */ .accordion__content { padding-right: 10px; } } /* Force button base style */ .feature_tags .button { border-radius: 5px !important; /* ensure consistent radius */ background: #87BA45 !important; /* override background */ color: #258FAB !important; border: none !important; position: relative; overflow: hidden; /* prevent pseudo element overflow */ } /* Force hover state */ .feature_tags .button:hover { background: #76a53a !important; /* darker green */ border-radius: 5px !important; /* prevent reverting radius */ } /* Override pseudo elements used by theme */ .feature_tags .button::before, .feature_tags .button::after { background: #87BA45 !important; border-radius: 5px !important; transform: none !important; /* disable animation scaling */ opacity: 1 !important; } /* Ensure hover does not trigger old animation */ .feature_tags .button:hover::before, .feature_tags .button:hover::after { background: #76a53a !important; border-radius: 5px !important; transform: none !important; } /* Remove all button shadows */ .feature_tags .button, .feature_tags .button:hover, .feature_tags .button:focus, .feature_tags .button:active { box-shadow: none !important; filter: none !important; } /* Remove shadow from pseudo elements if any */ .feature_tags .button::before, .feature_tags .button::after { box-shadow: none !important; filter: none !important; } /* Remove ALL CAPS on filter text */ .facet-checkbox__text { text-transform: none !important; } /* Customer Reviews title styling */ .jm-review-widget-header__title { font-size: 42px !important; font-weight: 700 !important; color: #133263 !important; } /* Responsive font size for "Customer Reviews" title */ /* ≤ 1440px */ @media screen and (max-width: 1440px) { .jm-review-widget-header__title { font-size: 32px !important; /* Reduce from 42px */ } } /* ≤ 1366px */ @media screen and (max-width: 1366px) { .jm-review-widget-header__title { font-size: 24px !important; /* Further reduce for smaller screens */ } } /* Space of each blog post on mobile */ /* Add 20px spacing between blog posts on mobile (correct selector based on structure) */ @media screen and (max-width: 767px) { .blog-articles__article { margin-bottom: 20px !important; /* Space between each blog post */ } /* Remove extra space on last item */ .blog-articles__article:last-child { margin-bottom: 0 !important; } } /* h1 "Your Cart" on cart page */ /* Responsive font size for "Your Cart" title */ /* Default (1920px and above) */ h1.title.title--primary { font-size: 64px !important; } /* ≤ 1440px */ @media screen and (max-width: 1440px) { h1.title.title--primary { font-size: 42px !important; } } /* ≤ 1366px */ @media screen and (max-width: 1366px) { h1.title.title--primary { font-size: 36px !important; } } /* ≤ 810px (mobile) */ @media screen and (max-width: 810px) { h1.title.title--primary { font-size: 30px !important; } } /* Set "Estimated total" font size to 18px on mobile only */ @media screen and (max-width: 810px) { .totals__total.h2 { font-size: 18px !important; line-height: 1.3 !important; /* Improve readability */ } } /* "Suggestions" on cart drawer for mobile */ /* Set "Suggestions" text to 18px on mobile */ @media screen and (max-width: 810px) { #predictive-search-queries.predictive-search__heading.h2 { font-size: 18px !important; line-height: 1.3 !important; /* Improve readability */ } } /* Set "Products" heading to 18px on mobile */ @media screen and (max-width: 810px) { #predictive-search-products.predictive-search__heading.h2 { font-size: 18px !important; line-height: 1.3 !important; /* Improve readability */ } } /* Force style Write a Review button */ button.jm-button.jm-action-button { border-radius: 999px !important; text-transform: uppercase !important; } /* Override kemungkinan dari parent atau app */ .jm-review-widget button.jm-button { border-radius: 999px !important; text-transform: uppercase !important; font-weight: 700 !important; padding: 14px 28px !important; letter-spacing: 0.5px; } /* Align blog title to the left */ .card__heading, .card__heading a { text-align: left !important; color: #333333; } .card__heading, .card__heading a:hover { color: #133263; } /* Ensure parent container does not center content */ .article-card .card__heading { justify-content: flex-start !important; text-align: left !important; } /* Article Heading */ .article-template__title { font-size: 64px !important; font-weight: 700; } @media (max-width: 1440px) { .article-template__title { font-size: 42px !important; } } /* 1366 x 768 override */ @media (max-width: 1366px) { .article-template__title { font-size: 36px !important; } } .article-template__content.rte h2 { font-size: 42px; font-weight: 700; } @media (max-width: 1440px) { .article-template__content.rte h2 { font-size: 32px; } } /* 1366 x 768 override */ @media (max-width: 1366px) { .article-template__content.rte h2 { font-size: 24px; } } /* Adjust subheading (H2) size on mobile */ @media screen and (max-width: 768px) { .article-template__content h2, .rte h2 { font-size: 18px !important; /* reduce size */ line-height: 1.4 !important; /* improve readability */ margin-bottom: 10px; color: #333333; } } /* Change H3 color only inside article content */ .article-template__content h3 { color: #333333 !important; font-size: 32px; font-weight: 700; } @media (max-width: 1440px) { .article-template__content h3 { font-size: 24px; } } /* 1366 x 768 override */ @media (max-width: 1366px) { .article-template__content h3 { font-size: 20px; } } /* Change H4 color only inside article content */ .article-template__content h4 { color: #333333 !important; font-size: 24px; font-weight: 700; } @media (max-width: 1440px) { .article-template__content h4 { font-size: 20px; } } /* 1366 x 768 override */ @media (max-width: 1366px) { .article-template__content h4 { font-size: 18px; } } /* Adjust blog title size on mobile */ @media screen and (max-width: 768px) { .article-template__title { font-size: 20px !important; /* reduce title size */ line-height: 1.4 !important; /* improve readability */ letter-spacing: 0.2px; margin-top: 20px; } } /* Adjust subheading (H3) size on mobile */ @media screen and (max-width: 768px) { .article-template__content h3, .rte h3 { font-size: 16px !important; /* reduce size */ line-height: 1.4 !important; /* improve readability */ margin-bottom: 8px; } } /* Blog Title Size */ /* Alternatif lebih umum tapi masih aman */ .card__content .card__heading.small a[href*="/blogs/"] { font-size: 24px !important; } /* Khusus semua judul blog (small + medium) */ .card__content .card__heading.small a[href*="/blogs/"], .card__content .card__heading.medium a[href*="/blogs/"] { font-size: 24px !important; line-height: 1.3; } @media screen and (min-width: 1300px) and (max-width: 1399px) { .card__content .card__heading.small a[href*="/blogs/"], .card__content .card__heading.medium a[href*="/blogs/"] { font-size: 20px !important; line-height: 1.3; } } /* Khusus judul blog di search results */ .search__results .search_blog .card__heading a[href*="/blogs/"] { line-height: 1.3; } @media screen and (min-width: 1300px) and (max-width: 1399px) { .search__results .search_blog .card__heading a[href*="/blogs/"] { font-size: 20px !important; } } /* Search Result */ .predictive-search__item-vendor { Font size: 14px !important; Font-weight: 600 !important; color: #258FAB !important; } .search_product .predictive-search__item-heading { text-align: left !important; } .search_product .predictive-search__item-heading a { font-size: 18px !important; font-weight: 600 !important; color: #333333 !important; } /* Mobile predictive search product title */ @media screen and (max-width: 767px) { #predictive-search-results-products-list .card__heading.predictive-search__item-heading a.full-unstyled-link { font-size: 16px !important; line-height: 1.2 !important; } } .search_product .price__sale span.price-item.price-item--sale { font-size: 18px !important; text-align: left !important; } .search_product .price__sale .price-item.price-item--regular { font-size: 14px !important; text-align: left !important; } /* Mobile predictive search product price */ @media screen and (max-width: 767px) { #predictive-search-results-products-list .price .price-item--regular { font-size: 14px !important; line-height: 1.2 !important; } } .search_product .price__regular .price-item.price-item--regular { font-size: 18px !important; text-align: left !important; } /* FORCE LEFT ALIGN FOR ALL SEARCH RESULT ITEMS */ .predictive-search .card__content, .predictive-search .price, .predictive-search .price__container, .predictive-search .price__regular, .predictive-search .price__sale { text-align: left !important; justify-content: flex-start !important; } /* TARGET SEARCH MODAL (bukan predictive) */ .search-modal .card__information, .search-modal .card__content, .search-modal .price, .search-modal .price__container { text-align: left !important; justify-content: flex-start !important; align-items: flex-start !important; } /* Paksa layout text block ke kiri */ .search-modal .card__information { display: flex !important; flex-direction: column !important; align-items: flex-start !important; } /* Pastikan price tidak shrink/center */ .search-modal .price { width: 100% !important; display: block !important; text-align: left !important; } /* Nuclear option (kalau masih bandel) */ .search-modal .price * { text-align: left !important; } /* Blog on Search Result */ /* Force for all article cards inside search */ .search-modal .article-card .card__inner.ratio { --ratio-percent: 56.28205128205128% !important; } /* Mobile predictive search blog title */ @media screen and (max-width: 767px) { .search__results .search_blog .card__heading a[href*="/blogs/"] { font-size: 16px !important; line-height: 1.3 !important; } } /* Fix bullet alignment and text wrapping on mobile */ @media screen and (max-width: 768px) { /* Reset default list styling */ .article-template__content ul, .rte ul { padding-left: 10px !important; margin-left: 10px !important; } /* Use flex layout to align bullet and text properly */ .article-template__content ul li, .rte ul li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; line-height: 1.5; /* Prevent awkward word breaking */ word-break: normal !important; overflow-wrap: break-word !important; white-space: normal !important; } /* Custom bullet */ .article-template__content ul li::before, .rte ul li::before { content: "•"; flex-shrink: 0; /* keep bullet fixed */ line-height: 1.5; margin-top: 2px; } /* Ensure text wraps under itself, not under bullet */ .article-template__content ul li > * , .rte ul li > * { flex: 1; } } /* Change blog article page background */ article.article-template { background-color: #eff5f6 !important; } /* Extend background to full content area */ article.article-template, article.article-template .page-width, article.article-template .article-template__content { background-color: #eff5f6 !important; } /* Ensure full page background for blog page */ body:has(article.article-template) { background-color: #eff5f6 !important; } body:has(article.article-template) #MainContent { background-color: #eff5f6 !important; } /* Adjust breadcrumb alignment on desktop */ @media screen and (min-width: 769px) { .breadcrumb { margin-left: 0 !important; /* reset margin */ padding-left: 0 !important; /* remove extra spacing */ } /* If still not aligned due to parent container padding */ .page-width .breadcrumb { margin-left: -20px; /* adjust value as needed */ } } /* Remove stroke on icon cart */ .header__icon--cart svg, .header__icon--cart svg * { stroke: none !important; } /* Wrapper teks + arrow */ .card__heading a { display: flex; align-items: center; justify-content: space-between; } /* Teks */ .card__heading span * { padding-left: 12px !important; font-size: 18px !important; } /* Arrow */ /*.card__heading svg { margin-left: 40px !important; flex-shrink: 0; }*/ /* Optional: rapikan keseluruhan padding card */ /*.card__content { padding: 12px 14px !important; }*/ /* Review Title on Homepage */ /* 1. Remove padding */ .jdgm-carousel-title-and-link { padding: 0 !important; } /* 2. Default (desktop besar) */ .jdgm-carousel-title-and-link h2 .jdgm-carousel-title * { font-size: 42px !important; font-weight: 700 !important; color: #133263 !important; margin: 0 !important; line-height: 1.2 !important; } /* 3. ≤ 1440px */ @media (max-width: 1440px) { .jdgm-carousel-title-and-link h2.jdgm-carousel-title { font-size: 32px !important; } } /* 4. ≤ 1366px */ @media (max-width: 1366px) { .jdgm-carousel-title-and-link h2.jdgm-carousel-title { font-size: 20px !important; } } /* FIX #5: Drawers sit above Smile.io Rewards button */ #smile-ui-lite-launcher-frame-container, iframe#smile-lite-launcher-frame { bottom: 180px !important; } @media screen and (max-width: 767px) { #smile-ui-lite-launcher-frame-container, iframe#smile-lite-launcher-frame { bottom: 180px !important; } } /* Product Name on Product Page */ /* Force override product H1 */ .product__info-wrapper h1.h1 { font-size: 64px !important; } @media (max-width: 1440px) { .product__info-wrapper h1.h1 { font-size: 42px !important; } } /* 1366 x 768 override */ @media (max-width: 1366px) { .product__info-wrapper h1.h1 { font-size: 36px !important; } } /* Set product title (H1) to 30px on mobile view only */ @media screen and (max-width: 767px) { /* Target product title inside product info wrapper */ .product__info-wrapper h1.h1 { font-size: 30px !important; line-height: 1.2 !important; /* Improve readability on smaller screens */ } } /* iPad Portrait (834 width) */ @media screen and (min-width: 820px) and (max-width: 834px) { #ProductInfo-template--19953745395866__main .product__title h1 { font-size: 30px !important; } } /* Default */ .jdgm-carousel-item__review-rating, .jdgm-carousel-item__reviewer-name, .jdgm-carousel-item__reviewed, .jdgm-carousel-item__product, .jdgm-carousel-item__timestamp { font-size: 18px !important; } /* ≤ 810px */ @media (max-width: 810px) { .jdgm-carousel-item__review-rating, .jdgm-carousel-item__reviewer-name, .jdgm-carousel-item__reviewed, .jdgm-carousel-item__product, .jdgm-carousel-item__timestamp { font-size: 16px !important; } } /* Reviews Border Bottom */ .jdgm-carousel-item__review-wrapper { border-bottom: 1px solid #BDBDBD; padding: 0 0 16px 0; margin: 0 0 16px 0; } /* Reviews Arrows */ /* Arrow Judge.me - ubah warna */ .jdgm-carousel__arrows, .jdgm-carousel__left-arrow, .jdgm-carousel__right-arrow { border-color: #258FAB !important; } .jdgm-carousel-wrapper .jdgm-carousel-title { padding: 0px !important; } /* Pastikan arrow tetap di kanan */ .collection-card-wrapper .card__heading a .icon-arrow { flex-shrink: 0; } /* Remove green box completely */ .feature_tags .button { background: transparent !important; background-color: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; } /* Remove any pseudo background */ .feature_tags .button::before, .feature_tags .button::after { display: none !important; content: none !important; } /* Force text only */ .feature_tags .button span { background: transparent !important; padding: 0 !important; } /* Optional: clean text styling */ .feature_tags .button { color: #258FAB !important; font-weight: 600; font-size: 18px; } /* Remove green box on hover */ .feature_tags .button:hover { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } /* Remove pseudo hover effect */ .feature_tags .button:hover::before, .feature_tags .button:hover::after { display: none !important; content: none !important; } /* Keep text clean on hover */ .feature_tags .button:hover span { background: transparent !important; } /* Force label font size */ .feature_tags .button span { font-size: 18px !important; /* ganti sesuai kebutuhan */ line-height: 1.2 !important; } /* Strong override */ .blog-articles .card__information .card__heading, .blog-articles .card__information .card__heading a { text-align: left !important; justify-content: flex-start !important; } /* About Us text spacing (Homepage) */ .image-with-text__content { padding-left: 40px !important; padding-right: 20px !important; } /* Remove rounded corners on filter drawer */ .mobile-facets, .mobile-facets__inner, .mobile-facets__header, .mobile-facets__main { border-radius: 0 !important; } /* Change filter header background */ .mobile-facets__header { background: #def1f5 !important; } /* Fix header text color */ .mobile-facets__header, .mobile-facets__header * { color: #133263 !important; } /* Header "Filter" */ .mobile-facets__header h2 { font-weight: 800 !important; } .mobile-facets__main .mobile-facets__details summary, .mobile-facets__main .mobile-facets__details summary span { font-weight: 700 !important; } /* H5 Override */ /* Default (desktop besar) */ h5 { font-size: 24px !important; } /* 1440px dan ke bawah */ @media screen and (max-width: 1440px) { h5 { font-size: 20px !important; } } /* 1366px dan ke bawah */ @media screen and (max-width: 1366px) { h5 { font-size: 18px !important; } } /*.swiper-pagination swiper-pagination-fraction swiper-pagination-vertical .swiper-pagination-current .fraction-separator .swiper-pagination-total span * { color: #FFFFFF !important; }*/ /* ============================================ 4. FOOTER STYLES ============================================ */ /* 4.1 Footer Main */ /* Full width dividers */ .footer__content-bottom, .footer__copyright { border-top: none !important; position: relative !important; } .footer__content-bottom::after, .footer__copyright::after { content: '' !important; position: absolute !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 100vw !important; height: 1px !important; background-color: rgba(255, 255, 255, 0.2) !important; } .footer .footer_top_border { border-top: none !important; position: relative !important; } .footer .footer_top_border::after { content: '' !important; position: absolute !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 100vw !important; height: 1px !important; background-color: rgba(255, 255, 255, 0.2) !important; } /* 4.2 Footer Links */ /* Add footer links styles here */ /* 4.3 Footer Social Media */ /* Align social media icons horizontally same as footer blocks */ /* Add left padding to social icons to match content position in other footer blocks */ /* Add full width divider with #AED9E4 color (full opacity) */ /* Use calc to align with page-width content container */ .footer-block--newsletter .footer-block__newsletter { padding-left: calc((100vw - var(--page-width)) / 2 + -2rem) !important; padding-bottom: 0 !important; border-bottom: none !important; position: relative !important; } /* Mobile - reduce padding */ @media screen and (max-width: 810px) { .footer-block--newsletter .footer-block__newsletter { padding-left: 2rem !important; } } .footer-block--newsletter .footer-block__newsletter::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: 100vw !important; height: 1px !important; background-color: #AED9E4 !important; } /* Reduce padding around newsletter grid section */ .grid.marq_newsletter { padding-top: 0 !important; padding-bottom: 0 !important; } .footer-block--newsletter { padding-top: 0 !important; padding-bottom: 0 !important; } /* Remove gap above social media list */ .list-social.social_top { margin-top: 0 !important; padding-top: 0 !important; } .footer-block__newsletter .list-social { margin-top: 0 !important; padding-top: 0 !important; } /* 4.4 Footer Newsletter */ /* Hide newsletter heading, text, and form (keep social media icons) */ .footer-block__newsletter h2, .footer-block__newsletter .news_text, .footer-block__newsletter .newsletter-form { display: none !important; } /* 4.5 Footer Copyright */ /* Remove gap above copyright section */ .footer__copyright { margin-top: 0 !important; padding-top: 0 !important; } /* Hide only footer localization, keep the wrapper for divider */ .footer__localization { display: none !important; } .footer__content-bottom { min-height: 0 !important; } .footer__content-bottom-wrapper { min-height: 0 !important; } /* 4.6 Footer Mobile */ /* Add footer mobile-specific styles here */ /* 4.7 Footer Components */ /* Add other footer-specific styles here */ /* Reset list indentation */ .footer ul { padding-left: 0 !important; margin-left: 0 !important; list-style: none; } /* Text (Locate Us) */ .footer p { font-size: 16px !important; font-weight: 400; line-height: 1.5; } /* Links */ .footer a { text-transform: none !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.5; color: #4a4a4a; } /* Spacing */ .footer li { margin-bottom: 8px; } /* Heading */ .footer h2, .footer h3, .footer__heading { font-size: 18px; font-weight: 600; margin-bottom: 16px; } /* Mobile Footer */ @media screen and (max-width: 768px) { /* Heading (Quick links, Shop, dll) */ .footer-block__heading { margin: 0 !important; padding: 6px 0 !important; font-size: 15px !important; } /* Container list */ .footer-block__details-content { margin: 0 !important; padding: 2px 0 !important; } /* Each item (li) */ .footer-block__details-content li { margin: 0 !important; padding: 0 !important; } /* Link text (Home, About Us, dll) */ .footer-block__details-content .list-menu__item--link { display: block; padding: 2px 0 !important; margin: 0 !important; line-height: 1.2 !important; font-size: 14px !important; } /* Kurangi jarak antar block */ .footer-block { margin-bottom: 6px !important; } } .footer__copyright .page-width .grid .grid__item .copyright__content a { font-size: inherit !important; } @media screen and (min-width: 1024px) { .footer__copyright .page-width { padding-left: 25px !important; } } /* ============================================ END OF CUSTOM STYLES ============================================ */