/* ===================================================================== * Multi-Page E-commerce Styles — v2 (color-driven, polished, responsive) * Color variables are injected in the by includes/theme.php * (build_color_css_vars). Override defaults here if needed: * ===================================================================== */ /* ===== Page-builder (GrapesJS) content: keep full-width designs intact ===== No width constraint (sliders / full-width background sections stay full width as before). Only a mobile-safety rule so a multi-column row stacks instead of breaking the layout on small screens. */ /* img safety — but NOT product-card images (they fill their own aspect box). */ .mp-page-body img:not([class*="mp-card"]):not([class*="ps-"]) { max-width: 100%; height: auto; } @media (max-width: 768px) { .mp-page-body .gjs-row { display: block !important; } .mp-page-body .gjs-cell { display: block !important; width: 100% !important; height: auto !important; } } /* ===================================================================== * Self-hosted font — Mulish (body + headings). * SIL Open Font License (OFL). A clean geometric sans in the same spirit * as Averta/AvertaPE (the Hugo Boss face), which is proprietary and can't * be embedded without a license. Variable file → one woff2 covers 200-900. * Files in /assets/fonts/. Bengali & other scripts fall back gracefully. * ===================================================================== */ @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('../fonts/mulish-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('../fonts/mulish-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Mulish'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('../fonts/mulish-latin-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Mulish'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('../fonts/mulish-latin-ext-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Site-wide font stack. Bengali/other scripts fall back gracefully. * To switch to real AvertaPE later: add its @font-face above and put * 'AvertaPE' first in both variables below. */ :root { --mp-font-body: 'Mulish', 'Hind Siliguri', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mp-font-heading: 'Mulish', 'Hind Siliguri', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } :root { --mp-primary: #111111; --mp-primary-dark: #000000; --mp-secondary: #6c757d; --mp-accent: #ffc107; --mp-success: #198754; --mp-danger: #dc3545; --mp-body-bg: #ffffff; --mp-body-text: #212529; --mp-header-bg: #ffffff; --mp-header-text: #212529; --mp-topbar-bg: #212529; --mp-topbar-text: #ffffff; --mp-footer-bg: #1a1d23; --mp-footer-text: #adb5bd; --mp-card-bg: #ffffff; --mp-card-border: #e9ecef; } body { background: var(--mp-body-bg); color: var(--mp-body-text); font-family: var(--mp-font-body); } h1, h2, h3, h4, h5, h6, .mp-heading-serif { font-family: var(--mp-font-heading); letter-spacing: .2px; } .site-main { min-height: 60vh; } .btn-primary { background: var(--mp-primary); border-color: var(--mp-primary); } .btn-primary:hover { background: var(--mp-primary-dark); border-color: var(--mp-primary-dark); } a { color: var(--mp-primary); } a:hover { color: var(--mp-primary-dark); } /* ===== Header ===== */ .mp-header { background: var(--mp-header-bg); color: var(--mp-header-text); box-shadow: 0 1px 6px rgba(0,0,0,.06); position: sticky; top: 0; z-index: 1020; } .mp-topbar { background: var(--mp-topbar-bg); color: var(--mp-topbar-text); padding: 7px 0; font-size: 13px; } .mp-topbar a { color: var(--mp-topbar-text); text-decoration: none; } .mp-topbar a:hover { color: var(--mp-accent); } .mp-header-main { background: var(--mp-header-bg); color: var(--mp-header-text); } .mp-brand-text { color: var(--mp-primary); } .mp-logo img { display: block; } .mp-nav-inline { gap: 1.25rem; } .mp-nav-link { color: var(--mp-header-text); text-decoration: none; font-weight: 500; padding: 6px 4px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .mp-nav-link:hover { color: var(--mp-primary); border-bottom-color: var(--mp-primary); } .mp-icon-btn { color: var(--mp-header-text); text-decoration: none; padding: 6px 10px; border-radius: 6px; transition: background .15s; } .mp-icon-btn:hover { background: rgba(0,0,0,.05); color: var(--mp-primary); } .mp-search-form { position: relative; } .mp-search-results { position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.15); border-radius: 8px; max-height: 480px; overflow-y: auto; z-index: 1030; display: none; margin-top: 6px; } .mp-search-results.show { display: block; } .mp-search-results .item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f1f3f5; text-decoration: none; color: #212529; align-items: center; } .mp-search-results .item:hover { background: #f8f9fa; } .mp-search-results .item img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .mp-search-results .item .name { font-weight: 500; color: #212529; } .mp-search-results .item .price { color: var(--mp-primary); font-weight: 600; font-size: 14px; } .mp-search-results .item .loading, .mp-search-results .item .empty { padding: 14px; text-align: center; color: #6c757d; } .mp-cart-btn { color: var(--mp-header-text); text-decoration: none; padding: 6px 10px; border-radius: 6px; } .mp-cart-btn:hover { background: rgba(0,0,0,.05); color: var(--mp-primary); } .mp-cart-count { position: absolute; top: -2px; right: -6px; background: var(--mp-primary); color: #fff; border-radius: 50%; min-width: 20px; height: 20px; font-size: 11px; line-height: 20px; text-align: center; padding: 0 4px; font-weight: 700; } .mp-nav-classic { background: #f8f9fa; border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef; } .mp-nav-classic .nav-link { color: var(--mp-header-text); font-weight: 500; padding: 10px 18px; text-transform: uppercase; font-size: 13px; letter-spacing: .5px; } .mp-nav-classic .nav-link:hover { color: var(--mp-primary); } /* ===== Footer ===== */ .mp-footer { color: var(--mp-footer-text); } .mp-footer-dark { background: var(--mp-footer-bg); } .mp-footer-dark h5, .mp-footer-dark h6 { color: #fff; } .mp-footer-dark a { color: var(--mp-footer-text); text-decoration: none; } .mp-footer-dark a:hover { color: #fff; } .mp-footer-dark .mp-footer-bottom { background: rgba(0,0,0,.3); } .mp-footer-dark .mp-footer-newsletter { background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); } .mp-footer-dark .mp-footer-newsletter h4 { color: #fff; font-weight: 600; } .mp-footer-dark .mp-footer-contact a { color: var(--mp-footer-text); } .mp-footer-dark .mp-footer-contact a:hover { color: #fff; } .mp-footer-newsletter .form-control { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; } .mp-footer-newsletter .form-control::placeholder { color: rgba(255,255,255,.5); } .mp-footer-newsletter .form-control:focus { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; border-color: var(--mp-primary); } .mp-newsletter-msg { color: var(--mp-accent, #ffc107); } .mp-footer-pay i { font-size: 18px; } .mp-footer-pay span { font-size: 12px; opacity: .85; } .mp-footer-light { background: #f8f9fa; color: #495057; border-top: 1px solid #e9ecef; } .mp-footer-light h4 { color: #212529; } .mp-footer-light a { color: #495057; text-decoration: none; } .mp-footer-light a:hover { color: var(--mp-primary); } .mp-footer-light .mp-footer-bottom { border-top: 1px solid #e9ecef; background: #ffffff; } .mp-social a { display: inline-block; margin-right: 12px; font-size: 20px; } /* ===== Page header (category/tag/etc.) ===== */ .mp-page-header { background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%); padding: 36px 0; margin-bottom: 30px; border-bottom: 1px solid #e9ecef; } .mp-page-header h1 { margin-bottom: 6px; font-weight: 700; } .mp-page-header .crumbs { font-size: 13px; color: #6c757d; margin-bottom: 6px; } .mp-page-header .crumbs a { color: #6c757d; text-decoration: none; } .mp-page-header .crumbs a:hover { color: var(--mp-primary); } .mp-category-banner { background-size: cover; background-position: center; min-height: 200px; border-radius: 8px; margin-bottom: 24px; display: flex; align-items: end; padding: 24px; color: #fff; text-shadow: 0px 0px 40px rgb(0 0 0); } /* ===== Product Grid (shop/category/tag/search/brand) ===== Layout: 2 cols mobile → 3 cols tablet → 3 cols desktop (user preference). */ .mp-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 768px) { .mp-product-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } } @media (min-width: 992px) { .mp-product-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .mp-product-card { background: var(--mp-card-bg); border: 1px solid var(--mp-card-border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s, border-color .25s; position: relative; } .mp-product-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.10); transform: translateY(-3px); border-color: var(--mp-primary); } .mp-product-card .img-wrap { aspect-ratio: 1/1; overflow: hidden; background: #f8f9fa; position: relative; } .mp-product-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; } .mp-product-card:hover .img-wrap img { transform: scale(1.08); } .mp-product-card .badge-sale { position: absolute; top: 8px; left: 8px; background: var(--mp-danger); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; z-index: 2; } .mp-product-card .body { padding: 12px 8px 14px; display: flex; flex-direction: column; flex-grow: 1; } .mp-product-card .name { font-size: 14px; font-weight: 500; color: var(--mp-body-text); text-decoration: none; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .mp-product-card .name:hover { color: var(--mp-primary); } .mp-product-card .prices { margin-bottom: 10px; min-height: 22px; } .mp-product-card .price-sale { color: var(--mp-danger); font-weight: 700; font-size: 16px; } .mp-product-card .price-regular { color: #6c757d; text-decoration: line-through; font-size: 13px; margin-left: 6px; } .mp-product-card .add-btn { margin-top: auto; } .mp-product-card .mp-card-actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .mp-product-card .mp-card-actions .add-btn, .mp-product-card .mp-card-actions .order-btn { margin-top: 0; padding: 6px 2px; /* tiny side padding so Bengali text fits */ font-size: 12px; line-height: 1.25; text-align: center; white-space: normal; /* allow wrap — Bengali is wider than English */ overflow-wrap: break-word; min-width: 0; /* let grid track shrink properly */ } /* Tiny phones (<400px): card width ≈ 175px → side-by-side is too tight, stack buttons vertically so each one gets full width. */ @media (max-width: 400px) { .mp-product-card .mp-card-actions { grid-template-columns: 1fr; gap: 4px; } .mp-product-card .mp-card-actions .add-btn, .mp-product-card .mp-card-actions .order-btn { padding: 7px 6px; font-size: 12.5px; } } /* ===== Short Description (single-product page, above variations) ===== */ .mp-short-desc { background: #fff8e6; border-left: 4px solid var(--mp-primary, #111111); padding: 12px 16px; border-radius: 6px; color: #495057; font-size: 15px; line-height: 1.55; } .mp-short-desc p { margin: 0 0 8px; } .mp-short-desc p:last-child { margin-bottom: 0; } .mp-short-desc ul, .mp-short-desc ol { margin: 0 0 8px 22px; padding: 0; } /* ===== Related Products grid (single-product page) — 5×3 desktop, 2×5 mobile ===== */ .mp-related-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px; } @media (min-width: 992px) { .mp-related-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 16px; } } /* ===== Single Product Page ===== */ .mp-product-gallery .main-image { width: 100%; border-radius: 10px; overflow: hidden; background: #f8f9fa; border: 1px solid #e9ecef; } .mp-product-gallery .main-image img { width: 100%; height: auto; max-height: 520px; object-fit: contain; display: block; } .mp-product-gallery .thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .mp-product-gallery .thumb { width: 70px; height: 70px; border: 2px solid #dee2e6; border-radius: 8px; cursor: pointer; overflow: hidden; transition: border-color .15s; } .mp-product-gallery .thumb img { width: 100%; height: 100%; object-fit: cover; } .mp-product-gallery .thumb.active, .mp-product-gallery .thumb:hover { border-color: var(--mp-primary); } .mp-product-info h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; line-height: 1.25; } .mp-product-info .sku { color: #6c757d; font-size: 13px; } .mp-product-info .price-block { display: flex; align-items: baseline; gap: 14px; margin: 18px 0; } .mp-product-info .price-sale { font-size: 34px; font-weight: 700; color: var(--mp-danger); } .mp-product-info .price-regular { font-size: 18px; color: #6c757d; text-decoration: line-through; } .mp-product-info .price-single { font-size: 34px; font-weight: 700; color: var(--mp-primary); } .mp-product-info .stock-badge { font-size: 13px; padding: 6px 12px; } .mp-product-info .product-description { line-height: 1.7; color: #495057; } .mp-variation-group { margin: 16px 0; } .mp-variation-group label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; color: #495057; } .mp-variation-group .options { display: flex; gap: 8px; flex-wrap: wrap; } .mp-variation-group .option { padding: 8px 16px; border: 2px solid #dee2e6; border-radius: 8px; cursor: pointer; background: #fff; font-size: 14px; transition: all .15s; } .mp-variation-group .option:hover { border-color: var(--mp-primary); } .mp-variation-group .option.selected { border-color: var(--mp-primary); background: rgba(0,0,0,.08); color: var(--mp-primary); font-weight: 600; } .mp-variation-group .option.swatch { width: 36px; height: 36px; padding: 0; border-radius: 50%; } .mp-qty-input { display: inline-flex; align-items: center; border: 1px solid #ced4da; border-radius: 8px; overflow: hidden; } .mp-qty-input button { background: #f8f9fa; border: none; padding: 8px 14px; cursor: pointer; font-size: 16px; transition: background .15s; } .mp-qty-input button:hover { background: #e9ecef; } .mp-qty-input input { width: 60px; border: 0; text-align: center; padding: 8px; font-weight: 600; } .mp-action-row { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; } .mp-action-row .mp-qty-input { flex: 0 0 auto; } .mp-action-row > .btn { padding: 12px 24px; font-weight: 600; font-size: 15px; } /* Variation-required inline error message + scroll-into-view flash */ .mp-var-error { margin-top: 10px; padding: 8px 12px; background: #fdecea; color: #c91432; border: 1px solid #f5b8c0; border-radius: 6px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .mp-var-error i { font-size: 16px; } .mp-var-error-flash { animation: mp-var-flash 1.2s ease 0s 2; border-radius: 8px; } @keyframes mp-var-flash { 0%,100% { box-shadow: 0 0 0 0 rgba(220,53,69,0); } 50% { box-shadow: 0 0 0 4px rgba(220,53,69,.22); } } /* Mobile: pin qty + Add-to-Cart + Buy-Now in a single fixed bar above bottom nav */ @media (max-width: 991px) { .mp-action-row { position: fixed; left: 0; right: 0; bottom: 71px; /* sits directly above the mobile bottom nav */ margin: 0; padding: 8px 10px; gap: 8px; background: #fff; border-top: 1px solid #e9ecef; box-shadow: 0 -2px 8px rgba(0,0,0,.06); z-index: 1041; /* above the bottom nav (1040) so it stays visible */ flex-wrap: nowrap; align-items: stretch; } .mp-action-row .mp-qty-input { flex: 0 0 auto; border-radius: 6px; } .mp-action-row .mp-qty-input button { padding: 6px 8px; font-size: 14px; } .mp-action-row .mp-qty-input input { width: 34px; padding: 6px 0; font-size: 13px; } .mp-action-row > .btn { flex: 1 1 0; min-width: 0; padding: 10px 4px; font-size: 13px; white-space: normal; overflow-wrap: break-word; line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: 4px; } .mp-action-row > .btn i { font-size: 14px; } /* Extra space at page bottom so content isn't covered by both bars. Only on pages that actually have the pinned action row. */ body:has(.mp-action-row) { padding-bottom: 140px; } } /* ===== Single product description: contain wide media on mobile ===== */ #desc-tab, .mp-short-desc { word-wrap: break-word; overflow-wrap: break-word; } #desc-tab img, .mp-short-desc img { max-width: 100%; height: auto; display: inline-block; } #desc-tab table, #desc-tab iframe, #desc-tab video, .mp-short-desc table, .mp-short-desc iframe, .mp-short-desc video { max-width: 100%; } #desc-tab { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ===== Cart Page ===== */ .mp-cart-page-wrap { padding-bottom: 60px; } .mp-cart-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .mp-cart-table { background: #fff; min-width: 640px; } .mp-cart-table .cart-item-image { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; } .mp-cart-table .qty-cell { width: 150px; } .mp-cart-summary { background: #fff; border: 1px solid #ececf1; border-radius: 16px; padding: 24px 22px; position: sticky; top: 100px; box-shadow: 0 8px 30px rgba(17, 24, 39, .07); } .mp-cart-summary > h5 { font-size: 17px; font-weight: 700; color: #101828; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid #f0f0f4; display: flex; align-items: center; gap: 8px; } .mp-cart-summary > h5 .bi { color: var(--mp-primary); } .mp-cart-summary .row-line { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 14.5px; color: #667085; } .mp-cart-summary .row-line > span:last-child { color: #1d2939; font-weight: 600; } .mp-cart-summary #sumDiscountRow { color: #12b76a; } .mp-cart-summary #sumDiscountRow .text-success { color: #12b76a !important; font-weight: 700; } .mp-cart-summary .row-line.total { margin-top: 14px; padding: 15px 16px; border: 0; background: linear-gradient(135deg, rgba(0,0,0,.09), rgba(0,0,0,.03)); border-radius: 12px; font-size: 16px; font-weight: 700; color: #1d2939; } .mp-cart-summary .row-line.total > span:last-child { font-size: 22px; line-height: 1; color: var(--mp-primary); font-weight: 800; } .mp-cart-summary #placeOrderBtn { border-radius: 12px; padding: 13px; font-weight: 700; font-size: 16px; box-shadow: 0 6px 18px rgba(0,0,0,.28); } .mp-cart-summary #placeOrderBtn:hover { transform: translateY(-1px); } /* ===== Checkout ===== */ .mp-checkout-page { padding-bottom: 60px; } .mp-checkout-step { background: #fff; border: 1px solid #e9ecef; border-radius: 10px; padding: 22px; margin-bottom: 16px; } .mp-checkout-step h5 { font-size: 18px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #e9ecef; } .mp-payment-method { display: block; border: 2px solid #dee2e6; border-radius: 8px; padding: 14px; cursor: pointer; margin-bottom: 10px; transition: border-color .15s, background .15s; } .mp-payment-method:hover { border-color: var(--mp-primary); } .mp-payment-method.selected { border-color: var(--mp-primary); background: rgba(0,0,0,.05); } .mp-payment-method .meta { font-size: 13px; color: #6c757d; } .mp-payment-method .pm-details img { display: block; } /* Checkout order summary — mobile-friendly */ .mp-checkout-items { max-height: 360px; overflow-y: auto; padding-right: 4px; margin-bottom: 6px; } .mp-checkout-items::-webkit-scrollbar { width: 6px; } .mp-checkout-items::-webkit-scrollbar-thumb { background: #e4e4ea; border-radius: 3px; } .mp-cko-item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #f2f2f6; } .mp-cko-item:last-child { border-bottom: 0; } .mp-cko-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex-shrink: 0; border: 1px solid #f0f0f4; } .mp-cko-item .info { flex: 1; min-width: 0; } .mp-cko-item .info .title { font-weight: 600; font-size: 13.5px; color: #101828; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp-cko-item .qty-line { display: flex; align-items: center; gap: 0; margin-top: 8px; font-size: 12px; } .mp-cko-item .qty-line button.qty-dec, .mp-cko-item .qty-line button.qty-inc { width: 30px; height: 30px; padding: 0; border: 1px solid #e4e4ea; background: #fff; color: #475467; font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s, color .15s; } .mp-cko-item .qty-line button.qty-dec { border-radius: 9px 0 0 9px; } .mp-cko-item .qty-line button.qty-inc { border-radius: 0 9px 9px 0; } .mp-cko-item .qty-line button.qty-dec:hover, .mp-cko-item .qty-line button.qty-inc:hover { background: #f4f4f7; border-color: #d0d5dd; color: #101828; } .mp-cko-item .qty-line input.qty-input { width: 42px; height: 30px; padding: 0; text-align: center; font-size: 13px; font-weight: 700; color: #101828; border: 1px solid #e4e4ea; border-left: 0; border-right: 0; background: #fff; -moz-appearance: textfield; } .mp-cko-item .qty-line input.qty-input::-webkit-outer-spin-button, .mp-cko-item .qty-line input.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .mp-cko-item .qty-line .x { color: #98a2b3; margin-left: 10px; font-weight: 500; } .mp-cko-item .right { text-align: right; flex-shrink: 0; } .mp-cko-item .line-total { font-weight: 700; font-size: 13px; } .mp-cko-item .remove-item { background: transparent; border: 0; color: var(--mp-danger); font-size: 18px; cursor: pointer; line-height: 1; } /* ===== Filter sidebar ===== */ .mp-filter-sidebar { background: #f8f9fa; border-radius: 10px; padding: 18px; border: 1px solid #e9ecef; } .mp-filter-sidebar h6 { font-size: 13px; text-transform: uppercase; margin-bottom: 12px; color: #495057; letter-spacing: .5px; } .mp-filter-block { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #e9ecef; } .mp-filter-block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .mp-filter-block .form-check { margin-bottom: 4px; } .mp-price-range { display: flex; gap: 8px; align-items: center; } .mp-price-range input { width: 80px; } /* ===== My Account ===== */ .ma-avatar { padding: 12px 0; } .ma-nav .list-group-item { border: none; padding: 12px 18px; color: #495057; } .ma-nav .list-group-item.active { background: var(--mp-primary); color: #fff; } .ma-nav .list-group-item:hover:not(.active) { background: #f8f9fa; color: var(--mp-primary); } /* ===== Variation Chips (used everywhere products are shown) ===== */ .mp-var-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .mp-var-chip { display: inline-flex; align-items: center; gap: 4px; background: #f1f3f5; border: 1px solid #e9ecef; border-radius: 14px; padding: 2px 10px; font-size: 12px; color: #495057; line-height: 1.4; } .mp-var-chip strong { font-weight: 600; color: #212529; margin-right: 2px; } .mp-var-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #dee2e6; } /* Variation selector on single-product page */ .mp-variation-selector { margin-bottom: 16px; } .mp-variation-selector .var-group { margin-bottom: 14px; } .mp-variation-selector .var-label { display: block; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; color: #495057; } .mp-variation-selector .var-options { display: flex; gap: 8px; flex-wrap: wrap; } .mp-variation-selector .var-opt { padding: 8px 16px; border: 2px solid #dee2e6; border-radius: 8px; background: #fff; font-size: 14px; cursor: pointer; transition: all .15s; user-select: none; } .mp-variation-selector .var-opt:hover { border-color: var(--mp-primary); } .mp-variation-selector .var-opt.selected { border-color: var(--mp-primary); background: rgba(0,0,0,.08); color: var(--mp-primary); font-weight: 600; } .mp-variation-selector .var-opt.disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; } .mp-variation-selector .var-opt.swatch { width: 36px; height: 36px; padding: 0; border-radius: 50%; position: relative; } .mp-variation-selector .var-opt.swatch.selected::after { content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; text-shadow: 0 1px 2px rgba(0,0,0,.5); } /* Variation chips spacing in order-section product list (size + style of the .var-opt buttons themselves comes from .mp-variation-selector rules above, so order-section now matches single-product page exactly). */ .order-section .product-radio-box .mp-var-chips, .order-section .product-checkbox-box .mp-var-chips { margin-top: 6px; } /* ===== Empty state ===== */ .mp-empty-state { padding: 70px 20px; text-align: center; color: #6c757d; } .mp-empty-state i { font-size: 64px; opacity: .5; } .mp-empty-state h3, .mp-empty-state h4 { color: #495057; margin-bottom: 12px; } /* ===== Topbar social icons (header-1 + header-2) — small + tight ===== */ .mp-topbar-socials a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 13px; border-radius: 4px; transition: color .15s, background .15s; } .mp-topbar-socials a:hover { color: var(--mp-accent, #ffc107); background: rgba(255,255,255,.08); } .mp-topbar-modern .mp-topbar-socials a { color: var(--mp-topbar-text, #fff); } .mp-topbar-classic-dark .mp-topbar-socials a { color: #dee2e6; } /* ===== Mobile bottom nav (sticky) ===== */ .mp-mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e9ecef; z-index: 1040; display: flex; justify-content: space-around; padding: 6px 0 8px; box-shadow: 0 -2px 8px rgba(0,0,0,.06); } .mp-mobile-bottom-nav .mbn-item { flex: 1; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #6c757d; font-size: 11px; padding: 4px 2px; transition: color .15s; position: relative; } .mp-mobile-bottom-nav .mbn-item i { font-size: 20px; margin-bottom: 2px; } .mp-mobile-bottom-nav .mbn-item.active { color: var(--mp-primary); } .mp-mobile-bottom-nav .mbn-item:hover { color: var(--mp-primary); } .mp-mobile-bottom-nav .mbn-cart-badge { position: absolute; top: 0; right: 25%; background: var(--mp-danger); color: #fff; font-size: 10px; min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px; padding: 0 4px; font-weight: 700; } /* Push page content above the bottom nav on mobile so it never gets covered */ @media (max-width: 991px) { body { padding-bottom: 70px; } } /* ===== Mobile 3-col header layout ===== */ .mp-header-mobile-3col > [class*="col-"] { flex: 0 0 auto; } .mp-header-mobile-3col .col-3 { width: 25%; } .mp-header-mobile-3col .col-6 { width: 50%; } .mp-header-mobile-3col .mp-logo img { vertical-align: middle; } /* Modern variant — bold primary accent on logo + nav */ .mp-header-modern { border-bottom: 3px solid var(--mp-primary); } .mp-topbar-modern { background: var(--mp-topbar-bg); color: var(--mp-topbar-text); } .mp-header-main-modern .mp-nav-link { font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: .5px; } /* ===== Announcement bar (rotating messages, very top of page) ===== */ .mp-announce { background: var(--mp-announce-bg, #F1EDE7); color: var(--mp-announce-text, #000000); font-family: var(--mp-font-body); font-size: 14px; letter-spacing: normal; text-transform: none; font-weight: 400; } .mp-announce .container { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; } .mp-announce-track { position: relative; flex: 1 1 auto; height: 40px; text-align: center; } .mp-announce-item { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity .5s ease; } .mp-announce-item.is-active { display: flex; opacity: 1; } .mp-announce-item a, .mp-announce-item span { color: inherit; text-decoration: none; } .mp-announce-item a:hover { text-decoration: underline; } .mp-announce-nav { background: none; border: 0; color: inherit; opacity: .6; font-size: 14px; line-height: 1; padding: 6px; cursor: pointer; flex: 0 0 auto; transition: opacity .15s; } .mp-announce-nav:hover { opacity: 1; } .mp-announce-prev { position: absolute; left: 12px; } .mp-announce-next { position: absolute; right: 12px; } /* Single message: size naturally */ .mp-announce-track:has(.mp-announce-item:only-child) { height: auto; padding: 10px 0; } .mp-announce-item:only-child { position: static; display: flex; opacity: 1; } /* Classic variant — wide centered, traditional ecommerce look */ .mp-header-classic { background: #fff; border-bottom: 1px solid #e9ecef; } .mp-topbar-classic { background: #f8f9fa; color: #495057; border-bottom: 1px solid #e9ecef; padding: 8px 0; font-size: 12px; } .mp-topbar-classic a { color: #495057; } .mp-topbar-classic a:hover { color: var(--mp-primary); } .mp-header-main-classic .mp-logo { display: inline-block; } .mp-nav-classic { background: #ffffff; border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef; } .mp-nav-classic .nav-link { color: #212529; font-weight: 500; padding: 12px 22px; text-transform: uppercase; font-size: 12px; letter-spacing: .8px; } .mp-nav-classic .nav-link:hover { color: var(--mp-primary); } /* ===== Submenu (Bootstrap dropdowns — supports 2 levels: dropdown > dropdown-submenu) ===== */ .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { display: none; margin-top: 0; } /* Hover-to-open dropdowns + sub-dropdowns on mouse devices only. Touch devices keep Bootstrap's click-toggle behavior so a tap doesn't immediately navigate away. The parent is a real link (no data-bs-toggle), so clicking it navigates to the parent's URL. */ @media (hover: hover) and (min-width: 992px) { .mp-nav-dropdown:hover > .dropdown-menu, .mp-nav .dropdown:hover > .dropdown-menu, .dropdown-submenu:hover > .dropdown-menu { display: block; } /* Zero margin so menu doesn't close while crossing the gap to the menu */ .mp-nav-dropdown > .dropdown-menu, .mp-nav .dropdown > .dropdown-menu { margin-top: 0; } } @media (max-width: 991px) { /* On mobile collapse submenus inline — Bootstrap nav-mobile already stacks */ .dropdown-submenu > .dropdown-menu { position: static !important; left: 0 !important; box-shadow: none; padding-left: 1rem; } } /* ===== Mini search bar (header-1 + header-2 "mini" mode) ===== */ .mp-search-mini-wrap { position: relative; } .mp-search-mini-collapse { position: absolute; right: 0; top: calc(100% + 6px); width: min(420px, 92vw); z-index: 1050; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.15); border-radius: 8px; padding: 10px; } .mp-search-mini-wrap .mp-search-toggle { background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.1); } /* Header-2 dark mini override */ .mp-header-classic-dark .mp-search-mini-wrap .mp-search-toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; } .mp-header-classic-dark .mp-search-mini-wrap .mp-search-toggle:hover { background: rgba(255,255,255,.15); } /* ===== Header-2 nav strip sticky-on-scroll ===== Disable the whole-header sticky (it overrides the page-level sticky from .mp-header) so ONLY the nav becomes sticky when user scrolls past it. */ .mp-header-classic-dark { position: relative !important; } .mp-nav-sticky-scroll.is-stuck { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; box-shadow: 0 2px 6px rgba(0,0,0,.25); animation: mpStickyIn .25s ease-out; } @keyframes mpStickyIn { from { transform: translateY(-100%); opacity: .5; } to { transform: translateY(0); opacity: 1; } } /* ===== Classic Dark variant (Header-2) — same layout shape as Classic but dark theme ===== */ .mp-header-classic-dark { background: #1a1d23; color: #fff; border-bottom: 3px solid var(--mp-accent, #ffc107); } .mp-topbar-classic-dark { background: #0f1115; color: #adb5bd; border-bottom: 1px solid #2a2d33; padding: 8px 0; font-size: 12px; } .mp-topbar-classic-dark a { color: #dee2e6; text-decoration: none; } .mp-topbar-classic-dark a:hover { color: var(--mp-accent, #ffc107); } .mp-header-main-classic-dark { background: #1a1d23; color: #fff; } .mp-logo-dark { display: inline-block; color: #fff; text-decoration: none; } .mp-icon-btn-dark { color: #fff; text-decoration: none; padding: 6px 10px; border-radius: 6px; transition: color .15s; } .mp-icon-btn-dark:hover { color: var(--mp-accent, #ffc107); } .mp-cart-btn-dark { color: #fff; text-decoration: none; padding: 6px 10px; border-radius: 6px; position: relative; } .mp-cart-btn-dark:hover { color: var(--mp-accent, #ffc107); } .mp-nav-classic-dark { background: #0f1115; border-top: 1px solid #2a2d33; } .mp-nav-classic-dark .nav-link { color: #dee2e6; font-weight: 500; padding: 12px 22px; text-transform: uppercase; font-size: 12px; letter-spacing: .8px; border-bottom: 2px solid transparent; } .mp-nav-classic-dark .nav-link:hover { color: var(--mp-accent, #ffc107); border-bottom-color: var(--mp-accent, #ffc107); } /* ===== Footer 2 Dark Compact (distinct from Footer-1 4col grid) ===== */ /* Footer Design 2 (Dark) — hocb-style 5-column */ .mp-footer-hocb { background: #1d1c1c; color: #f2f2f2; font-size: 15px; } .mp-footer-hocb .mp-fh-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr 1.3fr; gap: 30px; padding: 50px 0 36px; } .mp-footer-hocb .mp-fh-title { color: #f2f2f2; font-size: 20px; font-weight: 400; margin: 0 0 18px; } .mp-footer-hocb .mp-fh-about-text { color: #f2f2f2; line-height: 1.75; margin: 0 0 16px; font-size: 15px; } .mp-footer-hocb .mp-fh-logo { display: block; max-height: 46px; width: auto; max-width: 180px; margin: 0 0 16px; } .mp-footer-hocb .mp-fh-list { list-style: none; margin: 0; padding: 0; } .mp-footer-hocb .mp-fh-list li { margin-bottom: 11px; } .mp-footer-hocb .mp-fh-list a { color: #d6d6d6; text-decoration: none; transition: color .15s; } .mp-footer-hocb .mp-fh-list a:hover { color: #fff; } .mp-footer-hocb .mp-fh-contact li { color: #d6d6d6; margin-bottom: 12px; } .mp-footer-hocb .mp-fh-contact i { color: #f2f2f2; margin-right: 6px; } .mp-footer-hocb .mp-fh-apps { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .mp-footer-hocb .mp-fh-app { display: inline-flex; align-items: center; gap: 8px; background: #000; border: 1px solid #2a2a2a; border-radius: 7px; padding: 7px 12px; color: #fff; text-decoration: none; } .mp-footer-hocb .mp-fh-app i { font-size: 22px; } .mp-footer-hocb .mp-fh-app span { display: flex; flex-direction: column; line-height: 1.15; font-size: 13px; font-weight: 600; } .mp-footer-hocb .mp-fh-app small { font-size: 9px; font-weight: 400; opacity: .8; } .mp-footer-hocb .mp-fh-follow { color: #f2f2f2; font-size: 18px; font-weight: 400; margin-bottom: 12px; } .mp-footer-hocb .mp-fh-social a { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; color: #f2f2f2; font-size: 16px; border: 1px solid #444; border-radius: 50%; margin-right: 8px; transition: all .15s; } .mp-footer-hocb .mp-fh-social a:hover { background: #fff; color: #1d1c1c; border-color: #fff; } .mp-footer-hocb .mp-fh-news input { width: 100%; background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 12px 14px; color: #111; margin-bottom: 10px; } .mp-footer-hocb .mp-fh-news input::placeholder { color: #888; } .mp-footer-hocb .mp-fh-news button { width: 100%; background: #fff; color: #111; border: none; border-radius: 6px; padding: 11px; font-weight: 700; cursor: pointer; transition: opacity .15s; } .mp-footer-hocb .mp-fh-news button:hover { opacity: .85; } .mp-footer-hocb .mp-fh-news-msg { font-size: 12px; color: #8fd19e; margin-top: 8px; min-height: 16px; } .mp-footer-hocb .mp-fh-pay { border-top: 1px solid #222; } .mp-footer-hocb .mp-fh-pay-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 0; } .mp-footer-hocb .mp-fh-pay-label { color: #fff; font-weight: 700; } .mp-footer-hocb .mp-fh-pay-groups { display: flex; gap: 24px; flex-wrap: wrap; flex: 1; } .mp-footer-hocb .mp-fh-pay-group > span { display: block; font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; } .mp-footer-hocb .mp-fh-pay-chips { display: flex; gap: 5px; flex-wrap: wrap; } .mp-footer-hocb .mp-fh-pay-chips b { background: #fff; color: #111; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 4px 7px; } .mp-footer-hocb .mp-fh-pay-ssl { font-size: 12px; color: #9a9a9a; white-space: nowrap; } .mp-footer-hocb .mp-fh-pay-ssl i { color: #2ecc71; } .mp-footer-hocb .mp-fh-bottom { border-top: 1px solid #222; text-align: center; padding: 18px 0; color: #8a8a8a; font-size: 13px; } .mp-footer-hocb .mp-fh-bottom a { color: #cfcfcf; text-decoration: none; } .mp-footer-hocb .mp-fh-pay-img { display: block; max-width: 100%; height: auto; margin: 0 auto; } .mp-footer-hocb .mp-fh-pay:has(.mp-fh-pay-img) .mp-fh-pay-inner { justify-content: center; } @media (max-width: 992px) { .mp-footer-hocb .mp-fh-grid { grid-template-columns: 1fr 1fr; gap: 26px; } } /* Mobile: LEFT-aligned + collapsible columns (like hocb.com.bd). Desktop unchanged. */ @media (max-width: 576px) { .mp-footer-hocb .mp-fh-grid { grid-template-columns: 1fr; gap: 0; text-align: left; } .mp-footer-hocb .mp-fh-col { padding: 4px 0; } .mp-footer-hocb .mp-fh-title { justify-content: flex-start; margin-bottom: 12px; } .mp-footer-hocb .mp-fh-title::after { position: static; width: auto; height: auto; background: none; } .mp-footer-hocb .mp-fh-apps, .mp-footer-hocb .mp-fh-social { justify-content: flex-start; } /* Collapsible columns: title toggle = label LEFT, chevron RIGHT; body hidden until opened */ .mp-footer-hocb .mp-fh-collapsible { border-top: 1px solid #222; padding: 6px 0; } .mp-footer-hocb .mp-fh-collapsible .mp-fh-title { display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin: 0; padding: 12px 0; } .mp-footer-hocb .mp-fh-collapsible .mp-fh-title::after { content: "\f282"; font-family: "bootstrap-icons"; font-size: .8rem; transition: transform .2s; display: inline-block; margin-left: auto; } .mp-footer-hocb .mp-fh-collapsible .mp-fh-list, .mp-footer-hocb .mp-fh-collapsible .mp-fh-body { display: none; padding-bottom: 10px; } .mp-footer-hocb .mp-fh-collapsible.open .mp-fh-list, .mp-footer-hocb .mp-fh-collapsible.open .mp-fh-body { display: block; } .mp-footer-hocb .mp-fh-collapsible.open .mp-fh-title::after { transform: rotate(180deg); } .mp-footer-hocb .mp-fh-pay { display: flex; justify-content: flex-start; } .mp-footer-hocb .mp-fh-pay-inner { flex-direction: column; align-items: flex-start; gap: 12px; } .mp-footer-hocb .mp-fh-pay-groups { justify-content: flex-start; } .mp-footer-hocb .mp-fh-pay-img { margin: 0; } .mp-footer-hocb .mp-fh-bottom { text-align: left; } } /* ===== Mobile tweaks (general) ===== */ @media (max-width: 991px) { .mp-cart-summary { position: static; } .mp-search-form { max-width: 100% !important; } .mp-product-info h1 { font-size: 22px; } .mp-product-info .price-sale, .mp-product-info .price-single { font-size: 26px; } .mp-header { position: static; } /* avoid sticky on mobile so bottom-nav is dominant */ .mp-header-main { padding: 6px 0; } } @media (max-width: 575px) { .mp-page-header { padding: 24px 0; } .mp-page-header h1 { font-size: 22px; } .mp-header-main .container { padding-top: 4px; padding-bottom: 4px; } } /* ===================================================================== * FASHION HEADER (header-1) + FASHION FOOTER (footer-1) * Exact reference palette: * announcement = #F1EDE7 / #000 (scheme-7) * header dark row = #202020 / #fff (scheme-5) * header nav row = #F6F6F6 / #000 (scheme-1) * footer = #202020 / #fff (scheme-5) * ===================================================================== */ .mp-header-fashion, .mp-footer-fashion { font-family: var(--mp-font-body); } /* ---- Reference container width: full-width capped at 120rem, 40px gutters (reference --normal-page-width:120rem, --page-margin:40px / 16px mobile). Overrides Bootstrap's fixed .container breakpoints site-wide. ---- */ .container { width: 100%; max-width: 120rem; margin-inline: auto; padding-left: 16px; padding-right: 16px; } @media (min-width: 750px) { .container { padding-left: 40px; padding-right: 40px; } } /* ---- Header shell (single 60px bar, reference = --header-height:60px) ---- */ .mp-header-fashion { background: #202020; color: #fff; box-shadow: none; border-bottom: 0; } /* ---- Optional utility bar ---- */ .mp-topbar-fashion { background: #2a2a2a; color: #cfcfcf; border-bottom: 1px solid rgba(255,255,255,.08); padding: 6px 0; font-size: 12.5px; } .mp-topbar-fashion a { color: #cfcfcf; text-decoration: none; } .mp-topbar-fashion a:hover { color: #fff; } /* ---- Header bar ---- */ .mp-head-dark { background: #202020; color: #fff; } /* Desktop bar: logo | inline nav | icons (single 60px row) */ .mp-head-bar { min-height: 60px; gap: 2.5rem; } /* Mobile 3-column grid: [hamburger] [logo center] [icons] */ .mp-head-grid { grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 60px; /* reference --header-height: 60px */ } .mp-head-col { display: flex; align-items: center; gap: .25rem; } .mp-head-col-left { justify-content: flex-start; } .mp-head-col-center { justify-content: center; } .mp-head-col-right { justify-content: flex-end; } /* Desktop inline nav (white links on dark) — reference 14px, gap 20px */ .mp-head-dark .mp-nav-inline { gap: 1.6rem; } .mp-head-dark .mp-nav-link { color: #fff; text-decoration: none; background: none; border: 0; font-family: var(--mp-font-body); font-size: .875rem; font-weight: 400; letter-spacing: normal; text-transform: none; padding: 6px 0; position: relative; white-space: nowrap; } .mp-head-dark .mp-nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: #fff; transition: width .2s ease; } .mp-head-dark .mp-nav-link:hover { color: #fff; opacity: .9; } .mp-head-dark .mp-nav-link:hover::after { width: 100%; } .mp-head-dark .mp-nav-dropdown .dropdown-toggle::after { vertical-align: middle; } .mp-head-dark .dropdown-menu { background: #fff; border: 0; border-radius: 0; padding: 8px 0; margin-top: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.18); min-width: 210px; } .mp-head-dark .dropdown-item { font-size: 14px; padding: 9px 18px; color: #222; } .mp-head-dark .dropdown-item:hover { background: #f3f3f3; color: #000; } .mp-head-dark .mp-head-actions { gap: .25rem; } /* Logo — reference logo height 36px (16px on small screens) */ .mp-head-dark .mp-logo { display: inline-flex; align-items: center; text-decoration: none; } .mp-head-dark .mp-logo img { display: block; height: 36px; width: auto; max-width: 60vw; object-fit: contain; } .mp-head-dark .mp-brand-text { font-family: var(--mp-font-heading); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: .5px; color: #fff; white-space: nowrap; } /* Icon buttons (white on dark) — reference icon ~22px */ .mp-head-dark .mp-icon-btn { color: #fff; background: none; border: 0; width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: opacity .15s; text-decoration: none; } .mp-head-dark .mp-icon-btn:hover { opacity: .6; background: none; color: #fff; } .mp-head-dark .mp-cart-btn { position: relative; } .mp-head-dark .mp-cart-count { position: absolute; top: 4px; right: 2px; background: #fff; color: #202020; border-radius: 50%; min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; text-align: center; padding: 0 3px; font-weight: 600; } @media (max-width: 575px) { .mp-head-grid { min-height: 52px; } .mp-head-dark .mp-logo img { height: 26px; } .mp-head-dark .mp-brand-text { font-size: 22px; } .mp-head-dark .mp-icon-btn { width: 38px; height: 38px; font-size: 21px; } } /* ---- Transparent HOME header (header-1): overlays the hero slider, turns solid black + sticky on scroll. Header bar height = 60px (52px <576px). ---- */ .mp-header-transparent { position: relative; z-index: 1030; background: transparent; margin-bottom: -60px; } .mp-header-transparent .mp-head-dark { background: transparent; } .mp-header-transparent.is-stuck { position: fixed; top: 0; left: 0; right: 0; margin-bottom: 0; background: #000; box-shadow: 0 2px 14px rgba(0,0,0,.35); animation: mpStickyDown .3s ease; } .mp-header-transparent.is-stuck .mp-head-dark { background: #000; } @keyframes mpStickyDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } @media (max-width: 575px) { .mp-header-transparent { margin-bottom: -52px; } } /* ---- Search drop panel ---- */ .mp-search-panel { max-height: 0; overflow: hidden; background: #fff; color: #000; transition: max-height .25s ease; } .mp-search-panel.open { max-height: 240px; border-bottom: 1px solid #ececec; } .mp-search-panel .mp-search-results { position: static; box-shadow: none; margin-top: 8px; max-height: 60vh; } /* ---- Offcanvas drawer ---- */ .mp-offcanvas .offcanvas-title { font-family: var(--mp-font-heading); font-weight: 400; font-size: 26px; } .mp-offcanvas-nav .nav-link { color: #222; font-size: 15px; padding: 12px 4px; border-bottom: 1px solid #f0f0f0; } .mp-offcanvas-nav .nav-link:hover { color: #000; } /* ===================================================================== * FASHION FOOTER * ===================================================================== */ .mp-footer-fashion { background: #202020; color: #cfcfcf; } .mp-footer-fashion a { color: #cfcfcf; text-decoration: none; transition: color .15s; } .mp-footer-fashion a:hover { color: #fff; } /* 1. Top band: image (left) + newsletter (right) */ .mp-footer-fashion .mp-footer-top { padding: 56px 0; border-bottom: 1px solid rgba(255,255,255,.1); } .mp-footer-fashion .mp-footer-brand { display: inline-block; } .mp-footer-fashion .mp-footer-brand img { max-height: 90px; width: auto; max-width: 100%; } .mp-footer-fashion .mp-footer-brand span { font-family: var(--mp-font-heading); font-weight: 400; font-size: 40px; color: #fff; letter-spacing: .5px; } .mp-footer-fashion .mp-footer-about { font-size: 14px; line-height: 1.7; color: #9a9a9a; max-width: 420px; margin-top: 16px; } .mp-footer-fashion .mp-news-title { font-family: var(--mp-font-heading); color: #fff; font-weight: 400; font-size: 28px; margin-bottom: 6px; } .mp-footer-fashion .mp-news-sub { color: #9a9a9a; font-size: 14px; margin-bottom: 16px; } .mp-newsletter-form .form-control { background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff; border-right: 0; padding: 12px 16px; border-radius: 0; } .mp-newsletter-form .form-control::placeholder { color: rgba(255,255,255,.45); } .mp-newsletter-form .form-control:focus { background: transparent; color: #fff; box-shadow: none; border-color: rgba(255,255,255,.6); } .mp-newsletter-form .btn-light { background: #fff; border-color: #fff; color: #202020; font-weight: 600; border-radius: 0; } .mp-newsletter-form .btn-light:hover { background: #e6e6e6; border-color: #e6e6e6; color: #202020; } .mp-newsletter-msg { margin-top: 10px; font-size: 13px; color: #7ee2a8; } .mp-newsletter-msg.is-error { color: #ff9b9b; } .mp-footer-fashion .mp-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; margin-right: 8px; font-size: 16px; } .mp-footer-fashion .mp-social a:hover { background: #fff; color: #202020; border-color: #fff; } /* 2. Menu row */ .mp-footer-fashion .mp-footer-menu { padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.1); } .mp-footer-menu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; } .mp-footer-menu-list a { font-size: 14px; letter-spacing: .3px; } .mp-footer-contact-row { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 26px; justify-content: center; font-size: 13px; color: #9a9a9a; } .mp-footer-contact-row a { color: #9a9a9a; } .mp-footer-contact-row a:hover { color: #fff; } /* 3. Copyright bar */ .mp-footer-fashion .mp-footer-bottom { padding: 18px 0; font-size: 13px; color: #8a8a8a; } .mp-footer-fashion .mp-pay-chip { border: 1px solid rgba(255,255,255,.2); border-radius: 3px; padding: 2px 8px; font-size: 11px; letter-spacing: .3px; color: #cfcfcf; } /* Responsive */ @media (max-width: 991px) { .mp-footer-fashion .mp-footer-top { padding: 36px 0; text-align: center; } .mp-footer-fashion .mp-footer-about { margin-left: auto; margin-right: auto; } .mp-footer-fashion .mp-footer-bottom { justify-content: center; text-align: center; } } /* ===================================================================== * SINGLE PRODUCT PAGE (pages/single-product.php) — fashion-store layout * ===================================================================== */ .mp-sp { max-width: 1280px; } .mp-sp-crumbs a { color: #777; text-decoration: none; } .mp-sp-crumbs a:hover { color: #111; } .mp-sp-crumbs span { color: #bbb; margin: 0 2px; } /* Gallery */ .mp-sp-gallery { position: sticky; top: 80px; } .mp-sp-stage { position: relative; background: #f6f6f6; border-radius: 6px; overflow: hidden; aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; } .mp-sp-stage-media { width: 100%; height: 100%; object-fit: cover; display: block; } .mp-sp-stage img[data-zoomable] { cursor: zoom-in; } .mp-sp-zoom-hint { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #111; font-size: 18px; cursor: zoom-in; box-shadow: 0 2px 8px rgba(0,0,0,.15); } .mp-sp-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; } .mp-sp-thumb { position: relative; padding: 0; border: 1px solid #ececec; border-radius: 4px; overflow: hidden; background: #f6f6f6; aspect-ratio: 1/1; cursor: pointer; } .mp-sp-thumb.active { border-color: #111; } .mp-sp-thumb img, .mp-sp-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } .mp-sp-thumb-video { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); color: #fff; font-size: 26px; z-index: 2; } /* Info */ .mp-sp-title { font-family: var(--mp-font-heading); font-weight: 400; font-size: 2.6rem; line-height: 1.1; margin-bottom: 12px; color: #000; } .mp-sp-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .mp-sp-price .now { font-size: 1.6rem; font-weight: 600; color: #111; } .mp-sp-price .was { font-size: 1.1rem; color: #999; text-decoration: line-through; } .mp-sp-price .off { font-size: .8rem; font-weight: 600; color: #fff; background: #c0392b; padding: 2px 8px; border-radius: 3px; } .mp-sp-short { color: #555; font-size: .95rem; line-height: 1.7; margin-bottom: 18px; } /* Variations */ .mp-sp-variations { margin-bottom: 18px; } .mp-sp-var-group { margin-bottom: 14px; } .mp-sp-var-label { font-size: .85rem; font-weight: 600; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; } .mp-sp-var-label .sel { font-weight: 400; color: #888; text-transform: none; letter-spacing: 0; } .mp-sp-var-opts { display: flex; flex-wrap: wrap; gap: 8px; } /* Text variant options = pill buttons (reference: 1px solid #000, radius 100px) */ .mp-sp-var-opt { min-width: 46px; min-height: 45px; padding: 8px 18px; border: 1px solid #111; background: #fff; color: #111; font-size: 14px; cursor: pointer; border-radius: 100px; transition: all .15s; display: inline-flex; align-items: center; justify-content: center; } .mp-sp-var-opt:hover { background: #f3f3f3; } .mp-sp-var-opt.selected { border-color: #111; background: #111; color: #fff; } /* Color variant = same pill, with a small colour dot before the name (reference style) */ .mp-sp-var-opt.has-dot { gap: 8px; padding-left: 12px; } .mp-sp-opt-dot { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); flex-shrink: 0; } .mp-sp-var-opt.selected .mp-sp-opt-dot { border-color: rgba(255,255,255,.6); } .mp-sp-var-opt.is-swatch { width: 34px; height: 34px; min-width: 34px; padding: 0; border-radius: 50%; } .mp-sp-var-opt.is-swatch.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; } .mp-sp-var-error { color: #c0392b; font-size: .85rem; margin-top: 6px; } /* Bundle / tiers + countdown (reference: bold title + dark timer bar) */ .mp-sp-bundle { border: 0; border-radius: 0; padding: 0; margin-bottom: 18px; background: none; } .mp-sp-bundle-title { font-weight: 700; font-size: 1rem; letter-spacing: .3px; color: #000; text-align: center; margin-bottom: 8px; } .mp-sp-bundle-timer { background: #1d1d1d; color: #fff; text-align: center; font-weight: 700; font-size: .82rem; padding: 9px 12px; border-radius: 6px; margin-bottom: 14px; } .mp-sp-bundle-timer strong { font-variant-numeric: tabular-nums; margin-left: 4px; } .mp-sp-tierlist { display: flex; flex-direction: column; gap: 12px; } .mp-sp-trow { position: relative; display: flex; flex-direction: column; width: 100%; text-align: left; border: 1px solid rgba(0,0,0,.3); border-radius: 8px; background: #ededed; padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; } .mp-sp-trow:hover { border-color: rgba(0,0,0,.55); } .mp-sp-trow.active { border-color: #000; background: #fff; box-shadow: 0 0 0 1px #000 inset; } .mp-sp-trow-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; } .mp-sp-radio { width: 20px; height: 20px; border: 2px solid #999; border-radius: 50%; flex-shrink: 0; position: relative; } .mp-sp-trow.active .mp-sp-radio { border-color: #000; } .mp-sp-trow.active .mp-sp-radio::after { content: ""; position: absolute; inset: 3px; background: #000; border-radius: 50%; } .mp-sp-trow-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mp-sp-trow-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mp-sp-trow-name { font-weight: 500; font-size: 1.15rem; color: #000; } .mp-sp-trow-tag { font-size: .85rem; color: #555; } /* MOST POPULAR / BEST VALUE — top-right label like the reference */ .mp-sp-trow-badge { position: absolute; top: 0; right: 16px; transform: translateY(-50%); font-size: .62rem; font-weight: 600; letter-spacing: .5px; color: #fff; background: #000; padding: 3px 10px; border-radius: 4px; } .mp-sp-trow-price { text-align: right; white-space: nowrap; } .mp-sp-trow-price .now { font-weight: 600; font-size: 1rem; color: #000; } .mp-sp-trow-price .was { display: block; font-size: .8rem; color: #555; text-decoration: line-through; } /* Per-item rows (revealed when the tier is selected) */ .mp-sp-trow-items { display: none; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e5e5e5; } .mp-sp-trow.active .mp-sp-trow-items { display: flex; } .mp-sp-item { display: flex; align-items: center; gap: 10px; } .mp-sp-item > img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #e5e5e5; flex-shrink: 0; } .mp-sp-item-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; } .mp-sp-item-name { font-size: .85rem; color: #111; line-height: 1.3; } .mp-sp-item-vars { display: flex; flex-wrap: wrap; gap: 8px; } .mp-sp-item-varwrap { display: flex; flex-direction: column; gap: 2px; } .mp-sp-item-varwrap label { font-size: .68rem; color: #888; text-transform: uppercase; letter-spacing: .3px; } .mp-sp-item-var { border: 1px solid #cfcfcf; border-radius: 4px; padding: 5px 8px; font-size: .82rem; background: #fff; min-width: 90px; } /* Choose-product slot button + chosen chip (reference: small + icon + "Choose") */ .mp-sp-slot-choose { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 8px 14px 8px 8px; border: 1px solid #111; border-radius: 100px; background: #fff; color: #111; font-size: .82rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; } .mp-sp-slot-choose:hover { background: #111; color: #fff; } .mp-sp-slot-choose:hover .mp-choose-plus { background: #fff; color: #111; } .mp-choose-plus { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #111; color: #fff; font-size: 16px; line-height: 1; } .mp-sp-item-chosen .mp-sp-item-name small { color: #888; } .mp-sp-slot-change { background: none; border: 0; color: #111111; font-size: .76rem; padding: 0; cursor: pointer; text-decoration: underline; text-align: left; } /* Bundle modal */ .mp-bm { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 1090; padding: 16px; } .mp-bm.open { display: flex; } .mp-bm-dialog { background: #fff; border-radius: 10px; width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; } .mp-bm-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eee; } .mp-bm-head h5 { margin: 0; font-family: var(--mp-font-heading); font-weight: 400; font-size: 1.4rem; } .mp-bm-close { background: none; border: 0; font-size: 20px; cursor: pointer; color: #666; } .mp-bm-body { padding: 16px 20px; overflow: auto; display: flex; flex-direction: column; gap: 12px; } .mp-bm-empty { color: #888; text-align: center; padding: 30px 0; } .mp-bm-card { display: flex; align-items: center; gap: 14px; border: 1px solid #eee; border-radius: 8px; padding: 10px; } .mp-bm-card > img, .mp-bm-card > .mp-bm-imglink img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .mp-bm-imglink { flex-shrink: 0; display: inline-block; line-height: 0; } .mp-bm-imglink img { transition: opacity .15s; } .mp-bm-imglink:hover img { opacity: .85; } .mp-bm-info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .mp-bm-name { font-size: .9rem; font-weight: 500; color: #111; } .mp-bm-name a { color: inherit; text-decoration: none; } .mp-bm-name a:hover { text-decoration: underline; } .mp-bm-price { font-size: .85rem; color: #333; } .mp-bm-vars { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .mp-bm-var { border: 1px solid #cfcfcf; border-radius: 4px; padding: 5px 8px; font-size: .8rem; background: #fff; } .mp-bm-add { align-self: center; background: #202020; color: #fff; border: 0; border-radius: 100px; padding: 9px 18px; font-size: .82rem; cursor: pointer; white-space: nowrap; } .mp-bm-add:hover { opacity: .88; } /* Actions */ .mp-sp-actions { display: flex; gap: 10px; align-items: stretch; margin-bottom: 16px; flex-wrap: wrap; } .mp-sp-qty { display: inline-flex; align-items: center; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; } .mp-sp-qty button { width: 42px; border: 0; background: #fff; font-size: 1.2rem; cursor: pointer; } .mp-sp-qty input { width: 50px; text-align: center; border: 0; border-left: 1px solid #eee; border-right: 1px solid #eee; -moz-appearance: textfield; } .mp-sp-qty input::-webkit-outer-spin-button, .mp-sp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .mp-sp-btn { border: 0; border-radius: 100px; font-weight: 400; font-size: 14px; padding: 16px 24px; cursor: pointer; transition: opacity .15s; flex: 1 1 auto; min-width: 140px; } .mp-sp-btn-cart { background: #fff; color: #202020; border: 1px solid #202020; } .mp-sp-btn-cart:hover { background: #202020; color: #fff; } .mp-sp-btn-buy { background: #202020; color: #f6f6f6; } .mp-sp-btn-buy:hover { opacity: .85; } .mp-sp-btn-wish { flex: 0 0 auto; min-width: 0; width: 52px; padding: 16px 0; background: #fff; color: #202020; border: 1px solid #202020; font-size: 18px; } .mp-sp-btn-wish:hover { background: #f5f5f5; } .mp-sp-btn-wish.is-active { color: #e63946; border-color: #e63946; } /* Visit shop link */ .mp-sp-visitshop { text-align: center; margin: 4px 0 18px; } .mp-sp-visitshop a { color: #111; font-size: .85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* Feature highlights — 2×2 bordered boxes */ .mp-sp-features { list-style: none; padding: 0; margin: 18px 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mp-sp-features li { border: 1px solid #ececec; border-radius: 6px; background: #fcfbf7; padding: 18px 10px; font-size: .82rem; color: #333; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .mp-sp-features i { color: #111; font-size: 1.3rem; } /* Trust badges row (reference: 4 icons across, icon above label) */ .mp-sp-trustrow { list-style: none; padding: 16px 0; margin: 18px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .mp-sp-trustrow li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: .76rem; color: #333; line-height: 1.25; } .mp-sp-trustrow i { font-size: 1.6rem; color: #111; } .mp-sp-stars { color: #f5a623; letter-spacing: 1px; } /* Customer images */ .mp-sp-section-title { font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: .8rem; margin: 18px 0 10px; } .mp-sp-customer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .mp-sp-customer-img { display: block; aspect-ratio: 1/1; border-radius: 6px; overflow: hidden; } .mp-sp-customer-img img { width: 100%; height: 100%; object-fit: cover; } /* Accordions */ .mp-sp-accordion { margin: 18px 0; } .mp-sp-accordion .accordion-item { border: 0; border-top: 1px solid #eaeaea; border-radius: 0; } .mp-sp-accordion .accordion-item:last-child { border-bottom: 1px solid #eaeaea; } .mp-sp-accordion .accordion-button { padding: 16px 4px; font-weight: 600; font-size: .9rem; background: none; box-shadow: none; color: #111; } .mp-sp-accordion .accordion-button:not(.collapsed) { background: none; color: #111; } .mp-sp-accordion .accordion-button:focus { box-shadow: none; } .mp-sp-accordion .accordion-body { padding: 0 4px 18px; color: #555; font-size: .9rem; line-height: 1.7; overflow-x: auto; } /* Keep any embedded images/tables inside the description/accordion within bounds (pasted reference content can carry inline width:127% etc, so force-clamp) */ .mp-sp-accordion .accordion-body img, .mp-sp-short img { max-width: 100% !important; height: auto !important; border-radius: 4px; } .mp-sp-accordion .accordion-body table { max-width: 100% !important; width: auto !important; display: block; overflow-x: auto; } .mp-sp-accordion .accordion-body iframe, .mp-sp-accordion .accordion-body video { max-width: 100% !important; } .mp-sp-accordion .accordion-body * { max-width: 100%; box-sizing: border-box; } /* Accordion menu icons (reference-style) */ .mp-sp-accordion .accordion-button .mp-acc-ic { margin-right: 10px; font-size: 1.05rem; } .mp-sp-meta { color: #777; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .mp-sp-meta a { color: #555; text-decoration: underline; } /* Related */ .mp-sp-related { margin-top: 56px; } .mp-sp-related-title { font-family: var(--mp-font-heading); font-weight: 400; font-size: 1.8rem; text-align: center; margin-bottom: 28px; } /* ===== FAQ section (above footer, reference style) ===== */ .mp-faq { padding: 56px 0 64px; background: #fff; } .mp-faq-title { font-family: var(--mp-font-heading); font-weight: 400; font-size: 2rem; text-align: left; margin-bottom: 22px; color: #111; } .mp-faq-list { max-width: none; margin: 0; } .mp-faq-item { border-top: 1px solid #eaeaea; } .mp-faq-item:last-child { border-bottom: 1px solid #eaeaea; } .mp-faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; font-size: 1rem; font-weight: 500; color: #111; } .mp-faq-item > summary::-webkit-details-marker { display: none; } .mp-faq-caret { flex: none; transition: transform .22s ease; color: #111; } .mp-faq-item[open] > summary .mp-faq-caret { transform: rotate(180deg); } .mp-faq-body { padding: 0 4px 20px; color: #555; font-size: .92rem; line-height: 1.75; } .mp-faq-body :is(p,ul,ol) { margin: 0 0 .6em; } .mp-faq-body img { max-width: 100%; height: auto; } /* ===== Mega-menu panel: builder (GrapesJS) layout normalisation ===== The page builder emits display:table rows/cells whose default vertical-align (baseline) drops short columns (e.g. an icon list) to the bottom next to a tall product grid. Force top alignment + sane padding so builder-authored mega panels read top-down like the reference. */ .mp-mega .gjs-row, .mp-mega-inner .gjs-row { width: 100%; } .mp-mega .gjs-cell, .mp-mega-inner .gjs-cell { vertical-align: top; } /* Product section inside a mega panel: match the category grid card size */ .mp-mega .ps-section, .mp-mega-inner .ps-section { margin: 0; } .mp-mega .ps-grid { gap: 14px; } .mp-mega .ps-title { margin-top: 0; } /* ===== Icon list shortcode (mega-menu columns) ===== */ .mp-icon-list-wrap { margin: 0 0 10px; } .mp-icon-list-title { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #888; margin: 0 0 12px; } .mp-icon-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--mp-il-cols,1), 1fr); gap: 2px 18px; } .mp-icon-list-item a { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: inherit; text-decoration: none; font-size: .92rem; transition: color .15s, padding-left .15s; } .mp-icon-list-item a:hover { color: var(--mp-primary, #111111); padding-left: 4px; } .mp-icon-list-item i { font-size: 1.05rem; width: 1.2em; text-align: center; flex: none; opacity: .85; } /* ===== Product card + grid (shared by related / listing / shortcodes) ===== */ .mp-grid { display: grid; gap: 18px 16px; grid-template-columns: repeat(4, 1fr); } .mp-grid-related { grid-template-columns: repeat(4, 1fr); } .mp-card { background: #fff; } .mp-card-media { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; background: #f6f6f6; border-radius: 4px; } .mp-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s ease, transform .4s ease; } .mp-card-img.is-active { opacity: 1; } .mp-card-img.hover { opacity: 0; } .mp-card-media:hover .mp-card-img.hover { opacity: 1; } .mp-card-body { padding: 10px 2px; } .mp-card-name { display: block; color: #111; text-decoration: none; font-size: .9rem; line-height: 1.4; margin-bottom: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .mp-card-name:hover { color: #000; text-decoration: underline; } .mp-card-price .now { font-weight: 600; color: #111; } .mp-card-price .was { color: #999; text-decoration: line-through; font-size: .85rem; margin-left: 4px; } /* ===== Sticky add-to-cart bar ===== */ /* Floating centered rounded sticky bar (reference) */ .mp-sticky-atc { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(160%); background: #fff; border: 1px solid #ececec; border-radius: 100px; box-shadow: 0 8px 30px rgba(0,0,0,.16); transition: transform .3s ease, opacity .3s ease; z-index: 1040; opacity: 0; width: min(620px, calc(100% - 28px)); } .mp-sticky-atc.show { transform: translateX(-50%) translateY(0); opacity: 1; } .mp-sticky-atc .container { padding: 0; } .mp-sticky-atc-inner { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; } .mp-sticky-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; flex-shrink: 0; } .mp-sticky-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .mp-sticky-name { font-size: .82rem; font-weight: 500; max-width: 38vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-sticky-price { font-weight: 600; font-size: .9rem; } .mp-sticky-atc .mp-sp-btn { margin-left: auto; flex: 0 0 auto; min-width: 150px; padding: 12px 22px; } @media (max-width: 575px){ .mp-sticky-atc .mp-sp-btn { min-width: 120px; padding: 11px 16px; } .mp-sticky-name { max-width: 34vw; } } /* ===== Lightbox ===== */ /* Full-screen vertical-scroll lightbox (labelledshop-style: images stacked, scroll to view) */ .mp-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.96); display: none; z-index: 1080; } .mp-lightbox.open { display: block; } .mp-lightbox-close { position: fixed; top: 16px; right: 22px; background: rgba(0,0,0,.4); border: 0; color: #fff; font-size: 24px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; } .mp-lightbox-close:hover { background: rgba(255,255,255,.2); } .mp-lightbox-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 0 0 40px; } .mp-lb-slide { display: flex; align-items: center; justify-content: center; padding: 10px 0; } .mp-lb-slide img { max-width: 100%; width: auto; max-height: 100vh; object-fit: contain; display: block; } .mp-lb-slide.mp-lb-video { width: 100%; padding: 24px 0; } .mp-lb-slide.mp-lb-video video { max-width: 92vw; max-height: 90vh; } .mp-lb-slide.mp-lb-video iframe { width: min(92vw, 900px); aspect-ratio: 16/9; height: auto; } @media (min-width: 768px){ .mp-lb-slide img { max-width: 760px; } } /* Product video playing in the gallery stage */ .mp-sp-stage-yt { width: 100%; aspect-ratio: 3/4; } .mp-sp-stage-yt iframe { width: 100%; height: 100%; border: 0; } /* ===== Responsive ===== */ @media (max-width: 991px) { .mp-sp-gallery { position: static; } .mp-grid { grid-template-columns: repeat(3, 1fr); } .mp-grid-related { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 575px) { .mp-sp-title { font-size: 1.5rem; } .mp-sp-price .now { font-size: 1.3rem; } .mp-grid, .mp-grid-related { grid-template-columns: repeat(2, 1fr); } .mp-sp-features { grid-template-columns: 1fr; } .mp-sp-trustrow { grid-template-columns: repeat(2, 1fr); gap: 16px; } .mp-sp-customer-grid { grid-template-columns: repeat(3, 1fr); } .mp-sp-actions { gap: 8px; } .mp-sp-btn { min-width: 120px; } } /* ===================================================================== * PRODUCT CARD extras (badges / arrows / add-choose) + LISTING pages * ===================================================================== */ .mp-card-media .mp-card-img { cursor: pointer; } .mp-card-badges { position: absolute; top: 8px; left: 8px; z-index: 3; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; } .mp-badge { background: #111; color: #fff; font-size: .65rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; } .mp-badge-sale { background: #c0392b; } .mp-card-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #111; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .2s; box-shadow: 0 1px 5px rgba(0,0,0,.2); } .mp-card-arrow.prev { left: 8px; } .mp-card-arrow.next { right: 8px; } .mp-card-media:hover .mp-card-arrow { opacity: 1; } .mp-card-act { position: absolute; right: 10px; bottom: 10px; transform: translateY(8px); z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 100px; background: #fff; color: #111; font-size: .72rem; font-weight: 500; padding: 6px 12px; cursor: pointer; text-decoration: none; white-space: nowrap; opacity: 0; transition: opacity .2s, transform .2s, background .15s, color .15s; box-shadow: 0 2px 10px rgba(0,0,0,.15); } .mp-card-act i { font-size: .9rem; } .mp-card-media:hover .mp-card-act { opacity: 1; transform: translateY(0); } .mp-card-act:hover { background: #111; color: #fff; } @media (max-width: 991px) { .mp-card-act { opacity: 1; transform: translateY(0); } } /* Listing hero (with banner image) */ .mp-listing-hero { position: relative; min-height: 280px; display: flex; align-items: center; background-size: cover; background-position: center; margin-bottom: 28px; } .mp-listing-hero.no-img { background: linear-gradient(120deg, #2b2b2b 0%, #4a4a4a 55%, #2b2b2b 100%); } .mp-listing-crumbs { margin-bottom: 8px; color: rgba(255,255,255,.8); } .mp-listing-crumbs a { color: rgba(255,255,255,.8); text-decoration: none; } .mp-listing-crumbs a:hover { color: #fff; } .mp-listing-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15)); } .mp-listing-hero-inner { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; width: 100%; color: #fff; padding: 30px clamp(18px, 4vw, 48px); } .mp-listing-hero-left { max-width: 60%; } .mp-listing-hero-right { max-width: 38%; text-align: right; } .mp-listing-hero-right p { margin: 0; font-size: .95rem; line-height: 1.7; color: rgba(255,255,255,.92); } .mp-listing-sub { display: inline-block; font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; opacity: .85; margin-bottom: 6px; } .mp-listing-sub.dark { color: #888; } .mp-listing-title { font-family: var(--mp-font-heading); font-weight: 400; font-size: 2.6rem; line-height: 1.1; margin: 0; } .mp-listing-title.dark { color: #111; } /* Listing head (no banner) */ .mp-listing-head { padding: 30px 0 18px; border-bottom: 1px solid #eee; margin-bottom: 24px; } .mp-listing-crumbs a { color: #888; text-decoration: none; } .mp-listing-crumbs a:hover { color: #111; } .mp-listing-crumbs .sep { color: #ccc; } .mp-listing-desc { color: #666; margin: 8px 0 0; max-width: 720px; } /* Filter / sort bar */ .mp-listing-bar { display: flex; align-items: center; gap: 18px; padding: 10px 0 18px; border-bottom: 1px solid #eee; margin-bottom: 22px; flex-wrap: wrap; } .mp-listing-bar-left, .mp-listing-bar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* HugoBoss-style dark toolbar: [N items] [Filter] [Sort] [view icons] */ /* Compact dark toolbar (HugoBoss-style): [N items] [Filter] [Sort] [view] — left-aligned, only as wide as its content (not full screen). */ .mp-listing-bar-dark { background: #111; color: #fff; padding: 8px 12px; border-bottom: 0; border-radius: 4px; gap: 10px; flex-wrap: nowrap; width: fit-content; max-width: 100%; } .mp-listing-bar-dark .mp-listing-count { color: #fff; font-weight: 600; font-size: .8rem; margin-right: 0; white-space: nowrap; } .mp-listing-bar-dark .mp-filter-open { padding: 5px 12px; font-size: .8rem; } .mp-listing-bar-dark .mp-listing-sort { margin-left: 0; gap: 5px; } .mp-listing-bar-dark .mp-listing-sort i { color: #ccc; font-size: .8rem; } .mp-listing-bar-dark .mp-listing-sort select { background: #111; color: #fff; border: 1px solid #555; border-radius: 4px; padding: 5px 22px 5px 8px; font-size: .8rem; } .mp-listing-bar-dark .mp-view-btn { background: transparent; border: 1px solid #555; color: #ccc; width: 30px; height: 30px; } .mp-listing-bar-dark .mp-view-btn.active { background: #fff; color: #111; border-color: #fff; } /* Mobile: keep everything on one line, tighter */ @media (max-width: 576px) { .mp-listing-bar-dark { padding: 7px 9px; gap: 6px; } .mp-listing-bar-dark .mp-listing-count { font-size: .72rem; } .mp-listing-bar-dark .mp-filter-open { padding: 4px 9px; font-size: .72rem; gap: 5px; } .mp-listing-bar-dark .mp-listing-sort select { font-size: .72rem; padding: 4px 20px 4px 6px; } .mp-listing-bar-dark .mp-listing-sort i { display: none; } .mp-listing-bar-dark .mp-view-btn { width: 27px; height: 27px; font-size: .8rem; } } /* ===== Filter drawer (HugoBoss-style: slides from the LEFT) ===== */ .mp-filter-open { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid #fff; border-radius: 4px; padding: 8px 16px; font-size: .9rem; font-weight: 500; color: #fff; cursor: pointer; } .mp-filter-open:hover { background: #fff; color: #111; } .mp-filter-open-count { color: #ff8a93; font-weight: 700; } .mp-filter-open:hover .mp-filter-open-count { color: #e63946; } .mp-filter-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1090; opacity: 0; transition: opacity .25s ease; } .mp-filter-overlay.show { opacity: 1; } .mp-filter-drawer { position: fixed; top: 0; left: 0; height: 100vh; width: 400px; max-width: 90vw; background: #fff; z-index: 1091; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .28s ease; box-shadow: 8px 0 30px rgba(0,0,0,.15); } .mp-filter-drawer.open { transform: translateX(0); } .mp-filter-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #eee; } .mp-filter-head h5 { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; } .mp-filter-close { background: none; border: 0; font-size: 1.1rem; cursor: pointer; color: #333; } .mp-filter-body { flex: 1; overflow-y: auto; padding: 4px 22px 12px; } .mp-facet { border-bottom: 1px solid #eee; } .mp-facet > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: .92rem; font-weight: 600; color: #111; padding: 16px 0; user-select: none; } .mp-facet > summary::-webkit-details-marker { display: none; } .mp-facet > summary i { font-size: .8rem; transition: transform .2s; color: #777; } .mp-facet[open] > summary i { transform: rotate(180deg); } .mp-facet-panel { padding: 0 2px 18px; display: flex; flex-direction: column; gap: 10px; } .mp-facet-opt { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: #333; margin: 0; cursor: pointer; } .mp-facet-opt input { width: 16px; height: 16px; } .mp-facet-swatch { display: inline-block; width: 18px; height: 18px; border: 1px solid #ccc; border-radius: 50%; } .mp-facet-swatches { flex-direction: row; flex-wrap: wrap; gap: 14px 16px; } .mp-facet-swatches .mp-facet-opt { flex-direction: column; gap: 5px; font-size: .75rem; text-align: center; } .mp-facet-swatches .mp-facet-opt input { position: absolute; opacity: 0; } .mp-facet-swatches .mp-facet-swatch { width: 30px; height: 30px; } .mp-facet-swatches .mp-facet-opt input:checked + .mp-facet-swatch { outline: 2px solid #111; outline-offset: 2px; } .mp-filter-foot { display: flex; gap: 12px; padding: 16px 22px; border-top: 1px solid #eee; } .mp-filter-clear { flex: 0 0 auto; background: none; border: 1px solid #ccc; border-radius: 4px; padding: 12px 18px; font-size: .9rem; cursor: pointer; color: #333; } .mp-filter-clear:hover { border-color: #111; } .mp-filter-apply { flex: 1; background: #111; color: #fff; border: 0; border-radius: 4px; padding: 12px; font-size: .9rem; font-weight: 600; cursor: pointer; } .mp-filter-apply:hover { background: #000; } .mp-listing-count { color: #777; font-size: .85rem; } .mp-listing-sort { display: flex; align-items: center; gap: 8px; } .mp-listing-sort label { font-size: .82rem; color: #777; margin: 0; } .mp-listing-sort select { border: 1px solid #ccc; border-radius: 4px; padding: 7px 28px 7px 12px; font-size: .85rem; background-color: #fff; } .mp-listing-view { display: inline-flex; gap: 2px; } .mp-view-btn { border: 1px solid #ddd; background: #fff; color: #999; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; } .mp-view-btn.active { color: #111; border-color: #111; } .mp-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 992px) { .mp-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } } .mp-filter-offcanvas .mp-filter-block { margin-bottom: 18px; } .mp-filter-offcanvas h6 { font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; } @media (max-width: 575px) { .mp-listing-hero { min-height: 200px; } .mp-listing-hero-inner { flex-direction: column; align-items: flex-start; } .mp-listing-hero-left, .mp-listing-hero-right { max-width: 100%; text-align: left; } .mp-listing-title { font-size: 1.8rem; } } /* ===================================================================== * MEGA MENU (desktop only) — full-width panel on hover. * Panel HTML is admin-authored; mobile uses the regular offcanvas menu. * ===================================================================== */ .mp-head-dark { position: relative; } .mp-nav-item-mega { position: static; display: inline-flex; align-items: center; } .mp-nav-link-mega { display: inline-flex; align-items: center; gap: 4px; } .mp-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; color: #111; border-top: 1px solid #ececec; box-shadow: 0 16px 34px rgba(0,0,0,.14); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 1050; } .mp-nav-item-mega:hover > .mp-mega { opacity: 1; visibility: visible; transform: translateY(0); } .mp-mega-inner { padding: 28px 0; } /* Generic mega-panel link/img styling — but DON'T touch product-card internals (they bring their own styling from the shared card CSS; otherwise the image collapses inside its aspect box and the Add/Choose hover colour breaks). */ .mp-mega a:not([class*="mp-card"]) { color: #333; text-decoration: none; } .mp-mega a:not([class*="mp-card"]):hover { color: #000; text-decoration: underline; } .mp-mega img:not([class*="mp-card"]) { max-width: 100%; height: auto; display: block; } @media (max-width: 991px) { .mp-mega { display: none !important; } /* desktop-only; mobile uses drawer menu */ } /* ===================================================================== * Category/Page Builder — mobile safety net. * 1) GrapesJS rows/cells often carry a fixed `height` (a MINIMUM on desktop * table-cells, but a HARD height once cells become display:block on mobile), * which made taller content (e.g. an [image_box_carousel]) overflow and the * next section overlap it. On mobile, let cells grow to their content. * 2) `.gjs-row{display:table}` uses AUTO table layout, which sizes to the * child's max-content width. A horizontally-scrolling carousel (its track is * wider than the screen) then stretched the row past the viewport, pushing * the whole page into horizontal scroll. Forcing rows/cells to full-width * block on mobile keeps them within the viewport so the carousel scrolls * inside its own track instead of widening the body. * ===================================================================== */ @media (max-width: 768px) { .mp-listing-below-hero .gjs-row, .mp-category-builder .gjs-row, .mp-page-body .gjs-row { display: block !important; width: 100% !important; } .mp-listing-below-hero .gjs-cell, .mp-category-builder .gjs-cell, .mp-page-body .gjs-cell { height: auto !important; display: block !important; width: 100% !important; } /* Belt-and-suspenders: never let builder content widen the page on mobile. */ .mp-listing-below-hero, .mp-category-builder { max-width: 100%; overflow-x: hidden; } } /* ===================================================================== * Mobile drawer sub-menus (expand/collapse) + fixed mobile header. * ===================================================================== */ .mp-offcanvas-nav .mp-m-item { border-bottom: 1px solid rgba(0,0,0,.05); } .mp-offcanvas-nav .mp-m-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .mp-offcanvas-nav .mp-m-row > .nav-link { flex: 1 1 auto; } .mp-offcanvas-nav .mp-m-toggle { flex: 0 0 auto; background: none; border: 0; color: inherit; cursor: pointer; padding: 8px 12px; font-size: 15px; line-height: 1; border-radius: 6px; transition: transform .2s ease, background .15s; } .mp-offcanvas-nav .mp-m-toggle:hover { background: rgba(0,0,0,.05); } .mp-offcanvas-nav .mp-m-toggle[aria-expanded="true"] { transform: rotate(180deg); } .mp-offcanvas-nav .mp-m-sub { margin: 2px 0 6px; padding-left: 14px; border-left: 2px solid rgba(0,0,0,.08); } .mp-offcanvas-nav .mp-m-sub .nav-link { font-size: .9em; color: #666; padding: 6px 0; } .mp-offcanvas-nav .mp-m-sub .mp-m-toggle { padding: 6px 10px; } /* Keep the mobile header pinned to the top while scrolling. Overrides the `.mp-header{position:static}` mobile rule for the fashion header. */ @media (max-width: 768px) { .mp-header.mp-header-fashion { position: sticky; top: 0; z-index: 1030; } } /* ===================================================================== * Black & white theme — neutralise Bootstrap's default blue everywhere * (radios, checkboxes, focus rings, links, pagination, .text-primary). * ===================================================================== */ .form-check-input:checked { background-color: var(--mp-primary); border-color: var(--mp-primary); } .form-check-input:focus { border-color: #333; box-shadow: 0 0 0 .2rem rgba(0,0,0,.15); } .form-check-input:focus:not(:checked) { border-color: #888; } .form-control:focus, .form-select:focus { border-color: #111; box-shadow: 0 0 0 .2rem rgba(0,0,0,.10); } .text-primary { color: var(--mp-primary) !important; } .link-primary, a.text-primary, a.link-primary { color: var(--mp-primary) !important; } .btn-outline-primary { color: var(--mp-primary); border-color: var(--mp-primary); } .btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--mp-primary); border-color: var(--mp-primary); color: #fff; } .btn-check:checked + .btn-outline-primary { background: var(--mp-primary); border-color: var(--mp-primary); color: #fff; } .page-link { color: var(--mp-primary); } .page-item.active .page-link { background: var(--mp-primary); border-color: var(--mp-primary); } .nav-pills .nav-link.active { background: var(--mp-primary); } :root { accent-color: #111; } .spinner-border.text-primary, .text-info { color: var(--mp-primary) !important; } .alert-info { background: #f4f4f6; border-color: #e4e4ea; color: #333; } .alert-info a { color: #111; }