/** Shopify CDN: Minification failed Line 1858:324 Expected identifier but found whitespace Line 1858:330 Unexpected "!" **/ /* ============================================================ HYAN JEWELS — MISTY LAVENDER THEME For: hyanjewels.in | Shopify Dawn Theme Palette: #F6F4F8 (light) → #C9BFD8 (mid) | #7B6B9A (accent) | #2D2140 (dark) Font: Lora (Google Fonts) HOW TO INSTALL: 1. Go to Shopify Admin → Online Store → Themes 2. Click "..." next to your live theme → Edit code 3. Under Assets, click "Add a new asset" → Create a blank file 4. Name it: misty-lavender.css 5. Paste ALL this code → Save 6. Then follow instructions in theme.liquid (separate file) SAFE: This file only adds visual styles. It does NOT touch products, orders, customers, collections or any database. You can delete this file anytime to fully revert. ============================================================ */ /* ── 1. GOOGLE FONTS IMPORT ── */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap'); /* ── 2. CSS VARIABLES (FULL PALETTE) ── */ :root { --hyan-lav1: #F6F4F8; /* lightest — page bg */ --hyan-lav2: #C9BFD8; /* mid — gradient end, borders */ --hyan-lavmid: #7B6B9A; /* accent — links, icons, subtle text */ --hyan-lavdark: #2D2140; /* dark — logo, headings, footer, buttons */ --hyan-white: #FFFFFF; --hyan-black: #111111; /* all body text */ /* Gradients */ --hyan-grad: linear-gradient(150deg, #F6F4F8 0%, #C9BFD8 100%); --hyan-grad-r: linear-gradient(150deg, #C9BFD8 0%, #F6F4F8 100%); --hyan-grad-h: linear-gradient(90deg, #C9BFD8 0%, #F6F4F8 100%); --hyan-dark-grad: linear-gradient(150deg, #2D2140 0%, #7B6B9A 100%); --hyan-btn-grad: linear-gradient(135deg, #7B6B9A 0%, #2D2140 100%); --hyan-btn-grad2: linear-gradient(135deg, #C9BFD8 0%, #7B6B9A 100%); /* Borders */ --hyan-border: #E0D8EC; --hyan-border-mid: #D0C8E0; } /* ── 3. GLOBAL FONT & BASE ── */ *, *::before, *::after { font-family: 'Lora', Georgia, 'Times New Roman', serif !important; } body { background-color: var(--hyan-lav1) !important; color: var(--hyan-black) !important; } /* ── 4. ANNOUNCEMENT BAR ── */ .announcement-bar, .shopify-section-announcement-bar, [id*="announcement"], .announcement-bar__message, announcement-bar { background: var(--hyan-dark-grad) !important; color: var(--hyan-lav1) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; letter-spacing: 1.8px !important; font-size: 11px !important; } .announcement-bar a, .announcement-bar__message a { color: var(--hyan-lav2) !important; } /* ── 5. HEADER / NAVIGATION ── */ .header, .header-wrapper, .shopify-section-header, header.header, .site-header { background-color: var(--hyan-lav1) !important; border-bottom: 1px solid var(--hyan-border) !important; } /* Logo */ .header__heading-link, .header__heading, .header__logo, .header__logo-image, .header .h2, .site-header__logo a, .logo { color: var(--hyan-lavdark) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; letter-spacing: 5px !important; } /* Nav links */ .header__inline-menu .list-menu__item, .header__inline-menu a, .header__menu-item, .header__menu-item span, .site-nav__link, .site-nav a { color: var(--hyan-lavmid) !important; font-family: 'Lora', serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; } .header__inline-menu .list-menu__item:hover, .header__menu-item:hover, .header__menu-item:hover span { color: var(--hyan-lavdark) !important; } /* Header icons (cart, search, account) */ .header__icon, .header__icon svg, .header__icons svg, .site-header__icon svg { color: var(--hyan-lavdark) !important; fill: var(--hyan-lavdark) !important; } /* Cart count bubble */ .cart-count-bubble, .header__cart-count-bubble { background: var(--hyan-btn-grad) !important; color: var(--hyan-white) !important; } /* Mobile menu toggle */ .header__menu-toggle, .disclosure__button { color: var(--hyan-lavdark) !important; } /* Mega menu / dropdown */ .mega-menu, .mega-menu__content, .header__submenu, .disclosure-has-popup .disclosure__panel { background: var(--hyan-lav1) !important; border: 1px solid var(--hyan-border) !important; } .mega-menu a, .header__submenu a, .disclosure__panel a { color: var(--hyan-lavmid) !important; font-family: 'Lora', serif !important; } .mega-menu a:hover, .header__submenu a:hover { color: var(--hyan-lavdark) !important; } /* ── 6. HERO / SLIDESHOW SECTION ── */ .hero, .slideshow, .slideshow__slide, .banner, .banner__media, .hero__inner, .section-hero, [class*="hero"], .shopify-section .hero { background: var(--hyan-grad) !important; } .banner__heading, .hero__title, .slideshow__text-content h1, .slideshow__text-content h2 { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; font-style: italic !important; font-weight: 700 !important; } .banner__text, .hero__text, .slideshow__description { color: #4A3860 !important; font-family: 'Lora', serif !important; } /* ── 7. BUTTONS ── */ /* Primary (filled) */ .button, .btn, .button--primary, .shopify-payment-button__button, input[type="submit"], button[type="submit"], .cart__checkout-button, .product-form__submit { background: var(--hyan-btn-grad) !important; color: var(--hyan-white) !important; border: none !important; font-family: 'Lora', serif !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; border-radius: 4px !important; transition: opacity 0.2s ease !important; } .button:hover, .btn:hover, .button--primary:hover, .product-form__submit:hover { opacity: 0.88 !important; color: var(--hyan-white) !important; } /* Secondary / ghost buttons */ .button--secondary, .button--outline, .btn--secondary { background: transparent !important; color: var(--hyan-lavdark) !important; border: 1.5px solid var(--hyan-lav2) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; border-radius: 4px !important; } .button--secondary:hover { background: var(--hyan-lav1) !important; } /* Add to cart */ .product-form__submit, .btn--add-to-cart { background: var(--hyan-btn-grad) !important; color: var(--hyan-white) !important; } /* Quick add */ .quick-add__submit, .product-card-wrapper .button { background: var(--hyan-btn-grad2) !important; color: var(--hyan-white) !important; border: none !important; } /* ── 8. PRODUCT CARDS ── */ .card-wrapper, .product-card-wrapper, .card, .card__inner, .card--product { background-color: var(--hyan-lav1) !important; border-radius: 12px !important; overflow: hidden !important; } /* Product image area */ .card__media, .card__media .media, .card--product .card__media { background: none !important; } /* Product title */ .card__heading, .card__heading a, .card__information .card__heading, .full-unstyled-link { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; font-weight: 600 !important; } /* Price */ .price, .price__regular, .price__sale, .price-item, .price-item--regular, .price-item--sale { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; } .price__regular .price-item--regular { color: var(--hyan-black) !important; } .price__compare, .price-item--compare { color: #bbb !important; text-decoration: line-through !important; } /* Sale badge */ .badge, .badge--sale, .card__badge, .product-badge { background: var(--hyan-btn-grad) !important; color: var(--hyan-white) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; border-radius: 4px !important; } /* Sold out badge */ .badge--sold-out { background: #444 !important; color: var(--hyan-white) !important; } /* Wishlist / heart icon on cards */ .card__wishlist, .wishlist-button { background: rgba(255,255,255,0.88) !important; border-radius: 50% !important; } /* ── 9. COLLECTION / CATEGORY PAGES ── */ .collection, .collection__header, .collection-hero, .section-collection-banner { background: var(--hyan-grad) !important; } .collection__title, .collection-hero__title { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; font-style: italic !important; font-weight: 700 !important; } .collection__description { color: var(--hyan-lavmid) !important; font-family: 'Lora', serif !important; } /* Filter bar */ .facets-wrapper, .facets__form, .facet-filters, .collection-filters { background: #EDE7F6 !important; border-top: none !important; border-bottom: none !important; padding: 14px 20px !important; } .facets__heading, .facet-filters__label { color: var(--hyan-lavdark) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; } /* Filter pills */ .facets__summary, .disclosure-has-popup > summary, .facet-filters__summary { background: transparent !important; border: 1px solid var(--hyan-border-mid) !important; border-radius: 20px !important; color: var(--hyan-lavmid) !important; font-family: 'Lora', serif !important; font-weight: 600 !important; } /* Sort by select */ .facets__sort, .product-count__text, select.facets__input { border: 1px solid var(--hyan-border-mid) !important; border-radius: 20px !important; background: var(--hyan-white) !important; color: var(--hyan-lavdark) !important; font-family: 'Lora', serif !important; } /* Pagination */ .pagination__list, .pagination__item, .pagination__item a { font-family: 'Lora', serif !important; color: var(--hyan-black) !important; } .pagination__item--current, .pagination .current { background: var(--hyan-btn-grad) !important; color: var(--hyan-white) !important; border-radius: 50% !important; border: none !important; } /* ── 10. PRODUCT DETAIL PAGE (PDP) ── */ .product, .product__media-wrapper, .product-page { background: var(--hyan-white) !important; } /* Thumbnail images area */ .product__media-list, .product-media-container { background: var(--hyan-grad) !important; border-radius: 12px !important; } /* Product title */ .product__title, .product__title h1 { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; font-style: italic !important; } /* Vendor / badge line */ .product__text.caption-with-letter-spacing, .product__vendor { color: var(--hyan-lavmid) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; } /* Price on PDP */ .product__price, .product .price { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; } /* Variant selectors (size, type) */ .variant-selects, .variant-input-wrapper { font-family: 'Lora', serif !important; } .variant-input label, .swatch-label { border: 1px solid var(--hyan-border-mid) !important; color: var(--hyan-black) !important; font-family: 'Lora', serif !important; border-radius: 4px !important; } .variant-input input:checked + label, .swatch-input:checked + .swatch-label { border-color: var(--hyan-lavdark) !important; background: var(--hyan-lavdark) !important; color: var(--hyan-white) !important; } /* Product description */ .product__description, .product-single__description { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; line-height: 1.85 !important; } /* Trust badges / accordion on PDP */ .accordion__summary, .accordion-button, details summary { color: var(--hyan-lavdark) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; border-top: 1px solid var(--hyan-border) !important; } /* Sticky ATC bar */ .product-sticky-atc, .sticky-atc-bar, [class*="sticky"] { background: var(--hyan-lav1) !important; border-top: 1px solid var(--hyan-border) !important; } /* ── 11. SECTIONS — ALL SHOPIFY SECTIONS ── */ /* Section backgrounds alternate */ .shopify-section, .page-width, .section { background-color: transparent !important; } /* Featured collections / rich text sections */ .featured-collection, .collection-list, .featured-collection .title { background: var(--hyan-white) !important; } /* Rich text / editorial sections */ .rich-text, .rich-text__wrapper { background: var(--hyan-grad) !important; } .rich-text h1, .rich-text h2, .rich-text h3, .rich-text p { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; } /* Testimonials / Reviews */ .testimonials, .review, .shopify-product-reviews, #shopify-product-reviews { background: var(--hyan-lav1) !important; } .testimonial__author, .review__author, .spr-review-header-byline { color: var(--hyan-lavmid) !important; font-family: 'Lora', serif !important; } /* Image with text sections */ .image-with-text, .image-with-text__content { background: var(--hyan-lav1) !important; } .image-with-text__heading { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; font-style: italic !important; } /* Multicolumn / icon columns */ .multicolumn, .multicolumn-card { background: var(--hyan-grad) !important; } .multicolumn-card__title, .column-card__heading { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; } /* Video section */ .video-section, .video { background: var(--hyan-lavdark) !important; } /* ── 12. USP STRIP / MARQUEE BAR ── */ .marquee, .announcement-bar-section, .scrolling-promotion, .promotions, .usp-bar, [class*="marquee"] { background: var(--hyan-dark-grad) !important; color: var(--hyan-lav1) !important; } .marquee span, .marquee__content, .scrolling-promotion__text { color: var(--hyan-lav2) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; } /* ── 13. CART PAGE & DRAWER ── */ .cart, .cart__wrapper, cart-drawer, .cart-drawer { background: var(--hyan-lav1) !important; } .cart-drawer__header, .cart__header { background: var(--hyan-lav1) !important; border-bottom: 1px solid var(--hyan-border) !important; } .cart__title, .cart-drawer__heading { color: var(--hyan-lavdark) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; } .cart-item__name, .cart__name { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; font-weight: 600 !important; } .cart-item__price, .cart__price { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; } .cart__subtotal, .totals__subtotal { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; } .cart__ctas, .cart__checkout-button { font-family: 'Lora', serif !important; } /* Empty cart */ .cart__empty-text { color: var(--hyan-lavmid) !important; font-family: 'Lora', serif !important; } /* ── 14. FORMS (SEARCH, CONTACT, LOGIN) ── */ input, textarea, select, .field__input, .form__input, .search__input { background: var(--hyan-white) !important; border: 1.5px solid var(--hyan-lav2) !important; color: var(--hyan-black) !important; font-family: 'Lora', serif !important; border-radius: 4px !important; } input:focus, textarea:focus, select:focus, .field__input:focus { border-color: var(--hyan-lavdark) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(123, 107, 154, 0.2) !important; } .field__label, .form__label, label { color: var(--hyan-lavdark) !important; font-family: 'Lora', serif !important; font-weight: 600 !important; } /* Search results */ .search-result-page-title { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; } /* ── 15. NEWSLETTER SECTION ── */ .newsletter, .email-signup, .footer__newsletter, [class*="newsletter"] { background: var(--hyan-lav1) !important; } .newsletter__heading, .email-signup__heading { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; font-style: italic !important; font-weight: 700 !important; } .newsletter__subheading { color: var(--hyan-lavmid) !important; font-family: 'Lora', serif !important; } .newsletter-form__field-wrapper input { border: 1.5px solid var(--hyan-lav2) !important; border-right: 0 !important; border-radius: 4px 0 0 4px !important; font-family: 'Lora', serif !important; background: var(--hyan-white) !important; } .newsletter-form__button { background: var(--hyan-btn-grad) !important; color: var(--hyan-white) !important; border: none !important; border-radius: 0 4px 4px 0 !important; font-family: 'Lora', serif !important; font-weight: 700 !important; letter-spacing: 1px !important; } /* ── 16. FOOTER ── */ .footer, .site-footer, .footer__content-bottom, .footer__content-top { background: var(--hyan-dark-grad) !important; color: var(--hyan-lav1) !important; } .footer__heading, .footer-block__heading { color: var(--hyan-lav2) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; font-size: 11px !important; } .footer a, .footer__list a, .footer-block__list a, .footer__link { color: rgba(246, 244, 248, 0.55) !important; font-family: 'Lora', serif !important; font-size: 12px !important; text-decoration: none !important; } .footer a:hover, .footer__list a:hover { color: var(--hyan-lav2) !important; } .footer__logo, .footer .logo { color: var(--hyan-lav1) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; letter-spacing: 5px !important; } .footer__tagline, .footer__info { color: rgba(246, 244, 248, 0.5) !important; font-family: 'Lora', serif !important; font-size: 12px !important; line-height: 1.8 !important; } /* Footer bottom bar */ .footer__content-bottom, .footer__copyright { border-top: 1px solid rgba(201, 191, 216, 0.15) !important; background: var(--hyan-dark-grad) !important; color: rgba(246, 244, 248, 0.3) !important; font-family: 'Lora', serif !important; } .footer__content-bottom a, .footer__copyright a { color: rgba(246, 244, 248, 0.35) !important; } /* Footer social icons */ .footer__social-icons a, .footer__icon { color: rgba(201, 191, 216, 0.55) !important; } .footer__social-icons a:hover, .footer__icon:hover { color: var(--hyan-lav2) !important; } /* Footer payment icons */ .footer__payment-icons, .footer-block--payment-icons { opacity: 0.5 !important; filter: grayscale(20%) !important; } /* ── 17. ALL HEADINGS (h1–h6) ── */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .heading { font-family: 'Lora', serif !important; color: var(--hyan-black) !important; } h1, .h1 { font-style: italic; font-weight: 700; } h2, .h2 { font-style: italic; font-weight: 700; } h3, .h3 { font-weight: 600; } /* Section titles */ .section__title, .featured-collection__title, .title { font-family: 'Lora', serif !important; color: var(--hyan-black) !important; font-style: italic !important; font-weight: 700 !important; } /* Eyebrow labels */ .eyebrow, .caption-with-letter-spacing, .subtitle { color: var(--hyan-lavmid) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; } /* ── 18. BREADCRUMBS ── */ .breadcrumbs, .breadcrumb, nav[aria-label="breadcrumbs"] { font-family: 'Lora', serif !important; font-size: 11px !important; } .breadcrumb__item, .breadcrumbs__list-item { color: var(--hyan-lavmid) !important; } .breadcrumb__item--active, .breadcrumbs__list-item--active { color: var(--hyan-black) !important; font-weight: 600 !important; } /* ── 19. PAGE TEMPLATES (About, Contact, FAQ, etc.) ── */ .page-header, .template-page .page-header, .template-contact .page-header { background: var(--hyan-grad) !important; } .page__header-title { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; font-style: italic !important; font-weight: 700 !important; } .page-width { background: transparent !important; } /* Contact form page */ .template-contact { background: var(--hyan-lav1) !important; } /* About page */ .template-page { background: var(--hyan-lav1) !important; } /* Blog / Article pages */ .template-article, .template-blog { background: var(--hyan-lav1) !important; } .article__title, .article-card__title { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; font-style: italic !important; font-weight: 700 !important; } .article__meta, .article-card__meta { color: var(--hyan-lavmid) !important; font-family: 'Lora', serif !important; } /* 404 page */ .template-404 { background: var(--hyan-lav1) !important; } /* ── 20. MOBILE MENU ── */ .menu-drawer, .menu-drawer__navigation, mobile-menu-drawer { background: var(--hyan-lav1) !important; } .menu-drawer__menu .list-menu__item, .menu-drawer a { color: var(--hyan-lavdark) !important; font-family: 'Lora', serif !important; font-weight: 600 !important; border-bottom: 1px solid var(--hyan-border) !important; } .menu-drawer__menu .list-menu__item:hover { color: var(--hyan-lavmid) !important; } .menu-drawer__close-button, .menu-drawer__close svg { color: var(--hyan-lavdark) !important; fill: var(--hyan-lavdark) !important; } .menu-drawer__utility-links .header__icon { color: var(--hyan-lavdark) !important; } /* ── 21. PREDICTIVE SEARCH POPUP ── */ predictive-search, .predictive-search, .search-modal { background: var(--hyan-white) !important; border: 1px solid var(--hyan-border) !important; border-radius: 50px !important; } .predictive-search__heading { color: var(--hyan-lavmid) !important; font-family: 'Lora', serif !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; } .predictive-search__item, .search-modal__results a { color: var(--hyan-black) !important; font-family: 'Lora', serif !important; } .predictive-search__item:hover { background: var(--hyan-lav1) !important; } /* ── 22. STAR RATINGS ── */ .rating, .rating-star, .spr-icon, .product-reviews__star { color: var(--hyan-lavmid) !important; } .rating__count { color: var(--hyan-lavmid) !important; font-family: 'Lora', serif !important; } /* ── 23. QUANTITY SELECTOR ── */ .quantity, .quantity__button, .quantity__input { border-color: var(--hyan-lav2) !important; color: var(--hyan-black) !important; font-family: 'Lora', serif !important; background: var(--hyan-white) !important; } .quantity__button { background: var(--hyan-lav1) !important; color: var(--hyan-lavdark) !important; } .quantity__button:hover { background: var(--hyan-lav2) !important; } /* ── 24. POPUPS & MODALS ── */ .modal__content, .popup, .popup-content { background: var(--hyan-lav1) !important; border: 1px solid var(--hyan-border) !important; border-radius: 12px !important; } .modal__close-button svg { color: var(--hyan-lavdark) !important; } /* Cookie / GDPR banner */ .cookie-banner, .gdpr-banner { background: var(--hyan-lavdark) !important; color: var(--hyan-lav1) !important; font-family: 'Lora', serif !important; } /* ── 25. SCROLLBAR (webkit) ── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--hyan-lav1); } ::-webkit-scrollbar-thumb { background: var(--hyan-lav2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--hyan-lavmid); } /* ── 26. SELECTION HIGHLIGHT ── */ ::selection { background: rgba(201, 191, 216, 0.4) !important; color: var(--hyan-lavdark) !important; } /* ── 27. FOCUS STATES (Accessibility) ── */ :focus-visible { outline: 2px solid var(--hyan-lavmid) !important; outline-offset: 2px !important; } /* ── 28. BACK-TO-TOP BUTTON ── */ .back-to-top, [class*="back-to-top"] { background: var(--hyan-btn-grad) !important; color: var(--hyan-white) !important; border-radius: 50% !important; } /* ---- 29. CUSTOM LIQUID SECTION OVERRIDES (Shop By Price + Category Circles) ---- */ /* Price cards - override SVG brown curve with lavender */ .price-card { border-color: #C9BFD8 !important; background: #F6F4F8 !important; } .price-card::after, .price-card::before { background-color: #C9BFD8 !important; } /* Shop Now button in price cards */ .price-card a, .price-card .shop-now, .price-card [class*="shop"] { color: #F6F4F8 !important; background: #2D2140 !important; border-color: #2D2140 !important; } .price-card a:hover, .price-card .shop-now:hover { background: #7B6B9A !important; border-color: #7B6B9A !important; } /* Price amount color */ .price-amount { color: #7B6B9A !important; } /* Section title for Shop By Price */ .section-title { color: #2D2140 !important; } .section-subtitle { color: #7B6B9A !important; } /* Recipient card label */ .recipient-label { background: #7B6B9A !important; color: #F6F4F8 !important; } /* Jewelry section category circles */ .jewelry-info a { color: #2D2140 !important; border-color: #C9BFD8 !important; } .jewelry-info a:hover { color: #7B6B9A !important; border-color: #7B6B9A !important; } /* Tab active color */ .tab.active { color: #7B6B9A !important; border-color: #7B6B9A !important; } /* Category label circles */ .category-label { color: #2D2140 !important; } /* New arrivals product cards */ .product { background: #F6F4F8 !important; border-color: #C9BFD8 !important; } /* =================================================== HYAN JEWELS — CRITICAL LAYOUT FIXES (OVERRIDE SECTION) These rules fix layout issues and override any conflicting rules above. =================================================== */ /* FIX 1: Product image grid — fix 4-column layout */ .grid--4-col-desktop .grid__item, .collection .grid--4-col-desktop .grid__item { flex: 0 0 calc(25% - 6px) !important; max-width: calc(25% - 6px) !important; min-width: 0 !important; box-sizing: border-box !important; } /* FIX 2: Remove filter/facet borders */ .facets__summary, .facets__summary:focus, summary.facets__summary, .disclosure__button, .facet-filters__summary { border: none !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; } .product-count, .product-count__text { border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* FIX 3: Sale badge — move to top left */ .card__badge, .card__badge.bottom.left, .card--product .card__badge { top: 8px !important; left: 8px !important; bottom: auto !important; right: auto !important; } /* FIX 4: Mega menu background — lavender instead of brown/tan */ .header__submenu, .mega-menu__content, .mega-menu, header-drawer .drawer__inner, .list-menu, .disclosure__panel { background-color: #F6F4F8 !important; } /* FIX 5: Header blank line — hide empty announcement bar */ .announcement-bar:empty, .announcement-bar .announcement-bar__message:empty { display: none !important; padding: 0 !important; height: 0 !important; } /* FIX 6: New arrivals — ensure 4-per-row on desktop */ @media screen and (min-width: 990px) { .grid--4-col-desktop { grid-template-columns: repeat(4, 1fr) !important; } .grid--4-col-desktop .grid__item { flex: 0 0 calc(25% - 6px) !important; max-width: calc(25% - 6px) !important; } } /* FIX 7: Premium Collection icon — hide gift icon */ .hyan-price-card--premium .hyan-price-icon, .collection-card--premium svg, .price-card:last-child .price-icon, .price-card:nth-child(5) img, .price-card:nth-child(5) svg { display: none !important; } /* FIX 8: Ensure product images are always visible */ .card__media, .card__media .media, .card--product .card__media { background: transparent !important; background-image: none !important; } /* FIX 9: Sale badge — force absolute position at top left */ .card__badge { position: absolute !important; top: 8px !important; left: 8px !important; bottom: auto !important; right: auto !important; z-index: 2 !important; } .card .card__inner, .card__inner { position: relative !important; } /* FIX 10: Announcement bar — remove blank space */ .section-header, .announcement-bar { min-height: 0 !important; } .shopify-section-group-header-group .shopify-section:empty, .announcement-bar:empty { display: none !important; } /* FIX 11: Header separator line — remove blank purple line */ .header-wrapper { border-bottom: 1px solid #C9BFD8 !important; } /* ===== FIX: Sale/Sold Out badge — FORCE top-left position ===== The badge is a grid item in card__content (display:grid). We must override grid-row to 1 so it sits in the TOP row, and use position:absolute with top/left to pin to top-left corner. ===== */ /* Step 1: Make card__inner the containing block for the badge */ .card__inner { position: relative !important; } /* Step 2: Take badge OUT of normal grid flow and pin to top-left */ .card__badge, .card__badge.bottom, .card__badge.left, .card__badge.bottom.left, .card--product .card__badge, .card__inner .card__badge { position: absolute !important; top: 8px !important; left: 8px !important; bottom: auto !important; right: auto !important; grid-row: 1 !important; grid-column: 1 !important; z-index: 10 !important; margin: 0 !important; align-self: start !important; justify-self: start !important; } /* Step 3: Ensure card__content does NOT intercept badge positioning */ .card__inner .card__content { position: static !important; } /* === BADGE SIZE REDUCTION: Compact tags for customer visibility === */ .card__badge, .card__badge.bottom.left, .card--product .card__badge, .card__inner .card__badge { font-size: 10px !important; padding: 3px 7px !important; border-radius: 3px !important; line-height: 1.2 !important; letter-spacing: 0.04em !important; font-weight: 600 !important; min-width: 0 !important; width: auto !important; height: auto !important; } /* === BADGE INNER SPAN: Target actual visible badge element === */ .card__badge .badge, .card__inner .card__badge .badge, .card--product .card__badge .badge { font-size: 10px !important; padding: 3px 8px !important; border-radius: 3px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: 0.03em !important; } /* === PRODUCT PAGE FIX 1: Selected variant pill - dark bg with invisible text === */ .product-form__input--pill input[type="radio"]:checked + label, .product-form__input--pill input[type="radio"]:checked + label:hover { background: #2D2140 !important; color: #ffffff !important; border-color: #2D2140 !important; } /* === PRODUCT PAGE FIX 2: Add to Cart button - transparent bg (button--secondary override) === */ .product-form__submit.button--secondary, .product-form__submit.button.button--secondary, .product-form__submit { background: #2D2140 !important; background-image: none !important; color: #ffffff !important; border: 2px solid #2D2140 !important; opacity: 1 !important; font-weight: 700 !important; letter-spacing: 0.1em !important; } /* === MOBILE RESPONSIVE FIX: Product grid - 2 cols on tablet, 2 cols on mobile === */ @media screen and (max-width: 989px) { .grid--4-col-desktop .grid__item, .collection .grid--4-col-desktop .grid__item { flex: 0 0 calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; } } @media screen and (max-width: 479px) { .grid--4-col-desktop .grid__item, .collection .grid--4-col-desktop .grid__item { flex: 0 0 calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; } } /* === BADGE PILL SHAPE: Capsule style matching reference image === */ .card__badge .badge, .card__inner .card__badge .badge, .card--product .card__badge .badge { background: #2D2140 !important; color: #ffffff !important; border-radius: 50px !important; font-size: 10px !important; font-weight: 700 !important; padding: 4px 10px !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; box-shadow: 0 2px 8px rgba(45, 33, 64, 0.45) !important; border: none !important; line-height: 1.4 !important; } /* === BADGE OUTER WRAPPER: Fix wrapper to not clip pill shape === */ .card__badge, .card__badge.bottom.left, .card__inner .card__badge, .card--product .card__badge { background: transparent !important; border-radius: 50px !important; padding: 0 !important; box-shadow: none !important; border: none !important; } /* === MOBILE PRODUCT PAGE: Fix horizontal overflow/gap when swiping gallery === */ @media screen and (max-width: 749px) { .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) { margin-right: 0 !important; } .product__media-wrapper, .slider-mobile-gutter { overflow-x: hidden !important; max-width: 100vw !important; } body, html { overflow-x: hidden !important; } } /* === MOBILE PRODUCT PAGE: Fix image peek/thumbnail strip overflow === */ @media screen and (max-width: 749px) { .product__media-list.grid--peek .product__media-item, .product__media-list.grid--peek .grid__item { flex: 0 0 100% !important; width: 100% !important; min-width: 100% !important; margin-left: 0 !important; box-sizing: border-box !important; } .product__media-list.grid--peek.slider::after { display: none !important; margin: 0 !important; } .product__media-list { overflow: hidden !important; } } /* === MOBILE STICKY ADD TO CART BAR === */ @media screen and (max-width: 749px) { .product-form__buttons { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 999 !important; display: flex !important; flex-direction: row !important; gap: 12px !important; padding: 10px 16px !important; background: #F6F4F8 !important; box-shadow: 0 -3px 12px rgba(45, 33, 64, 0.15) !important; border-top: 1px solid rgba(45, 33, 64, 0.12) !important; box-sizing: border-box !important; } .product-form__buttons .product-form__submit { flex: 1 1 0 !important; height: 56px !important; border-radius: 50px !important; font-size: 15px !important; } .product-form__buttons .shopify-payment-button { flex: 1 1 0 !important; height: 56px !important; } .product-form__buttons .shopify-payment-button__button { height: 56px !important; border-radius: 50px !important; font-size: 15px !important; min-height: 56px !important; } .product__info-wrapper, .product__info-container { padding-bottom: 90px !important; } } /* ===== COVERA-STYLE STICKY ATC BAR (MOBILE ONLY) ===== */ #sticky-atc-bar { display: none; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; width: 100% !important; box-sizing: border-box; transform: translateY(100%) !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; padding: 0 !important; margin: 0 !important; } #sticky-atc-bar.is-visible { transform: translateY(0) !important; } /* Only show on mobile */ @media (max-width: 749px) { #sticky-atc-bar { display: block !important; } } /* Offer strip — dark plum */ #sticky-atc-bar .sticky-bar__offer { background-color: #2D2140 !important; color: #ffffff !important; font-size: 12px !important; height: 30px !important; overflow: hidden; width: 100% !important; box-sizing: border-box; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; border: none !important; } #sticky-atc-bar .sticky-bar__offer-inner { display: flex !important; align-items: center !important; gap: 6px !important; padding: 0 16px !important; } #sticky-atc-bar .sticky-bar__offer-inner svg { width: 13px !important; height: 13px !important; flex-shrink: 0; stroke: #C9BFD8 !important; } #sticky-atc-bar .sticky-bar__offer-text { color: #F6F4F8 !important; font-size: 11px !important; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* CTA area — white background */ #sticky-atc-bar .sticky-bar__cta { background: #ffffff !important; border-top: 1px solid #e5e7eb !important; padding: 10px 14px 14px !important; width: 100% !important; box-sizing: border-box; margin: 0 !important; } /* Buttons row */ #sticky-atc-bar .sticky-bar__buttons { display: flex !important; gap: 12px !important; width: 100% !important; box-sizing: border-box; } /* Shared button styles */ #sticky-atc-bar .sticky-bar__btn { flex: 1 !important; border-radius: 12px !important; padding: 13px 8px !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; white-space: nowrap !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1.4 !important; box-sizing: border-box; font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important; height: auto !important; min-height: 0 !important; transition: background 0.2s ease, opacity 0.2s ease !important; } /* Add to Cart — white/outlined */ #sticky-atc-bar .sticky-bar__btn--cart { background: #ffffff !important; color: #2D2140 !important; border: 1.5px solid #C9BFD8 !important; box-shadow: none !important; } #sticky-atc-bar .sticky-bar__btn--cart:hover, #sticky-atc-bar .sticky-bar__btn--cart:active { background: #F6F4F8 !important; border-color: #7B6B9A !important; } /* Buy Now — solid lavender/plum */ #sticky-atc-bar .sticky-bar__btn--buy { background: #7B6B9A !important; color: #ffffff !important; border: none !important; box-shadow: 0 1px 4px rgba(45, 33, 64, 0.25) !important; } #sticky-atc-bar .sticky-bar__btn--buy:hover, #sticky-atc-bar .sticky-bar__btn--buy:active { background: #2D2140 !important; } #sticky-atc-bar .sticky-bar__btn:disabled { opacity: 0.45 !important; cursor: not-allowed !important; } /* Fix offer inner background - must be transparent to show dark strip */ #sticky-atc-bar .sticky-bar__offer-inner { background: transparent !important; background-color: transparent !important; } #sticky-atc-bar .sticky-bar__offer-text { background: transparent !important; background-color: transparent !important; color: #ffffff !important; } /* ============================================================ FIX 1: Product image thumbnail overflow (white/dark strip on right side) - media-gallery and slider-component must clip overflow on mobile ============================================================ */ @media screen and (max-width: 749px) { media-gallery, .product__media-wrapper, slider-component, .slider-mobile-gutter { overflow: hidden !important; overflow-x: hidden !important; max-width: 100vw !important; } /* Ensure each slide takes full width - no peeking */ .product__media-list .product__media-item, .product__media-list .slider__slide { max-width: 100% !important; min-width: 100% !important; flex: 0 0 100% !important; } /* Center the image within its container */ .product__media-item .product__media, .product-media-container { width: 100% !important; margin: 0 auto !important; } } /* ============================================================ FIX 2: Extra empty space / share-button width issue on mobile - share-button is 600px wide creating empty space ============================================================ */ @media screen and (max-width: 749px) { share-button, .share-button { width: fit-content !important; max-width: 100% !important; } /* Hide pickup-availability empty state on mobile */ pickup-availability:empty, .product__pickup-availabilities:empty { display: none !important; } /* Remove any min-height from empty product blocks */ .product__info-container > :empty, .product__info-container pickup-availability { display: none !important; height: 0 !important; min-height: 0 !important; } } /* === HYAN FIX: RESTORE INLINE BUY BUTTONS ON MOBILE === */ @media screen and (max-width: 749px) { .product-form__buttons { position: static !important; bottom: auto !important; left: auto !important; right: auto !important; width: 100% !important; z-index: auto !important; display: flex !important; padding: 0 !important; background: transparent !important; } } /* === HYAN FIX 2: REMOVE BLANK SPACE FROM STICKY BAR PADDING === */ @media screen and (max-width: 749px) { .product__info-wrapper { padding-bottom: 0 !important; } } /* === HYAN FIX 3: CUSTOMER REVIEWS - STAR ICONS + BUTTON LAYOUT === */ /* Fix 1: Restore star icon font (overridden by global Lora font rule) */ .spr-icon, .spr-icon::before, .spr-icon::after { font-family: 'shopify-reviewicons' !important; speak: none; } /* Fix 2: Review summary layout - flex row with stars/text on left, button on right */ .spr-container .spr-summary { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; padding: 20px 0 !important; border-bottom: 1px solid #e0e0e0 !important; } /* Fix 3: Left side - star rating + caption group */ .spr-container .spr-summary-starrating, .spr-container .spr-summary-caption { text-align: left !important; width: auto !important; } /* Fix 4: Right side - Write a review button - proper size, not full width */ .spr-container .spr-summary-actions { width: auto !important; flex-shrink: 0 !important; } .spr-container .spr-summary-actions-newreview { display: inline-block !important; width: auto !important; min-width: 180px !important; max-width: 220px !important; padding: 14px 24px !important; background-color: #1b7a6b !important; color: #ffffff !important; font-family: 'Lora', serif !important; font-size: 15px !important; font-weight: 600 !important; border-radius: 0 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; border: none !important; } /* === HYAN FIX 4: RESTORE STAR RATING FONT (Times required for Unicode stars) === */ .rating-star, .rating-star::before, .rating-star::after { font-family: Times, 'Times New Roman', serif !important; } /* === HYAN FIX 5: FINAL STAR ICON + REVIEW LAYOUT FIX === */ /* Fix Judge.me (jdgm) star icons - restore JudgemeStar icon font */ .jdgm-star { font-family: JudgemeStar !important; } .jdgm-star::before, .jdgm-star::after { font-family: JudgemeStar !important; } /* Fix SPR (Shopify Product Reviews) star icons */ .spr-icon { font-family: 'shopify-reviewicons' !important; speak: none; } .spr-icon::before, .spr-icon::after { font-family: 'shopify-reviewicons' !important; speak: none; } /* Fix product page rating stars (small stars near review count) */ .rating-star, .rating-star::before, .rating-star::after { font-family: Times, 'Times New Roman', serif !important; } /* Fix Judge.me review layout - stars+text LEFT, button RIGHT */ .jdgm-row-stars { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; padding: 20px 0 !important; border-bottom: 1px solid #e0e0e0 !important; } /* Judge.me - button proper size */ .jdgm-write-rev-link { display: inline-block !important; width: auto !important; min-width: 160px !important; max-width: 220px !important; padding: 12px 24px !important; background-color: #1b7a6b !important; color: #ffffff !important; font-family: 'Lora', serif !important; font-size: 14px !important; font-weight: 600 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; border: none !important; border-radius: 0 !important; white-space: nowrap !important; } /* Fix SPR review layout - stars+text LEFT, button RIGHT */ .spr-container .spr-summary { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; padding: 20px 0 !important; border-bottom: 1px solid #e0e0e0 !important; } .spr-container .spr-summary-starrating, .spr-container .spr-summary-caption { text-align: left !important; width: auto !important; } .spr-container .spr-summary-actions { width: auto !important; flex-shrink: 0 !important; } width: auto !important; min-width: 160px !important; max-width: 220px !important; padding: 12px 24px !important; background-color: #1b7a6b !important; color: #ffffff !important; font-family: 'Lora', serif !important; font-size: 14px !important; font-weight: 600 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; border: none !important; border-radius: 0 !important; white-space: nowrap !important; }