/** Shopify CDN: Minification failed
Line 1589:71 Unexpected "/"
**/
/*
* ============================================================
* VRINDA MART — Medical B2B Custom Theme
* File: assets/vrinda-custom.css
* Version: 1.0
*
* HOW TO USE:
* Add this line to layout/theme.liquid just before :
* {{ 'vrinda-custom.css' | asset_url | stylesheet_tag }}
*
* Loads after: timber.scss.css → style.css → fonts.min.css → slick.scss
* This file wins all specificity battles without touching core files.
*
* COLOR SYSTEM — Medical B2B Palette:
* --vm-primary: #0B3D91 Medical Navy (trust, authority)
* --vm-primary-dark: #082D6B Darker Navy (hover states)
* --vm-secondary: #00A389 Medical Teal (health, action)
* --vm-secondary-dk: #007A6B Darker Teal (hover states)
* --vm-accent: #E8F3FF Soft Blue (section backgrounds)
* --vm-text: #1A1A2E Near-black (body text)
* --vm-text-muted: #5A6A85 Muted (subtitles, captions)
* --vm-white: #FFFFFF
* --vm-border: #D0E4F5 Blue-tinted (dividers)
*
* SECTIONS:
* 1. CSS Variables
* 2. Navigation Bar
* 3. Header
* 4. Mobile Navigation
* 5. Hero Slideshow
* 6. Buttons & CTAs (Global)
* 7. Product Cards & Tabs
* 8. Collection Page
* 9. Contact Page
* 10. Homepage Sections
* 11. Support Block (Footer Info Bar)
* 12. Footer
* 13. Scroll-to-top Button
* 14. Sidebar & Filters
* 15. Search
* 16. Breadcrumb & Links
* 17. Responsive Overrides
* ============================================================
*/
/* ─────────────────────────────────────────────────────────────
1. CSS VARIABLES
Defined on :root so every component can use them.
───────────────────────────────────────────────────────────── */
:root {
--vm-primary: #0B3D91;
--vm-primary-dark: #082D6B;
--vm-secondary: #00A389;
--vm-secondary-dk: #007A6B;
--vm-accent: #E8F3FF;
--vm-text: #1A1A2E;
--vm-text-muted: #5A6A85;
--vm-white: #FFFFFF;
--vm-border: #D0E4F5;
--vm-shadow: rgba(11, 61, 145, 0.12);
--vm-radius: 4px;
--vm-transition: 0.2s ease;
}
/* ─────────────────────────────────────────────────────────────
2. NAVIGATION BAR
Target: Pink (#da004d) navbar → Medical Navy
───────────────────────────────────────────────────────────── */
.nav-bar,
nav.nav-bar,
.desktop-megamenu .nav-bar {
background-color: var(--vm-primary) !important;
border-top: none !important;
border-bottom: 3px solid var(--vm-secondary) !important;
box-shadow: 0 2px 12px var(--vm-shadow) !important;
}
/* Nav links */
.nav-bar a,
.nav-bar ul li a,
.nav-bar .site-nav a,
.nav-bar > ul > li > a {
color: var(--vm-white) !important;
font-weight: 500;
letter-spacing: 0.4px;
font-size: 13px;
text-transform: uppercase;
transition: color var(--vm-transition);
}
.nav-bar a:hover,
.nav-bar ul li a:hover,
.nav-bar .site-nav a:hover {
color: var(--vm-secondary) !important;
text-decoration: none;
}
/* Active page underline */
.nav-bar .active > a,
.nav-bar li.active > a,
.nav-bar .current > a {
border-bottom: 2px solid var(--vm-white) !important;
color: var(--vm-white) !important;
}
/* Dropdown panels */
.site-nav__dropdown,
.nav-bar .dropdown-menu,
.nav-bar .sub-menu,
.mega-menu,
.megamenu-wrapper {
background-color: var(--vm-white) !important;
border-top: 3px solid var(--vm-secondary) !important;
box-shadow: 0 8px 24px var(--vm-shadow) !important;
border-radius: 0 0 var(--vm-radius) var(--vm-radius) !important;
}
.site-nav__dropdown a,
.nav-bar .dropdown-menu a,
.nav-bar .sub-menu a {
color: var(--vm-text) !important;
text-transform: none !important;
font-weight: 400 !important;
}
.site-nav__dropdown a:hover,
.nav-bar .dropdown-menu a:hover,
.nav-bar .sub-menu a:hover {
color: var(--vm-primary) !important;
background-color: var(--vm-accent) !important;
}
/* ─────────────────────────────────────────────────────────────
3. HEADER (Top bar with logo, cart, search)
───────────────────────────────────────────────────────────── */
.header-type-5 .site-header {
border-bottom-color: var(--vm-border) !important;
box-shadow: 0 1px 6px var(--vm-shadow) !important;
}
/* Top bar area (INR, cart count, search, account icons) */
.header-type-5 #header-landing {
border-bottom: 1px solid var(--vm-border) !important;
}
/* Cart count bubble */
.cart-count,
.cart-count-bubble {
background-color: var(--vm-secondary) !important;
color: var(--vm-white) !important;
}
/* Top bar text / links */
.top-bar-5-section a,
.top-bar a {
color: var(--vm-text-muted) !important;
transition: color var(--vm-transition);
}
.top-bar-5-section a:hover,
.top-bar a:hover {
color: var(--vm-primary) !important;
}
/* ─────────────────────────────────────────────────────────────
4. MOBILE NAVIGATION
───────────────────────────────────────────────────────────── */
#cbp-spmenu-s1,
.cbp-spmenu,
.cbp-spmenu-vertical {
background-color: var(--vm-primary) !important;
}
.cbp-spmenu a,
.gf-menu-device-container a,
.cbp-spmenu ul li a {
color: var(--vm-white) !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
.cbp-spmenu a:hover,
.gf-menu-device-container a:hover {
background-color: var(--vm-primary-dark) !important;
color: var(--vm-secondary) !important;
}
.gf-menu-device-wrapper .close-menu {
color: var(--vm-white) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}
/* Hamburger menu icon */
#showLeftPush,
.mobile-menu-toggle,
.menu-toggle {
color: var(--vm-primary) !important;
}
/* ─────────────────────────────────────────────────────────────
5. HERO SLIDESHOW
───────────────────────────────────────────────────────────── */
/* Text overlay panel */
.home-slideshow .slider-content,
.slider-content {
background: rgba(11, 61, 145, 0.82) !important;
border-left: 4px solid var(--vm-secondary) !important;
border-radius: var(--vm-radius) !important;
padding: 28px 32px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* Slide heading */
.home-slideshow .slide-heading,
.slider-content .slide-heading,
.slide-heading {
color: var(--vm-white) !important;
background: transparent !important;
border-bottom: none !important;
font-size: 28px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
margin: 0 0 10px !important;
padding: 0 !important;
letter-spacing: -0.3px;
}
/* Slide subheading */
.home-slideshow .slide-text,
.slider-content .slide-text,
.slide-text {
color: rgba(255, 255, 255, 0.88) !important;
font-size: 14px !important;
line-height: 1.6 !important;
margin: 0 0 20px !important;
}
/* Slide CTA button — teal filled, ghost on hover */
.home-slideshow .slide-button,
.slider-content .slide-button,
.slide-button.btn {
display: inline-block !important;
background-color: var(--vm-secondary) !important;
border: 2px solid var(--vm-secondary) !important;
color: var(--vm-white) !important;
padding: 12px 28px !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
border-radius: var(--vm-radius) !important;
text-decoration: none !important;
transition: all var(--vm-transition) !important;
}
.home-slideshow .slide-button:hover,
.slide-button.btn:hover {
background-color: transparent !important;
border-color: var(--vm-white) !important;
color: var(--vm-white) !important;
}
/* Slider navigation arrows (< >) */
.home-slideshow .slick-prev,
.home-slideshow .slick-next {
background: rgba(11, 61, 145, 0.5) !important;
border-radius: 50% !important;
width: 44px !important;
height: 44px !important;
line-height: 44px !important;
transition: background var(--vm-transition) !important;
}
.home-slideshow .slick-prev:hover,
.home-slideshow .slick-next:hover {
background: var(--vm-primary) !important;
}
.home-slideshow .slick-arrow:before {
color: var(--vm-white) !important;
font-size: 22px !important;
}
/* Slick dots */
.home-slideshow .slick-dots li button:before {
color: var(--vm-primary) !important;
opacity: 0.4;
}
.home-slideshow .slick-dots li.slick-active button:before {
color: var(--vm-secondary) !important;
opacity: 1;
}
/* Slider navigation buttons (pink < > at bottom-left in screenshots) */
.variable-width + .slick-prev-btn,
.variable-width + .slick-next-btn,
.slick-prev-btn,
.slick-next-btn {
background-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
border-color: var(--vm-primary) !important;
transition: background var(--vm-transition) !important;
}
.slick-prev-btn:hover,
.slick-next-btn:hover {
background-color: var(--vm-secondary) !important;
border-color: var(--vm-secondary) !important;
}
/* ─────────────────────────────────────────────────────────────
6. BUTTONS & CTAs (Global — replaces ALL #da004d buttons)
───────────────────────────────────────────────────────────── */
/* Primary button */
.btn-primary,
.button--primary,
button.btn-primary,
a.btn-primary {
background-color: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
border-radius: var(--vm-radius) !important;
transition: background-color var(--vm-transition), border-color var(--vm-transition);
}
.btn-primary:hover,
.button--primary:hover {
background-color: var(--vm-primary-dark) !important;
border-color: var(--vm-primary-dark) !important;
color: var(--vm-white) !important;
}
/* Add to cart / submit buttons */
.btn.btn-cart,
.product-form__submit,
button[name="add"],
input[type="submit"] {
background-color: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
border-radius: var(--vm-radius) !important;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
transition: all var(--vm-transition);
}
.btn.btn-cart:hover,
.product-form__submit:hover,
button[name="add"]:hover {
background-color: var(--vm-secondary) !important;
border-color: var(--vm-secondary) !important;
}
/* Outlined / secondary buttons */
.btn-secondary,
.button--secondary {
border-color: var(--vm-primary) !important;
color: var(--vm-primary) !important;
background: transparent !important;
border-radius: var(--vm-radius) !important;
transition: all var(--vm-transition);
}
.btn-secondary:hover,
.button--secondary:hover {
background-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
}
/* Shop Now buttons (from promo banners) */
.btn-shop,
.shop-now-btn {
border-color: var(--vm-primary) !important;
color: var(--vm-primary) !important;
border-radius: var(--vm-radius) !important;
transition: all var(--vm-transition);
}
.btn-shop:hover,
.shop-now-btn:hover {
background-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
}
/* ─────────────────────────────────────────────────────────────
7. PRODUCT CARDS & TABS
───────────────────────────────────────────────────────────── */
/* Product tab active state (Popular / Best Seller / Special) */
.product-tab-model-2 .nav-tabs .active > a,
.product-tab-model-2 .nav-tabs li.active > a,
.tab-filter .active,
.tab-filter .active a,
.tabs-nav .active,
.tabs-nav li.active a {
background-color: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
}
.product-tab-model-2 .nav-tabs li a:hover,
.tab-filter li a:hover,
.tabs-nav li a:hover {
color: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
}
/* Product action bar (quick view / link / wishlist icons) */
.product-container .product-action,
.product-container .action-bar,
.product-action-bar {
background-color: var(--vm-primary-dark) !important;
}
.product-container .product-action a,
.product-container .action-bar a {
color: var(--vm-white) !important;
transition: color var(--vm-transition);
}
.product-container .product-action a:hover,
.product-container .action-bar a:hover {
color: var(--vm-secondary) !important;
}
/* Product title on hover */
.product-info .product-name a:hover,
.product-container .product-title a:hover {
color: var(--vm-primary) !important;
}
/* Sale badge — use teal */
.product-container .badge-sale,
.product-container .tag-sale,
.on-sale-badge,
.badge-sale {
background-color: var(--vm-secondary) !important;
color: var(--vm-white) !important;
border-radius: 2px !important;
}
/* Price (current) */
.product-price .price,
.money,
.price {
color: var(--vm-primary) !important;
}
/* Grid/List view toggle */
.change-view.list-view-active,
.change-view.grid-view-active {
background-color: var(--vm-primary) !important;
}
.change-view:hover {
background-color: var(--vm-primary-dark) !important;
}
/* ─────────────────────────────────────────────────────────────
8. COLLECTION PAGE
───────────────────────────────────────────────────────────── */
/* Collection page title */
.collection-header h1,
.collection-title {
color: var(--vm-primary) !important;
border-bottom: 2px solid var(--vm-secondary) !important;
padding-bottom: 12px !important;
}
/* Filter / sort dropdowns focus */
.toolbar select:focus,
.sort-by select:focus,
.sidebar-tag select:focus {
border-color: var(--vm-primary) !important;
outline-color: var(--vm-primary) !important;
}
/* Pagination */
.pagination .active a,
.pagination .active span,
.pagination li.active a {
background-color: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
}
.pagination a:hover,
.pagination span:hover {
color: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
}
/* ─────────────────────────────────────────────────────────────
9. CONTACT PAGE
───────────────────────────────────────────────────────────── */
.contact-form input:focus,
.contact-form textarea:focus,
.contact input:focus,
.contact textarea:focus {
border-color: var(--vm-primary) !important;
box-shadow: 0 0 0 3px rgba(11, 61, 145, 0.1) !important;
outline: none !important;
}
.contact-form .btn,
.contact-page .btn-submit,
.contact form button[type="submit"] {
background-color: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
border-radius: var(--vm-radius) !important;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: all var(--vm-transition);
}
.contact-form .btn:hover,
.contact form button[type="submit"]:hover {
background-color: var(--vm-secondary) !important;
border-color: var(--vm-secondary) !important;
}
/* Contact info icons */
.contact-info .icon,
.contact-info i {
color: var(--vm-secondary) !important;
}
/* ─────────────────────────────────────────────────────────────
10. HOMEPAGE SECTIONS
───────────────────────────────────────────────────────────── */
/* Section headings (Mini Portable Nebulizer, Deals of the day, etc.) */
.index-section h2,
.index-section .section-title,
.home-section-title {
color: var(--vm-primary) !important;
}
/* HIDE: Blog section (placeholder data, not relevant for B2B medical) */
/* COMMENT OUT these lines when real blog posts are ready */
/* .blog-post-type-1 { display: none !important; } */
/* Blog post date badge */
.blog-post-type-1 .post-date,
.blog-post-date {
background-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
}
/* Blog read more button */
.blog-post-type-1 .read-more a,
.blog-post-type-1 .read-more {
color: var(--vm-primary) !important;
border-color: var(--vm-border) !important;
}
.blog-post-type-1 .read-more a:hover {
color: var(--vm-secondary) !important;
border-color: var(--vm-secondary) !important;
}
/* Promo banners — force medical colors */
.sidebar-promoimage .banner-label,
.grid-banner-type-3 .banner-label,
.promo-banner-label {
background-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
}
/* "Best in Men's" banner — will be replaced by content change.
CSS ensures it at least uses medical colors until content update */
.sidebar-banner .banner-title,
.sidebar-banner .promo-title {
background-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
}
.sidebar-banner .btn,
.sidebar-banner .shop-now {
border-color: var(--vm-white) !important;
color: var(--vm-white) !important;
}
.sidebar-banner .btn:hover {
background-color: var(--vm-white) !important;
color: var(--vm-primary) !important;
}
/* Deals section heading */
.home-sidebar-deals .section-heading,
.deals-heading {
color: var(--vm-primary) !important;
}
/* Women's / Men's category tabs → to be replaced with medical categories */
/* For now: medical colors */
.home-product-grid-type-4 .category-tab-active,
.home-product-grid-type-4 .active {
background-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
border-color: var(--vm-primary) !important;
}
/* Brands / logos strip — will be repurposed as certifications */
.brands .section-title,
.brands-section .title {
color: var(--vm-primary) !important;
border-bottom: 2px solid var(--vm-secondary) !important;
}
/* ─────────────────────────────────────────────────────────────
11. SUPPORT BLOCK (Footer info bar — COD / Free Gift Box etc.)
Replace with medical B2B appropriate info via Shopify admin.
CSS ensures it looks professional regardless of content.
───────────────────────────────────────────────────────────── */
.support-block-type-1,
.support-block,
[class*="support-block"] {
background-color: #0D2B59 !important; /* Deep navy — distinct from nav */
padding: 28px 0 !important;
}
.support-block-type-1 .support-item,
.support-block .support-item {
border-right-color: rgba(255, 255, 255, 0.1) !important;
}
/* Icons */
.support-block-type-1 .zmdi,
.support-block .zmdi,
.support-block-type-1 i,
.support-block .support-icon {
color: var(--vm-secondary) !important;
font-size: 28px !important;
}
/* Headings */
.support-block-type-1 h4,
.support-block h4,
.support-block-type-1 .support-title {
color: var(--vm-white) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.4px !important;
text-transform: uppercase !important;
margin: 8px 0 4px !important;
}
/* Sub text */
.support-block-type-1 p,
.support-block p,
.support-block-type-1 .support-subtitle {
color: rgba(255, 255, 255, 0.65) !important;
font-size: 12px !important;
margin: 0 !important;
}
/* ─────────────────────────────────────────────────────────────
12. FOOTER
───────────────────────────────────────────────────────────── */
/* Newsletter / email section */
.footer-model-6 .newsletter-section,
.footer-newsletter,
.newsletter-section {
background-color: var(--vm-accent) !important;
border-top: 1px solid var(--vm-border) !important;
border-bottom: 1px solid var(--vm-border) !important;
}
/* Newsletter subscribe button */
.footer-model-6 [type="submit"],
.footer-model-6 .newsletter-submit,
.newsletter-section button,
.newsletter-section input[type="submit"] {
background-color: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
border-radius: 0 var(--vm-radius) var(--vm-radius) 0 !important;
transition: background var(--vm-transition) !important;
}
.footer-model-6 [type="submit"]:hover,
.newsletter-section button:hover {
background-color: var(--vm-secondary) !important;
border-color: var(--vm-secondary) !important;
}
/* Newsletter input */
.footer-model-6 input[type="email"],
.newsletter-section input[type="email"] {
border-color: var(--vm-border) !important;
border-radius: var(--vm-radius) 0 0 var(--vm-radius) !important;
}
.footer-model-6 input[type="email"]:focus,
.newsletter-section input[type="email"]:focus {
border-color: var(--vm-primary) !important;
outline: none !important;
}
/* Social icons */
.footer-model-6 .social-icons a,
.social-links a {
border-color: var(--vm-border) !important;
color: var(--vm-text-muted) !important;
transition: all var(--vm-transition);
}
.footer-model-6 .social-icons a:hover,
.social-links a:hover {
background-color: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
}
/* Footer links */
.footer-model-6 a,
.site-footer a {
color: var(--vm-primary) !important;
transition: color var(--vm-transition);
}
.footer-model-6 a:hover,
.site-footer a:hover {
color: var(--vm-secondary) !important;
text-decoration: underline;
}
/* Footer heading */
.footer-model-6 h4,
.footer-model-6 .footer-col-title {
color: var(--vm-text) !important;
border-bottom: 2px solid var(--vm-secondary) !important;
padding-bottom: 10px !important;
margin-bottom: 16px !important;
}
/* Footer bottom bar */
.footer-model-6 .footer-bottom,
.footer-copyright {
background-color: var(--vm-primary-dark) !important;
color: rgba(255, 255, 255, 0.65) !important;
border-top: none !important;
}
.footer-model-6 .footer-bottom a,
.footer-copyright a {
color: rgba(255, 255, 255, 0.8) !important;
}
.footer-model-6 .footer-bottom a:hover,
.footer-copyright a:hover {
color: var(--vm-secondary) !important;
}
/* ─────────────────────────────────────────────────────────────
13. SCROLL-TO-TOP BUTTON
The pink circle (↑) in bottom-right corner of screenshots
───────────────────────────────────────────────────────────── */
#scroll-top,
.scroll-top,
.go-top,
.go-to-top,
.backtotop,
.dt-back-top,
a.back-to-top,
[class*="scroll-top"],
[id*="scroll-top"],
[id*="return-to-top"] {
background-color: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
box-shadow: 0 4px 12px var(--vm-shadow) !important;
transition: background var(--vm-transition), box-shadow var(--vm-transition) !important;
}
#scroll-top:hover,
.go-top:hover,
.go-to-top:hover,
a.back-to-top:hover {
background-color: var(--vm-secondary) !important;
border-color: var(--vm-secondary) !important;
box-shadow: 0 6px 16px rgba(0, 163, 137, 0.3) !important;
}
/* ─────────────────────────────────────────────────────────────
14. SIDEBAR & FILTERS
───────────────────────────────────────────────────────────── */
/* Checkbox label hover */
.sidebar-tag li:hover input[type="checkbox"] + label {
color: var(--vm-primary) !important;
}
/* Checked state */
.sidebar-tag input[type=checkbox]:checked + label {
color: var(--vm-primary) !important;
font-weight: 600;
}
/* Size filter border on hover */
.sidebar-tag.size ul li:hover {
border-color: var(--vm-primary) !important;
}
/* Sidebar heading */
.sidebar-tag .widget-title h3,
.sidebar-tag .widget-title h4 {
color: var(--vm-text) !important;
border-bottom: 2px solid var(--vm-secondary) !important;
}
/* Range slider (if present) */
.ui-slider-range,
.price-range-slider .range-fill {
background-color: var(--vm-primary) !important;
}
.ui-slider-handle {
border-color: var(--vm-primary) !important;
background-color: var(--vm-primary) !important;
}
/* ─────────────────────────────────────────────────────────────
15. SEARCH
───────────────────────────────────────────────────────────── */
.dialog input[type=submit],
.search-form button[type="submit"],
.search-submit,
.search-form .btn {
background-color: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
}
.dialog input[type=submit]:hover,
.search-submit:hover {
background-color: var(--vm-secondary) !important;
border-color: var(--vm-secondary) !important;
}
.search-form input[type="text"]:focus,
.search-form input[type="search"]:focus {
border-color: var(--vm-primary) !important;
outline: none !important;
}
/* ─────────────────────────────────────────────────────────────
16. BREADCRUMB & GLOBAL LINKS
───────────────────────────────────────────────────────────── */
.breadcrumb a,
.breadcrumb-nav a,
nav.breadcrumb a {
color: var(--vm-primary) !important;
}
.breadcrumb a:hover {
color: var(--vm-secondary) !important;
}
/* Accent-colored text (was pink) → now primary navy */
.accent-text,
.highlight,
.text-primary-theme {
color: var(--vm-primary) !important;
}
/* ─────────────────────────────────────────────────────────────
17. RESPONSIVE OVERRIDES
───────────────────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
/* Mobile nav bar */
.nav-bar-mobile,
.mobile-nav-wrapper {
background-color: var(--vm-primary) !important;
}
.nav-bar-mobile a {
color: var(--vm-white) !important;
}
}
@media screen and (max-width: 768px) {
/* Hero slideshow overlay — full width on mobile */
.home-slideshow .slider-content,
.slider-content {
max-width: 92% !important;
left: 4% !important;
right: 4% !important;
bottom: 8% !important;
padding: 18px 20px !important;
}
.slide-heading {
font-size: 20px !important;
margin: 0 0 8px !important;
}
.slide-text {
font-size: 13px !important;
margin: 0 0 14px !important;
}
.slide-button.btn {
padding: 10px 20px !important;
font-size: 12px !important;
}
/* Support block — stack on mobile */
.support-block-type-1 .support-item {
border-right: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
margin-bottom: 12px !important;
}
}
@media screen and (max-width: 480px) {
.slide-heading {
font-size: 17px !important;
}
}
/* ─────────────────────────────────────────────────────────────
BATCH 2 ADDITIONS
Sections: grid-banner-type-3, product-tab-type-2,
support-block-type-1, sidebar-promoimage
Append this to the bottom of vrinda-custom.css
───────────────────────────────────────────────────────────── */
/* ── grid-banner-type-3 (Medical Category Banner) ─────────────
Note: h4/h6 colors come from schema inline styles.
CSS here handles overlays, buttons, hover, and spacing.
─────────────────────────────────────────────────────────────*/
.grid-banner-type-3 {
overflow: hidden;
}
.grid-banner-type-3 .ovrly31 {
position: relative;
overflow: hidden;
}
.grid-banner-type-3 .ovrly31 img {
width: 100%;
display: block;
transition: transform 0.4s ease;
}
.grid-banner-type-3 .ovrly31:hover img {
transform: scale(1.03);
}
/* Text overlay panel */
.grid-banner-type-3 .featured-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px 28px;
background: linear-gradient(to top, rgba(11, 61, 145, 0.9) 0%, transparent 100%);
}
.grid-banner-type-3 .featured-content.right {
text-align: left;
}
/* Title (h4) — schema inline style controls bg/color; this adds layout */
.grid-banner-type-3 .featured-content h4 {
display: inline-block;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
padding: 8px 16px !important;
margin: 0 0 10px !important;
border-radius: var(--vm-radius) !important;
text-transform: uppercase;
}
/* Sub heading (h6) */
.grid-banner-type-3 .featured-content h6 {
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
margin: 0 0 16px !important;
opacity: 0.92;
}
/* CTA Buttons */
.grid-banner-type-3 .vm-banner-btn,
.grid-banner-type-3 .btn.one,
.grid-banner-type-3 .btn.two {
display: inline-block !important;
padding: 10px 22px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.7px !important;
text-transform: uppercase !important;
border: 2px solid var(--vm-white) !important;
color: var(--vm-white) !important;
background: transparent !important;
border-radius: var(--vm-radius) !important;
text-decoration: none !important;
transition: all var(--vm-transition) !important;
}
.grid-banner-type-3 .vm-banner-btn:hover,
.grid-banner-type-3 .btn.one:hover,
.grid-banner-type-3 .btn.two:hover {
background: var(--vm-white) !important;
color: var(--vm-primary) !important;
}
/* Responsive: stack panels on mobile */
@media screen and (max-width: 640px) {
.grid-banner-type-3 .featured-content {
padding: 16px 20px;
}
.grid-banner-type-3 .featured-content h4 {
font-size: 14px !important;
}
}
/* ── product-tab-type-2 (Featured Nebulizers) ─────────────────
Tabs, active states, carousel nav arrows
─────────────────────────────────────────── */
/* Section heading */
.product-tab-type-2 .section-header__title {
color: var(--vm-primary) !important;
font-weight: 700 !important;
}
.product-tab-type-2 .short-desc p {
color: var(--vm-text-muted) !important;
}
/* Tab buttons — inactive */
.product-tab-type-2 .dt-sc-tabs.brand_names li a,
.product-tab-type-2 .dt-sc-tabs li a.btn {
background-color: transparent !important;
border: 2px solid var(--vm-border) !important;
color: var(--vm-text) !important;
border-radius: var(--vm-radius) !important;
font-weight: 500 !important;
letter-spacing: 0.3px !important;
transition: all var(--vm-transition) !important;
padding: 8px 20px !important;
margin: 0 4px 8px !important;
}
/* Tab button hover */
.product-tab-type-2 .dt-sc-tabs.brand_names li a:hover {
background-color: var(--vm-accent) !important;
border-color: var(--vm-primary) !important;
color: var(--vm-primary) !important;
}
/* Tab button active/current */
.product-tab-type-2 .dt-sc-tabs.brand_names li a.current,
.product-tab-type-2 .dt-sc-tabs li a.active {
background-color: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
}
/* Carousel nav arrow buttons */
.product-tab-type-2 .vm-carousel-btn,
.product-tab-type-2 .carousel-arrow .btn.prev,
.product-tab-type-2 .carousel-arrow .btn.next,
.product-tab-type-2 .carousel-arrow .btn.active {
background-color: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
width: 40px !important;
height: 40px !important;
line-height: 36px !important;
text-align: center !important;
border-radius: var(--vm-radius) !important;
transition: background var(--vm-transition), border-color var(--vm-transition) !important;
}
.product-tab-type-2 .vm-carousel-btn:hover,
.product-tab-type-2 .carousel-arrow .btn:hover {
background-color: var(--vm-secondary) !important;
border-color: var(--vm-secondary) !important;
}
/* Star ratings — use teal accent */
.product-tab-type-2 .spr-icon {
color: var(--vm-secondary) !important;
}
/* Product title hover inside tab */
.product-tab-type-2 .grid-link__title:hover {
color: var(--vm-primary) !important;
}
/* Price */
.product-tab-type-2 .product_price .money {
color: var(--vm-primary) !important;
font-weight: 600 !important;
}
/* ── support-block-type-1 (Trust Signals Bar) ─────────────────
bg_color controlled by schema inline style (updated default).
CSS overrides and layout polish below.
─────────────────────────────────────────── */
.support-block-type-1 .support_block {
background-color: #0D2B59 !important; /* fallback if schema value not set */
padding: 32px 0 !important;
}
.support-block-type-1 .support_section {
display: flex !important;
align-items: center !important;
gap: 16px !important;
padding: 0 20px !important;
}
/* Icon */
.support-block-type-1 .support_icon {
flex-shrink: 0;
}
.support-block-type-1 .support_icon i,
.support-block-type-1 .support_icon .fa {
font-size: 32px !important;
color: var(--vm-secondary) !important;
transition: transform var(--vm-transition);
}
.support-block-type-1 .support_section:hover .support_icon i {
transform: scale(1.1);
}
/* Text block */
.support-block-type-1 .support_text {
text-align: left !important;
}
.support-block-type-1 .support_text h6 {
color: var(--vm-white) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin: 0 0 4px !important;
}
.support-block-type-1 .support_text p.desc {
color: #a8bdd4 !important;
font-size: 12px !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* Divider between blocks */
.support-block-type-1 .grid__item:not(:last-child) .support_section {
border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* Responsive: remove border on stack */
@media screen and (max-width: 768px) {
.support-block-type-1 .support_section {
flex-direction: column !important;
text-align: center !important;
border-right: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
padding: 20px !important;
}
.support-block-type-1 .support_text {
text-align: center !important;
}
}
/* ── sidebar-promoimage (Image Carousel) ──────────────────────
Purely content-driven — only dots and spacing overridden.
─────────────────────────────────────────── */
.widget_promo_img .owl-dots .owl-dot.active span,
.widget_promo_img .owl-dots .owl-dot:hover span {
background-color: var(--vm-primary) !important;
}
.widget_promo_img .owl-dots .owl-dot span {
background-color: var(--vm-border) !important;
}
.widget_promo_img img {
border-radius: var(--vm-radius);
width: 100%;
display: block;
}
/* ─────────────────────────────────────────────────────────────
NAV BAR FIX — Override inline style from section file
Targets: .header-type-5 .menu-tool and .mobile-nav-section
Source of pink: (index) inline style at line 710
───────────────────────────────────────────────────────────── */
.header-type-5 .menu-tool,
.mobile-nav-section,
.header-type-5 .menu-tool.nav-bar-mobile {
background: var(--vm-primary) !important;
background-color: var(--vm-primary) !important;
border-bottom: 3px solid var(--vm-secondary) !important;
}
/* ─────────────────────────────────────────────────────────────
BATCH 3 ADDITIONS
Sections: home-product-grid-type-4 (Why Choose),
brands, footer-model-6
INSTRUCTIONS: Paste this at the very bottom of vrinda-custom.css
───────────────────────────────────────────────────────────── */
/* ── Why Choose Our Nebulizer (home-product-grid-type-4) ───── */
.vm-why-choose-section {
background-color: var(--vm-accent);
padding: 48px 0;
}
.vm-section-title {
color: var(--vm-primary) !important;
font-weight: 700 !important;
}
.vm-section-subtitle {
color: var(--vm-text-muted) !important;
font-size: 15px !important;
margin: 0 !important;
}
.vm-why-choose-grid {
margin-top: 32px;
}
.vm-feature-block {
padding: 10px;
margin-bottom: 0 !important;
}
.vm-feature-card {
background: var(--vm-white);
border: 1px solid var(--vm-border);
border-radius: 8px;
padding: 36px 24px;
text-align: center;
height: 100%;
box-shadow: 0 2px 8px var(--vm-shadow);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.vm-feature-card:hover {
box-shadow: 0 10px 28px var(--vm-shadow);
transform: translateY(-5px);
}
.vm-feature-icon {
margin-bottom: 20px;
}
.vm-feature-icon i {
font-size: 42px;
color: var(--vm-secondary);
transition: transform 0.2s ease;
}
.vm-feature-card:hover .vm-feature-icon i {
transform: scale(1.12);
}
.vm-feature-title {
color: var(--vm-primary) !important;
font-size: 14px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.6px !important;
margin: 0 0 12px !important;
padding: 0 !important;
line-height: 1.4 !important;
}
.vm-feature-desc {
color: var(--vm-text-muted) !important;
font-size: 13px !important;
line-height: 1.75 !important;
margin: 0 !important;
}
@media screen and (max-width: 768px) {
.vm-feature-block {
margin-bottom: 16px !important;
}
.vm-feature-card {
padding: 28px 20px;
}
}
/* ── Brands & Certifications (brands.liquid) ─────────────────── */
.vm-brands-section {
background: var(--vm-white);
border-top: 1px solid var(--vm-border);
border-bottom: 1px solid var(--vm-border);
}
.vm-brands-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 24px;
margin-top: 28px;
}
.vm-brand-item {
flex: 0 0 auto;
width: 160px;
height: 90px;
padding: 12px 16px;
border: 1px solid var(--vm-border);
border-radius: 6px;
background: var(--vm-white);
display: flex;
align-items: center;
justify-content: center;
transition: box-shadow var(--vm-transition), border-color var(--vm-transition);
}
.vm-brand-item:hover {
box-shadow: 0 4px 14px var(--vm-shadow);
border-color: var(--vm-primary);
}
.vm-brand-item img {
max-width: 100%;
max-height: 60px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(15%);
transition: filter var(--vm-transition);
}
.vm-brand-item:hover img {
filter: grayscale(0%);
}
.vm-brand-placeholder {
text-align: center;
width: 100%;
}
.vm-brand-placeholder svg {
width: 80px;
height: 50px;
opacity: 0.25;
}
.vm-brand-placeholder span {
display: block;
font-size: 11px;
color: var(--vm-text-muted);
margin-top: 4px;
text-align: center;
}
@media screen and (max-width: 640px) {
.vm-brands-grid {
gap: 14px;
}
.vm-brand-item {
width: 130px;
height: 76px;
}
}
/* ── Footer (footer-model-6.liquid) ─────────────────────────── */
.footer-model-6 .newsletter-section {
background-color: var(--vm-accent) !important;
padding: 24px 0 !important;
border-top: 1px solid var(--vm-border) !important;
border-bottom: 1px solid var(--vm-border) !important;
}
.footer-model-6 .vm-newsletter-label {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--vm-text) !important;
margin: 0 0 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.4px !important;
}
.footer-model-6 .vm-newsletter-input {
display: flex;
max-width: 420px;
}
.footer-model-6 .newsletter-email {
flex: 1;
padding: 10px 16px !important;
border: 1px solid var(--vm-border) !important;
border-right: none !important;
border-radius: var(--vm-radius) 0 0 var(--vm-radius) !important;
font-size: 13px !important;
outline: none !important;
background: var(--vm-white) !important;
color: var(--vm-text) !important;
}
.footer-model-6 .newsletter-email:focus {
border-color: var(--vm-primary) !important;
}
.footer-model-6 .newsletter-submit {
background: var(--vm-primary) !important;
color: var(--vm-white) !important;
border: none !important;
padding: 10px 20px !important;
border-radius: 0 var(--vm-radius) var(--vm-radius) 0 !important;
cursor: pointer !important;
font-size: 14px !important;
transition: background var(--vm-transition) !important;
}
.footer-model-6 .newsletter-submit:hover {
background: var(--vm-secondary) !important;
}
.footer-model-6 .vm-social-icons {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
height: 100%;
}
.footer-model-6 .vm-social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--vm-border) !important;
border-radius: 50%;
color: var(--vm-text-muted) !important;
text-decoration: none !important;
font-size: 14px;
transition: all var(--vm-transition);
}
.footer-model-6 .vm-social-icons a:hover {
background: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
}
/* Footer Main Body */
.footer-model-6 .vm-footer-main {
background: var(--vm-white);
padding: 48px 0 32px;
border-top: 3px solid var(--vm-border);
}
.footer-model-6 .vm-footer-heading {
color: var(--vm-text) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.6px !important;
border-bottom: 2px solid var(--vm-secondary) !important;
padding-bottom: 10px !important;
margin-bottom: 18px !important;
}
/* Contact list */
.footer-model-6 .vm-footer-contact {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.footer-model-6 .vm-footer-contact li {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
font-size: 13px !important;
color: var(--vm-text-muted) !important;
padding: 5px 0 !important;
line-height: 1.6 !important;
}
.footer-model-6 .vm-footer-contact i {
color: var(--vm-secondary) !important;
font-size: 14px !important;
margin-top: 2px !important;
flex-shrink: 0 !important;
width: 16px !important;
}
.footer-model-6 .vm-footer-contact a {
color: var(--vm-text-muted) !important;
text-decoration: none !important;
transition: color var(--vm-transition) !important;
}
.footer-model-6 .vm-footer-contact a:hover {
color: var(--vm-primary) !important;
}
/* Quick links + account links */
.footer-model-6 .vm-footer-links {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.footer-model-6 .vm-footer-links li {
padding: 5px 0 !important;
}
.footer-model-6 .vm-footer-links a {
font-size: 13px !important;
color: var(--vm-text-muted) !important;
text-decoration: none !important;
transition: color var(--vm-transition) !important;
}
.footer-model-6 .vm-footer-links a::before {
content: "›";
margin-right: 6px;
color: var(--vm-secondary);
}
.footer-model-6 .vm-footer-links a:hover {
color: var(--vm-primary) !important;
}
/* Footer bottom copyright bar */
.footer-model-6 .footer-bottom {
background-color: var(--vm-primary-dark) !important;
padding: 14px 0 !important;
border-top: none !important;
}
.footer-model-6 .vm-copyright {
color: rgba(255, 255, 255, 0.65) !important;
font-size: 12px !important;
margin: 0 !important;
text-align: center !important;
}
/* Blog section — hidden until real posts exist */
/* Remove the /* and */ wrappers below when real blog posts are ready */
/*
.blog-post-type-1 {
display: none !important;
}
*/
/* Responsive footer */
@media screen and (max-width: 768px) {
.footer-model-6 .vm-social-icons {
justify-content: flex-start !important;
margin-top: 20px !important;
}
.footer-model-6 .vm-footer-main {
padding: 32px 0 24px !important;
}
.footer-model-6 .vm-newsletter-input {
max-width: 100% !important;
}
.footer-model-6 .grid__item {
margin-bottom: 28px !important;
}
}
/* ─────────────────────────────────────────────────────────────
SESSION 4 ADDITIONS
1. Slideshow height fix
2. Comprehensive pink (#da004d) cleanup
───────────────────────────────────────────────────────────── */
/* ── SLIDESHOW HEIGHT FIX ────────────────────────────────────
Constrains hero slides to 500px desktop / responsive mobile.
Uses object-fit: cover so the image fills without distorting.
─────────────────────────────────────────────────────────── */
/* Lock the slide image height */
.home-slideshow .slide-img {
width: 100% !important;
height: 500px !important;
max-height: 500px !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
}
/* Lock the containers so nothing overflows */
.home-slideshow,
.home-slideshow .variable-width,
.home-slideshow .slick-slider,
.home-slideshow .owl-stage-outer {
max-height: 500px !important;
overflow: hidden !important;
}
/* Slick-generated wrappers */
.home-slideshow .slick-list {
max-height: 500px !important;
overflow: hidden !important;
}
.home-slideshow .slick-track {
max-height: 500px !important;
}
.home-slideshow .slick-slide,
.home-slideshow .slick-slide > div,
.home-slideshow .slick-slide a {
height: 500px !important;
max-height: 500px !important;
overflow: hidden !important;
display: block !important;
}
/* Tablet */
@media screen and (max-width: 991px) {
.home-slideshow .slide-img,
.home-slideshow,
.home-slideshow .variable-width,
.home-slideshow .slick-slider,
.home-slideshow .owl-stage-outer,
.home-slideshow .slick-list,
.home-slideshow .slick-track,
.home-slideshow .slick-slide,
.home-slideshow .slick-slide > div,
.home-slideshow .slick-slide a {
height: 360px !important;
max-height: 360px !important;
}
}
/* Mobile large */
@media screen and (max-width: 768px) {
.home-slideshow .slide-img,
.home-slideshow,
.home-slideshow .variable-width,
.home-slideshow .slick-slider,
.home-slideshow .owl-stage-outer,
.home-slideshow .slick-list,
.home-slideshow .slick-track,
.home-slideshow .slick-slide,
.home-slideshow .slick-slide > div,
.home-slideshow .slick-slide a {
height: 260px !important;
max-height: 260px !important;
}
}
/* Mobile small */
@media screen and (max-width: 480px) {
.home-slideshow .slide-img,
.home-slideshow,
.home-slideshow .variable-width,
.home-slideshow .slick-slider,
.home-slideshow .owl-stage-outer,
.home-slideshow .slick-list,
.home-slideshow .slick-track,
.home-slideshow .slick-slide,
.home-slideshow .slick-slide > div,
.home-slideshow .slick-slide a {
height: 200px !important;
max-height: 200px !important;
}
}
/* ── PINK CLEANUP (#da004d catch-all) ────────────────────────
Targets every common element the fashion theme made pink.
Added session 4 — these supplement the existing section rules.
─────────────────────────────────────────────────────────── */
/* Sale / New product badges */
.badge-sale,
.badge--sale,
.on-sale-badge,
.product-label,
.product-label.sale,
.featured-tag .badge,
.featured-tag .badge--sale,
span.sale-badge,
.label-sale {
background-color: var(--vm-secondary) !important;
color: var(--vm-white) !important;
border: none !important;
}
.badge-new,
.label-new,
.new-badge,
.product-label.new {
background-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
border: none !important;
}
/* Wishlist / heart icon */
.wishlist i,
.wishlist-icon i,
.wishlist .fa-heart-o,
.wishlist .fa-heart {
color: var(--vm-text-muted) !important;
transition: color var(--vm-transition);
}
.wishlist:hover i,
.wishlist-btn:hover i,
.wishlist i:hover {
color: var(--vm-primary) !important;
}
/* Product quick-view / action bar hover */
.product-container .ImageWrapper a:hover,
.product-action-bar a:hover,
.product-container .product-button a:hover {
background-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
}
/* Star ratings — amber, not pink */
.spr-icon-star,
.spr-icon-star-half-alt,
.fa.fa-star,
.product-stars .fa-star,
.review-score .fa-star,
.star-rating .fa {
color: #f0a500 !important;
}
/* Deal / countdown timers */
.countdown .item,
.deal-countdown span,
.timer-num,
.flashsale-countdown .num,
.deals-timer .count-down .number {
background-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
border-color: var(--vm-primary-dark) !important;
}
/* Global form input focus rings */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
border-color: var(--vm-primary) !important;
box-shadow: 0 0 0 2px rgba(11, 61, 145, 0.12) !important;
outline: none !important;
}
/* Active sidebar filter tags */
.active-tag,
.active-filter-tag,
.filter-tag.active {
background-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
border-color: var(--vm-primary-dark) !important;
}
/* Product compare checkbox border */
.compare-btn:hover,
.compare-label:hover {
border-color: var(--vm-primary) !important;
color: var(--vm-primary) !important;
}
/* Promo overlay text (sidebar banners, any remaining) */
.promo-tag-overlay,
.sidebar-banner-overlay {
background-color: rgba(11, 61, 145, 0.82) !important;
}
/* Quantity input stepper (+ / - buttons) */
.quantity-selector button,
.quantity__button,
.qty-btn {
background-color: var(--vm-accent) !important;
border-color: var(--vm-border) !important;
color: var(--vm-primary) !important;
transition: all var(--vm-transition);
}
.quantity-selector button:hover,
.quantity__button:hover,
.qty-btn:hover {
background-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
}
/* Tab underline active indicators (any remaining) */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
border-color: var(--vm-primary) var(--vm-primary) transparent !important;
color: var(--vm-primary) !important;
background-color: var(--vm-white) !important;
}
/* Owl Carousel dot active (product tabs, promo image) */
.owl-dots .owl-dot.active span,
.owl-dots .owl-dot:hover span {
background-color: var(--vm-primary) !important;
}
/* Slick dots active (already partially covered, belt-and-braces) */
.slick-dots li.slick-active button,
.slick-dots li.slick-active button:before {
color: var(--vm-secondary) !important;
background: var(--vm-secondary) !important;
opacity: 1 !important;
}
/* ─────────────────────────────────────────────────────────────
SESSION 4 — PATCH 2 (append below Patch 1 / Slideshow fix)
Fixes: Featured Nebulizers bg, price color, scroll-to-top
───────────────────────────────────────────────────────────── */
/* ── Featured Nebulizers — FORCE WHITE BACKGROUND ──────────
Old theme CSS sets dark navy on this section class.
These selectors cover every possible wrapping element.
─────────────────────────────────────────────────────────── */
.product-tab-type-2,
[data-section-type="product-tab-type-2"],
.product-tab-type-2 .full_width_tab,
.product-tab-type-2 .dt-sc-tabs-container-section,
.product-tab-type-2 .dt-sc-tabs-container,
.product-tab-type-2 .wrapper,
.product-tab-type-2 .grid-uniform,
.product-tab-type-2 .grid__item {
background-color: var(--vm-white) !important;
color: var(--vm-text) !important;
}
/* Heading text — must be visible on white bg */
.product-tab-type-2 h2.section-header__title,
.product-tab-type-2 .section-header__title,
.product-tab-type-2 .border-title h2 {
color: var(--vm-primary) !important;
}
.product-tab-type-2 .short-desc p {
color: var(--vm-text-muted) !important;
}
/* ── Price color — pink → medical navy ───────────────────────
Owl Carousel wraps items in .owl-item which increases specificity.
These cover every price element inside the carousel.
─────────────────────────────────────────────────────────── */
.product-tab-type-2 .money,
.product-tab-type-2 .price,
.product-tab-type-2 .product_price,
.product-tab-type-2 .product_price .money,
.product-tab-type-2 .grid-link__meta .money,
.product-tab-type-2 .owl-item .money,
.product-tab-type-2 .owl-item .product_price .money,
.product-tab-type-2 .owl-carousel .money,
.owl-carousel.tab2 .money,
.owl-carousel.tab2 .product_price .money {
color: var(--vm-primary) !important;
font-weight: 600 !important;
}
/* Compare-at / strikethrough price */
.product-tab-type-2 s .money,
.product-tab-type-2 .was-price .money,
.product-tab-type-2 .product-price__compare .money,
.product-tab-type-2 del .money,
.owl-carousel.tab2 s .money,
.owl-carousel.tab2 del .money {
color: var(--vm-text-muted) !important;
font-weight: 400 !important;
text-decoration: line-through !important;
}
/* ── Scroll-to-top button — extended selector list ───────────
The button is still pink, which means it's using a class
not yet covered. This list hits every known implementation.
─────────────────────────────────────────────────────────── */
a[class*="back-top"],
a[class*="backtop"],
a[class*="back_top"],
a[id*="back-top"],
a[id*="backtop"],
div[class*="back-top"],
div[id*="back-top"],
.backtotop-wrapper a,
.back-to-top-btn,
.scroll-up-btn,
.js-back-top,
.js-scroll-top,
.topbutton,
.top-btn,
.gotop,
.goTop,
.vm-gotop {
background-color: var(--vm-primary) !important;
background: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
color: var(--vm-white) !important;
}
a[class*="back-top"]:hover,
a[class*="backtop"]:hover,
.backtotop-wrapper a:hover,
.back-to-top-btn:hover,
.js-back-top:hover,
.js-scroll-top:hover {
background-color: var(--vm-secondary) !important;
background: var(--vm-secondary) !important;
border-color: var(--vm-secondary) !important;
}
/* Nuclear option: any fixed-position circle in bottom-right corner */
a[style*="position:fixed"],
a[style*="position: fixed"] {
background-color: var(--vm-primary) !important;
}
/* ─────────────────────────────────────────────────────────────
SESSION 4 — PATCH 3 (append after Patch 2)
Fixes: centered product grid layout + pink price color
───────────────────────────────────────────────────────────── */
/* ── Centered product grid (1–4 products, no carousel) ──────
Used by product-tab-model-2.liquid when products_count ≤ 4.
Flex centering so 1 product sits in the middle, 2 products
sit side by side centered, etc.
─────────────────────────────────────────────────────────── */
.vm-products-centered-list {
display: flex !important;
justify-content: center !important;
flex-wrap: wrap !important;
list-style: none !important;
padding: 20px 0 !important;
margin: 0 auto !important;
gap: 0 !important;
}
/* Each product — fixed card width matching carousel item width */
.vm-products-centered-list > li {
flex: 0 0 auto !important;
width: 280px !important;
max-width: 90vw !important;
padding: 0 10px !important;
box-sizing: border-box !important;
}
@media screen and (max-width: 768px) {
.vm-products-centered-list > li {
width: 260px !important;
}
}
@media screen and (max-width: 480px) {
.vm-products-centered-list {
justify-content: center !important;
}
.vm-products-centered-list > li {
width: 100% !important;
max-width: 320px !important;
padding: 0 !important;
}
}
/* "No products" message */
.vm-no-products {
text-align: center !important;
color: var(--vm-text-muted) !important;
font-size: 14px !important;
padding: 40px 20px !important;
}
/* ── Price color fix (pink → navy) — extended selectors ─────
Covers: centered grid, carousel context, and any nested
specificity added by the theme's .products wrapper.
─────────────────────────────────────────────────────────── */
.vm-products-centered-list .money,
.vm-products-centered-list .product_price .money,
.vm-products-centered-list .price,
.vm-products-centered-list .product-price .money,
.product-tab-type-2 .products .money,
.product-tab-type-2 .products .product_price .money,
.product-tab-type-2 .product-detail .money,
.product-tab-type-2 .grid-link__meta .money,
.product-tab-type-2 span.money {
color: var(--vm-primary) !important;
font-weight: 600 !important;
}
/* Strikethrough compare-at price */
.vm-products-centered-list s .money,
.vm-products-centered-list del .money,
.vm-products-centered-list .was-price .money,
.product-tab-type-2 .products s .money,
.product-tab-type-2 .products del .money {
color: var(--vm-text-muted) !important;
font-weight: 400 !important;
}
/* Global money catch-all — overrides any theme .money { color: #da004d } */
.money {
color: var(--vm-primary) !important;
}
/* ── Logo Size Fix ── */
.site-header__logo img.normal-logo {
width: 150px !important;
max-width: 150px !important;
height: auto !important;
max-height: none !important;
}
/* ============================================================
SESSION 5 — PATCH 1: Slideshow Full Height Fix
Overrides the fixed 500px height set in Session 4
Images are 1880×720px — must show in full, no crop
============================================================ */
.home-slideshow {
height: auto !important;
max-height: none !important;
}
.home-slideshow .slick-slider,
.home-slideshow .slick-list,
.home-slideshow .slick-track,
.home-slideshow .slick-slide,
.home-slideshow .slick-slide > div {
height: auto !important;
max-height: none !important;
}
.home-slideshow .slide-img {
width: 100% !important;
height: auto !important;
max-height: none !important;
display: block !important;
object-fit: unset !important;
}
@media (max-width: 768px) {
.home-slideshow {
height: auto !important;
}
}
@media (max-width: 480px) {
.home-slideshow {
height: auto !important;
}
}
/* ============================================================
SESSION 5 — PATCH 2: Slideshow Overflow Fix
Root cause: Session 4 CSS set overflow:hidden on slideshow
containers — this clips images taller than the old fixed height.
Fix: override overflow on all slideshow containers.
============================================================ */
.home-slideshow,
.home-slideshow .variable-width,
.home-slideshow .slick-slider,
.home-slideshow .owl-stage-outer {
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
/* Keep x-axis hidden to prevent horizontal scroll,
but allow y-axis to show full image height */
.home-slideshow .slick-list {
overflow-x: hidden !important;
overflow-y: visible !important;
height: auto !important;
max-height: none !important;
}
.home-slideshow .slick-track,
.home-slideshow .slick-slide,
.home-slideshow .slick-slide > div,
.home-slideshow .slick-slide a,
.home-slideshow .slide-img {
height: auto !important;
max-height: none !important;
}
/* ── Slideshow: Hide dots & arrows until hover ── */
.home-slideshow .slick-dots,
.home-slideshow .slick-arrow {
opacity: 0;
transition: opacity 0.3s ease;
}
.home-slideshow:hover .slick-dots,
.home-slideshow:hover .slick-arrow {
opacity: 1;
}
/* ── Scroll-to-top button ── */
#toTop {
background-color: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
}
#toTop:hover {
background-color: var(--vm-primary-dark) !important;
border-color: var(--vm-primary-dark) !important;
}
/* ============================================================
SESSION 5 — PATCH 3: Trust Signals Double Background Fix
Root cause: index-section padding makes the navy bg appear
as a double layer. Targeting via vm-trust-signals-section
class added to schema.
============================================================ */
.vm-trust-signals-section {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
background: transparent !important;
}
.vm-trust-signals-section .support_block {
padding: 30px 0 !important;
}
/* ── Featured Nebulizers: Remove dark bg bleed ── */
[data-section-type="product-tab-model-2"],
.product-tab-type-2,
.product-tab-type-2 .container,
.product-tab-type-2 .wrapper,
.product-tab-type-2 .tab-content {
background: #ffffff !important;
background-color: #ffffff !important;
}
/* ── Trust Signals: Fix double background ── */
/* Remove navy from outer wrapper — keep only on inner .support_block */
.support-block-type-1 {
background-color: transparent !important;
padding: 0 !important;
}
.support_block {
background-color: #0D2B59 !important;
padding: 30px 0 !important;
}
/* ── Why Choose Section: Restore bottom padding on wrapper ── */
.vm-why-choose-section .wrapper {
padding-bottom: 50px !important;
padding-top: 10px !important;
}
/* ============================================================
SESSION 5 — PATCH 4: Why Choose Full Width Background
Root cause: background was on inner div (vm-why-choose-section)
not on the full-width Shopify wrapper.
Fix: background now on vm-why-choose-wrapper (schema class)
which IS the full-width Shopify section element.
============================================================ */
/* Full-width Shopify wrapper — carries the background */
.vm-why-choose-wrapper {
background: var(--vm-accent) !important;
padding-bottom: 50px !important;
}
/* Inner div — transparent so wrapper background shows through */
.vm-why-choose-section {
background: transparent !important;
}
/* Wrapper inside: keep padding for content breathing room */
.vm-why-choose-wrapper .wrapper {
padding-bottom: 10px !important;
}
/* ── Why Choose: Full bleed background fix ── */
.vm-why-choose-wrapper,
.vm-why-choose-section {
width: 100vw !important;
position: relative !important;
left: 50% !important;
transform: translateX(-50%) !important;
background: var(--vm-accent) !important;
}
/* ============================================================
SESSION 5 — PATCH 5: CSS Cleanup & Bug Fixes
Fixes:
1. Red/pink underline under section headings → teal
2. Why Choose background — single clean declaration
3. Remove full-bleed on inner div (was applied to both parent + child)
4. Fix double padding on Why Choose
5. Override Session 4 dead slideshow code cleanly
============================================================ */
/* ── FIX 1: Section heading underline → Teal ─────────────────
The theme's style.css renders a pink/red line under headings
via .border-title::after or .section-header::after.
Override to medical teal.
─────────────────────────────────────────────────────────── */
.border-title::after,
.border-title::before,
.section-header::after,
.section-header::before,
.section-header--small::after,
.section-header--small::before,
.short-desc::after,
.short-desc::before,
.short-desc hr {
background-color: var(--vm-secondary) !important;
border-color: var(--vm-secondary) !important;
color: var(--vm-secondary) !important;
}
/* ── FIX 2: Why Choose — clean single background declaration ──
Remove flip-flopping. Background only on .vm-why-choose-wrapper
(the Shopify section wrapper — full width via index-section--flush).
Inner div and wrapper div both get transparent background.
─────────────────────────────────────────────────────────── */
.vm-why-choose-wrapper {
background: var(--vm-accent) !important;
padding: 0 !important;
/* width/transform full-bleed removed — index-section--flush handles this */
}
.vm-why-choose-section {
background: transparent !important;
/* Remove Batch 3 padding: 48px 0 — use wrapper padding below */
padding: 0 !important;
/* Remove full-bleed: width/left/transform — only wrapper needs this */
width: auto !important;
left: auto !important;
transform: none !important;
}
/* Single, clean padding source */
.vm-why-choose-wrapper .wrapper {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
/* ── FIX 3: Slideshow — clean override of Session 4 dead code ──
Session 4 set object-fit: cover which conflicts with Patch 1's
object-fit: unset. Patch 1 wins (later) but this makes it explicit.
Also ensures no height constraint leaks through.
─────────────────────────────────────────────────────────── */
.home-slideshow .slide-img {
height: auto !important;
max-height: none !important;
object-fit: fill !important;
}
.home-slideshow,
.home-slideshow .variable-width,
.home-slideshow .slick-slider,
.home-slideshow .slick-list,
.home-slideshow .slick-track,
.home-slideshow .slick-slide,
.home-slideshow .slick-slide > div,
.home-slideshow .slick-slide a {
height: auto !important;
max-height: none !important;
}
/* =============================================
VRINDA MART — vrinda-custom.css
PATCH v2: Brands & Certifications — full fix
ACTION: Delete the previous brands patch block
(everything under the old "BRANDS & CERTIFICATIONS"
comment) and REPLACE with this entire block.
============================================= */
/* ── Section wrapper ── */
.vm-brands-section {
background: #ffffff;
padding: 48px 0;
width: 100%;
}
/* ── Heading block — pure custom classes, zero theme interference ── */
.vm-brands-heading-wrap {
text-align: center !important;
margin: 0 0 36px 0 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.vm-brands-title {
font-size: 26px !important;
font-weight: 700 !important;
color: var(--vm-primary) !important;
margin: 0 0 8px 0 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
line-height: 1.3 !important;
}
.vm-brands-title::before,
.vm-brands-title::after {
display: none !important;
}
.vm-brands-subtitle {
font-size: 15px !important;
color: var(--vm-text-muted) !important;
margin: 0 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ── Grid: centered flex row, override everything ── */
.vm-brands-section .vm-brands-grid {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 24px 28px !important;
margin: 0 auto !important;
padding: 0 !important;
float: none !important;
position: static !important;
width: 100% !important;
max-width: 100% !important;
list-style: none !important;
}
/* ── Each logo card ── */
.vm-brands-section .vm-brand-item {
float: none !important;
position: static !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
padding: 18px 28px !important;
background: #F8FBFF !important;
border: 1px solid var(--vm-border) !important;
border-radius: 8px !important;
min-width: 130px !important;
max-width: 180px !important;
box-sizing: border-box !important;
margin: 0 !important;
visibility: visible !important;
opacity: 1 !important;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.vm-brands-section .vm-brand-item:hover {
box-shadow: 0 6px 18px rgba(11, 61, 145, 0.12) !important;
transform: translateY(-3px);
}
/* ── Logo image: reset all possible rogue alignment ── */
.vm-brands-section .vm-brand-item img {
display: block !important;
float: none !important;
margin: 0 auto !important;
max-width: 130px !important;
max-height: 65px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
filter: grayscale(20%);
transition: filter 0.25s ease;
}
.vm-brands-section .vm-brand-item:hover img {
filter: grayscale(0%);
}
/* ── Anchor inside brand item ── */
.vm-brands-section .vm-brand-item a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100%;
}
/* ── Placeholder (no image uploaded) ── */
.vm-brands-section .vm-brand-placeholder {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--vm-text-muted);
font-size: 12px;
text-align: center;
min-height: 60px;
}
.vm-brands-section .vm-brand-placeholder .placeholder-svg {
width: 50px;
height: 50px;
fill: var(--vm-border);
}
/* ── Mobile ── */
@media (max-width: 640px) {
.vm-brands-section {
padding: 36px 0;
}
.vm-brands-section .vm-brand-item {
min-width: 110px !important;
max-width: 140px !important;
padding: 14px 18px !important;
}
.vm-brands-section .vm-brand-item img {
max-width: 90px !important;
max-height: 50px !important;
}
}
/* =============================================
VRINDA MART — vrinda-custom.css
PATCH: Footer v2 — dark navy redesign
APPEND TO BOTTOM of vrinda-custom.css
(Replace/supersedes any previous footer styles)
============================================= */
/* ══ FOOTER BASE ══════════════════════════════════════════════ */
.vm-footer.site-footer.footer-model-6,
.vm-footer {
background: var(--vm-primary) !important;
color: rgba(255, 255, 255, 0.80) !important;
margin: 0 !important;
padding: 0 !important;
border-top: none !important;
}
/* ══ NEWSLETTER BAR ═══════════════════════════════════════════ */
.vm-footer-newsletter {
background: var(--vm-primary-dark) !important;
padding: 20px 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.vm-newsletter-label {
color: rgba(255, 255, 255, 0.90) !important;
font-size: 15px !important;
font-weight: 600 !important;
margin: 0 !important;
line-height: 42px !important;
}
.vm-newsletter-label .fa {
color: var(--vm-secondary) !important;
margin-right: 8px;
}
.vm-newsletter-input {
display: flex !important;
max-width: 420px;
margin-left: auto;
}
.vm-newsletter-input .newsletter-email {
flex: 1;
padding: 10px 16px !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
border-right: none !important;
border-radius: 4px 0 0 4px !important;
background: rgba(255, 255, 255, 0.10) !important;
color: #fff !important;
font-size: 14px !important;
}
.vm-newsletter-input .newsletter-email::placeholder {
color: rgba(255, 255, 255, 0.45) !important;
}
.vm-newsletter-input .newsletter-submit {
padding: 10px 20px !important;
background: var(--vm-secondary) !important;
color: #fff !important;
border: none !important;
border-radius: 0 4px 4px 0 !important;
font-size: 14px !important;
font-weight: 600 !important;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease;
}
.vm-newsletter-input .newsletter-submit:hover {
background: #008f78 !important;
}
/* ══ FOOTER MAIN ══════════════════════════════════════════════ */
.vm-footer-main {
background: var(--vm-primary) !important;
padding: 56px 0 40px !important;
}
/* ══ LOGO COLUMN ══════════════════════════════════════════════ */
.vm-footer-col-logo {
padding-right: 20px !important;
}
/* Auto-invert: turns any coloured logo white on dark background */
.vm-footer-logo-img {
display: block !important;
max-width: 160px !important;
max-height: 68px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
margin-bottom: 14px !important;
filter: brightness(0) invert(1) !important;
}
/* Text fallback when no logo image is uploaded */
.vm-footer-logo-text {
display: block !important;
font-size: 22px !important;
font-weight: 700 !important;
color: #ffffff !important;
margin-bottom: 10px !important;
letter-spacing: -0.3px !important;
}
.vm-footer-tagline {
font-size: 13px !important;
color: rgba(255, 255, 255, 0.60) !important;
line-height: 1.55 !important;
margin: 0 0 22px 0 !important;
}
/* ══ SOCIAL ICONS ═════════════════════════════════════════════ */
.vm-footer-social {
display: flex !important;
gap: 10px !important;
flex-wrap: wrap !important;
}
.vm-footer-social a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
background: rgba(255, 255, 255, 0.10) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 50% !important;
color: rgba(255, 255, 255, 0.75) !important;
font-size: 15px !important;
text-decoration: none !important;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.vm-footer-social a:hover {
background: var(--vm-secondary) !important;
border-color: var(--vm-secondary) !important;
color: #ffffff !important;
}
/* ══ COLUMN HEADINGS ══════════════════════════════════════════ */
.vm-footer .vm-footer-heading,
.vm-footer-main .vm-footer-heading {
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.4px !important;
color: #ffffff !important;
margin: 0 0 20px 0 !important;
padding-bottom: 12px !important;
border-bottom: 2px solid var(--vm-secondary) !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
/* Kill any theme pseudo-element underlines */
background: none !important;
}
.vm-footer .vm-footer-heading::before,
.vm-footer .vm-footer-heading::after {
display: none !important;
}
/* ══ CONTACT LIST ══════════════════════════════════════════════ */
.vm-footer-contact {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.vm-footer-contact li {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
margin-bottom: 13px !important;
font-size: 14px !important;
color: rgba(255, 255, 255, 0.72) !important;
list-style: none !important;
}
.vm-footer-contact li .fa {
color: var(--vm-secondary) !important;
margin-top: 3px !important;
flex-shrink: 0 !important;
font-size: 14px !important;
min-width: 16px;
}
.vm-footer-contact li a,
.vm-footer-contact li span {
color: rgba(255, 255, 255, 0.72) !important;
text-decoration: none !important;
transition: color 0.2s ease;
}
.vm-footer-contact li a:hover {
color: #ffffff !important;
}
/* ══ QUICK LINKS + MY ACCOUNT ══════════════════════════════════ */
.vm-footer-links {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.vm-footer-links li {
margin-bottom: 10px !important;
list-style: none !important;
}
.vm-footer-links li a {
font-size: 14px !important;
color: rgba(255, 255, 255, 0.72) !important;
text-decoration: none !important;
display: inline-block !important;
transition: color 0.2s ease, padding-left 0.2s ease;
}
.vm-footer-links li a::before {
content: '›' !important;
margin-right: 7px !important;
color: var(--vm-secondary) !important;
}
.vm-footer-links li a:hover {
color: #ffffff !important;
padding-left: 4px !important;
}
/* ══ COPYRIGHT BAR ════════════════════════════════════════════ */
.vm-footer-bottom {
background: #061F4A !important;
padding: 16px 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.vm-copyright {
font-size: 13px !important;
color: rgba(255, 255, 255, 0.50) !important;
text-align: center !important;
margin: 0 !important;
}
/* ══ MOBILE ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
.vm-footer-main {
padding: 40px 0 24px !important;
}
.vm-footer-col-logo {
padding-right: 0 !important;
text-align: center;
margin-bottom: 8px;
}
.vm-footer-logo-img {
margin: 0 auto 14px auto !important;
}
.vm-footer-social {
justify-content: center !important;
}
.vm-footer-heading {
margin-top: 28px !important;
}
.vm-newsletter-input {
margin-left: 0 !important;
}
}
/* =============================================
VRINDA MART — vrinda-custom.css
PATCH: Footer quick-fix
— removes vertical grid lines
— fixes dim/unreadable link text
APPEND TO BOTTOM of vrinda-custom.css
============================================= */
/* ── Kill Timber's grid__item border lines inside footer ── */
.vm-footer .grid__item,
.vm-footer-main .grid__item,
.vm-footer-newsletter .grid__item,
.site-footer.footer-model-6 .grid__item {
border: none !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
border-bottom: none !important;
box-shadow: none !important;
outline: none !important;
}
/* ── Fix: Quick Links + My Account link text contrast ── */
.site-footer.footer-model-6 .vm-footer-links li a,
.vm-footer.site-footer .vm-footer-links li a,
.vm-footer-main .vm-footer-links li a {
color: rgba(255, 255, 255, 0.88) !important;
text-decoration: none !important;
font-size: 14px !important;
display: inline-block !important;
transition: color 0.2s ease, padding-left 0.2s ease;
}
.site-footer.footer-model-6 .vm-footer-links li a::before,
.vm-footer.site-footer .vm-footer-links li a::before,
.vm-footer-main .vm-footer-links li a::before {
content: '›' !important;
margin-right: 7px !important;
color: var(--vm-secondary) !important;
}
.site-footer.footer-model-6 .vm-footer-links li a:hover,
.vm-footer.site-footer .vm-footer-links li a:hover {
color: #ffffff !important;
padding-left: 4px !important;
}
/* ── Fix: Contact column text contrast ── */
.site-footer.footer-model-6 .vm-footer-contact li,
.vm-footer.site-footer .vm-footer-contact li {
color: rgba(255, 255, 255, 0.85) !important;
}
.site-footer.footer-model-6 .vm-footer-contact li a,
.vm-footer.site-footer .vm-footer-contact li a,
.site-footer.footer-model-6 .vm-footer-contact li span,
.vm-footer.site-footer .vm-footer-contact li span {
color: rgba(255, 255, 255, 0.85) !important;
}
.site-footer.footer-model-6 .vm-footer-contact li a:hover,
.vm-footer.site-footer .vm-footer-contact li a:hover {
color: #ffffff !important;
}
/* =============================================
VRINDA MART — vrinda-custom.css
PATCH: Featured Nebulizers — large single product card
APPEND TO BOTTOM of vrinda-custom.css
============================================= */
/* ── Container: center the card, kill list styling ── */
.vm-products-centered-list {
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
flex-wrap: wrap !important;
list-style: none !important;
padding: 20px 0 40px !important;
margin: 0 !important;
gap: 32px !important;
}
/* ── The card: wide + centered ── */
.vm-products-centered-list > li,
.vm-products-centered-list .grid__item {
width: 520px !important;
max-width: 92vw !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* ── Outer card wrapper: shadow, border, hover lift ──
Multiple selectors cover DT-theme / Timber / generic patterns */
.vm-products-centered-list .product-list-item,
.vm-products-centered-list .grid-view-item,
.vm-products-centered-list .product-card,
.vm-products-centered-list .dt-sc-product-item,
.vm-products-centered-list > li > div,
.vm-products-centered-list > li > a {
border-radius: 12px !important;
box-shadow: 0 8px 32px rgba(11, 61, 145, 0.13) !important;
border: 1px solid var(--vm-border) !important;
overflow: hidden !important;
transition: box-shadow 0.3s ease, transform 0.3s ease !important;
background: #ffffff !important;
}
.vm-products-centered-list .product-list-item:hover,
.vm-products-centered-list .grid-view-item:hover,
.vm-products-centered-list .product-card:hover,
.vm-products-centered-list > li > div:hover,
.vm-products-centered-list > li > a:hover {
box-shadow: 0 16px 48px rgba(11, 61, 145, 0.20) !important;
transform: translateY(-5px) !important;
}
/* ── Image container: tall ── */
.vm-products-centered-list .product-image,
.vm-products-centered-list .product_image,
.vm-products-centered-list .product-image-wrap,
.vm-products-centered-list .grid-view-item__image-wrapper,
.vm-products-centered-list .img-wrap,
.vm-products-centered-list .product-img-box {
height: 400px !important;
overflow: hidden !important;
background: #f8fbff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ── Product image: contain keeps full product visible, no crop ── */
.vm-products-centered-list img {
width: 100% !important;
height: 400px !important;
object-fit: contain !important;
object-position: center !important;
display: block !important;
padding: 16px !important;
box-sizing: border-box !important;
}
/* ── Product content area ── */
.vm-products-centered-list .product-content,
.vm-products-centered-list .grid-view-item__meta,
.vm-products-centered-list .product-card__info,
.vm-products-centered-list .product-info {
padding: 20px 24px 28px !important;
text-align: center !important;
}
/* ── Product title ── */
.vm-products-centered-list .product-name,
.vm-products-centered-list .product-name a,
.vm-products-centered-list .grid-view-item__title,
.vm-products-centered-list .product-card__name,
.vm-products-centered-list h3,
.vm-products-centered-list h3 a,
.vm-products-centered-list h4,
.vm-products-centered-list h4 a {
font-size: 22px !important;
font-weight: 600 !important;
color: var(--vm-text) !important;
margin: 0 0 12px 0 !important;
text-align: center !important;
line-height: 1.35 !important;
text-decoration: none !important;
}
/* ── Price block ── */
.vm-products-centered-list .price,
.vm-products-centered-list .product-price,
.vm-products-centered-list .price-wrapper {
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
flex-wrap: wrap !important;
}
/* Sale price */
.vm-products-centered-list .price .money,
.vm-products-centered-list .product-price .money,
.vm-products-centered-list .sale-price .money {
font-size: 26px !important;
font-weight: 700 !important;
color: var(--vm-primary) !important;
}
/* Compare-at / original price */
.vm-products-centered-list .compare-at-price .money,
.vm-products-centered-list del .money,
.vm-products-centered-list s .money,
.vm-products-centered-list .was-price .money {
font-size: 17px !important;
color: var(--vm-text-muted) !important;
font-weight: 400 !important;
text-decoration: line-through !important;
}
/* ── SALE badge: teal to match design system ── */
.vm-products-centered-list .sale-tag,
.vm-products-centered-list .badge--sale,
.vm-products-centered-list .product-label.sale,
.vm-products-centered-list .label-sale {
background: var(--vm-secondary) !important;
color: #ffffff !important;
font-size: 12px !important;
font-weight: 700 !important;
padding: 4px 10px !important;
border-radius: 4px !important;
}
/* ── Mobile: full width on small screens ── */
@media (max-width: 600px) {
.vm-products-centered-list > li,
.vm-products-centered-list .grid__item {
width: 100% !important;
max-width: 100% !important;
}
.vm-products-centered-list .product-image,
.vm-products-centered-list img {
height: 280px !important;
}
}
/* ================================================
BATCH 4 — NEW HOMEPAGE SECTIONS
vm-who-can-use | vm-how-it-works
vm-comparison-table | vm-bulk-orders
Append this entire block to the bottom of vrinda-custom.css
================================================ */
/* ------- Shared: Section Header ------- */
.vm-section-header {
text-align: center;
margin-bottom: 44px;
}
.vm-section-title {
font-size: 28px;
font-weight: 700;
color: var(--vm-primary) !important;
margin: 0 0 6px;
line-height: 1.3;
}
.vm-section-title::after {
content: '';
display: block;
width: 48px;
height: 3px;
background: var(--vm-secondary);
margin: 10px auto 0;
border-radius: 2px;
}
/* Override theme's red ::after on any heading inside vm sections */
.vm-who-can-use .border-title::after,
.vm-how-it-works .border-title::after,
.vm-comparison .border-title::after {
background: var(--vm-secondary) !important;
}
.vm-section-subtitle {
font-size: 15px;
color: var(--vm-text-muted);
margin: 8px 0 0;
line-height: 1.6;
}
/* ================================================
SECTION: Who Can Use It
================================================ */
.vm-who-can-use {
background: #fff;
padding: 64px 0;
}
.vm-who-grid {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 28px;
}
.vm-who-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
width: 120px;
cursor: default;
}
.vm-who-icon-wrap {
width: 82px;
height: 82px;
background: var(--vm-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--vm-border);
transition: background 0.3s ease, border-color 0.3s ease;
}
.vm-who-icon-wrap i {
font-size: 32px;
color: var(--vm-primary);
transition: color 0.3s ease;
}
.vm-who-card:hover .vm-who-icon-wrap {
background: var(--vm-primary);
border-color: var(--vm-primary);
}
.vm-who-card:hover .vm-who-icon-wrap i {
color: #fff;
}
.vm-who-label {
font-size: 13px;
font-weight: 600;
color: var(--vm-text);
text-align: center;
line-height: 1.4;
}
@media (max-width: 600px) {
.vm-who-grid {
gap: 20px;
}
.vm-who-card {
width: calc(33.33% - 14px);
min-width: 85px;
}
.vm-who-icon-wrap {
width: 66px;
height: 66px;
}
.vm-who-icon-wrap i {
font-size: 26px;
}
}
/* ================================================
SECTION: How It Works
================================================ */
.vm-how-it-works {
background: var(--vm-accent);
padding: 64px 0;
}
.vm-steps-row {
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: nowrap;
}
.vm-step-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
max-width: 200px;
padding: 0 8px;
}
.vm-step-circle {
width: 80px;
height: 80px;
background: var(--vm-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 18px;
flex-shrink: 0;
box-shadow: 0 6px 20px rgba(11, 61, 145, 0.22);
}
.vm-step-circle i {
font-size: 28px;
color: #fff;
}
.vm-step-number {
position: absolute;
top: -5px;
left: -5px;
width: 24px;
height: 24px;
background: var(--vm-secondary);
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.vm-step-title {
font-size: 14px;
font-weight: 700;
color: var(--vm-primary) !important;
margin: 0 0 8px;
line-height: 1.3;
}
.vm-step-desc {
font-size: 13px;
color: var(--vm-text-muted);
line-height: 1.55;
margin: 0;
}
/* Arrow sits at same level as the circle center (80px / 2 = 40px) */
.vm-step-arrow {
width: 32px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: var(--vm-secondary);
font-size: 18px;
flex-shrink: 0;
}
@media (max-width: 767px) {
.vm-steps-row {
flex-direction: column;
align-items: center;
gap: 0;
}
.vm-step-item {
max-width: 280px;
width: 100%;
padding: 8px 0;
}
.vm-step-arrow {
width: auto;
height: auto;
padding: 4px 0;
transform: rotate(90deg);
}
}
/* ================================================
SECTION: Comparison Table
================================================ */
.vm-comparison {
background: #fff;
padding: 64px 0;
}
.vm-comparison-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.vm-comparison-table {
width: 100%;
max-width: 820px;
margin: 0 auto;
border-collapse: separate;
border-spacing: 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 28px rgba(11, 61, 145, 0.10);
min-width: 460px;
}
/* Reset any theme table styles */
.vm-comparison-table th,
.vm-comparison-table td {
border: none !important;
box-sizing: border-box;
}
/* Header */
.vm-comparison-table thead tr th {
padding: 18px 24px;
font-size: 15px;
font-weight: 700;
text-align: center;
vertical-align: middle;
line-height: 1.3;
}
.vm-col-feature {
background: var(--vm-primary) !important;
color: #fff !important;
text-align: left !important;
width: 30%;
}
.vm-col-ours {
background: var(--vm-accent) !important;
color: var(--vm-primary) !important;
width: 35%;
}
.vm-col-ours i.fa-check-circle {
color: var(--vm-secondary);
margin-right: 5px;
}
.vm-col-them {
background: #f4f6f9 !important;
color: var(--vm-text-muted) !important;
width: 35%;
}
.vm-col-badge {
display: block;
font-size: 10px;
font-weight: 600;
color: var(--vm-secondary);
margin-top: 3px;
text-transform: uppercase;
letter-spacing: 0.6px;
}
.vm-col-badge-grey {
display: block;
font-size: 10px;
font-weight: 600;
color: #9aa3b0;
margin-top: 3px;
text-transform: uppercase;
letter-spacing: 0.6px;
}
/* Body rows */
.vm-comparison-table tbody tr td {
padding: 14px 24px;
font-size: 14px;
vertical-align: middle;
border-bottom: 1px solid var(--vm-border) !important;
}
.vm-comparison-table tbody tr:last-child td {
border-bottom: none !important;
}
.vm-feature-name {
font-weight: 600;
color: var(--vm-text) !important;
text-align: left;
background: #fff;
}
.vm-comparison-table tbody tr:nth-child(even) .vm-feature-name {
background: #f4f8ff;
}
.vm-ours-val {
text-align: center;
color: var(--vm-text) !important;
background: var(--vm-accent) !important;
}
.vm-them-val {
text-align: center;
color: var(--vm-text-muted) !important;
background: #f4f6f9;
}
.vm-comparison-table tbody tr:nth-child(even) .vm-them-val {
background: #eeeff2;
}
.vm-tick {
color: var(--vm-secondary) !important;
margin-right: 5px;
}
.vm-cross {
color: #e74c3c !important;
margin-right: 5px;
}
/* ================================================
SECTION: Bulk Orders CTA
================================================ */
.vm-bulk-orders {
background: #0D2B59;
padding: 0;
}
.vm-bulk-inner {
padding: 60px 0;
}
.vm-bulk-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.vm-bulk-left {
flex: 0 0 auto;
max-width: 380px;
}
.vm-bulk-heading {
font-size: 32px;
font-weight: 700;
color: #fff !important;
margin: 0 0 12px;
line-height: 1.25;
}
.vm-bulk-subtext {
font-size: 15px;
color: rgba(255, 255, 255, 0.72);
margin: 0 0 28px;
line-height: 1.6;
}
.vm-bulk-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--vm-secondary);
color: #fff !important;
padding: 13px 30px;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
text-decoration: none !important;
border: none;
transition: background 0.25s ease, transform 0.2s ease;
}
.vm-bulk-btn:hover {
background: #00876f;
color: #fff !important;
text-decoration: none !important;
transform: translateY(-1px);
}
.vm-bulk-right {
flex: 1;
display: flex;
justify-content: flex-end;
gap: 32px;
flex-wrap: wrap;
}
.vm-bulk-perk {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
min-width: 90px;
text-align: center;
}
.vm-bulk-perk-icon {
width: 58px;
height: 58px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.vm-bulk-perk-icon i {
font-size: 22px;
color: var(--vm-secondary);
}
.vm-bulk-perk-label {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.82);
line-height: 1.4;
}
@media (max-width: 767px) {
.vm-bulk-content {
flex-direction: column;
text-align: center;
}
.vm-bulk-left {
max-width: 100%;
}
.vm-bulk-right {
justify-content: center;
gap: 24px;
width: 100%;
}
.vm-bulk-heading {
font-size: 26px;
}
}
/* ================================================
BATCH 4 — FIX PATCH
Fixes 3 issues: diamond | background width | text color
Append to the VERY BOTTOM of vrinda-custom.css
================================================ */
/* -------------------------------------------------------
FIX 1: Diamond shape in Featured Nebulizers
Root cause: theme's border-title::before creates a
rotated square (diamond) above the section heading.
Hiding all ::before/::after on heading elements inside
the product-tab section.
------------------------------------------------------- */
.product-tab-type-2 .border-title::before,
.product-tab-type-2 .border-title::after,
.product-tab-type-2 .section-header::before,
.product-tab-type-2 .section-header::after,
.product-tab-type-2 .section-header__title::before,
.product-tab-type-2 .section-header__title::after,
.product-tab-type-2 h2::before,
.product-tab-type-2 h3::before,
[class*="product-tab"] .border-title::before,
[class*="product-tab"] .border-title::after,
[class*="product-tab"] .section-header::before,
[class*="product-tab"] .section-header::after {
display: none !important;
content: none !important;
}
/* -------------------------------------------------------
FIX 2a: How It Works — full viewport-width background
Root cause: .vm-how-it-works is inside a theme grid
container with max-width. Background fills element
width, not viewport width.
Fix: background via ::before pseudo-element that
extends 50vw left and right of section center.
------------------------------------------------------- */
.vm-how-it-works {
position: relative;
background: transparent !important;
overflow: visible;
z-index: 0;
}
.vm-how-it-works::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-left: -50vw;
width: 100vw;
background: var(--vm-accent);
z-index: -1;
pointer-events: none;
}
/* Lift all direct children above the background layer */
.vm-how-it-works .page-width {
position: relative;
z-index: 1;
}
/* -------------------------------------------------------
FIX 2b: Bulk Orders CTA — full viewport-width background
Same root cause and fix technique as How It Works.
------------------------------------------------------- */
.vm-bulk-orders {
position: relative;
background: transparent !important;
overflow: visible;
z-index: 0;
}
.vm-bulk-orders::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-left: -50vw;
width: 100vw;
background: #0D2B59;
z-index: -1;
pointer-events: none;
}
/* Lift inner content above the background layer */
.vm-bulk-orders .vm-bulk-inner {
position: relative;
z-index: 1;
}
/* -------------------------------------------------------
FIX 3: Bulk Orders text readability
Root cause: theme h2/h3 color rule overriding
.vm-bulk-heading even with !important due to specificity.
Fix: increase selector specificity.
------------------------------------------------------- */
.vm-bulk-orders .vm-bulk-left .vm-bulk-heading,
.vm-bulk-orders h2.vm-bulk-heading {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
.vm-bulk-orders .vm-bulk-left .vm-bulk-subtext {
color: rgba(255, 255, 255, 0.80) !important;
opacity: 1 !important;
}
.vm-bulk-orders .vm-bulk-perk .vm-bulk-perk-label {
color: rgba(255, 255, 255, 0.85) !important;
opacity: 1 !important;
}
/* Also fix perk icon visibility */
.vm-bulk-orders .vm-bulk-perk-icon {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
}
/* =====================================================
VRINDA MART — CATALOG PAGE CSS PATCH
Session 7 | Append to vrinda-custom.css
===================================================== */
/* ---- 1. Page Banner — navy, matches homepage hero-strip ---- */
body.template-collection .header-type-5 {
background: var(--vm-primary) !important;
padding: 56px 20px 24px !important;
margin-bottom: 0 !important;
text-align: center !important;
}
body.template-collection .header-type-5 h1,
body.template-collection .header-type-5 h2,
body.template-collection .header-type-5 .page-title,
body.template-collection .header-type-5 span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 32px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
}
body.template-collection nav.breadcrumb {
background: var(--vm-primary) !important;
padding: 0 20px 44px !important;
margin: 0 !important;
text-align: center !important;
}
body.template-collection nav.breadcrumb a,
body.template-collection nav.breadcrumb span,
body.template-collection nav.breadcrumb li {
color: rgba(255, 255, 255, 0.70) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.70) !important;
font-size: 13px !important;
}
body.template-collection nav.breadcrumb a:hover {
color: var(--vm-secondary) !important;
-webkit-text-fill-color: var(--vm-secondary) !important;
}
/* Remove spacer that creates white gap below banner */
body.template-collection .dt-sc-hr-invisible-large {
display: none !important;
}
body.template-collection main.main-content {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ---- 2. Catalog section spacing ---- */
body.template-collection .collection-products {
padding: 48px 0 80px !important;
}
body.template-collection .vm-collection-main {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
/* ---- 3. Product grid — centered flex ---- */
body.template-collection .products-grid-view > ul {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
list-style: none !important;
padding: 0 !important;
margin: 0 -12px !important;
gap: 0 !important; /* using padding on li for gutters */
}
body.template-collection .products-grid-view > ul > li {
float: none !important;
width: calc(33.333% - 24px) !important;
max-width: 360px !important;
min-width: 240px !important;
padding: 0 12px 28px !important;
box-sizing: border-box !important;
}
@media screen and (max-width: 768px) {
body.template-collection .products-grid-view > ul > li {
width: calc(50% - 24px) !important;
max-width: 380px !important;
}
}
@media screen and (max-width: 480px) {
body.template-collection .products-grid-view > ul > li {
width: 100% !important;
max-width: 100% !important;
}
}
/* ---- 4. Product card upgrade ---- */
body.template-collection .grid-link__container {
border: 1px solid var(--vm-border) !important;
border-radius: 10px !important;
overflow: hidden !important;
background: #ffffff !important;
box-shadow: 0 2px 12px rgba(11, 61, 145, 0.07) !important;
transition: box-shadow 0.28s ease, transform 0.28s ease !important;
height: 100% !important;
display: block !important;
}
body.template-collection .grid-link__container:hover {
box-shadow: 0 8px 28px rgba(11, 61, 145, 0.16) !important;
transform: translateY(-4px) !important;
}
/* Remove default Timber border on grid items inside this section */
body.template-collection .products-grid-view .grid__item {
border: none !important;
}
/* ---- 5. Product image — contain for medical devices ---- */
body.template-collection .grid-link__image img,
body.template-collection a.grid-link img {
object-fit: contain !important;
background-color: #f4f8fd !important;
padding: 16px !important;
}
/* ---- 6. Product title ---- */
body.template-collection .grid-link__title,
body.template-collection a.grid-link .grid-link__title {
color: var(--vm-text) !important;
-webkit-text-fill-color: var(--vm-text) !important;
font-weight: 600 !important;
font-size: 15px !important;
}
/* ---- 7. SALE badge → teal ---- */
body.template-collection .label.sale,
body.template-collection span.sale,
body.template-collection .badge-sale,
body.template-collection .label-sale,
body.template-collection .grid-link .sale,
body.template-collection .product-label.sale {
background-color: var(--vm-secondary) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
border-color: var(--vm-secondary) !important;
}
/* ---- 8. Price colors ---- */
/* Regular price (non-sale products) */
body.template-collection .grid-link__price,
body.template-collection .grid-link__price .money {
color: var(--vm-primary) !important;
-webkit-text-fill-color: var(--vm-primary) !important;
font-weight: 700 !important;
}
/* Sale price (the discounted price on sale products) */
body.template-collection .grid-link__sale-price,
body.template-collection .grid-link__sale-price .money,
body.template-collection a.grid-link .price--sale,
body.template-collection a.grid-link .sale-price {
color: var(--vm-secondary) !important;
-webkit-text-fill-color: var(--vm-secondary) !important;
font-weight: 700 !important;
}
/* Compare-at / was-price (strikethrough) */
body.template-collection .was-price,
body.template-collection .was-price .money,
body.template-collection .grid-link__was-price,
body.template-collection .grid-link__was-price .money,
body.template-collection s.money,
body.template-collection del.money {
color: var(--vm-text-muted) !important;
-webkit-text-fill-color: var(--vm-text-muted) !important;
font-weight: 400 !important;
}
/* =====================================================
VRINDA MART — CATALOG PAGE FIX PATCH
Session 7 Fix | Append after vrinda-catalog-patch.css in vrinda-custom.css
===================================================== */
/* Fix 1: "PRODUCTS" heading — h1 lives inside nav.breadcrumb, not .header-type-5
Timber rule .breadcrumb h1 sets color:#000 (black on navy = invisible) */
body.template-collection nav.breadcrumb h1,
body.template-collection nav.breadcrumb .h1 {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 30px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
margin-bottom: 10px !important;
display: block !important;
width: 100% !important;
}
/* Fix 2: Un-card the outer grid wrapper
div.grid-uniform.grid-link__container.col-main shares the class grid-link__container
and got styled as a card by the first patch — reset it completely */
body.template-collection div.grid-uniform.grid-link__container,
body.template-collection div.col-main.grid-link__container {
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
overflow: visible !important;
transform: none !important;
padding: 0 !important;
height: auto !important;
}
/* Fix 3: Flex container — switch from negative-margin gutter to gap
Previous patch used margin: 0 -12px which conflicted with padding on items */
body.template-collection .products-grid-view > ul {
margin: 0 !important;
padding: 32px 24px 16px !important;
gap: 24px !important;
}
body.template-collection .products-grid-view > ul > li {
padding: 0 !important;
margin: 0 !important;
width: calc(33.333% - 16px) !important; /* (100% - 2*24px gap) / 3 */
max-width: 360px !important;
min-width: 220px !important;
}
@media screen and (max-width: 768px) {
body.template-collection .products-grid-view > ul > li {
width: calc(50% - 12px) !important;
max-width: 400px !important;
}
}
@media screen and (max-width: 480px) {
body.template-collection .products-grid-view > ul > li {
width: 100% !important;
max-width: 100% !important;
}
}
/* Fix 4: Apply card styles to the actual product item (li.item-row)
This is the real per-product wrapper */
body.template-collection .products-grid-view .item-row {
border: 1px solid var(--vm-border) !important;
border-radius: 10px !important;
overflow: hidden !important;
background: #ffffff !important;
box-shadow: 0 2px 12px rgba(11, 61, 145, 0.07) !important;
transition: box-shadow 0.28s ease, transform 0.28s ease !important;
}
body.template-collection .products-grid-view .item-row:hover {
box-shadow: 0 8px 28px rgba(11, 61, 145, 0.16) !important;
transform: translateY(-4px) !important;
}
/* Fix 5: Product image — consistent height, contain for medical devices */
body.template-collection .product-container {
height: 240px !important;
overflow: hidden !important;
background-color: #f4f8fd !important;
display: block !important;
}
body.template-collection .product-container img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
padding: 16px !important;
box-sizing: border-box !important;
}
/* Fix 6: Product detail area padding */
body.template-collection .product-detail {
padding: 12px 14px 16px !important;
text-align: center !important;
}
/* Fix 7: Product title — it's an anchor (a.grid-link__title), not a div */
body.template-collection a.grid-link__title {
color: var(--vm-text) !important;
-webkit-text-fill-color: var(--vm-text) !important;
font-weight: 600 !important;
font-size: 15px !important;
display: block !important;
margin-bottom: 6px !important;
}
/* Fix 8: Price — correct class names from DevTools
grid-link__org_price = current displayed price (sale or regular)
grid-link__sale_price = compare-at/was-price (del element, strikethrough) */
/* Sale price on products that ARE on sale */
body.template-collection li.on-sale .grid-link__org_price,
body.template-collection li.on-sale .grid-link__org_price .money {
color: var(--vm-secondary) !important;
-webkit-text-fill-color: var(--vm-secondary) !important;
font-weight: 700 !important;
}
/* Regular price on products NOT on sale */
body.template-collection li:not(.on-sale) .grid-link__org_price,
body.template-collection li:not(.on-sale) .grid-link__org_price .money {
color: var(--vm-primary) !important;
-webkit-text-fill-color: var(--vm-primary) !important;
font-weight: 700 !important;
}
/* Compare-at / was-price */
body.template-collection del.grid-link__sale_price,
body.template-collection .grid-link__sale_price {
color: var(--vm-text-muted) !important;
-webkit-text-fill-color: var(--vm-text-muted) !important;
font-weight: 400 !important;
}
/* =====================================================
VRINDA MART — CATALOG NAV TEXT FIX
Session 7 Fix 2 | Append after vrinda-catalog-fixpatch.css
Root cause: .header-type-5 wraps the full header including nav.
Previous patch set font-size:32px on all spans inside it → huge nav links.
Fix: Reset all text properties on header-type-5 descendants back to inherit.
PRODUCTS heading is in nav.breadcrumb h1 — already handled correctly.
===================================================== */
body.template-collection .header-type-5 span,
body.template-collection .header-type-5 h1,
body.template-collection .header-type-5 h2,
body.template-collection .header-type-5 .page-title {
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
color: inherit !important;
-webkit-text-fill-color: inherit !important;
}
/* Also remove the background from header-type-5 since it is not the banner —
nav.breadcrumb already has the navy background for the PRODUCTS area */
body.template-collection .header-type-5 {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
/* =====================================================
VRINDA MART — CATALOG IMAGE + BADGE FIX
Session 7 Fix 3 | Append after vrinda-catalog-navfix.css in vrinda-custom.css
===================================================== */
/* Fix 1: Remove broken height constraint on product-container
Previous patch set height:240px + overflow:hidden which cropped product images.
Let images display at natural height — no clipping. */
body.template-collection .products-grid-view .product-container {
height: auto !important;
overflow: visible !important;
background: transparent !important;
padding: 0 !important;
}
/* Fix 2: Image — natural width, no crop, light background for medical products */
body.template-collection .products-grid-view a.grid-link img.featured-image,
body.template-collection .products-grid-view a.grid-link .hidden-feature_img {
width: 100% !important;
height: auto !important;
display: block !important;
background-color: #f4f8fd !important;
padding: 0 !important;
object-fit: unset !important;
}
/* Fix 3: SALE badge — correct selectors from product-grid-item.liquid
Previous patch used .label.sale which does not exist in this theme.
Actual: span.badge.badge--sale > span.gift-tag.badge__text */
body.template-collection .badge--sale {
background-color: var(--vm-secondary) !important;
border-color: var(--vm-secondary) !important;
}
body.template-collection .badge--sale .badge__text,
body.template-collection .badge--sale .gift-tag {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* =====================================================
VRINDA MART — CATALOG HOVER + TITLE + BADGE + SIZE FIX
Session 7 Fix 4 | Append after vrinda-catalog-imagefix.css in vrinda-custom.css
===================================================== */
/* Fix 1: Switch to 2-column grid — matches homepage card width (~50% each)
3-column was making single card too narrow vs homepage carousel card.
2-column scales cleanly: 1 product centered, 2 side-by-side, 4 in 2x2 grid. */
body.template-collection .products-grid-view > ul > li {
width: calc(50% - 12px) !important;
max-width: 560px !important;
min-width: 260px !important;
padding: 0 !important;
}
@media screen and (max-width: 640px) {
body.template-collection .products-grid-view > ul > li {
width: 100% !important;
max-width: 100% !important;
}
}
/* Fix 2: product-container — position:relative for absolute ImageWrapper,
overflow:hidden (safe now that height:auto is set — no cropping risk) */
body.template-collection .products-grid-view .product-container {
position: relative !important;
overflow: hidden !important;
}
/* Fix 3: ImageWrapper — position at bottom of image, HIDDEN by default.
Root cause of two bugs:
(a) Quick View bar always showing (should be hover-only)
(b) Title covered — ImageWrapper was floating as a block element
between product-container and product-detail, physically covering the title */
body.template-collection .products-grid-view .ImageWrapper {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
z-index: 5 !important;
opacity: 0 !important;
visibility: hidden !important;
transition: opacity 0.25s ease, visibility 0.25s ease !important;
}
/* Show Quick View + Add to Cart on hover — exactly like homepage */
body.template-collection .products-grid-view .product-container:hover .ImageWrapper {
opacity: 1 !important;
visibility: visible !important;
}
/* Fix 4: Product title — now visible with ImageWrapper out of document flow.
Title lives in .product-detail which is below .product-container. */
body.template-collection .products-grid-view .product-detail a.grid-link__title {
display: block !important;
color: var(--vm-text) !important;
-webkit-text-fill-color: var(--vm-text) !important;
font-size: 15px !important;
font-weight: 600 !important;
text-align: center !important;
padding: 14px 16px 6px !important;
text-decoration: none !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Fix 5: SALE badge — stronger selector to override olive/green theme color.
Previous patches used .badge--sale but theme specificity was winning.
Adding .products-grid-view scope for higher specificity. */
body.template-collection .products-grid-view .badge--sale,
body.template-collection .products-grid-view .featured-tag .badge--sale {
background-color: var(--vm-secondary) !important;
border-color: var(--vm-secondary) !important;
}
body.template-collection .products-grid-view .badge--sale .badge__text,
body.template-collection .products-grid-view .badge--sale .gift-tag,
body.template-collection .products-grid-view .badge--sale span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* ============================================
CONTACT PAGE — vrinda-contact-fix
Append to vrinda-custom.css
============================================ */
/* --- Icon colors: pink → teal --- */
.contact-address .icon i,
.vm-contact-section .icon i {
color: var(--vm-secondary) !important;
}
/* --- Card headings: pink → navy --- */
.contact-address h4,
.vm-contact-section h4 {
color: var(--vm-primary) !important;
font-size: 13px !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
margin-bottom: 8px !important;
}
/* --- Email / address links --- */
.contact-address li a,
.vm-contact-section li a {
color: var(--vm-secondary) !important;
text-decoration: none !important;
}
.contact-address li a:hover,
.vm-contact-section li a:hover {
color: var(--vm-primary) !important;
text-decoration: underline !important;
}
/* --- Form inputs --- */
.contact-form-section input,
.contact-form-section textarea {
border: 1px solid var(--vm-border) !important;
border-radius: 4px !important;
padding: 12px 14px !important;
font-size: 14px !important;
color: var(--vm-text) !important;
background: #fff !important;
}
.contact-form-section input:focus,
.contact-form-section textarea:focus {
border-color: var(--vm-secondary) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(0, 163, 137, 0.12) !important;
}
/* --- Send button --- */
.contact-form-section .btn.vm-contact-btn,
.vm-contact-btn {
background-color: var(--vm-primary) !important;
border-color: var(--vm-primary) !important;
color: #ffffff !important;
width: 100% !important;
padding: 14px !important;
font-size: 13px !important;
letter-spacing: 2px !important;
font-weight: 700 !important;
border-radius: 4px !important;
transition: background-color 0.2s ease !important;
}
.contact-form-section .btn.vm-contact-btn:hover,
.vm-contact-btn:hover {
background-color: var(--vm-primary-dark) !important;
border-color: var(--vm-primary-dark) !important;
}
/* --- Map container: remove gap below map --- */
#map {
line-height: 0 !important;
font-size: 0 !important;
margin-bottom: 0 !important;
}
#map iframe {
display: block !important;
width: 100% !important;
}
/* --- Section spacing --- */
.vm-contact-section .wrapper {
padding-top: 40px !important;
padding-bottom: 50px !important;
}
/* --- Card list reset --- */
.vm-contact-section ul {
list-style: none !important;
padding: 0 !important;
margin: 0 0 40px 0 !important;
}
.vm-contact-section ul li {
text-align: center !important;
padding: 20px 15px !important;
border: none !important;
}
/* ============================================================
VRINDA MART — vrinda-pdp-patch.css
Product Detail Page Redesign — Session 9
APPEND TO: vrinda-custom.css (do not replace)
============================================================ */
/* =========================
PDP OUTER WRAPPER
========================= */
.vm-pdp-wrapper {
width: 100%;
box-sizing: border-box;
padding: 40px 0 60px;
background: #fff;
}
.vm-pdp-inner {
padding: 0;
}
/* =========================
TWO-COLUMN LAYOUT
========================= */
.vm-pdp-layout {
display: flex;
gap: 60px;
align-items: flex-start;
margin-bottom: 56px;
}
/* Left: images */
.vm-pdp-col-images {
flex: 0 0 50%;
max-width: 50%;
position: sticky;
top: 80px;
}
/* Right: details */
.vm-pdp-col-details {
flex: 1;
min-width: 0;
}
/* =========================
MAIN IMAGE
========================= */
.vm-pdp-main-image {
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--vm-border);
margin-bottom: 12px;
background: #f8fbff;
}
.vm-pdp-main-image img {
width: 100% !important;
height: auto !important;
display: block !important;
object-fit: contain !important;
max-height: 460px;
}
.vm-pdp-thumbnails {
margin-top: 8px;
}
/* =========================
PRODUCT TITLE
========================= */
.vm-pdp-title {
font-size: 26px !important;
font-weight: 700 !important;
color: var(--vm-primary) !important;
-webkit-text-fill-color: var(--vm-primary) !important;
margin: 0 0 12px !important;
line-height: 1.3 !important;
padding: 0 !important;
border: none !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* =========================
SHORT DESCRIPTION
========================= */
.vm-pdp-short-desc {
color: var(--vm-text-muted) !important;
font-size: 14px !important;
line-height: 1.7 !important;
margin-bottom: 16px !important;
}
/* =========================
PRICE BLOCK
========================= */
.vm-pdp-price-block {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 12px;
padding: 18px 0;
border-top: 1px solid var(--vm-border);
border-bottom: 1px solid var(--vm-border);
margin-bottom: 20px;
}
.vm-pdp-price {
font-size: 30px !important;
font-weight: 700 !important;
color: var(--vm-primary) !important;
-webkit-text-fill-color: var(--vm-primary) !important;
line-height: 1;
}
.vm-pdp-compare-price {
font-size: 18px;
color: var(--vm-text-muted) !important;
-webkit-text-fill-color: var(--vm-text-muted) !important;
text-decoration: line-through;
}
.vm-pdp-badge-save {
display: inline-block;
background: #eaf7f4;
color: var(--vm-secondary);
font-size: 12px;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
white-space: nowrap;
}
/* =========================
AVAILABILITY
========================= */
.vm-pdp-availability {
margin-bottom: 20px;
}
.vm-pdp-stock {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
padding: 6px 16px;
border-radius: 20px;
}
.vm-stock-in {
background: #eaf7f4;
color: var(--vm-secondary);
}
.vm-stock-out {
background: #fef2f2;
color: #dc2626;
}
/* =========================
FORM & QUANTITY
========================= */
.vm-pdp-form {
margin: 0;
}
.vm-pdp-field-label {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--vm-text-muted);
margin-bottom: 8px;
}
.vm-pdp-qty-row {
margin-bottom: 16px;
}
/* Hide SUBTOTAL row that the qty snippet may output */
.vm-pdp-qty-wrap .product-subtotal,
.vm-pdp-qty-wrap [id*="subtotal"],
.vm-pdp-qty-wrap [class*="subtotal"] {
display: none !important;
}
/* Also catch if it renders outside the wrap */
.quantity-box-section .product-subtotal {
display: none !important;
}
/* =========================
ADD TO CART BUTTON
========================= */
button#AddToCart.vm-pdp-atc-btn,
.vm-pdp-atc-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
padding: 15px 32px !important;
background: var(--vm-primary) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
border: none !important;
border-radius: 4px !important;
font-size: 15px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
cursor: pointer !important;
transition: background 0.25s ease !important;
margin-bottom: 12px !important;
box-shadow: none !important;
}
button#AddToCart.vm-pdp-atc-btn:hover,
.vm-pdp-atc-btn:hover {
background: var(--vm-primary-dark) !important;
}
.vm-pdp-buy-now {
margin-bottom: 8px;
}
/* =========================
TRUST STRIP
========================= */
.vm-pdp-trust-strip {
display: flex;
border: 1px solid var(--vm-border);
border-radius: 6px;
overflow: hidden;
margin-top: 24px;
}
.vm-pdp-trust-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 14px 8px;
text-align: center;
border-right: 1px solid var(--vm-border);
background: var(--vm-accent);
}
.vm-pdp-trust-item:last-child {
border-right: none;
}
.vm-pdp-trust-item i {
font-size: 16px;
color: var(--vm-secondary);
}
.vm-pdp-trust-item span {
font-size: 10px;
font-weight: 700;
color: var(--vm-primary);
text-transform: uppercase;
letter-spacing: 0.4px;
-webkit-text-fill-color: var(--vm-primary);
}
/* =========================
DESCRIPTION SECTION
========================= */
.vm-pdp-desc-section {
border-top: 2px solid var(--vm-border);
}
.vm-pdp-desc-tab-bar {
border-bottom: 2px solid var(--vm-border);
margin-bottom: 32px;
}
.vm-pdp-desc-tab {
display: inline-block;
padding: 14px 32px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--vm-primary) !important;
-webkit-text-fill-color: var(--vm-primary) !important;
border-bottom: 3px solid var(--vm-secondary);
margin-bottom: -2px;
cursor: default;
}
.vm-pdp-desc-body {
color: var(--vm-text);
font-size: 14px;
line-height: 1.8;
padding-bottom: 48px;
}
.vm-pdp-desc-body p {
margin-bottom: 16px;
color: var(--vm-text);
}
.vm-pdp-desc-body strong,
.vm-pdp-desc-body b {
color: var(--vm-primary);
font-weight: 600;
}
.vm-pdp-desc-body ul,
.vm-pdp-desc-body ol {
padding-left: 22px;
margin-bottom: 16px;
}
.vm-pdp-desc-body li {
margin-bottom: 6px;
color: var(--vm-text);
}
.vm-pdp-desc-body a {
color: var(--vm-secondary) !important;
}
/* =========================
SUPPRESS LEGACY ELEMENTS
========================= */
/* Pink title fallback (in case old class lingers) */
.single-product-layout-type-1 .product-single__title {
color: var(--vm-primary) !important;
-webkit-text-fill-color: var(--vm-primary) !important;
}
/* Pink price fallback */
.single-product-layout-type-1 #ProductPrice,
.single-product-layout-type-1 .grid-link__org_price {
color: var(--vm-primary) !important;
-webkit-text-fill-color: var(--vm-primary) !important;
}
.single-product-layout-type-1 #ComparePrice,
.single-product-layout-type-1 .grid-link__sale_price {
color: var(--vm-text-muted) !important;
-webkit-text-fill-color: var(--vm-text-muted) !important;
}
/* Old dt-sc-tabs (in case theme JS re-renders them) */
.dt-sc-tabs li a {
background: transparent !important;
color: var(--vm-text-muted) !important;
-webkit-text-fill-color: var(--vm-text-muted) !important;
border-color: var(--vm-border) !important;
}
.dt-sc-tabs li a.active,
.dt-sc-tabs li:first-child a {
background: var(--vm-primary) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
border-color: var(--vm-primary) !important;
}
/* Recently Viewed heading colour (global safety net) */
h2.recently-viewed-title,
.recently-viewed-products h2 {
color: var(--vm-primary) !important;
-webkit-text-fill-color: var(--vm-primary) !important;
}
/* =========================
RESPONSIVE — MOBILE
========================= */
@media screen and (max-width: 767px) {
.vm-pdp-layout {
flex-direction: column;
gap: 24px;
margin-bottom: 36px;
}
.vm-pdp-col-images {
flex: none;
max-width: 100%;
position: static;
}
.vm-pdp-title {
font-size: 22px !important;
}
.vm-pdp-price {
font-size: 24px !important;
}
.vm-pdp-trust-strip {
flex-wrap: wrap;
}
.vm-pdp-trust-item {
flex: 0 0 50%;
border-bottom: 1px solid var(--vm-border);
}
/* Even items lose right border on mobile 2-col grid */
.vm-pdp-trust-item:nth-child(even) {
border-right: none;
}
/* Bottom row items lose bottom border */
.vm-pdp-trust-item:nth-last-child(-n+2) {
border-bottom: none;
}
}
/* ============================================================
VRINDA MART — vrinda-pdp-fixpatch.css
PDP Fix Patch — Session 9 (post-deploy)
APPEND TO: vrinda-custom.css (after vrinda-pdp-patch block)
============================================================ */
/* =========================
QUANTITY — ONE ROW LAYOUT
Root cause: .dec / input / .inc are block elements,
previous patch targeted wrong class names
========================= */
.vm-pdp-qty-wrap {
display: flex !important;
align-items: center !important;
width: fit-content;
border: 1px solid var(--vm-border);
border-radius: 4px;
overflow: hidden;
}
.vm-pdp-qty-wrap .dec,
.vm-pdp-qty-wrap .inc {
width: 40px !important;
height: 42px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--vm-accent) !important;
color: var(--vm-primary) !important;
-webkit-text-fill-color: var(--vm-primary) !important;
font-size: 20px !important;
font-weight: 700 !important;
cursor: pointer;
user-select: none;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
line-height: 1;
border: none !important;
}
.vm-pdp-qty-wrap .dec:hover,
.vm-pdp-qty-wrap .inc:hover {
background: var(--vm-primary) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
}
.vm-pdp-qty-wrap input#quantity {
width: 56px !important;
height: 42px !important;
text-align: center !important;
border: none !important;
border-left: 1px solid var(--vm-border) !important;
border-right: 1px solid var(--vm-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none !important;
font-size: 15px !important;
font-weight: 600 !important;
color: var(--vm-primary) !important;
-webkit-text-fill-color: var(--vm-primary) !important;
padding: 0 !important;
margin: 0 !important;
background: #fff !important;
-moz-appearance: textfield !important;
flex-shrink: 0;
}
/* Remove native number spinner arrows */
.vm-pdp-qty-wrap input#quantity::-webkit-outer-spin-button,
.vm-pdp-qty-wrap input#quantity::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
/* =========================
SUBTOTAL — HIDE
Root cause: class is .total-price not .product-subtotal
========================= */
.vm-pdp-qty-wrap .total-price {
display: none !important;
}
/* =========================
BUY IT NOW — STYLED
Root cause: shopify-payment-button has no explicit width,
collapses or bleeds into trust strip
========================= */
.vm-pdp-buy-now {
display: block !important;
width: 100% !important;
margin-top: 0 !important;
margin-bottom: 20px !important;
}
.vm-pdp-buy-now .shopify-payment-button {
width: 100% !important;
}
/* All payment buttons: full width + rounded */
.vm-pdp-buy-now .shopify-payment-button__button {
width: 100% !important;
border-radius: 4px !important;
}
/* Unbranded "Buy it now" text button — outline style matching palette */
.vm-pdp-buy-now .shopify-payment-button__button--unbranded {
background-color: transparent !important;
border: 2px solid var(--vm-primary) !important;
color: var(--vm-primary) !important;
-webkit-text-fill-color: var(--vm-primary) !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 0.4px !important;
padding: 12px 32px !important;
width: 100% !important;
border-radius: 4px !important;
transition: background 0.2s !important;
}
.vm-pdp-buy-now .shopify-payment-button__button--unbranded:hover {
background-color: var(--vm-accent) !important;
}
/* Branded buttons (Apple Pay, GPay) — keep native look, just full width */
.vm-pdp-buy-now .shopify-payment-button__button--branded {
width: 100% !important;
border-radius: 4px !important;
}
/* Separator line between branded and unbranded buttons */
.vm-pdp-buy-now .shopify-payment-button__more-options {
color: var(--vm-text-muted) !important;
-webkit-text-fill-color: var(--vm-text-muted) !important;
font-size: 12px !important;
}
/* Fix Buy it now left-alignment offset */
.vm-pdp-buy-now .shopify-payment-button__button-wrapper {
padding: 0 !important;
margin: 0 !important;
}
.vm-pdp-buy-now .shopify-payment-button > div {
padding: 0 !important;
margin: 0 !important;
}
/* Buy it now — fix left-alignment offset from custom element wrappers */
.vm-pdp-buy-now shopify-accelerated-checkout,
.vm-pdp-buy-now shopify-buy-it-now-button {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Override timber.scss inline-block on the button itself */
.vm-pdp-buy-now .shopify-payment-button__button--unbranded {
display: block !important;
}
/* Buy it now — alignment fix (paste at very bottom of vrinda-custom.css) */
.vm-pdp-buy-now .shopify-payment-button {
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.vm-pdp-buy-now .shopify-payment-button__button--unbranded {
box-sizing: border-box !important;
}