a, a:hover, .dropdown-item:focus, .dropdown-item:hover, .dropdown-header, .dropdown-item.active, .dropdown-item:active, .dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active, .nav-pills .nav-link.active, .nav-pills .show>.nav-link, .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-text a, .navbar-light .navbar-text a:focus, .navbar-light .navbar-text a:hover, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link, .page-item.active .page-link, .page-link:hover, .page-link:focus, .bg-dark.text-inverse a:not(.btn):not([class*=link-]):hover, .text-inverse a:not(.btn):hover, [class*=offcanvas-].text-inverse a:not(.btn):not([class*=link-]):hover, .filter:not(.basic-filter) ul li a.active, .filter:not(.basic-filter) ul li a:hover, .filter.basic-filter ul li a.active, .filter.basic-filter ul li a:hover, .icon-list.bullet-primary i, .icon-list.bullet-soft-primary i, .link-primary, .unordered-list.bullet-primary li:before, .link-primary:focus, .link-primary:hover, .post-meta li a:hover, .accordion-wrapper .card-header button, .accordion-wrapper .card-header button:before, .accordion-wrapper .card-header button:hover, .collapse-link, .collapse-link:hover, .breadcrumb-item a:hover, .plyr--full-ui input[type=range], .progress-wrap:after, .navbar-light.fixed .nav-link:focus, .navbar-light.fixed .nav-link:hover, .external:hover, .external:hover:after, .navbar-expand.navbar-light .navbar-nav .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after, .navbar-light .language-select .dropdown-toggle:after, .text-inverse a:not(.btn):hover, .bg-dark.text-inverse a:not(.btn):not([class*=link-]):hover, .bg-navy.text-inverse a:not(.btn):not([class*=link-]):hover, [class*=offcanvas-].text-inverse a:not(.btn):not([class*=link-]):hover, .timeline .timeline-item .timeline-marker, .nav-tabs.nav-tabs-basic .nav-link.active { color: #45c4a0; border-color: #45c4a0; } .link-dark:hover, .text-primary, .text-reset a:hover, a.text-reset:hover, .list-unstyled li a.active, .icon-list.bullet-bg i[class*=bullet-soft-primary], .icon-list.bullet-bg i.bullet-white, .icon-list.bullet-white i, .sidebar nav .nav-link.active, .plyr__control--overlaid:focus, .plyr__control--overlaid:hover, .navbar.navbar-light.fixed .btn.btn-outline-primary:not(:hover) { color: #45c4a0 !important; } .form-control:focus { border-color: #a2e2d0; } .text-line.text-primary:before, .tooltip-inner, .icon-list.bullet-primary.bullet-bg i, .form-check-input:checked, .navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient), .text-line:before { background-color: #45c4a0; } .bg-primary, .icon-list.bullet-bg i[class*=bullet-primary] { background-color: #45c4a0 !important; } .plyr--video .plyr__controls .plyr__control.plyr__tab-focus, .plyr--video .plyr__controls .plyr__control:hover, .plyr--video .plyr__controls .plyr__control[aria-expanded=true] { background: #45c4a0; } .swiper-container.nav-color .swiper-slide figure .item-link:hover, .swiper-container.nav-color .swiper-navigation .swiper-button:hover { background: #45c4a0 !important; } .text-inverse a:not(.btn):hover, .form-check-input:checked, .navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient), blockquote, .post-meta li a:hover, .hero-slider:before, .lg-outer .lg-item:after, .loader, .tp-loader.spinner, .nav-tabs.nav-tabs-basic .nav-link:focus, .nav-tabs.nav-tabs-basic .nav-link:hover { border-color: #45c4a0; } .border-primary { border-color: #45c4a0 !important; } .btn-primary { --bs-btn-active-bg: $main-color; --bs-btn-active-border-color: $main-color; --bs-btn-color: #fff; --bs-btn-bg: #45c4a0; --bs-btn-border-color: #45c4a0; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #45c4a0; --bs-btn-hover-border-color: #45c4a0; --bs-btn-focus-shadow-rgb: 97, 205, 174; --bs-btn-active-color: #fff; --bs-btn-active-bg: #45c4a0; --bs-btn-active-border-color: #45c4a0; --bs-btn-active-shadow: 0rem 0.25rem 0.75rem rgba(30, 34, 40, 0.15); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #45c4a0; --bs-btn-disabled-border-color: #45c4a0; } .btn-primary.btn-expand { color: #45c4a0; } .btn-primary.btn-expand:before { background-color: #45c4a0; } .btn-primary.btn-circle.ripple::before, .btn-primary.btn-circle.ripple::after { background-color: #45c4a0; } .btn-soft-primary { --bs-btn-color: #45c4a0; --bs-btn-bg: #e1f6f0; --bs-btn-border-color: #e1f6f0; --bs-btn-hover-color: #45c4a0; --bs-btn-hover-bg: #e1f6f0; --bs-btn-hover-border-color: #e1f6f0; --bs-btn-focus-shadow-rgb: 202, 239, 228; --bs-btn-active-color: #45c4a0; --bs-btn-active-bg: #e1f6f0; --bs-btn-active-border-color: #e1f6f0; --bs-btn-active-shadow: 0rem 0.25rem 0.75rem rgba(30, 34, 40, 0.15); --bs-btn-disabled-color: #45c4a0; --bs-btn-disabled-bg: #e1f6f0; --bs-btn-disabled-border-color: #e1f6f0; } .btn-soft-primary.btn-expand { color: #45c4a0; } .btn-soft-primary.btn-expand i, .btn-soft-primary.btn-expand:before, .btn-soft-primary.btn-expand:hover, .btn-soft-primary.btn-expand:hover:before { color: #45c4a0; } .btn-soft-primary.btn-expand:before { background-color: #e1f6f0; } .btn-soft-primary.btn-circle.ripple::before, .btn-soft-primary.btn-circle.ripple::after { background-color: #e1f6f0; } .btn-outline-primary { --bs-btn-active-bg: $main-color; --bs-btn-active-border-color: $main-color; --bs-btn-color: #45c4a0; --bs-btn-border-color: #45c4a0; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #45c4a0; --bs-btn-hover-border-color: #45c4a0; --bs-btn-focus-shadow-rgb: 69, 196, 160; --bs-btn-active-color: #fff; --bs-btn-active-bg: #45c4a0; --bs-btn-active-border-color: #45c4a0; --bs-btn-active-shadow: 0rem 0.25rem 0.75rem rgba(30, 34, 40, 0.15); --bs-btn-disabled-color: #45c4a0; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #45c4a0; --bs-gradient: none; } .btn-white.btn-play:hover { color: #45c4a0; } .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before { border-top-color: #45c4a0; } .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before, .wrapper.bg-primary.angled.lower-end:after, .wrapper.bg-primary.angled.upper-end:before { border-right-color: #45c4a0; } .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #45c4a0; } .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before, .wrapper.bg-primary.angled.lower-start:after, .wrapper.bg-primary.angled.upper-start:before { border-left-color: #45c4a0; } .progress-list .progressbar.primary svg path:last-child, .progress-wrap svg.progress-circle path { stroke: #45c4a0; } .progress-list .progressbar.soft-primary svg path:last-child { stroke: #8fdcc6; } .lineal-fill, .text-primary .lineal-fill { fill: #8fdcc6; } .shape .svg-fill { fill: #45c4a0; } .shape.soft-primary .svg-fill { fill: #edf9f6; } .shape.pale-primary .svg-fill { fill: #e1f6f0; } ::-moz-selection { background: rgba(69, 196, 160, 0.7); } ::selection { background: rgba(69, 196, 160, 0.7); } .underline.primary:after, .underline:after { background: rgba(69, 196, 160, 0.12); } .underline-2.primary:after, .underline-2:not([class*=underline-gradient-]):after { background: #45c4a0; } .underline-3.primary.style-1:before, .underline-3.primary.style-1:after { border-color: #45c4a0; } .underline-3.primary.style-2:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208.01 8.3'%3E%3Cpath fill='%2345c4a0' d='M64.42,2.42Q42.78,1.46,21.19,0c-2.8-.19-4.09.89-3.87,2L3.92,1.87c-5.13-.05-5.28,3.87-.12,3.92l60.49.55c46.63,2.08,93.34,2.51,139.81,1.27,5-.13,5.39-3.87.13-3.92Z'/%3E%3C/svg%3E"); } .underline-3.primary.style-3:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 205 9.37'%3E%3Cpath fill='%2345c4a0' d='M202.47,9.37A1191.26,1191.26,0,0,0,1.79,7.48,1.67,1.67,0,0,1,0,5.92H0A1.76,1.76,0,0,1,1.63,4.21c67-5.71,133.83-5.43,200.8-.27A2.75,2.75,0,0,1,205,6.88h0A2.6,2.6,0,0,1,202.47,9.37Z'/%3E%3C/svg%3E"); } a.hover-2:before, a.hover-3:before { background-color: #e1f6f0; } .bg-soft-primary { background-color: #edf9f6 !important; } .text-soft-primary { color: #edf9f6 !important; } .bg-pale-primary { background-color: #e1f6f0 !important; } .text-pale-primary { color: #e1f6f0 !important; } .bg-gradient-primary { background: linear-gradient(180deg, #edf9f6, rgba(255, 255, 255, 0) 100%); } .bg-gradient-reverse-primary { background: linear-gradient(0deg, #edf9f6, rgba(255, 255, 255, 0) 100%); } .border-soft-primary { border-color: #c7ede3 !important; } .wrapper.bg-soft-primary.angled.lower-start:after, .wrapper.bg-soft-primary.angled.upper-start:before { border-left-color: #edf9f6; } .wrapper.bg-soft-primary.angled.lower-end:after, .wrapper.bg-soft-primary.angled.upper-end:before { border-right-color: #edf9f6; } .wrapper.bg-pale-primary.angled.lower-start:after, .wrapper.bg-pale-primary.angled.upper-start:before { border-left-color: #e1f6f0; } .wrapper.bg-pale-primary.angled.lower-end:after, .wrapper.bg-pale-primary.angled.upper-end:before { border-right-color: #e1f6f0; } .icon-list.bullet-soft-primary.bullet-bg i { background-color: #def4ee; } .icon-list.bullet-bg i[class*=bullet-soft-primary] { background-color: #def4ee !important; } form.dark-fields .form-control:focus { border-color: rgba(69, 196, 160, 0.5); } .alert-dismissible.alert-primary .btn-close { color: #3eb090; } .alert-dismissible.alert-primary .btn-close:hover { color: #297660; } .alert-primary { color: #308970; background-color: #ecf9f6; border-color: #c7ede3; } .alert-primary .alert-link { color: #379d80; } .swiper-container.nav-color .swiper-slide figure .item-link, .swiper-container.nav-color .swiper-navigation .swiper-button { background: rgba(69, 196, 160, 0.9) !important; } .swiper-container.nav-color .swiper-navigation .swiper-button-disabled { background: rgba(69, 196, 160, 0.7) !important; } .overlay.color span.bg { background: rgba(69, 196, 160, 0.7); } .itooltip-color.itooltip-inner, .itooltip-primary.itooltip-inner { background: rgba(69, 196, 160, 0.9); } .bg-dot.primary { background-image: radial-gradient(#45c4a0 2px, transparent 2.5px); } .bg-line.primary { background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0) 0.8px, #45c4a0 1.6px, #45c4a0 3px, rgba(255, 255, 255, 0) 3.8px, rgba(255, 255, 255, 0) 10px); } .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml,"); } .cursor-primary a { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%2345c4a0;opacity:0.9;%7D.cls-2%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='cls-1' cx='25' cy='25' r='25'/%3E%3Cpath class='cls-2' d='M21.79,26.79,17,31.59V30a1,1,0,0,0-2,0v4a1,1,0,0,0,.08.38,1,1,0,0,0,.54.54A1,1,0,0,0,16,35h4a1,1,0,0,0,0-2H18.41l4.8-4.79a1,1,0,0,0-1.42-1.42Z'/%3E%3Cpath class='cls-2' d='M34.92,15.62a1,1,0,0,0-.54-.54A1,1,0,0,0,34,15H30a1,1,0,0,0,0,2h1.59l-4.8,4.79a1,1,0,0,0,0,1.41h0a1,1,0,0,0,1.41,0h0L33,18.41V20a1,1,0,0,0,2,0V16A1,1,0,0,0,34.92,15.62Z'/%3E%3C/svg%3E"), auto; } .process-wrapper.arrow [class*=col-]:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108.15 19.5'%3E%3Cpath fill='%2345c4a0' d='M2.38,13.63A107.77,107.77,0,0,1,41.56,3.28C54.29,2.51,67,4.2,79.4,6.9c7.73,1.68,15.38,3.73,23,5.86a1.56,1.56,0,0,0,.83-3C89.85,6,76.35,2.5,62.54.87A111,111,0,0,0,24,2.73,119,119,0,0,0,.8,10.93c-1.81.85-.23,3.54,1.58,2.7Z'/%3E%3Cpath fill='%2345c4a0' d='M95.51,19.27A60.35,60.35,0,0,1,107,12.41a1.58,1.58,0,0,0,1.12-1.29,1.53,1.53,0,0,0-.75-1.56,20.31,20.31,0,0,1-9-8.65,1.56,1.56,0,0,0-2.7,1.57c2.34,4,5.79,7.86,10.12,9.78l.37-2.86a62.69,62.69,0,0,0-12.25,7.18,1.6,1.6,0,0,0-.56,2.14,1.56,1.56,0,0,0,2.13.55Z'/%3E%3C/svg%3E"); } @media (min-width: 576px) { .navbar-expand-sm.navbar-light .navbar-nav .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after { color: #45c4a0; } } @media (min-width: 768px) { .navbar-expand-md.navbar-light .navbar-nav .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after { color: #45c4a0; } } @media (min-width: 992px) { .navbar-expand-lg.navbar-light .navbar-nav .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after { color: #45c4a0; } } @media (min-width: 1200px) { .navbar-expand-xl.navbar-light .navbar-nav .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after { color: #45c4a0; } } @media (min-width: 1400px) { .navbar-expand-xxl.navbar-light .navbar-nav .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after { color: #45c4a0; } } .navbar.navbar-light.fixed .btn.btn-outline-primary:not(:hover) { background: none !important; } /* ============================================================ MERGOSHOP — THEME LAYER (NEW DESIGN) Appended after the original stylesheet on purpose: every rule above this block stays exactly as it was (JS-dependent classes, chat widget, select2, iziModal etc. are untouched). Everything below re-skins the storefront look — colors, type, cards, banner, sections — without touching any PHP/controller logic. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* Core palette — a "bazaar ledger" feel: teal for trust/savings, mango for offers/CTAs, chili for sale tags. Deliberately not the cream+terracotta or dark+neon defaults. */ --mp-bg: #F3F7F5; --mp-surface: #FFFFFF; --mp-ink: #16211D; --mp-muted: #5C6B64; --mp-border: #DCE6E2; --mp-teal: #0E6B57; --mp-teal-dark: #0A4F41; --mp-teal-tint: #E4F1EC; --mp-mango: #FF8A3D; --mp-mango-dark: #E06F23; --mp-chili: #C43D3D; --mp-font-display: 'Fraunces', Georgia, serif; --mp-font-body: 'Manrope', -apple-system, sans-serif; --mp-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Re-point the site's own --primary-color at the new teal, since dozens of existing rules already key off this variable. */ --primary-color: var(--mp-teal) !important; } body { background: var(--mp-bg); font-family: var(--mp-font-body); color: var(--mp-ink); } /* ---------- Section headings — "ticket stub" label ---------- */ .default_heading h3.section-title, .mp-section-head h3 { font-family: var(--mp-font-display); font-weight: 600; font-size: 1.9rem; color: var(--mp-ink); position: relative; padding-left: 22px; letter-spacing: -0.01em; } .default_heading h3.section-title::before, .mp-section-head h3::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; background: var(--mp-mango); border-radius: 2px; transform: rotate(45deg); } .default_heading h6.title-sm, .mp-section-head h6 { font-family: var(--mp-font-body); color: var(--mp-muted); font-weight: 500; padding-left: 22px; } .featured-section-title a.hover { font-family: var(--mp-font-mono); font-size: 0.78rem; font-weight: 600; color: var(--mp-teal); letter-spacing: 0.02em; text-transform: uppercase; border-bottom: 1.5px solid var(--mp-teal); padding-bottom: 2px; } .featured-section-title a.hover:hover { color: var(--mp-mango-dark); border-color: var(--mp-mango-dark); } /* ---------- Category chips (was: icon + label column) ---------- */ .swiper-slide-category a { display: flex; flex-direction: column; align-items: center; } .swiper-slide-category img { height: 88px !important; width: 88px !important; object-fit: cover; border-radius: 999px !important; border: 2px solid var(--mp-teal-tint); padding: 3px; background: var(--mp-surface); transition: border-color 0.2s ease, transform 0.2s ease; } .swiper-slide-category a:hover img { border-color: var(--mp-mango); transform: translateY(-3px); } .swiper-slide-category h6 { font-family: var(--mp-font-body); font-weight: 600; font-size: 0.82rem !important; color: var(--mp-ink); margin-top: 8px !important; } /* ---------- Hero banner frame ---------- */ .slider .slide-img { border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px -12px rgba(14, 107, 87, 0.28); } .slider .slide-img img { border-radius: 18px; } /* ---------- Brand row ---------- */ .brand_image_div img { border-radius: 12px; border: 1px solid var(--mp-border); background: var(--mp-surface); padding: 6px; } .brand_image_div h6 { font-size: 0.78rem !important; color: var(--mp-muted); } /* ---------- Product cards — signature "price-tag ticket" ---------- */ .project.item { background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 14px; padding: 10px 10px 4px; transition: box-shadow 0.2s ease, transform 0.2s ease; } .project.item:hover { box-shadow: 0 14px 26px -16px rgba(22, 33, 29, 0.25); transform: translateY(-2px); } .project.item figure { position: relative; margin-bottom: 0; } /* covers every card style (default, style_1/2/4 slide cards, style_3 card variants) since they all reuse .fig_image / .sale_tag */ .fig_image { border-radius: 10px !important; height: 200px !important; } .sale_tag { background: var(--mp-chili) !important; border-radius: 6px; font-family: var(--mp-font-mono); font-size: 0.68rem; letter-spacing: 0.03em; padding: 3px 8px; } .product-bg, .swiper-slide.product-bg { border: 1px solid var(--mp-border); transition: box-shadow 0.2s ease, transform 0.2s ease; } .product-bg:hover { box-shadow: 0 14px 26px -16px rgba(22, 33, 29, 0.25); transform: translateY(-2px); } .project.item .post-header .title_wrap, .project.item .product-content .title_wrap { font-family: var(--mp-font-body); font-weight: 600; font-size: 0.92rem !important; color: var(--mp-ink); } /* Ticket-style price strip: dashed divider + mono numerals, evokes a receipt / price tag rather than a plain product price line. */ .post-header p.price, .product-content p.price { font-family: var(--mp-font-mono); font-weight: 600; font-size: 1rem !important; color: var(--mp-teal-dark); border-top: 1px dashed var(--mp-border); margin-top: 8px !important; padding-top: 6px; } .post-header p.price span#price, .product-content p.price span#price { color: var(--mp-teal-dark); } .striped-price, .product-grid .price span { font-family: var(--mp-font-mono); color: var(--mp-chili) !important; } /* Add-to-cart pill — mango accent, the one warm/loud element on an otherwise quiet card, reserved for the single primary action */ .add_to_cart { background: var(--mp-mango) !important; border-color: var(--mp-mango) !important; color: #fff !important; font-family: var(--mp-font-body); font-weight: 700 !important; border-radius: 999px !important; transition: background 0.2s ease; } .add_to_cart:hover { background: var(--mp-mango-dark) !important; border-color: var(--mp-mango-dark) !important; } .desktop_quick_view a.item-like, .desktop_quick_view a.item-view, .desktop_quick_view a.item-compare { background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 50%; box-shadow: 0 2px 6px rgba(22, 33, 29, 0.12); } /* ---------- Offer strip banner ---------- */ .offer-img { border-radius: 16px; overflow: hidden; } .offer-img img { border-radius: 16px; } /* ---------- App download section ---------- */ .bg-soft-grape { background: linear-gradient(135deg, var(--mp-teal-tint) 0%, #FFF3E9 100%) !important; } .bg-soft-grape h1.display-4 { font-family: var(--mp-font-display); color: var(--mp-ink); font-weight: 600; } .bg-soft-grape .btn-dark { background: var(--mp-ink); border-color: var(--mp-ink); } .bg-soft-grape .btn-green { background: var(--mp-teal); border-color: var(--mp-teal); } /* ---------- Buttons, general ---------- */ .btn-outline-primary { --bs-btn-color: var(--mp-teal); --bs-btn-border-color: var(--mp-teal); --bs-btn-hover-bg: var(--mp-teal); --bs-btn-hover-border-color: var(--mp-teal); } /* ---------- Responsive tightening ---------- */ @media (max-width: 600px) { .default_heading h3.section-title, .mp-section-head h3 { font-size: 1.35rem; } .fig_image { height: 140px !important; } } /* ============================================================ MERGOSHOP — THEME LAYER PART 2 (HEADER + FOOTER) Append this AFTER the first theme block you already added to green.css. Only targets existing header.php / footer.php class names — no view file changes needed. ============================================================ */ /* ---------- Top utility bar (app links + login/register) ---------- */ .bg-gradient-reverse-primary { background: var(--mp-ink) !important; } .bg-gradient-reverse-primary a, .bg-gradient-reverse-primary span { color: #EDEFEE !important; } .bg-gradient-reverse-primary .uil-google-play { color: var(--mp-mango) !important; } .bg-gradient-reverse-primary .language-select a:hover, .bg-gradient-reverse-primary li.nav-item a:hover { color: var(--mp-mango) !important; } /* ---------- Main nav ---------- */ header.wrapper.bg-soft-primary { background: var(--mp-bg) !important; } header .content-wrapper header.wrapper.bg-light { background: var(--mp-surface) !important; border-bottom: 1px solid var(--mp-border); } .navbar-brand.logo-img { font-family: var(--mp-font-display); } .navbar-nav .nav-link { font-family: var(--mp-font-body); font-weight: 600; color: var(--mp-ink) !important; position: relative; } .navbar-nav .nav-link.active, .navbar-nav .nav-link:hover { color: var(--mp-teal) !important; } .navbar-nav .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--mp-mango); border-radius: 2px; } .navbar-other .nav-link { color: var(--mp-ink) !important; } .navbar-other .nav-link:hover { color: var(--mp-teal) !important; } .badge-cart, .badge.bg-primary { background: var(--mp-mango) !important; font-family: var(--mp-font-mono); } /* ---------- Search / cart offcanvas ---------- */ .offcanvas-header h3 { font-family: var(--mp-font-display); color: var(--mp-ink); } #offcanvas-search .input-text { border-radius: 999px 0 0 999px; font-family: var(--mp-font-body); } .shopping-cart .price .amount, .product-line-price { font-family: var(--mp-font-mono); color: var(--mp-teal-dark); font-weight: 600; } .offcanvas-footer .btn-primary, #offcanvas-cart .view_cart_button { background: var(--mp-mango) !important; border-color: var(--mp-mango) !important; } .offcanvas-footer .btn-red { background: transparent !important; color: var(--mp-teal) !important; border: 1.5px solid var(--mp-teal) !important; } /* ---------- Login / Signup modals ---------- */ #modal-signin h2, #modal-signup h2 { font-family: var(--mp-font-display); color: var(--mp-ink); } #modal-signin .btn-primary, #modal-signup .btn-primary, .submit_btn.btn-primary { background: var(--mp-teal) !important; border-color: var(--mp-teal) !important; } #modal-signin .nav-tabs .nav-link.active, #modal-signup .nav-tabs .nav-link.active { color: var(--mp-teal) !important; border-color: var(--mp-teal) !important; } /* ---------- Footer ---------- */ footer.text-inverse .bg-navy { background: var(--mp-ink) !important; } footer .widget-title { font-family: var(--mp-font-display); font-weight: 600; letter-spacing: 0.01em; } footer .single-cta .cta-text p { font-family: var(--mp-font-mono); color: #C9D6D1; } footer .list-unstyled li a { font-family: var(--mp-font-body); color: #C9D6D1 !important; transition: color 0.15s ease, padding-left 0.15s ease; } footer .list-unstyled li a:hover { color: var(--mp-mango) !important; padding-left: 3px; } footer nav.social a { background: rgba(255, 255, 255, 0.08); border-radius: 50%; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; transition: background 0.15s ease; } footer nav.social a:hover { background: var(--mp-mango); } footer .footer-logo-footer { filter: brightness(0) invert(1); } /* ---------- Floating chat + buy-now pill (keep on-theme) ---------- */ #chat-button { background-color: var(--mp-teal) !important; } .whatsapp-icon { filter: none; } .bg-navy.angled.upper-end:before, .bg-navy.angled.upper-end:after { background: var(--mp-ink) !important; border-color: var(--mp-ink) !important; border-top-color: var(--mp-ink) !important; border-bottom-color: var(--mp-ink) !important; border-left-color: var(--mp-ink) !important; border-right-color: var(--mp-ink) !important; } /* ============================================================ MERGOSHOP — THEME LAYER PART 2 (HEADER + FOOTER) Append this AFTER the first theme block you already added to green.css. Only targets existing header.php / footer.php class names — no view file changes needed. ============================================================ */ /* ---------- Top utility bar (app links + login/register) ---------- */ .bg-gradient-reverse-primary { background: var(--mp-ink) !important; } .bg-gradient-reverse-primary a, .bg-gradient-reverse-primary span { color: #EDEFEE !important; } .bg-gradient-reverse-primary .uil-google-play { color: var(--mp-mango) !important; } .bg-gradient-reverse-primary .language-select a:hover, .bg-gradient-reverse-primary li.nav-item a:hover { color: var(--mp-mango) !important; } /* ---------- Main nav ---------- */ header.wrapper.bg-soft-primary { background: var(--mp-bg) !important; } header .content-wrapper header.wrapper.bg-light { background: var(--mp-surface) !important; border-bottom: 1px solid var(--mp-border); } .navbar-brand.logo-img { font-family: var(--mp-font-display); } .navbar-nav .nav-link { font-family: var(--mp-font-body); font-weight: 600; color: var(--mp-ink) !important; position: relative; } .navbar-nav .nav-link.active, .navbar-nav .nav-link:hover { color: var(--mp-teal) !important; } .navbar-nav .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--mp-mango); border-radius: 2px; } .navbar-other .nav-link { color: var(--mp-ink) !important; } .navbar-other .nav-link:hover { color: var(--mp-teal) !important; } .badge-cart, .badge.bg-primary { background: var(--mp-mango) !important; font-family: var(--mp-font-mono); } /* ---------- Search / cart offcanvas ---------- */ .offcanvas-header h3 { font-family: var(--mp-font-display); color: var(--mp-ink); } #offcanvas-search .input-text { border-radius: 999px 0 0 999px; font-family: var(--mp-font-body); } .shopping-cart .price .amount, .product-line-price { font-family: var(--mp-font-mono); color: var(--mp-teal-dark); font-weight: 600; } .offcanvas-footer .btn-primary, #offcanvas-cart .view_cart_button { background: var(--mp-mango) !important; border-color: var(--mp-mango) !important; } .offcanvas-footer .btn-red { background: transparent !important; color: var(--mp-teal) !important; border: 1.5px solid var(--mp-teal) !important; } /* ---------- Login / Signup modals ---------- */ #modal-signin h2, #modal-signup h2 { font-family: var(--mp-font-display); color: var(--mp-ink); } #modal-signin .btn-primary, #modal-signup .btn-primary, .submit_btn.btn-primary { background: var(--mp-teal) !important; border-color: var(--mp-teal) !important; } #modal-signin .nav-tabs .nav-link.active, #modal-signup .nav-tabs .nav-link.active { color: var(--mp-teal) !important; border-color: var(--mp-teal) !important; } /* ---------- Footer ---------- */ footer.text-inverse .bg-navy { background: var(--mp-ink) !important; } footer .widget-title { font-family: var(--mp-font-display); font-weight: 600; letter-spacing: 0.01em; } footer .single-cta .cta-text p { font-family: var(--mp-font-mono); color: #C9D6D1; } footer .list-unstyled li a { font-family: var(--mp-font-body); color: #C9D6D1 !important; transition: color 0.15s ease, padding-left 0.15s ease; } footer .list-unstyled li a:hover { color: var(--mp-mango) !important; padding-left: 3px; } footer nav.social a { background: rgba(255, 255, 255, 0.08); border-radius: 50%; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; transition: background 0.15s ease; } footer nav.social a:hover { background: var(--mp-mango); } footer .footer-logo-footer { filter: brightness(0) invert(1); } /* ---------- Floating chat + buy-now pill (keep on-theme) ---------- */ #chat-button { background-color: var(--mp-teal) !important; } .whatsapp-icon { filter: none; } /* ---------- Fix: the angled "slant" above the footer uses its own hardcoded navy color on a pseudo-element, separate from the plain .bg-navy background-color rule above — force it to match too */ .bg-navy.angled.upper-end:before, .bg-navy.angled.upper-end:after { background: var(--mp-ink) !important; border-color: var(--mp-ink) !important; border-top-color: var(--mp-ink) !important; border-bottom-color: var(--mp-ink) !important; border-left-color: var(--mp-ink) !important; border-right-color: var(--mp-ink) !important; } /* ============================================================ MERGOSHOP — THEME LAYER PART 3 (SELLERS PAGES) Append this AFTER Part 1 and Part 2 in green.css — reuses the same --mp-* variables, so no need to redeclare :root. Only targets existing class names in the sellers list / seller details view files — no PHP changes. ============================================================ */ /* ---------- Breadcrumb bar ---------- */ .breadcrumb-item a, .breadcrumb-item.active { font-family: var(--mp-font-body); font-weight: 600; color: var(--mp-muted); } .breadcrumb-item a:hover { color: var(--mp-teal); } .breadcrumb-item.active[aria-current="page"] { color: var(--mp-ink); } .breadcrumb-item + .breadcrumb-item::before { color: var(--mp-mango); font-weight: 700; } /* ---------- Page heading (Sellers) ---------- */ .listing-page h1, .listing-page h4 { font-family: var(--mp-font-display); color: var(--mp-ink); font-weight: 600; } /* ---------- Filter / sort bar ---------- */ .filter-section .form-control, #seller_search { border-radius: 10px; border: 1px solid var(--mp-border); font-family: var(--mp-font-body); } .filter-section .form-control:focus, #seller_search:focus { border-color: var(--mp-teal); box-shadow: 0 0 0 3px var(--mp-teal-tint); } .dropdown-border.form-select { border: 1px solid var(--mp-border); border-radius: 10px; font-family: var(--mp-font-mono); font-size: 0.85rem; } #product_grid_view_btn, #product_list_view_btn { color: var(--mp-muted) !important; } #product_grid_view_btn:hover, #product_list_view_btn:hover, #product_grid_view_btn.active, #product_list_view_btn.active { color: var(--mp-teal) !important; } /* ---------- Seller grid card ---------- */ .listing-page .card { border: 1px solid var(--mp-border); border-radius: 16px; transition: box-shadow 0.2s ease, transform 0.2s ease; overflow: hidden; } .listing-page .row > [class*="col-"] .card:hover { box-shadow: 0 16px 30px -18px rgba(22, 33, 29, 0.28); transform: translateY(-3px); } .seller-image-container { background: var(--mp-teal-tint); display: flex; align-items: center; justify-content: center; } .fig_seller_image { border-radius: 12px; object-fit: cover; } .card.text-center .product-content h4.title a { font-family: var(--mp-font-display); color: var(--mp-ink); font-weight: 600; } /* store-name line under a seller card is a label, not a price — keep it readable instead of the mono "ticket price" treatment */ .card.text-center .product-content p.price, .list-view-price { font-family: var(--mp-font-body) !important; color: var(--mp-muted) !important; font-weight: 500; border-top: none !important; padding-top: 0 !important; margin-top: 2px !important; } .view-products { font-family: var(--mp-font-body); font-weight: 700 !important; } /* ---------- Seller list view ---------- */ .product-image-container { background: var(--mp-teal-tint); border-radius: 12px; overflow: hidden; } .list-product-title a { font-family: var(--mp-font-display); color: var(--mp-ink); font-weight: 600; } .list-product-desc { font-family: var(--mp-font-body); color: var(--mp-muted); } /* ---------- Seller details header card ---------- */ .uil-store { color: var(--mp-teal) !important; } .text-blue { color: var(--mp-teal) !important; } .card.p-4 h1.h1 { font-family: var(--mp-font-display); color: var(--mp-ink); font-weight: 600; } .card.p-4 ul li { font-family: var(--mp-font-mono); font-size: 0.85rem; color: var(--mp-muted); } .seller-profile-card { border: 3px solid var(--mp-surface); box-shadow: 0 0 0 2px var(--mp-teal-tint); } .card.p-5 h3, .card.p-5 h2.display-6 { font-family: var(--mp-font-display); color: var(--mp-ink); font-weight: 600; } /* ---------- Empty state ---------- */ .listing-page h1.h2 { font-family: var(--mp-font-display); color: var(--mp-ink); } .btn-warning { background: var(--mp-mango) !important; border-color: var(--mp-mango) !important; color: #fff !important; } /* ---------- Pagination ---------- */ nav[aria-label="pagination"] .page-link, .listing-page nav .page-link { font-family: var(--mp-font-mono); color: var(--mp-ink); border-radius: 8px !important; margin: 0 2px; border: 1px solid var(--mp-border); } nav[aria-label="pagination"] .page-item.active .page-link, .listing-page nav .page-item.active .page-link { background: var(--mp-teal) !important; border-color: var(--mp-teal) !important; color: #fff !important; } /* ============================================================ MERGOSHOP — THEME LAYER PART 4 (CONTACT US) Append AFTER Part 1/2/3 in green.css. Targets the new mp-contact-* classes added to contact-us.php (markup-only change, no PHP logic touched) plus a few existing classes. ============================================================ */ .mp-contact-card { border: none; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 45px -22px rgba(22, 33, 29, 0.22); } .mp-contact-map { min-height: 320px; position: relative; } .mp-contact-map iframe { filter: grayscale(15%); } .mp-contact-info { background: var(--mp-surface); padding: 2.5rem !important; display: flex; flex-direction: column; justify-content: center; gap: 1.75rem; } .mp-contact-item { align-items: flex-start; padding-bottom: 1.5rem; border-bottom: 1px dashed var(--mp-border); } .mp-contact-item:last-child { border-bottom: none; padding-bottom: 0; } /* Signature: icons sit inside a solid teal circle badge instead of bare colored glyphs — ties back to the same "stamped tag" motif used on the homepage price tickets */ .mp-contact-icon { background: var(--mp-teal); color: #fff !important; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.35rem !important; margin-top: 0 !important; } .mp-contact-item:nth-child(1) .mp-contact-icon { background: var(--mp-teal); } .mp-contact-info h5 { font-family: var(--mp-font-display); font-weight: 600; color: var(--mp-ink); font-size: 1.05rem; } .mp-contact-info address, .mp-contact-info p { font-family: var(--mp-font-body); color: var(--mp-muted); margin-bottom: 0; } .mp-contact-info a.link-body { color: var(--mp-teal) !important; font-family: var(--mp-font-mono); text-decoration: none; } .mp-contact-info a.link-body:hover { color: var(--mp-mango-dark) !important; } /* ---------- Contact form panel ---------- */ .mp-contact-form-wrap h2.display-4 { font-family: var(--mp-font-display); color: var(--mp-ink); font-weight: 600; } .mp-contact-form-wrap p.lead { font-family: var(--mp-font-body); color: var(--mp-muted); } .mp-contact-form { background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 20px; padding: 2.5rem; box-shadow: 0 20px 45px -26px rgba(22, 33, 29, 0.2); } .mp-contact-form .form-control { border-radius: 10px; border: 1px solid var(--mp-border); font-family: var(--mp-font-body); } .mp-contact-form .form-control:focus { border-color: var(--mp-teal); box-shadow: 0 0 0 3px var(--mp-teal-tint); } .mp-contact-form .form-floating label { color: var(--mp-muted); font-family: var(--mp-font-body); } .mp-contact-submit { font-family: var(--mp-font-body); font-weight: 700; padding: 0.75rem 2.5rem !important; background: var(--mp-mango) !important; border-color: var(--mp-mango) !important; color: #fff !important; letter-spacing: 0.01em; transition: background 0.2s ease, transform 0.15s ease; } .mp-contact-submit:hover { background: var(--mp-mango-dark) !important; border-color: var(--mp-mango-dark) !important; transform: translateY(-2px); } @media (max-width: 767px) { .mp-contact-info { padding: 1.75rem !important; } .mp-contact-form { padding: 1.5rem; border-radius: 16px; } } /* ============================================================ MERGOSHOP — THEME LAYER PART 5 (SELLERS — SIGNATURE PASS) Append AFTER Part 1/2/3/4 in green.css. Targets the new mp-seller-* classes added to sellers.php / seller_details.php (markup-only, no PHP logic touched). ============================================================ */ .mp-seller-page-title h1 { font-family: var(--mp-font-display); font-weight: 600; color: var(--mp-ink); font-size: 2.1rem; margin-bottom: 0.75rem; } /* ---------- Toolbar as a floating surface ---------- */ .mp-seller-toolbar { background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 16px; padding: 1.25rem 1.5rem; box-shadow: 0 10px 26px -20px rgba(22, 33, 29, 0.25); margin-bottom: 1.5rem; } /* ---------- Grid seller card ---------- */ .mp-seller-card { border: 1px solid var(--mp-border); border-radius: 18px; overflow: visible; transition: box-shadow 0.25s ease, transform 0.25s ease; padding-top: 1.25rem; } .mp-seller-card:hover { box-shadow: 0 20px 36px -18px rgba(22, 33, 29, 0.28); transform: translateY(-4px); } /* Signature: circular avatar (like a business-card portrait) with a teal ring and a small verified-shield badge clipped to its edge — makes a seller feel like a trusted person, not a product tile */ .mp-seller-avatar-wrap { position: relative; width: 128px; height: 128px; margin: 0 auto; background: none !important; } .mp-seller-avatar { width: 128px !important; height: 128px !important; border-radius: 50% !important; object-fit: cover; border: 4px solid var(--mp-teal-tint); box-shadow: 0 8px 20px -10px rgba(14, 107, 87, 0.4); } .mp-seller-verified { position: absolute; bottom: 2px; right: 2px; width: 30px; height: 30px; background: var(--mp-teal); color: #fff; border: 3px solid var(--mp-surface); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; } .mp-seller-rating .rating-loading, .mp-seller-rating { display: flex; justify-content: center; margin-top: 0.6rem; } .mp-seller-rating .krajee-icon svg, .mp-seller-rating svg { filter: none; } .mp-seller-card .title a, .mp-seller-list-card .title, .mp-seller-list-card .list-product-title a { font-family: var(--mp-font-display); font-weight: 600; color: var(--mp-ink) !important; font-size: 1.05rem; } .mp-seller-card .price.fs-14 { font-family: var(--mp-font-body) !important; color: var(--mp-muted) !important; border-top: none !important; margin-top: 2px !important; padding-top: 0 !important; font-size: 0.85rem !important; } /* Primary action gets the one warm accent, same pattern used on product cards site-wide (mango = the single loud CTA per card) */ .mp-seller-cta { background: var(--mp-mango) !important; border-color: var(--mp-mango) !important; color: #fff !important; font-family: var(--mp-font-body); font-weight: 700 !important; padding: 0.4rem 1.4rem !important; transition: background 0.2s ease, transform 0.15s ease; } .mp-seller-cta:hover { background: var(--mp-mango-dark) !important; border-color: var(--mp-mango-dark) !important; color: #fff !important; transform: translateY(-1px); } /* ---------- List view ---------- */ .mp-seller-list-card { border: 1px solid var(--mp-border); border-radius: 16px; padding: 1.25rem; transition: box-shadow 0.2s ease; } .mp-seller-list-card:hover { box-shadow: 0 16px 30px -20px rgba(22, 33, 29, 0.25); } .mp-seller-list-avatar { border-radius: 14px; overflow: hidden; background: var(--mp-teal-tint); } .mp-seller-badge { display: inline-block; background: var(--mp-teal-tint); color: var(--mp-teal-dark); font-family: var(--mp-font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; margin-bottom: 6px; } /* ---------- Seller-details header card ---------- */ .mp-seller-header-card { border: none; border-radius: 20px; background: linear-gradient(135deg, var(--mp-teal-tint) 0%, var(--mp-surface) 55%); box-shadow: 0 20px 45px -26px rgba(22, 33, 29, 0.25); } .mp-seller-header-icon i { background: var(--mp-surface); border-radius: 18px; padding: 14px; box-shadow: 0 6px 16px -8px rgba(22, 33, 29, 0.2); } .mp-seller-header-card h1.h1 { font-family: var(--mp-font-display); font-weight: 600; color: var(--mp-ink); } .mp-seller-stats li { font-family: var(--mp-font-mono); font-size: 0.85rem; color: var(--mp-muted); background: var(--mp-surface); padding: 4px 12px; border-radius: 999px; border: 1px solid var(--mp-border); } .mp-seller-avatar-badge { border-radius: 50%; overflow: hidden; border: 4px solid var(--mp-surface); box-shadow: 0 0 0 2px var(--mp-teal); } .mp-seller-about-card, .mp-seller-products-card { border: 1px solid var(--mp-border); border-radius: 18px; box-shadow: 0 14px 30px -22px rgba(22, 33, 29, 0.2); } .mp-seller-about-card h3, .mp-seller-products-card h2.display-6 { font-family: var(--mp-font-display); font-weight: 600; color: var(--mp-ink); } @media (max-width: 600px) { .mp-seller-toolbar { padding: 1rem; } .mp-seller-avatar-wrap, .mp-seller-avatar { width: 96px !important; height: 96px !important; } } /* ============================================================ MERGOSHOP — THEME LAYER (NEW DESIGN) Appended after the original stylesheet on purpose: every rule above this block stays exactly as it was (JS-dependent classes, chat widget, select2, iziModal etc. are untouched). Everything below re-skins the storefront look — colors, type, cards, banner, sections — without touching any PHP/controller logic. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { --mp-bg: #F3F7F5; --mp-surface: #FFFFFF; --mp-ink: #16211D; --mp-muted: #5C6B64; --mp-border: #DCE6E2; --mp-teal: #0E6B57; --mp-teal-dark: #0A4F41; --mp-teal-tint: #E4F1EC; --mp-mango: #FF8A3D; --mp-mango-dark: #E06F23; --mp-chili: #C43D3D; --mp-font-display: 'Fraunces', Georgia, serif; --mp-font-body: 'Manrope', -apple-system, sans-serif; --mp-font-mono: 'JetBrains Mono', ui-monospace, monospace; --primary-color: var(--mp-teal) !important; } body { background: var(--mp-bg); font-family: var(--mp-font-body); color: var(--mp-ink); } .default_heading h3.section-title, .mp-section-head h3 { font-family: var(--mp-font-display); font-weight: 600; font-size: 1.9rem; color: var(--mp-ink); position: relative; padding-left: 22px; letter-spacing: -0.01em; } .default_heading h3.section-title::before, .mp-section-head h3::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; background: var(--mp-mango); border-radius: 2px; transform: rotate(45deg); } .default_heading h6.title-sm, .mp-section-head h6 { font-family: var(--mp-font-body); color: var(--mp-muted); font-weight: 500; padding-left: 22px; } .featured-section-title a.hover { font-family: var(--mp-font-mono); font-size: 0.78rem; font-weight: 600; color: var(--mp-teal); letter-spacing: 0.02em; text-transform: uppercase; border-bottom: 1.5px solid var(--mp-teal); padding-bottom: 2px; } .featured-section-title a.hover:hover { color: var(--mp-mango-dark); border-color: var(--mp-mango-dark); } .swiper-slide-category a { display: flex; flex-direction: column; align-items: center; } .swiper-slide-category img { height: 88px !important; width: 88px !important; object-fit: cover; border-radius: 999px !important; border: 2px solid var(--mp-teal-tint); padding: 3px; background: var(--mp-surface); transition: border-color 0.2s ease, transform 0.2s ease; } .swiper-slide-category a:hover img { border-color: var(--mp-mango); transform: translateY(-3px); } .swiper-slide-category h6 { font-family: var(--mp-font-body); font-weight: 600; font-size: 0.82rem !important; color: var(--mp-ink); margin-top: 8px !important; } .slider .slide-img { border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px -12px rgba(14, 107, 87, 0.28); } .slider .slide-img img { border-radius: 18px; } .brand_image_div img { border-radius: 12px; border: 1px solid var(--mp-border); background: var(--mp-surface); padding: 6px; } .brand_image_div h6 { font-size: 0.78rem !important; color: var(--mp-muted); } .project.item { background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 14px; padding: 10px 10px 4px; transition: box-shadow 0.2s ease, transform 0.2s ease; } .project.item:hover { box-shadow: 0 14px 26px -16px rgba(22, 33, 29, 0.25); transform: translateY(-2px); } .project.item figure { position: relative; margin-bottom: 0; } .fig_image { border-radius: 10px !important; height: 200px !important; } .sale_tag { background: var(--mp-chili) !important; border-radius: 6px; font-family: var(--mp-font-mono); font-size: 0.68rem; letter-spacing: 0.03em; padding: 3px 8px; } .product-bg, .swiper-slide.product-bg { border: 1px solid var(--mp-border); transition: box-shadow 0.2s ease, transform 0.2s ease; } .product-bg:hover { box-shadow: 0 14px 26px -16px rgba(22, 33, 29, 0.25); transform: translateY(-2px); } .project.item .post-header .title_wrap, .project.item .product-content .title_wrap { font-family: var(--mp-font-body); font-weight: 600; font-size: 0.92rem !important; color: var(--mp-ink); } .post-header p.price, .product-content p.price { font-family: var(--mp-font-mono); font-weight: 600; font-size: 1rem !important; color: var(--mp-teal-dark); border-top: 1px dashed var(--mp-border); margin-top: 8px !important; padding-top: 6px; } .post-header p.price span#price, .product-content p.price span#price { color: var(--mp-teal-dark); } .striped-price, .product-grid .price span { font-family: var(--mp-font-mono); color: var(--mp-chili) !important; } .add_to_cart { background: var(--mp-mango) !important; border-color: var(--mp-mango) !important; color: #fff !important; font-family: var(--mp-font-body); font-weight: 700 !important; border-radius: 999px !important; transition: background 0.2s ease; } .add_to_cart:hover { background: var(--mp-mango-dark) !important; border-color: var(--mp-mango-dark) !important; } .desktop_quick_view a.item-like, .desktop_quick_view a.item-view, .desktop_quick_view a.item-compare { background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 50%; box-shadow: 0 2px 6px rgba(22, 33, 29, 0.12); } .offer-img { border-radius: 16px; overflow: hidden; } .offer-img img { border-radius: 16px; } .bg-soft-grape { background: linear-gradient(135deg, var(--mp-teal-tint) 0%, #FFF3E9 100%) !important; } .bg-soft-grape h1.display-4 { font-family: var(--mp-font-display); color: var(--mp-ink); font-weight: 600; } .bg-soft-grape .btn-dark { background: var(--mp-ink); border-color: var(--mp-ink); } .bg-soft-grape .btn-green { background: var(--mp-teal); border-color: var(--mp-teal); } .btn-outline-primary { --bs-btn-color: var(--mp-teal); --bs-btn-border-color: var(--mp-teal); --bs-btn-hover-bg: var(--mp-teal); --bs-btn-hover-border-color: var(--mp-teal); } @media (max-width: 600px) { .default_heading h3.section-title, .mp-section-head h3 { font-size: 1.35rem; } .fig_image { height: 140px !important; } } /* ============================================================ MERGOSHOP — HOME ADDITIONS (hero ribbon, hover zoom, testimonials, newsletter) ============================================================ */ /* ---------- Hero sale ribbon ---------- */ .mp-hero-slide { position: relative; } .mp-hero-ribbon { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--mp-mango); color: #fff; font-family: var(--mp-font-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.3); } /* ---------- Product grid hover zoom ---------- */ .project.item figure { overflow: hidden; } .fig_image { transition: transform 0.35s ease; } .project.item:hover .fig_image, .product-bg:hover .fig_image { transform: scale(1.08); } /* ---------- Testimonials ---------- */ .mp-testimonials { background: var(--mp-surface); } .mp-testimonial-card { background: var(--mp-teal-tint); border-radius: 16px; padding: 1.75rem; height: 100%; } .mp-testimonial-stars { color: var(--mp-mango); font-size: 0.9rem; margin-bottom: 12px; } .mp-testimonial-quote { font-family: var(--mp-font-body); color: var(--mp-ink); font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; } .mp-testimonial-author { display: flex; align-items: center; gap: 12px; } .mp-testimonial-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--mp-teal); color: #fff; font-family: var(--mp-font-display); font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mp-testimonial-author h6 { font-family: var(--mp-font-body); font-weight: 700; color: var(--mp-ink); font-size: 0.9rem; } .mp-testimonial-role { font-family: var(--mp-font-mono); font-size: 0.72rem; color: var(--mp-muted); } /* ---------- Newsletter ---------- */ .mp-newsletter-box { background: var(--mp-ink); border-radius: 20px; padding: 2.25rem 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .mp-newsletter-text h3 { font-family: var(--mp-font-display); color: #fff; font-weight: 600; } .mp-newsletter-text p { font-family: var(--mp-font-body); color: #C9D6D1; } .mp-newsletter-form { display: flex; gap: 10px; flex: 1; min-width: 280px; max-width: 420px; } .mp-newsletter-form .form-control { border-radius: 999px; border: none; padding: 0.6rem 1.2rem; font-family: var(--mp-font-body); } .mp-newsletter-btn { background: var(--mp-mango) !important; color: #fff !important; border-radius: 999px !important; font-family: var(--mp-font-body); font-weight: 700 !important; padding: 0.6rem 1.6rem !important; white-space: nowrap; } .mp-newsletter-btn:hover { background: var(--mp-mango-dark) !important; } @media (max-width: 600px) { .mp-newsletter-box { padding: 1.5rem; text-align: center; justify-content: center; } .mp-newsletter-form { max-width: 100%; } } /* ============================================================ MERGOSHOP — THEME LAYER (NEW DESIGN) Appended after the original stylesheet on purpose: every rule above this block stays exactly as it was (JS-dependent classes, chat widget, select2, iziModal etc. are untouched). Everything below re-skins the storefront look — colors, type, cards, banner, sections — without touching any PHP/controller logic. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { --mp-bg: #F3F7F5; --mp-surface: #FFFFFF; --mp-ink: #16211D; --mp-muted: #5C6B64; --mp-border: #DCE6E2; --mp-teal: #0E6B57; --mp-teal-dark: #0A4F41; --mp-teal-tint: #E4F1EC; --mp-mango: #FF8A3D; --mp-mango-dark: #E06F23; --mp-chili: #C43D3D; --mp-font-display: 'Fraunces', Georgia, serif; --mp-font-body: 'Manrope', -apple-system, sans-serif; --mp-font-mono: 'JetBrains Mono', ui-monospace, monospace; --primary-color: var(--mp-teal) !important; } body { background: var(--mp-bg); font-family: var(--mp-font-body); color: var(--mp-ink); } .default_heading h3.section-title, .mp-section-head h3 { font-family: var(--mp-font-display); font-weight: 600; font-size: 1.9rem; color: var(--mp-ink); position: relative; padding-left: 22px; letter-spacing: -0.01em; } .default_heading h3.section-title::before, .mp-section-head h3::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; background: var(--mp-mango); border-radius: 2px; transform: rotate(45deg); } .default_heading h6.title-sm, .mp-section-head h6 { font-family: var(--mp-font-body); color: var(--mp-muted); font-weight: 500; padding-left: 22px; } .featured-section-title a.hover { font-family: var(--mp-font-mono); font-size: 0.78rem; font-weight: 600; color: var(--mp-teal); letter-spacing: 0.02em; text-transform: uppercase; border-bottom: 1.5px solid var(--mp-teal); padding-bottom: 2px; } .featured-section-title a.hover:hover { color: var(--mp-mango-dark); border-color: var(--mp-mango-dark); } .swiper-slide-category a { display: flex; flex-direction: column; align-items: center; } .swiper-slide-category img { height: 88px !important; width: 88px !important; object-fit: cover; border-radius: 999px !important; border: 2px solid var(--mp-teal-tint); padding: 3px; background: var(--mp-surface); transition: border-color 0.2s ease, transform 0.2s ease; } .swiper-slide-category a:hover img { border-color: var(--mp-mango); transform: translateY(-3px); } .swiper-slide-category h6 { font-family: var(--mp-font-body); font-weight: 600; font-size: 0.82rem !important; color: var(--mp-ink); margin-top: 8px !important; } .slider .slide-img { border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px -12px rgba(14, 107, 87, 0.28); } .slider .slide-img img { border-radius: 18px; } .brand_image_div img { border-radius: 12px; border: 1px solid var(--mp-border); background: var(--mp-surface); padding: 6px; } .brand_image_div h6 { font-size: 0.78rem !important; color: var(--mp-muted); } .project.item { background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 14px; padding: 10px 10px 4px; transition: box-shadow 0.2s ease, transform 0.2s ease; } .project.item:hover { box-shadow: 0 14px 26px -16px rgba(22, 33, 29, 0.25); transform: translateY(-2px); } .project.item figure { position: relative; margin-bottom: 0; } .fig_image { border-radius: 10px !important; height: 200px !important; } .sale_tag { background: var(--mp-chili) !important; border-radius: 6px; font-family: var(--mp-font-mono); font-size: 0.68rem; letter-spacing: 0.03em; padding: 3px 8px; } .product-bg, .swiper-slide.product-bg { border: 1px solid var(--mp-border); transition: box-shadow 0.2s ease, transform 0.2s ease; } .product-bg:hover { box-shadow: 0 14px 26px -16px rgba(22, 33, 29, 0.25); transform: translateY(-2px); } .project.item .post-header .title_wrap, .project.item .product-content .title_wrap { font-family: var(--mp-font-body); font-weight: 600; font-size: 0.92rem !important; color: var(--mp-ink); } .post-header p.price, .product-content p.price { font-family: var(--mp-font-mono); font-weight: 600; font-size: 1rem !important; color: var(--mp-teal-dark); border-top: 1px dashed var(--mp-border); margin-top: 8px !important; padding-top: 6px; } .post-header p.price span#price, .product-content p.price span#price { color: var(--mp-teal-dark); } .striped-price, .product-grid .price span { font-family: var(--mp-font-mono); color: var(--mp-chili) !important; } .add_to_cart { background: var(--mp-mango) !important; border-color: var(--mp-mango) !important; color: #fff !important; font-family: var(--mp-font-body); font-weight: 700 !important; border-radius: 999px !important; transition: background 0.2s ease; } .add_to_cart:hover { background: var(--mp-mango-dark) !important; border-color: var(--mp-mango-dark) !important; } .desktop_quick_view a.item-like, .desktop_quick_view a.item-view, .desktop_quick_view a.item-compare { background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 50%; box-shadow: 0 2px 6px rgba(22, 33, 29, 0.12); } .offer-img { border-radius: 16px; overflow: hidden; } .offer-img img { border-radius: 16px; } .bg-soft-grape { background: linear-gradient(135deg, var(--mp-teal-tint) 0%, #FFF3E9 100%) !important; } .bg-soft-grape h1.display-4 { font-family: var(--mp-font-display); color: var(--mp-ink); font-weight: 600; } .bg-soft-grape .btn-dark { background: var(--mp-ink); border-color: var(--mp-ink); } .bg-soft-grape .btn-green { background: var(--mp-teal); border-color: var(--mp-teal); } .btn-outline-primary { --bs-btn-color: var(--mp-teal); --bs-btn-border-color: var(--mp-teal); --bs-btn-hover-bg: var(--mp-teal); --bs-btn-hover-border-color: var(--mp-teal); } @media (max-width: 600px) { .default_heading h3.section-title, .mp-section-head h3 { font-size: 1.35rem; } .fig_image { height: 140px !important; } } /* ============================================================ MERGOSHOP — HOME ADDITIONS (hero ribbon, hover zoom, testimonials, newsletter) ============================================================ */ /* ---------- Hero sale ribbon ---------- */ .mp-hero-slide { position: relative; } .mp-hero-ribbon { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--mp-mango); color: #fff; font-family: var(--mp-font-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.3); } /* ---------- Product grid hover zoom ---------- */ .project.item figure { overflow: hidden; } .fig_image { transition: transform 0.35s ease; } .project.item:hover .fig_image, .product-bg:hover .fig_image { transform: scale(1.08); } /* ---------- Testimonials ---------- */ .mp-testimonials { background: var(--mp-surface); } .mp-testimonial-card { background: var(--mp-teal-tint); border-radius: 16px; padding: 1.75rem; height: 100%; } .mp-testimonial-stars { color: var(--mp-mango); font-size: 0.9rem; margin-bottom: 12px; } .mp-testimonial-quote { font-family: var(--mp-font-body); color: var(--mp-ink); font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; } .mp-testimonial-author { display: flex; align-items: center; gap: 12px; } .mp-testimonial-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--mp-teal); color: #fff; font-family: var(--mp-font-display); font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mp-testimonial-author h6 { font-family: var(--mp-font-body); font-weight: 700; color: var(--mp-ink); font-size: 0.9rem; } .mp-testimonial-role { font-family: var(--mp-font-mono); font-size: 0.72rem; color: var(--mp-muted); } /* ---------- Newsletter ---------- */ .mp-newsletter-box { background: var(--mp-ink); border-radius: 20px; padding: 2.25rem 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .mp-newsletter-text h3 { font-family: var(--mp-font-display); color: #fff; font-weight: 600; } .mp-newsletter-text p { font-family: var(--mp-font-body); color: #C9D6D1; } .mp-newsletter-form { display: flex; gap: 10px; flex: 1; min-width: 280px; max-width: 420px; } .mp-newsletter-form .form-control { border-radius: 999px; border: none; padding: 0.6rem 1.2rem; font-family: var(--mp-font-body); } .mp-newsletter-btn { background: var(--mp-mango) !important; color: #fff !important; border-radius: 999px !important; font-family: var(--mp-font-body); font-weight: 700 !important; padding: 0.6rem 1.6rem !important; white-space: nowrap; } .mp-newsletter-btn:hover { background: var(--mp-mango-dark) !important; } @media (max-width: 600px) { .mp-newsletter-box { padding: 1.5rem; text-align: center; justify-content: center; } .mp-newsletter-form { max-width: 100%; } } /* ---------- Flash sale countdown ---------- */ .mp-flash-sale-box { background: linear-gradient(90deg, var(--mp-chili) 0%, #E0623D 100%); border-radius: 14px; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .mp-flash-sale-text { display: flex; align-items: center; gap: 8px; color: #fff; font-family: var(--mp-font-body); font-weight: 700; font-size: 0.95rem; } .mp-flash-sale-text i { font-size: 1.1rem; } .mp-flash-sale-timer { display: flex; align-items: center; gap: 6px; } .mp-flash-sale-unit { display: flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, 0.16); border-radius: 8px; padding: 4px 10px; min-width: 44px; } .mp-flash-sale-num { font-family: var(--mp-font-mono); font-weight: 700; font-size: 1.05rem; color: #fff; line-height: 1.1; } .mp-flash-sale-label { font-family: var(--mp-font-mono); font-size: 0.62rem; color: rgba(255, 255, 255, 0.8); text-transform: uppercase; letter-spacing: 0.03em; } .mp-flash-sale-colon { color: #fff; font-weight: 700; } .mp-flash-sale-btn { background: #fff !important; color: var(--mp-chili) !important; font-family: var(--mp-font-body); font-weight: 700 !important; border-radius: 999px !important; padding: 8px 22px !important; white-space: nowrap; } .mp-flash-sale-btn:hover { background: #FFF3EF !important; } @media (max-width: 600px) { .mp-flash-sale-box { justify-content: center; text-align: center; padding: 14px; } } /* ============================================================ MERGOSHOP — THEME LAYER (NEW DESIGN) Appended after the original stylesheet on purpose: every rule above this block stays exactly as it was (JS-dependent classes, chat widget, select2, iziModal etc. are untouched). Everything below re-skins the storefront look — colors, type, cards, banner, sections — without touching any PHP/controller logic. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { --mp-bg: #F3F7F5; --mp-surface: #FFFFFF; --mp-ink: #16211D; --mp-muted: #5C6B64; --mp-border: #DCE6E2; --mp-teal: #0E6B57; --mp-teal-dark: #0A4F41; --mp-teal-tint: #E4F1EC; --mp-mango: #FF8A3D; --mp-mango-dark: #E06F23; --mp-chili: #C43D3D; --mp-font-display: 'Fraunces', Georgia, serif; --mp-font-body: 'Manrope', -apple-system, sans-serif; --mp-font-mono: 'JetBrains Mono', ui-monospace, monospace; --primary-color: var(--mp-teal) !important; } body { background: var(--mp-bg); font-family: var(--mp-font-body); color: var(--mp-ink); } .default_heading h3.section-title, .mp-section-head h3 { font-family: var(--mp-font-display); font-weight: 600; font-size: 1.9rem; color: var(--mp-ink); position: relative; padding-left: 22px; letter-spacing: -0.01em; } .default_heading h3.section-title::before, .mp-section-head h3::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; background: var(--mp-mango); border-radius: 2px; transform: rotate(45deg); } .default_heading h6.title-sm, .mp-section-head h6 { font-family: var(--mp-font-body); color: var(--mp-muted); font-weight: 500; padding-left: 22px; } .featured-section-title a.hover { font-family: var(--mp-font-mono); font-size: 0.78rem; font-weight: 600; color: var(--mp-teal); letter-spacing: 0.02em; text-transform: uppercase; border-bottom: 1.5px solid var(--mp-teal); padding-bottom: 2px; } .featured-section-title a.hover:hover { color: var(--mp-mango-dark); border-color: var(--mp-mango-dark); } .swiper-slide-category a { display: flex; flex-direction: column; align-items: center; } .swiper-slide-category img { height: 88px !important; width: 88px !important; object-fit: cover; border-radius: 999px !important; border: 2px solid var(--mp-teal-tint); padding: 3px; background: var(--mp-surface); transition: border-color 0.2s ease, transform 0.2s ease; } .swiper-slide-category a:hover img { border-color: var(--mp-mango); transform: translateY(-3px); } .swiper-slide-category h6 { font-family: var(--mp-font-body); font-weight: 600; font-size: 0.82rem !important; color: var(--mp-ink); margin-top: 8px !important; } .slider .slide-img { border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px -12px rgba(14, 107, 87, 0.28); } .slider .slide-img img { border-radius: 18px; } .brand_image_div img { border-radius: 12px; border: 1px solid var(--mp-border); background: var(--mp-surface); padding: 6px; } .brand_image_div h6 { font-size: 0.78rem !important; color: var(--mp-muted); } .project.item { background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 14px; padding: 10px 10px 4px; transition: box-shadow 0.2s ease, transform 0.2s ease; } .project.item:hover { box-shadow: 0 14px 26px -16px rgba(22, 33, 29, 0.25); transform: translateY(-2px); } .project.item figure { position: relative; margin-bottom: 0; } .fig_image { border-radius: 10px !important; height: 200px !important; } .sale_tag { background: var(--mp-chili) !important; border-radius: 6px; font-family: var(--mp-font-mono); font-size: 0.68rem; letter-spacing: 0.03em; padding: 3px 8px; } .product-bg, .swiper-slide.product-bg { border: 1px solid var(--mp-border); transition: box-shadow 0.2s ease, transform 0.2s ease; } .product-bg:hover { box-shadow: 0 14px 26px -16px rgba(22, 33, 29, 0.25); transform: translateY(-2px); } .project.item .post-header .title_wrap, .project.item .product-content .title_wrap { font-family: var(--mp-font-body); font-weight: 600; font-size: 0.92rem !important; color: var(--mp-ink); } .post-header p.price, .product-content p.price { font-family: var(--mp-font-mono); font-weight: 600; font-size: 1rem !important; color: var(--mp-teal-dark); border-top: 1px dashed var(--mp-border); margin-top: 8px !important; padding-top: 6px; } .post-header p.price span#price, .product-content p.price span#price { color: var(--mp-teal-dark); } .striped-price, .product-grid .price span { font-family: var(--mp-font-mono); color: var(--mp-chili) !important; } .add_to_cart { background: var(--mp-mango) !important; border-color: var(--mp-mango) !important; color: #fff !important; font-family: var(--mp-font-body); font-weight: 700 !important; border-radius: 999px !important; transition: background 0.2s ease; } .add_to_cart:hover { background: var(--mp-mango-dark) !important; border-color: var(--mp-mango-dark) !important; } .desktop_quick_view a.item-like, .desktop_quick_view a.item-view, .desktop_quick_view a.item-compare { background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: 50%; box-shadow: 0 2px 6px rgba(22, 33, 29, 0.12); } .offer-img { border-radius: 16px; overflow: hidden; } .offer-img img { border-radius: 16px; } .bg-soft-grape { background: linear-gradient(135deg, var(--mp-teal-tint) 0%, #FFF3E9 100%) !important; } .bg-soft-grape h1.display-4 { font-family: var(--mp-font-display); color: var(--mp-ink); font-weight: 600; } .bg-soft-grape .btn-dark { background: var(--mp-ink); border-color: var(--mp-ink); } .bg-soft-grape .btn-green { background: var(--mp-teal); border-color: var(--mp-teal); } .btn-outline-primary { --bs-btn-color: var(--mp-teal); --bs-btn-border-color: var(--mp-teal); --bs-btn-hover-bg: var(--mp-teal); --bs-btn-hover-border-color: var(--mp-teal); } @media (max-width: 600px) { .default_heading h3.section-title, .mp-section-head h3 { font-size: 1.35rem; } .fig_image { height: 140px !important; } } /* ============================================================ MERGOSHOP — HOME ADDITIONS (hero ribbon, hover zoom, testimonials, newsletter) ============================================================ */ /* ---------- Hero sale ribbon ---------- */ .mp-hero-slide { position: relative; } .mp-hero-ribbon { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--mp-mango); color: #fff; font-family: var(--mp-font-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.3); } /* ---------- Product grid hover zoom ---------- */ .project.item figure { overflow: hidden; } .fig_image { transition: transform 0.35s ease; } .project.item:hover .fig_image, .product-bg:hover .fig_image { transform: scale(1.08); } /* ---------- Testimonials ---------- */ .mp-testimonials { background: var(--mp-surface); } .mp-testimonial-card { background: var(--mp-teal-tint); border-radius: 16px; padding: 1.75rem; height: 100%; } .mp-testimonial-stars { color: var(--mp-mango); font-size: 0.9rem; margin-bottom: 12px; } .mp-testimonial-quote { font-family: var(--mp-font-body); color: var(--mp-ink); font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; } .mp-testimonial-author { display: flex; align-items: center; gap: 12px; } .mp-testimonial-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--mp-teal); color: #fff; font-family: var(--mp-font-display); font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mp-testimonial-author h6 { font-family: var(--mp-font-body); font-weight: 700; color: var(--mp-ink); font-size: 0.9rem; } .mp-testimonial-role { font-family: var(--mp-font-mono); font-size: 0.72rem; color: var(--mp-muted); } /* ---------- Newsletter ---------- */ .mp-newsletter-box { background: var(--mp-ink); border-radius: 20px; padding: 2.25rem 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .mp-newsletter-text h3 { font-family: var(--mp-font-display); color: #fff; font-weight: 600; } .mp-newsletter-text p { font-family: var(--mp-font-body); color: #C9D6D1; } .mp-newsletter-form { display: flex; gap: 10px; flex: 1; min-width: 280px; max-width: 420px; } .mp-newsletter-form .form-control { border-radius: 999px; border: none; padding: 0.6rem 1.2rem; font-family: var(--mp-font-body); } .mp-newsletter-btn { background: var(--mp-mango) !important; color: #fff !important; border-radius: 999px !important; font-family: var(--mp-font-body); font-weight: 700 !important; padding: 0.6rem 1.6rem !important; white-space: nowrap; } .mp-newsletter-btn:hover { background: var(--mp-mango-dark) !important; } @media (max-width: 600px) { .mp-newsletter-box { padding: 1.5rem; text-align: center; justify-content: center; } .mp-newsletter-form { max-width: 100%; } } /* ---------- Flash sale countdown ---------- */ .mp-flash-sale-box { background: linear-gradient(90deg, var(--mp-chili) 0%, #E0623D 100%); border-radius: 14px; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .mp-flash-sale-text { display: flex; align-items: center; gap: 8px; color: #fff; font-family: var(--mp-font-body); font-weight: 700; font-size: 0.95rem; } .mp-flash-sale-text i { font-size: 1.1rem; } .mp-flash-sale-timer { display: flex; align-items: center; gap: 6px; } .mp-flash-sale-unit { display: flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, 0.16); border-radius: 8px; padding: 4px 10px; min-width: 44px; } .mp-flash-sale-num { font-family: var(--mp-font-mono); font-weight: 700; font-size: 1.05rem; color: #fff; line-height: 1.1; } .mp-flash-sale-label { font-family: var(--mp-font-mono); font-size: 0.62rem; color: rgba(255, 255, 255, 0.8); text-transform: uppercase; letter-spacing: 0.03em; } .mp-flash-sale-colon { color: #fff; font-weight: 700; } .mp-flash-sale-btn { background: #fff !important; color: var(--mp-chili) !important; font-family: var(--mp-font-body); font-weight: 700 !important; border-radius: 999px !important; padding: 8px 22px !important; white-space: nowrap; } .mp-flash-sale-btn:hover { background: #FFF3EF !important; } @media (max-width: 600px) { .mp-flash-sale-box { justify-content: center; text-align: center; padding: 14px; } } /* ============================================================ MERGOSHOP — CATEGORIES PAGE BANNER ============================================================ */ .mp-category-banner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .mp-category-banner-text h1 { font-family: var(--mp-font-display); font-weight: 600; color: var(--mp-ink); font-size: 2rem; } .mp-category-banner-text p { font-family: var(--mp-font-body); color: var(--mp-muted); font-size: 1rem; } .mp-category-banner-img { max-width: 220px; width: 100%; height: auto; } .category-image-container img { border-radius: 50%; border: 2px solid var(--mp-teal-tint); padding: 4px; background: var(--mp-surface); transition: border-color 0.2s ease, transform 0.2s ease; } .category-image:hover .category-image-container img { border-color: var(--mp-mango); transform: translateY(-3px); } .category-image span { font-family: var(--mp-font-body); font-weight: 600; font-size: 0.85rem; color: var(--mp-ink); } @media (max-width: 600px) { .mp-category-banner-text h1 { font-size: 1.5rem; } .mp-category-banner-img { max-width: 140px; } } /* =================================================== CONTACT US PAGE - visual redesign, form/logic untouched =================================================== */ .contact-hero-banner.bg-soft-grape { background: linear-gradient(120deg, #F1EAF9 0%, #F7F5FA 60%) !important; } .contact-us-section { background: #F9FAFC !important; } .mp-contact-card { border: none !important; border-radius: 20px !important; overflow: hidden; box-shadow: 0 10px 30px rgba(20, 24, 60, 0.06); } .mp-contact-icon { width: 46px; height: 46px; border-radius: 50%; background: #E3F5F1; color: #1B8A7A !important; display: flex; align-items: center; justify-content: center; font-size: 20px !important; flex-shrink: 0; } .mp-contact-item { padding: 14px 0; border-bottom: 1px solid #F1F2F9; } .mp-contact-item:last-of-type { border-bottom: none; } .mp-contact-item h5 { font-weight: 700; color: #12142B; } .mp-contact-item p, .mp-contact-item address { color: #4B5170; } .mp-contact-social .mp-social-icon { width: 38px; height: 38px; border-radius: 50%; background: #F1F2F9; color: #4B5170; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; transition: background 0.15s ease, color 0.15s ease; } .mp-contact-social .mp-social-icon:hover { background: #1B8A7A; color: #fff; } /* Trust badges */ .contact-trust-box { background: #fff; border: 1px solid #ECEEF7; border-radius: 16px; padding: 18px 10px; text-align: center; height: 100%; box-shadow: 0 2px 10px rgba(20, 24, 60, 0.04); } .contact-trust-box i { font-size: 26px; color: #1B8A7A; margin-bottom: 8px; display: block; } .contact-trust-text { font-size: 13px; font-weight: 600; color: #4B5170; } /* Contact form */ .mp-contact-form-wrap h2.display-4 { font-weight: 800; color: #12142B; } .mp-contact-form-wrap p.lead { color: #8A8FA8; } .mp-contact-form .form-control { border-radius: 12px; border: 1px solid #E2E4F2; } .mp-contact-form .form-control:focus { border-color: #1B8A7A; box-shadow: 0 0 0 3px rgba(27,138,122,0.12); } .mp-contact-submit { padding: 10px 34px; font-weight: 600; } /* FAQ CTA */ .contact-faq-cta p { color: #8A8FA8; font-size: 14px; } .contact-faq-btn { background: #E3F5F1; color: #1B8A7A; font-weight: 600; border: none; padding: 8px 20px; } .contact-faq-btn:hover { background: #1B8A7A; color: #fff; } /**/ /* Contact Us page design */ .contact-hero-banner { position: relative; background: linear-gradient(90deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important; min-height: 220px; display: flex; align-items: center; color: #fff; } .contact-hero-banner .breadcrumb-item a, .contact-hero-banner .breadcrumb-item.active { color: #ffffff !important; } .contact-hero-banner .breadcrumb-item + .breadcrumb-item::before { color: #ffffff; } .contact-hero-title { font-size: 2.6rem; font-weight: 700; color: #ffffff !important; margin-bottom: .5rem; } .contact-hero-sub { color: #ffd166 !important; max-width: 520px; font-weight: 500; } .contact-us-section { background: #f7f9fa; padding-top: 60px; padding-bottom: 20px; } .mp-contact-card { border: none; box-shadow: none; background: transparent; } .mp-contact-card .row { align-items: stretch; } /* Left: Get in touch */ .mp-contact-getintouch-title { font-weight: 700; color: #203a43; margin-bottom: 4px; } .mp-contact-getintouch-sub { color: #6b7b80; margin-bottom: 30px; } .mp-contact-info { background: transparent; padding: 0 20px 0 0; } .mp-contact-item { align-items: center; justify-content: center; margin-bottom: 0; flex-direction: column; text-align: center; height: 100%; padding: 20px 14px; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(15, 32, 39, 0.06); } .mp-contact-item > div:last-child { margin-left: 0 !important; margin-top: 12px; } .mp-contact-item .mp-contact-icon { margin: 0 auto !important; } .mp-contact-info-row { margin-top: 40px; } .mp-contact-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #2c5364 0%, #203a43 100%); display: flex; align-items: center; justify-content: center; color: #ffffff !important; font-size: 26px !important; line-height: 1 !important; margin: 0 !important; box-shadow: 0 0 0 6px #eef5f7, 0 6px 16px rgba(32, 58, 67, 0.25); transition: transform .2s ease; } .mp-contact-item:hover .mp-contact-icon { transform: translateY(-3px); } .mp-contact-icon i { font-size: 26px !important; color: #ffffff !important; } .mp-contact-item h5 { color: #203a43; font-weight: 700; } .mp-contact-item address, .mp-contact-item p { color: #5b6b70; margin-bottom: 0; text-align: center; font-style: normal; width: 100%; } .mp-social-icon { width: 38px; height: 38px; border-radius: 50%; background: #eef5f7; color: #2c5364; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background .2s ease, color .2s ease; } .mp-social-icon:hover { background: #2c5364; color: #fff; } .mp-contact-map-col, .mp-contact-form-col { display: flex; } .mp-contact-map { min-height: 480px; width: 100%; display: flex; flex-direction: column; } .mp-contact-map iframe { width: 100%; flex: 1 1 auto; min-height: 480px; border: 0; border-radius: 12px; } .mp-contact-form-card { width: 100%; display: flex; flex-direction: column; justify-content: center; } /* Right: Send a message card */ .mp-contact-form-card { background: #fff; border-radius: 14px; padding: 40px 34px; box-shadow: 0 6px 24px rgba(15, 32, 39, 0.08); } .mp-contact-form-title { font-weight: 700; color: #203a43; text-align: center; margin-bottom: 6px; } .mp-contact-form-sub { text-align: center; color: #6b7b80; margin-bottom: 26px; } .mp-contact-form .form-control { border-radius: 8px; } .mp-contact-submit { background: #2c5364; border-color: #2c5364; color: #fff; padding: 10px 34px; transition: background .2s ease; } .mp-contact-submit:hover { background: #203a43; border-color: #203a43; color: #fff; } /* Trust badges */ .contact-trust-row { margin-top: 50px; } .contact-trust-box { background: #fff; border-radius: 12px; text-align: center; padding: 22px 10px; box-shadow: 0 2px 10px rgba(15, 32, 39, 0.06); } .contact-trust-box i { font-size: 28px; color: #2c5364; margin-bottom: 8px; display: block; } .contact-trust-text { font-weight: 600; color: #203a43; font-size: 14px; } /* FAQ CTA */ .contact-faq-cta p { color: #6b7b80; } .contact-faq-btn { background: #eef5f7; color: #2c5364; font-weight: 600; border: none; padding: 8px 22px; transition: background .2s ease, color .2s ease; } .contact-faq-btn:hover { background: #2c5364; color: #fff; } /**/ .about-hero-banner { position: relative; background: linear-gradient(90deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important; min-height: 220px; display: flex; align-items: center; color: #fff; } .about-hero-banner .breadcrumb-item a, .about-hero-banner .breadcrumb-item.active { color: #ffffff !important; } .about-hero-banner .breadcrumb-item + .breadcrumb-item::before { color: #ffffff; } .about-hero-title { font-size: 2.6rem; font-weight: 700; color: #ffffff !important; margin-bottom: .5rem; } .about-hero-sub { color: #ffd166 !important; max-width: 560px; font-weight: 500; } .about-us-section { background: #f7f9fa; padding-top: 60px; padding-bottom: 60px; } /* Content card wrapping the dynamic $about_us HTML */ .about-content-card { background: #fff; border-radius: 14px; padding: 46px 50px; box-shadow: 0 6px 24px rgba(15, 32, 39, 0.08); max-width: 900px; margin: 0 auto; } /* Normalize any inline colors (e.g. blue/orange per-word) that may come from the stored $about_us HTML, so the whole block reads in one consistent palette */ .about-content-card, .about-content-card * { color: #445459 !important; font-weight: 400 !important; } .about-content-card h1, .about-content-card h2, .about-content-card h3, .about-content-card h4, .about-content-card h5, .about-content-card strong, .about-content-card b { color: #203a43 !important; font-weight: 700 !important; } .about-content-card a { color: #2c5364 !important; font-weight: 600 !important; text-decoration: underline; } .about-content-card h1 { font-weight: 700; color: #203a43; margin-bottom: 24px; } .about-content-card p { line-height: 1.8; margin-bottom: 18px; } .about-content-card ul, .about-content-card ol { margin-bottom: 24px; padding-left: 0; list-style: none; } .about-content-card li { line-height: 1.7; position: relative; padding-left: 30px; margin-bottom: 10px; } .about-content-card li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #eef5f7; color: #2c5364 !important; font-size: 12px; font-weight: 700 !important; display: flex; align-items: center; justify-content: center; } /* Stats row */ .about-stats-row { max-width: 900px; margin: 0 auto 50px; } .about-stat-box { background: #fff; border-radius: 12px; text-align: center; padding: 28px 10px; box-shadow: 0 2px 10px rgba(15, 32, 39, 0.06); } .about-stat-number { font-size: 2rem; font-weight: 700; color: #2c5364; margin-bottom: 4px; } .about-stat-label { color: #6b7b80; font-weight: 600; font-size: 14px; } /* Why choose us */ .about-why-title { text-align: center; font-weight: 700; color: #203a43; margin-top: 60px; margin-bottom: 6px; } .about-why-sub { text-align: center; color: #6b7b80; margin-bottom: 34px; } .about-why-box { background: #fff; border-radius: 12px; text-align: center; padding: 28px 16px; height: 100%; box-shadow: 0 2px 10px rgba(15, 32, 39, 0.06); } .about-why-icon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px; background: linear-gradient(135deg, #2c5364 0%, #203a43 100%); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; box-shadow: 0 0 0 6px #eef5f7, 0 6px 16px rgba(32, 58, 67, 0.25); } .about-why-box h5 { color: #203a43; font-weight: 700; margin-bottom: 6px; } .about-why-box p { color: #6b7b80; font-size: 14px; margin-bottom: 0; } /* CTA */ .about-cta { text-align: center; margin-top: 60px; } .about-cta h3 { font-weight: 700; color: #203a43; margin-bottom: 8px; } .about-cta p { color: #6b7b80; margin-bottom: 22px; } .about-cta-btn { background: #2c5364; border-color: #2c5364; color: #fff !important; padding: 10px 34px; font-weight: 600; transition: background .2s ease; } .about-cta-btn:hover { background: #203a43; border-color: #203a43; color: #fff !important; } .about-cta-btn-outline { background: transparent; border: 2px solid #2c5364; color: #2c5364 !important; padding: 8px 32px; font-weight: 600; transition: background .2s ease, color .2s ease; } .about-cta-btn-outline:hover { background: #2c5364; color: #fff !important; } /**/ .seller-details-hero { position: relative; background: linear-gradient(90deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important; min-height: 160px; display: flex; align-items: center; color: #fff; } .seller-details-hero .breadcrumb-item a, .seller-details-hero .breadcrumb-item.active, .seller-details-hero .breadcrumb-item.active a { color: #ffffff !important; } .seller-details-hero .breadcrumb-item + .breadcrumb-item::before { color: #ffffff; } .listing-page { padding-top: 40px; } /* Seller header card */ .mp-seller-header-card { border: none; border-radius: 16px; box-shadow: 0 6px 24px rgba(15, 32, 39, 0.08); } .mp-seller-header-icon { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, #2c5364 0%, #203a43 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mp-seller-header-icon i { color: #fff !important; font-size: 42px !important; } .mp-seller-header-card h1 { color: #203a43; font-weight: 700; } .mp-seller-stats { list-style: none; margin: 8px 0 0; } .mp-seller-stats li { background: #eef5f7; border-radius: 20px; padding: 6px 16px; font-weight: 600; color: #445459; font-size: 14px; } .mp-seller-avatar-badge img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid #eef5f7; } /* About seller card */ .mp-seller-about-card { border: none; border-radius: 16px; box-shadow: 0 4px 16px rgba(15, 32, 39, 0.06); } .mp-seller-about-card h3 { color: #203a43; font-weight: 700; margin-bottom: 14px; } .mp-seller-about-card p { color: #5b6b70; line-height: 1.8; } /* Products card */ .mp-seller-products-card { border: none; border-radius: 16px; box-shadow: 0 4px 16px rgba(15, 32, 39, 0.06); } .mp-seller-products-card h2 { color: #203a43; font-weight: 700; } /* */ .sellers-hero-banner { position: relative; background: linear-gradient(90deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important; min-height: 200px; display: flex; align-items: center; color: #fff; } .sellers-hero-banner .breadcrumb-item a, .sellers-hero-banner .breadcrumb-item.active { color: #ffffff !important; } .sellers-hero-banner .breadcrumb-item + .breadcrumb-item::before { color: #ffffff; } .mp-seller-page-title h1 { font-size: 2.4rem; font-weight: 700; color: #ffffff !important; margin-bottom: 0; } .listing-page { padding-top: 40px; } /* Toolbar left as original theme styling — no overrides */ /* Grid seller card */ .mp-seller-card { border: none; border-radius: 14px; box-shadow: 0 4px 16px rgba(15, 32, 39, 0.06); padding: 30px 20px; transition: transform .2s ease, box-shadow .2s ease; } .mp-seller-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(15, 32, 39, 0.12); } .mp-seller-avatar-wrap { position: relative; display: inline-block; margin: 0 auto; } .mp-seller-avatar-wrap img.mp-seller-avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 4px solid #eef5f7; } .mp-seller-verified { position: absolute; bottom: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; background: #2c5364; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; border: 2px solid #fff; } .mp-seller-card .title a { color: #203a43 !important; font-weight: 700; } .mp-seller-card .price { color: #6b7b80; } .mp-seller-rating { margin-top: 6px; } .mp-seller-cta { background: #2c5364; border-color: #2c5364; color: #fff !important; font-weight: 600; padding: 6px 22px; transition: background .2s ease; } .mp-seller-cta:hover { background: #203a43; border-color: #203a43; color: #fff !important; } /* List seller card */ .mp-seller-list-card { border: none; border-radius: 14px; box-shadow: 0 4px 16px rgba(15, 32, 39, 0.06); padding: 18px; } .mp-seller-list-avatar img { width: 100%; max-width: 140px; height: 140px; border-radius: 12px; object-fit: cover; } .mp-seller-badge { display: inline-block; background: #eef5f7; color: #2c5364; font-size: 12px; font-weight: 700; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; margin-bottom: 6px; } .mp-seller-list-card .list-product-title a { color: #203a43 !important; font-weight: 700; } .mp-seller-list-card .list-product-desc { color: #6b7b80; } .mp-seller-list-card .list-view-price { color: #2c5364; font-weight: 600; } .mp-mega-dropdown .mp-mega-menu { min-width: 480px; max-width: 640px; padding: 20px; border-radius: 12px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.12); } .mp-mega-menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .mp-mega-menu-item { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; padding: 10px 6px; border-radius: 10px; transition: background 0.2s ease; } .mp-mega-menu-item:hover { background: #f5f5f5; } .mp-mega-menu-img { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #f0f0f0; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .mp-mega-menu-img img { width: 100%; height: 100%; object-fit: cover; } .mp-mega-menu-img i { font-size: 24px; color: #999; } .mp-mega-menu-label { font-size: 13px; font-weight: 500; color: #333; } @media (max-width: 768px) { .mp-mega-menu-grid { grid-template-columns: repeat(2, 1fr); } .mp-mega-menu { min-width: unset; width: 100%; } } .mp-mega-dropdown .mp-mega-menu { min-width: 680px; max-width: 780px; padding: 18px; border-radius: 12px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.15); } .mp-mega-menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .mp-mega-card { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 3/4; text-decoration: none; } .mp-mega-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .mp-mega-card:hover img { transform: scale(1.06); } .mp-mega-card-fallback { width: 100%; height: 100%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; } .mp-mega-card-fallback i { font-size: 28px; color: #aaa; } .mp-mega-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: #fff; } .mp-mega-card-overlay h6 { margin: 0; font-size: 12px; font-weight: 700; color: #fff; } .mp-mega-card-overlay span { font-size: 10px; color: #eee; } @media (max-width: 768px) { .mp-mega-menu-grid { grid-template-columns: repeat(2, 1fr); } .mp-mega-menu { min-width: unset; width: 100%; } } .mp-category-card { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; text-decoration: none; } .mp-category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .mp-category-card:hover img { transform: scale(1.05); } .mp-category-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 16px; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent); color: #fff; } .mp-category-card-overlay h5 { margin: 0 0 4px; font-weight: 700; color: #fff; } .mp-category-card-overlay span { font-size: 14px; color: #f0f0f0; } .mp-category-banner-wrap { padding: 0; } .mp-category-banner { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 0; } .mp-category-banner-text h2 { font-size: 24px; font-weight: 700; } .mp-category-banner-text p { font-size: 14px; color: #666; } .mp-category-card { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; text-decoration: none; background: #f2f2f2; } .mp-category-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .mp-category-card:hover img { transform: scale(1.05); } .mp-category-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 16px; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent); color: #fff; } .mp-category-card-overlay h5 { margin: 0 0 4px; font-weight: 700; color: #fff; } .mp-category-card-overlay span { font-size: 14px; color: #f0f0f0; display: inline-flex; align-items: center; gap: 4px; } .mp-arrow { font-size: 16px; transition: transform 0.2s ease; } .mp-category-card:hover .mp-arrow { transform: translateX(4px); } footer .angled.bg-navy { padding-top: 30px !important; padding-bottom: 10px !important; } footer .widget { margin-bottom: 0; } footer .widget-title { font-size: 15px !important; margin-bottom: 10px !important; } footer .list-unstyled li { margin-bottom: 6px; font-size: 13px; } footer .footer-logo-footer img { max-height: 32px; width: auto; margin-bottom: 10px; } footer p { font-size: 13px; margin-bottom: 8px; } footer .single-cta { margin-bottom: 10px; } footer .social.social-white { margin-top: 8px; } footer .social.social-white a { width: 30px; height: 30px; font-size: 14px; } footer .row.gy-6 { row-gap: 20px !important; } footer .widget { margin-bottom: 0 !important; } footer .col-md-4, footer .col-md-12, footer .col-lg-3 { margin-bottom: 0 !important; } footer .row.gy-6.gy-lg-0 { row-gap: 12px !important; } footer .container.pb-4.pt-4 { padding-top: 15px !important; padding-bottom: 15px !important; } footer h4.widget-title.mb-3 { margin-bottom: 6px !important; } footer.text-inverse.mt-10 { margin-top: 20px !important; } footer .angled.bg-navy.pt-1.upper-end.wrapper { padding-top: 20px !important; } footer .container.pb-4.pt-4 { padding-top: 25px !important; padding-bottom: 15px !important; } footer .row.gy-6.gy-lg-0 { row-gap: 20px !important; } footer .widget { margin-bottom: 0 !important; } footer .footer-logo-footer img { max-height: 34px !important; width: auto !important; margin-bottom: 10px !important; } footer .single-cta { margin-bottom: 10px !important; } footer p { font-size: 15px !important; margin-bottom: 8px !important; line-height: 1.6 !important; } footer h4.widget-title { font-size: 17px !important; margin-bottom: 12px !important; } footer .list-unstyled li { margin-bottom: 8px !important; line-height: 1.5 !important; } footer .list-unstyled li a { font-size: 15px !important; } footer nav.social.social-white { margin-top: 10px !important; } footer nav.social.social-white a { width: 32px !important; height: 32px !important; font-size: 15px !important; } .mp-footer-links-2col { display: flex; gap: 24px; } .mp-footer-links-2col ul { flex: 1; } @media (max-width: 767px) { .mp-footer-links-2col { gap: 16px; } } .mp-footer-links-title { text-align: center; } .mp-footer-links-narrow { max-width: 260px; margin: 0 auto; display: flex; gap: 16px; } .mp-footer-links-narrow ul { flex: 1; font-size: 13px; } .mp-footer-links-narrow li { margin-bottom: 6px; } @media (max-width: 767px) { .mp-footer-links-narrow { max-width: 100%; } } .mp-footer-links-title { text-align: center; } .mp-footer-links-narrow { max-width: 260px; margin: 0 auto; display: flex; gap: 16px; } .mp-footer-links-narrow ul { flex: 1; font-size: 13px; } .mp-footer-links-narrow li { margin-bottom: 6px; } .mp-useful-links-heading { text-align: center; width: 100%; } footer .container.pb-4.pt-4 { padding-top: 15px !important; padding-bottom: 10px !important; } footer .angled.bg-navy.pt-1.upper-end.wrapper { padding-top: 10px !important; } footer .row.gy-6.gy-lg-0 { display: flex; flex-wrap: wrap; } footer .row.gy-6.gy-lg-0 > [class*="col-"] { padding-left: 20px !important; padding-right: 20px !important; } @media (min-width: 992px) { footer .col-lg-3 { flex: 0 0 25% !important; max-width: 25% !important; } } .mp-footer-links-narrow { max-width: 100% !important; justify-content: flex-start; } footer .row.gy-6.gy-lg-0 { display: flex !important; align-items: flex-start !important; flex-wrap: wrap; gap: 0; } footer .row.gy-6.gy-lg-0 > [class*="col-"] { flex: 1 1 0 !important; max-width: none !important; padding-left: 16px !important; padding-right: 16px !important; } .mp-useful-links-heading { text-align: center; } .mp-footer-links-narrow { max-width: 100% !important; display: flex; gap: 20px; } .mp-footer-links-narrow ul { flex: 1; } @media (max-width: 767px) { footer .row.gy-6.gy-lg-0 { flex-wrap: wrap; } footer .row.gy-6.gy-lg-0 > [class*="col-"] { flex: 1 1 45% !important; } } .mp-new-footer { background: #16211D; color: #C9D6D1; padding: 40px 0 0; margin-top: 40px; } .mp-footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 0 24px 30px; } .mp-footer-logo-row img { max-height: 32px; width: auto; margin-bottom: 12px; } .mp-footer-brand p { font-size: 14px; line-height: 1.6; color: #9fb0a8; margin-bottom: 16px; } .mp-footer-social { display: flex; gap: 10px; } .mp-footer-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-size: 14px; } .mp-footer-col h4 { color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 16px; } .mp-footer-col ul { list-style: none; padding: 0; margin: 0; } .mp-footer-col ul li { margin-bottom: 10px; } .mp-footer-col ul li a { color: #C9D6D1; text-decoration: none; font-size: 14px; } .mp-footer-col ul li a:hover { color: #45c4a0; } .mp-footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; } .mp-footer-contact-list i { color: #45c4a0; font-size: 16px; margin-top: 2px; } .mp-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #9fb0a8; } .mp-footer-payment { display: flex; align-items: center; gap: 8px; } @media (max-width: 900px) { .mp-footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .mp-footer-top { grid-template-columns: 1fr; } .mp-footer-bottom { flex-direction: column; gap: 8px; text-align: center; } } .mp-payment-badge { display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; background: #fff; } .mp-payment-visa { color: #1a1f71; } .mp-payment-mc { color: #eb001b; background: #fff; letter-spacing: -3px; } .mp-payment-rupay { color: #097e2e; } .mp-payment-upi { color: #ec4c94; } .mp-payment-cod { background: #16a34a; color: #fff; } .mp-category-strip { background: #f8f8f8; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 8px 0; } .mp-category-all { position: relative; margin-right: 20px; flex-shrink: 0; } .mp-category-all-btn { background: none; border: none; font-size: 14px; font-weight: 600; color: #222; display: flex; align-items: center; gap: 6px; padding: 6px 0; cursor: pointer; } .mp-category-all-menu { min-width: 200px; max-height: 400px; overflow-y: auto; padding: 8px 0; } .mp-category-all-menu .dropdown-item { font-size: 14px; padding: 8px 16px; } .mp-category-links { display: flex; gap: 20px; overflow-x: auto; white-space: nowrap; } .mp-category-links a { font-size: 14px; color: #333; text-decoration: none; } .mp-category-links a:hover { color: #45c4a0; } .mp-category-links::-webkit-scrollbar { display: none; } @media (max-width: 768px) { .mp-category-strip { display: none; } } .mp-search-wrap { flex: 1; max-width: 480px; margin: 0 20px; } .mp-search-bar { display: flex; align-items: stretch; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; height: 38px; width: 100%; } .mp-search-category { flex-shrink: 0; } .mp-search-category button { height: 100%; background: #f2f2f2; border: none; border-right: 1px solid #ddd; padding: 0 12px; font-size: 13px; color: #333; cursor: pointer; } .mp-search-category .dropdown-menu { max-height: 300px; overflow-y: auto; font-size: 13px; } .mp-search-input { flex: 1; border: none; outline: none; padding: 0 12px; font-size: 14px; } .mp-search-btn { flex-shrink: 0; background: #f2f2f2; border: none; border-left: 1px solid #ddd; padding: 0 16px; cursor: pointer; color: #333; } .mp-search-btn:hover { background: #e5e5e5; } .mp-search-bar, .navbar-other, .navbar .container { overflow: visible !important; } .mp-search-category .dropdown-menu { z-index: 1050; } .mp-search-bar select.search_product_desktop { width: 340px; height: 42px; border: none; outline: none; padding: 0 12px; font-size: 14px; background: #fff; appearance: none; -webkit-appearance: none; } .mp-search-bar { display: flex; align-items: center; border: 1px solid var(--mp-border, #DCE6E2); border-radius: 999px; overflow: hidden; background: #fff; } .mp-search-category .dropdown-toggle { border: none; background: transparent; padding: 10px 14px; white-space: nowrap; } .mp-search-btn { border: none; background: transparent; padding: 0 14px; height: 42px; } .mp-amazon-search { display: flex; align-items: stretch; height: 40px; border-radius: 6px; overflow: visible; width: 420px; position: relative; border: 1px solid #999; } .mp-search-category .dropdown-toggle { background: #f3f3f3; border: none; border-radius: 4px 0 0 4px; padding: 0 12px; height: 40px; color: #333; font-size: 13px; white-space: nowrap; } .mp-amazon-search-input-wrap { flex: 1; position: relative; } .mp-amazon-search-input { width: 100%; height: 40px; border: none; padding: 0 12px; font-size: 14px; outline: none; } .mp-amazon-search-btn { background: #FF8A3D; border: none; width: 45px; border-radius: 0 4px 4px 0; color: #131921; font-size: 16px; } .mp-amazon-search-btn:hover { background: #E06F23; } .mp-amazon-search-results { display: none; position: absolute; top: 44px; left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 6px; max-height: 400px; overflow-y: auto; z-index: 2000; box-shadow: 0 8px 20px rgba(0,0,0,0.15); } .mp-search-result-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-decoration: none; color: #333; border-bottom: 1px solid #f0f0f0; } .mp-search-result-item:hover { background: #f7f7f7; } .mp-search-result-item img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; } .mp-search-no-result { padding: 12px; text-align: center; color: #999; font-size: 13px; } /* =================================================== FAQ PAGE - visual-only redesign PHP loop, accordion IDs, data-bs-target/parent untouched =================================================== */ .faq-hero-banner.bg-soft-grape { background: linear-gradient(120deg, #F1EAF9 0%, #EEF0FD 100%) !important; } .faq-hero-banner .breadcrumb-item a { color: #4C5FE0; font-weight: 600; } .faq-hero-banner .breadcrumb-item.active { color: #8A8FA8 !important; } .faq-hero-banner .breadcrumb-item + .breadcrumb-item::before { color: #B3B7CC; } .faq-section { background: #F6F7FB !important; } .faq-card.bg-soft-navy { background: #fff !important; border-radius: 22px !important; box-shadow: 0 10px 34px rgba(20, 24, 60, 0.08); border: 1px solid #ECEEF7; } .faq_image .faq-img { max-width: 100%; filter: drop-shadow(0 12px 24px rgba(20,24,60,0.10)); } /* Accordion */ .faq-accordion .accordion-item { border: none; border-radius: 14px !important; margin-bottom: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(20, 24, 60, 0.05); background: #F9FAFC; } .faq-accordion .card-header { background: transparent; border: none; padding: 0; } .faq-accordion .card-header button { width: 100%; text-align: left; background: transparent; border: none; padding: 16px 20px; font-weight: 700; color: #12142B; font-size: 15px; position: relative; cursor: pointer; } .faq-accordion .card-header button::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: #4C5FE0; transition: transform 0.2s ease; } .faq-accordion .card-header button:not(.collapsed)::after { content: "\2212"; } .faq-accordion .accordion-collapse .card-body { padding: 0 20px 18px 20px; color: #4B5170; font-size: 14px; line-height: 1.6; background: transparent; } .faq-accordion .accordion-item:has(.accordion-collapse.show) { background: #EEF0FD; box-shadow: 0 6px 18px rgba(76,95,224,0.12); } .add-faqs-form h1.h2 { color: #4B5170; font-weight: 700; } .mp-category-links { display: flex; gap: 16px; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; } .main-content { margin-top: 40px; } .default_heading { margin-bottom: 10px; } .featured-section-title { margin-top: 30px !important; margin-bottom: 25px !important; } .featured-section-title h3.section-title { font-size: 1.6rem; } /* Product cards-ku idaiyila space — gap property use pannirukken, idhu reliable */ .grid.grid-view.shop .row { display: flex; flex-wrap: wrap; gap: 20px 16px; } .grid.grid-view.shop .row > .project.item { flex: 0 0 auto; width: calc(50% - 8px); } @media (min-width: 1200px) { .grid.grid-view.shop .row > .project.item { width: calc(25% - 12px); } } .grid.grid-view.shop .row .project.item figure.rounded { border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(15, 32, 39, 0.06); }