/* * Payism homepage layout fixes (V4 "fix, don't hide", 2026-10-22). * Shared corrections for the six storefront homepages (Classic, Metro, Minima, * Megamart, Re-Classic, The Core) and the six headers. Loaded after * payism-storefront.css and thecore.css so these rules win without !important * where possible. Each block names the defect it fixes. */ /* L1: product rows with fewer products than visible slots were centred by slick (.slick-track has margin auto), leaving an empty gap on the left. */ .payism-carousel.slick-slider .slick-track { margin-left: 0; margin-right: auto; } [dir="rtl"] .payism-carousel.slick-slider .slick-track { margin-left: auto; margin-right: 0; } /* L2: price + struck MRP sat in one non-wrapping row and ran out of narrow phone cards (the price was clipped). Let them wrap with a gap. */ .psf-price-row { column-gap: 6px; row-gap: 2px; } .psf-price-row > div { min-width: 0; white-space: nowrap; } /* L3: header 5/6 settings menu (gear / filter icon) sits at the right edge and is right-aligned, but its language/currency sub-menus opened to the RIGHT on desktop (inline left:100%), running off the screen. Open them leftwards, as payism-core.css already does below 992px. */ .dropdown-menu-right .dropdown-submenu > .child-dropdown { left: auto !important; right: 100% !important; margin-right: -1px; } /* H: six distinct headers (V2 round 2, previews lane). Every header keeps its cart, wishlist, compare, account, search and language/currency controls; only placement and styling differ. Colours come from Header Settings through the custom properties that LayoutContrast::headerVars() prints on
: --payism-hdr-top / -mid / -bar (top, middle and menu-bar colours), --payism-hdr-ink (text on the middle bar) and --payism-hdr-bar-ink (text on the menu bar). 1 Classic white, boxed menu bar phone: menu, logo, search icon, Login 2 Market bar square search + search button phone: search field always open, 2nd row 3 Solid colour pill search, centred menu phone: logo centred on the colour band 4 Light accent accent outline, underline menu phone: logo first, menu button on the right 5 One row logo, links and icons in a row phone: the menu links as a 2nd row 6 Compact compact row + full-width bar phone: search field inline in the row */ .payism-hdr .search-input-box > svg.payism-hdr-search-go { cursor: pointer; } /* On a dark band (headers 3 and 5 by default) the logo sits on a light chip so a dark or coloured logo stays readable; on light bands the chip is transparent. */ .payism-hdr:not(.payism-hdr-1) #header-logo-preview { background: var(--payism-hdr-chip, transparent); border-radius: 8px; box-sizing: content-box; padding: 3px 8px; } /* H2 Market bar: a square search field with a solid search button in the menu-bar colour. */ .payism-hdr-2 .search-input-box > input { border: 2px solid var(--payism-hdr-bar) !important; border-radius: 0 !important; height: 44px; padding-right: 64px; } .payism-hdr-2 .search-input-box > svg.payism-hdr-search-go { top: 0; right: 0; width: 54px; height: 44px; padding: 12px 17px; background: var(--payism-hdr-bar); } [dir="rtl"] .payism-hdr-2 .search-input-box > svg.payism-hdr-search-go { right: auto; left: 0; } [dir="rtl"] .payism-hdr-2 .search-input-box > input { padding-right: 12px; padding-left: 64px; } .payism-hdr-2 .search-input-box > svg.payism-hdr-search-go path { fill: var(--payism-hdr-bar-ink); } /* H3 Solid colour: a pill search that floats on the band and a centred menu. */ .payism-hdr-3 .search-input-box > input { border-radius: 999px !important; border-color: transparent !important; height: 44px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); } .payism-hdr-3 .front-header-search { border-radius: 999px; } .payism-hdr-3 .payism-hdr-menubar .justify-content-xl-start { justify-content: center !important; } /* H4 Light accent: accent strip on top, accent outline on the search, an accent underline under the menu and a 3 px accent rule closing the header. */ .payism-hdr-4 { border-bottom: 3px solid var(--payism-hdr-top); } .payism-hdr-4 .search-input-box > input { border: 1.5px solid var(--payism-hdr-top) !important; border-radius: 8px !important; } .payism-hdr-4 .payism-hdr-menubar .header_menu_links:hover, .payism-hdr-4 .payism-hdr-menubar .header_menu_links.active { box-shadow: inset 0 -3px 0 var(--payism-hdr-top); background: transparent !important; } @media (max-width: 991.98px) { /* The menu button and search icon take the band's readable ink on coloured headers. */ .payism-hdr:not(.payism-hdr-1) .logo-bar-area button[data-target=".payism-top-menu-sidebar"] svg rect { fill: currentColor; } .payism-hdr:not(.payism-hdr-1) .logo-bar-area button[data-target=".payism-top-menu-sidebar"], .payism-hdr:not(.payism-hdr-1) .logo-bar-area a[data-target=".front-header-search"] { color: var(--payism-hdr-ink) !important; } /* H2: the search field is always open, as a second full-width row. */ .payism-hdr-2 .logo-bar-area .container > .d-flex { flex-wrap: wrap; } .payism-hdr-2 .front-header-search { position: static; opacity: 1; transform: none; -webkit-transform: none; flex: 0 0 100%; order: 9; height: auto; margin: 0 0 10px; background: transparent !important; border-radius: 0; } .payism-hdr-2 .front-header-search .position-relative.flex-grow-1 { padding: 0 !important; } .payism-hdr-2 .front-header-search form .d-lg-none, .payism-hdr-2 .logo-bar-area a[data-target=".front-header-search"] { display: none !important; } .payism-hdr-2 .logo-bar-area .col-auto > a { padding-top: 12px !important; padding-bottom: 12px !important; } /* H3: the logo is centred on the colour band; menu on the left, search and account on the right. */ .payism-hdr-3 .logo-bar-area .container > .d-flex { position: relative; min-height: 64px; } .payism-hdr-3 .logo-bar-area .container > .d-flex > .col-auto { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 !important; z-index: 1; } .payism-hdr-3 .logo-bar-area .container > .d-flex > .col-auto > a { margin: 0 !important; padding: 0 !important; } .payism-hdr-3 #header-logo-preview { width: 104px; height: 26px !important; object-fit: contain; } .payism-hdr-3 .logo-bar-area .d-lg-none.ml-auto { position: relative; z-index: 2; } .payism-hdr-3 .logo-bar-area .d-lg-none.ml-auto a.btn[href*="login"] { background: var(--payism-hdr-ink) !important; color: var(--payism-hdr-mid) !important; border-radius: 999px !important; } /* H4: logo first, menu button at the right end. */ .payism-hdr-4 .logo-bar-area button[data-target=".payism-top-menu-sidebar"] { order: 20; flex: 0 0 auto; margin: 0 2px 0 10px !important; } .payism-hdr-4 .logo-bar-area .container > .d-flex > .col-auto { flex: 0 1 auto; min-width: 0; } .payism-hdr-4 .logo-bar-area .d-lg-none.ml-auto { flex: 0 0 auto; } .payism-hdr-4 .logo-bar-area .d-lg-none.ml-auto a.btn[href*="login"] { background: transparent !important; color: var(--payism-hdr-top) !important; border: 1.5px solid var(--payism-hdr-top) !important; } /* H5: the menu links stay on screen as a second, swipeable row. */ .payism-hdr-5 .logo-bar-area .container > .d-flex { flex-wrap: wrap; } .payism-hdr-5 .logo-bar-area .container > .d-flex > .col-auto { flex: 1 1 0; min-width: 0; } .payism-hdr-5 #header-logo-preview { max-width: 130px; object-fit: contain; object-position: left center; } .payism-hdr-5 .header-menus-container { display: block !important; order: 9; flex: 0 0 100%; margin: 2px 0 0 !important; overflow: hidden; } .payism-hdr-5 .header-menus-container > .d-flex { justify-content: flex-start !important; } .payism-hdr-5 .header-menus-container ul { width: 100%; padding-bottom: 2px; scrollbar-width: none; } .payism-hdr-5 .header-menus-container ul::-webkit-scrollbar { display: none; } .payism-hdr-5 .header-menus-container a { color: var(--payism-hdr-ink) !important; padding: 6px 12px 6px 0 !important; } /* H6: the search field sits inline in the compact row (no search icon needed) and the account button becomes an icon, so logo, search, account and settings share one row. */ .payism-hdr-6 .front-header-search { position: static; opacity: 1; transform: none; -webkit-transform: none; height: auto; flex: 1 1 0; min-width: 0; margin: 0 2px 0 6px; background: transparent !important; } .payism-hdr-6 .front-header-search .position-relative.flex-grow-1 { padding: 0 !important; } .payism-hdr-6 .front-header-search form .d-lg-none, .payism-hdr-6 .logo-bar-area a[data-target=".front-header-search"] { display: none !important; } .payism-hdr-6 .search-input-box > input { height: 36px; border-radius: 999px; font-size: 13px !important; padding-right: 34px; } .payism-hdr-6 .search-input-box > svg { top: 9px; right: 12px; width: 18px; height: 18px; } .payism-hdr-6 .logo-bar-area button[data-target=".payism-top-menu-sidebar"] { margin-right: 10px !important; } .payism-hdr-6 .logo-bar-area .col-auto { flex: 0 1 104px; min-width: 0; padding-right: 0 !important; } .payism-hdr-6 .logo-bar-area .col-auto > a { margin-right: 0 !important; min-width: 0; } .payism-hdr-6 #header-logo-preview { padding: 0; width: 100%; height: 30px !important; object-fit: contain; object-position: left center; } .payism-hdr-6 .logo-bar-area .col-1 { flex: 0 0 auto; width: auto; max-width: none; padding: 0; margin-top: 0 !important; display: flex; align-items: center; } .payism-hdr-6 .logo-bar-area .col-1 > ul { width: auto; } .payism-hdr-6 .logo-bar-area .d-lg-none.ml-auto { margin-left: 0 !important; } .payism-hdr-6 .logo-bar-area .d-lg-none.ml-auto a.btn[href*="login"] { font-size: 0 !important; padding: 0 6px !important; background: transparent !important; line-height: 1; } .payism-hdr-6 .logo-bar-area .d-lg-none.ml-auto a.btn[href*="login"]::before { content: "\f007"; font-family: "Line Awesome Free"; font-weight: 900; font-size: 24px; color: var(--payism-hdr-ink); } } /* F1: the faint white fade on the right (and left) edge at 1366. The header's drop shadow (thecore.css: 0 10px 28px on .payism-retail-header, and header 6's menu bar) is a blurred box-shadow with no spread, so it thins out over the last ~28 px at both ends of the page and leaves a lighter band against the right edge on every page. A full-width gradient under the header gives the same soft shadow without the fading ends. */ .payism-thecore .payism-retail-header { box-shadow: none; } .payism-retail-header:not(.sticky-top) { position: relative; } .payism-thecore .payism-retail-header::after, .payism-hdr-6 .payism-hdr-menubar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px; background: linear-gradient(to bottom, rgba(16, 35, 60, 0.08), rgba(16, 35, 60, 0)); pointer-events: none; } .payism-hdr-6 .payism-hdr-menubar { box-shadow: none !important; } /* F2: 1 px sideways scroll on phones. Banner carousels (Metro, Minima, Megamart, Re-Classic) use .gutters-16: -16 px margins and width + 32 px inside a container padded 15 px, so they ran 1 px past the screen. On phones the gutter matches the container padding. */ @media (max-width: 575.98px) { .gutters-16 { margin-right: -15px; margin-left: -15px; } .gutters-16 > .col, .gutters-16 > [class*="col-"] { padding-right: 15px; padding-left: 15px; } .payism-carousel.gutters-16 { width: calc(100% + 30px); } .payism-carousel.gutters-16 .carousel-box { padding-left: 15px; padding-right: 15px; } } /* The fixed phone bottom nav's .row (gutters-5) ran 5 px past the screen edge. */ .payism-mobile-bottom-nav > .row { margin-left: 0; margin-right: 0; }