/* Affhaat unified brand layer — loaded after all legacy theme files. Brand palette: Affhaat orange, warm white, charcoal text. */ :root { --af-orange: #f47721; --af-orange-dark: #d95c0b; --af-orange-soft: #fff1e6; --af-ink: #202938; --af-muted: #687386; --af-border: #e7eaf0; --af-surface: #ffffff; --af-page: #f7f8fa; --primary: var(--af-orange); --primary-color: var(--af-orange); --brand-primary: var(--af-orange); --nx-primary: var(--af-orange); --nx-accent: var(--af-orange); --bs-primary: var(--af-orange); --bs-link-color: var(--af-orange-dark); --bs-link-hover-color: var(--af-orange); } html, body { color: var(--af-ink); } body { background-color: var(--af-page); } a { text-underline-offset: 3px; } a:not(.btn):not(.nx-cat-link):not(.staff-bar-link):not(.brand):not(.nx-action) { } /* Customer navigation: strong orange bar with high-contrast white links. */ .nx-catbar { background: #ffffff !important; border-color: var(--af-orange-dark) !important; box-shadow: 0 3px 10px rgba(135, 62, 12, .13); } .nx-catbar-inner { background: transparent !important; } .nx-cat-link, .nx-cat-link:link, .nx-cat-link:visited { color: #fff !important; font-weight: 700; transition: background-color .18s ease, color .18s ease; } .nx-cat-link:hover, .nx-cat-link:focus, .nx-cat-item:hover > .nx-cat-link, .nx-cat-item:focus-within > .nx-cat-link { background: var(--af-orange-dark) !important; color: #fff !important; } .nx-cat-sub, .nx-cat-sub a, .nx-cat-subitem { color: var(--af-ink) !important; } .nx-cat-sub { background: #fff !important; border: 1px solid var(--af-border) !important; box-shadow: 0 12px 30px rgba(20, 28, 40, .15) !important; } .nx-cat-sub a:hover, .nx-cat-subitem:hover > a { background: var(--af-orange-soft) !important; color: var(--af-orange-dark) !important; } /* Staff navigation uses the same brand orange, with readable white controls. */ .staff-bar { background: var(--af-orange) !important; color: #fff !important; border-color: var(--af-orange-dark) !important; } .staff-bar a, .staff-bar-brand, .staff-bar-link, .staff-bar-role { color: #fff !important; } .staff-bar-link:hover, .staff-bar-link:focus { background: var(--af-orange-dark) !important; } .staff-bar-mark { background: #fff !important; color: var(--af-orange-dark) !important; } /* Primary actions and active states share one orange system across storefront/admin. */ .btn-primary, .button-primary, button.btn-primary, input[type=submit].btn-primary { background: var(--af-orange) !important; border-color: var(--af-orange) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus, .button-primary:hover { background: var(--af-orange-dark) !important; border-color: var(--af-orange-dark) !important; color: #fff !important; } .btn-outline-primary, .btn-outline { border-color: var(--af-orange) !important; } .btn-outline-primary { color: var(--af-orange-dark) !important; } .btn-outline-primary:hover { background: var(--af-orange) !important; color: #fff !important; } .text-primary, .link-primary { color: var(--af-orange-dark) !important; } .bg-primary, .badge-primary { background-color: var(--af-orange) !important; } .form-control:focus, .form-select:focus, select:focus, textarea:focus, input:focus { border-color: #f7a66e; box-shadow: 0 0 0 .2rem rgba(244, 119, 33, .15); } /* Consistent card, table and form finish on all admin and customer pages. */ .card, .panel, .table-responsive, .filter-card, .form-card { border-color: var(--af-border); } .card { border-radius: 12px; } .table thead th { color: #3c4657; background: #f5f6f8; } .table tbody tr:hover { background: #fff8f2; } .page-title { color: var(--af-ink); } /* Sidebar: orange is reserved for the selected item and small accents. */ .admin-sidebar .active, .sidebar .active, .admin-nav .active, .nav-sidebar .active { background: var(--af-orange-soft) !important; color: var(--af-orange-dark) !important; border-color: var(--af-orange) !important; } .admin-sidebar a:hover, .sidebar a:hover, .admin-nav a:hover, .nav-sidebar a:hover { color: var(--af-orange-dark) !important; } /* Brand mark remains legible on the white header. */ .brand-mark { background: var(--af-orange) !important; color: #fff !important; } .nx-header { background: #fff; } .header-top { background: #fff8f2; } .header-top a:hover { color: var(--af-orange-dark) !important; } /* Keep mobile navigation usable and prevent long category lists from breaking layout. */ @media (max-width: 768px) { .nx-catbar { background: #ffffff !important; } .nx-catbar-inner { gap: 2px; } .nx-cat-link { min-height: 40px; padding: 10px 12px; } .staff-bar-inner { gap: 6px; } .staff-bar-link { white-space: nowrap; } .card { border-radius: 10px; } } /* ========================================================================== MOBILE FIX PASS (v37) Fixes found by rendering the storefront at 390px: 1. Horizontal page overflow — the category-carousel arrows were pinned at left/right:-8px, i.e. 8px OUTSIDE the viewport, so every home page scrolled sideways (scrollWidth 398 vs 390). They are pulled back inside the viewport on phones. 2. Tiny, hard-to-read type — product titles, price rows, discount badges, meta rows and category labels were 0.66–0.82rem (10–13px). They are raised to a legible mobile scale. 3. Cramped wrapping — product titles are clamped to two tidy lines with a comfortable line-height instead of colliding with the price row. ========================================================================== */ /* 1. PAGE-LEVEL SIDEWAYS SCROLL — fixed at its source this time. ------------------------------------------------------------------- v37 shipped `html, body { overflow-x: hidden }`. That only HID the symptom: the real cause was that `.cat-track` (a flex item with the default `min-width: auto`) refused to shrink below its three cards, so the grid column and every box around it grew to 502px on a 390px phone, and the carousel was never wider than its own box — nothing left to scroll, the extra cards just got clipped. v38 fixes the CAUSE in affhaat-v36-redesign.css (grid column `minmax(0, 1fr)` + `min-width: 0` on the row) and keeps only a `clip` guard here. `clip` — unlike `hidden` — does NOT create a scroll container, so it can never interfere with a descendant's own `overflow-x: auto`. ------------------------------------------------------------------- */ html { max-width: 100%; overflow-x: clip; } body { max-width: 100%; overflow-x: clip !important; overflow-y: visible; } /* ---- The horizontal scroll containers themselves (v38) ---------------- A single, explicit contract for every sideways-scrolling row: it scrolls, a sideways fling stays inside the row instead of chaining to the page, and iOS gets momentum. */ .cat-track, .nx-ads-rail { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .nx-ads-rail { overflow-y: hidden; } /* Desktop: a subtle but VISIBLE scrollbar, so the row is discoverable. */ @media (min-width: 769px) { .cat-track, .nx-ads-rail { scrollbar-width: thin; } .cat-track::-webkit-scrollbar, .nx-ads-rail::-webkit-scrollbar { height: 6px; } .cat-track::-webkit-scrollbar-thumb, .nx-ads-rail::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; } } /* Mobile: swipe IS the affordance, so the scrollbar is removed entirely. */ @media (max-width: 768px) { .cat-track, .nx-ads-rail { scrollbar-width: none; -ms-overflow-style: none; } .cat-track::-webkit-scrollbar, .nx-ads-rail::-webkit-scrollbar { display: none; height: 0; } } /* Mouse affordance: on a fine pointer the row is draggable (see hscroll.js) and scroll-snap is switched off, because mandatory snapping fights both a manual drag and wheel scrolling. Touch keeps `x mandatory`. */ @media (hover: hover) and (pointer: fine) { .cat-track { scroll-snap-type: none; } .cat-track, .nx-ads-rail { cursor: grab; } .cat-track.is-dragging, .nx-ads-rail.is-dragging { cursor: grabbing; user-select: none; } .cat-track.is-dragging * { pointer-events: none; } } @media (max-width: 768px) { /* Carousel arrows must sit INSIDE the viewport, never at -8px. */ .cat-nav.prev { left: 2px !important; } .cat-nav.next { right: 2px !important; } .cat-nav { width: 32px !important; height: 32px !important; } /* 2. Legible mobile type scale. */ .pc-title, .card.product-card .pc-title { font-size: 0.92rem !important; line-height: 1.35 !important; min-height: 2.7em !important; max-height: 2.7em !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } .pc-amount { font-size: 1.02rem !important; } .pc-off { font-size: 0.8rem !important; } .old-price { font-size: 0.8rem !important; } .pc-plus { font-size: 0.72rem !important; } .pc-meta, .pc-stock, .pc-sold { font-size: 0.76rem !important; } .pc-badge { font-size: 0.72rem !important; } /* Category labels in the mobile drawer + any visible category chips. */ .mobile-nav-drawer a, .mobile-nav-parent, .mobile-nav-child { font-size: 0.95rem !important; } .nx-cat-link { font-size: 0.9rem !important; } /* 3. Comfortable spacing so nothing collides. */ .pc-body { padding: 12px 12px 14px !important; } .pc-price { flex-wrap: wrap; row-gap: 2px; } .cat-track { gap: 12px !important; padding: 6px 2px 14px !important; } .cat-item { flex: 0 0 168px !important; } } @media (max-width: 480px) { .pc-title, .card.product-card .pc-title { font-size: 0.9rem !important; } .pc-amount { font-size: 1rem !important; } .cat-item { flex: 0 0 158px !important; } } /* 4. Cookie consent strip and the app bottom-nav both pin to the bottom edge, so on a phone they used to overlap. While the consent strip is up the bottom nav steps aside; it returns the moment the visitor accepts or declines (the JS toggles body.nx-cookie-open). */ body.nx-cookie-open .af-bottom-nav { display: none !important; } /* v34 FIX — the consent strip is position:fixed at the bottom with z-index 1000, and the page did NOT reserve room for it. On a short viewport (a laptop at 1280x577, or any phone) the strip sat on top of the LOGIN FORM and covered the password field completely: a visitor literally could not sign in until they dismissed it. Reserving the strip's own height as bottom padding means it can never cover page content, while it still stays pinned. */ body.nx-cookie-open { padding-bottom: var(--nx-cookie-h, 132px) !important; } @media (min-width: 700px) { body.nx-cookie-open { padding-bottom: var(--nx-cookie-h, 84px) !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ========================================================================== v39 MOBILE ADMIN SHELL FIX (mobile-login layout repair) -------------------------------------------------------------------------- SYMPTOM: after logging in on a phone the dashboard was pushed ~2/3 of the screen to the right and the left of the screen was blank. CAUSE: at <=960px `style.css` only slid the sidebar away visually (`transform: translateX(-100%)`) while leaving it `position: sticky`. A sticky element still takes part in flex layout, so the 260px sidebar kept reserving 260px of the row: on a 390px viewport `.admin-main` was left with just 74px and started at x=260. FIX: below 960px the sidebar is a true off-canvas overlay (`position: fixed`), so it reserves NO layout width. The content takes the full viewport at all times, and the hamburger remains the only way in. This block lives in the LAST stylesheet the header loads, so it wins without `!important` wars against the older rules in style.css / affhaat-v36-redesign.css. Desktop (>=961px) is untouched. ========================================================================== */ @media (max-width: 960px) { /* 1. Off-canvas: fixed positioning removes it from the flex row entirely. */ .admin-shell > .admin-sidebar, .admin-shell .admin-sidebar, aside.admin-sidebar, .admin-sidebar, body.is-admin-shell .admin-sidebar { position: fixed !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 280px !important; min-width: 0 !important; max-width: 86vw !important; height: 100% !important; margin: 0 !important; transform: translateX(-100%) !important; transition: transform .22s ease !important; z-index: 1000 !important; overflow-y: auto !important; overflow-x: hidden !important; /* The old design kept a permanent right-edge shadow; on an off-canvas drawer it showed as a grey stripe on the closed screen. */ box-shadow: none !important; visibility: hidden; } .admin-shell > .admin-sidebar.is-open, .admin-shell .admin-sidebar.is-open, aside.admin-sidebar.is-open, .admin-sidebar.is-open, body.is-admin-shell .admin-sidebar.is-open { transform: translateX(0) !important; visibility: visible; box-shadow: 8px 0 32px rgba(15, 36, 57, .32) !important; } /* 2. Content always fills the viewport - no reserved sidebar column. */ body.is-admin-shell .admin-shell, .admin-shell { display: block !important; } body.is-admin-shell .admin-main, .admin-main { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; padding-left: 0 !important; } body.is-admin-shell .admin-content, .admin-content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; padding: 14px 14px 96px !important; box-sizing: border-box !important; } /* 3. The hamburger is the ONLY route into the menu - it must be visible. style.css declared `display:none` twice at this width; this block is loaded last so it is the single rule that wins. */ .admin-sidebar-toggle, #adminSidebarToggle { display: inline-flex !important; visibility: visible !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; min-width: 42px !important; flex: 0 0 42px !important; border: 1px solid #cbd5e1 !important; background: #fff !important; color: #0f172a !important; border-radius: 10px !important; font-size: 20px !important; line-height: 1 !important; cursor: pointer !important; position: relative !important; z-index: 50 !important; } /* 4. Top bar: let the title shrink instead of pushing the row wider than the screen. */ body.is-admin-shell .admin-topbar, .admin-topbar { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; padding: 10px 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .admin-topbar-title { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* The search field is the one element that could still force overflow. */ .admin-topbar-search { display: none !important; } .admin-topbar-badge { flex: 0 0 auto !important; font-size: .74rem !important; padding: 5px 9px !important; } /* 5. Backdrop above the page but below the drawer. */ .admin-sidebar-backdrop { z-index: 999 !important; } .admin-sidebar-backdrop.is-visible { display: block !important; position: fixed !important; inset: 0 !important; background: rgba(15, 36, 57, .48) !important; } body.admin-sidebar-open { overflow: hidden !important; } /* 6. Wide tables/cards must scroll or wrap, never widen the body. */ body.is-admin-shell .admin-content .card, body.is-admin-shell .admin-content .grid { max-width: 100% !important; box-sizing: border-box !important; } body.is-admin-shell .admin-content .grid { grid-template-columns: minmax(0, 1fr) !important; } body.is-admin-shell .admin-content .table-responsive, body.is-admin-shell .admin-content .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } body.is-admin-shell .admin-content img { max-width: 100% !important; height: auto !important; } } /* Narrow phones (<=400px): tighten paddings so 2-up stat cards still fit. */ @media (max-width: 400px) { body.is-admin-shell .admin-content, .admin-content { padding-left: 10px !important; padding-right: 10px !important; } body.is-admin-shell .admin-content .grid.grid-4, body.is-admin-shell .admin-content .nx-mini-grid-3 { grid-template-columns: minmax(0, 1fr) !important; } } /* ========================================================================== v40 — PDP buy-row single-line fix -------------------------------------------------------------------------- Root cause: nx-theme-pro.css lays .pdp-actions out as a 3-column GRID (Qty | Add to Cart | Buy Now), but affhaat-v36-redesign.css — which is loaded LATER — re-declares the same .pdp-actions selector as `display:flex; flex-wrap:wrap`. Same specificity, so v36 wins the cascade. Combined with nx-theme-pro's `.pdp-actions .btn-buy { width:100% }` each button then claims the full row width and flex-wrap drops it to its own line: Qty on line 1 (leaving a huge empty gap to the right), Add to Cart on line 2, Buy Now on line 3. Fix: restore the intended 3-column grid and neutralise the width:100% so the whole row sits on ONE line, with no dead space to the right. Scoped to .pdp-actions / .pdp-stock only — nothing else on the site moves. ========================================================================== */ .pdp-actions { display: grid !important; grid-template-columns: minmax(64px, 0.62fr) minmax(0, 1fr) minmax(0, 1fr) !important; align-items: end !important; flex-wrap: nowrap !important; gap: 8px !important; margin-top: 12px; } .pdp-actions .qty-wrap { min-width: 0 !important; display: flex; flex-direction: column; gap: 4px; } .pdp-actions .qty-wrap .form-control, .pdp-actions .qty-wrap input { width: 100% !important; min-width: 0 !important; max-width: none !important; } .pdp-actions .btn-buy, .pdp-actions .btn-primary { width: auto !important; min-width: 0 !important; max-width: none !important; padding: 11px 10px !important; font-size: 0.88rem !important; line-height: 1.2 !important; white-space: nowrap !important; border-radius: 10px !important; } /* Stock badge + its label stay on one line — never wrap to 3 lines. */ .pdp-stock { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 8px !important; white-space: nowrap !important; max-width: 100%; overflow: hidden; } .pdp-stock .badge, .pdp-stock span { white-space: nowrap !important; flex-shrink: 0; } /* Very narrow phones: keep the single row, just tighten the gutters. */ @media (max-width: 380px) { .pdp-actions { grid-template-columns: minmax(58px, 0.55fr) minmax(0, 1fr) minmax(0, 1fr) !important; gap: 6px !important; } .pdp-actions .btn-buy, .pdp-actions .btn-primary { font-size: 0.8rem !important; padding: 10px 6px !important; } } /* ========================================================================== v41 — FULL-SITE AUDIT FIX PASS -------------------------------------------------------------------------- Found by measuring all 69 pages at 320 / 360 / 390 / 414 / 768 / 1024 / 1366 / 1440 / 1920 (560 measurements, see the audit report). This file (affhaat-brand-unified.css) is the LAST stylesheet the header loads, so these rules win the cascade by load order alone — no `!important` war against the six earlier files (style.css, nx-v16, nx-v17, nx-theme-pro, affhaat-polish, affhaat-v36-redesign). Sections: 41.1 Cookie banner no longer covers page content 41.2 Admin panels containing a table scroll instead of clipping 41.3 PDP buy row: Qty + Add to Cart + Buy Now on ONE line 41.4 Mobile type scale + touch targets 41.5 Missing product image degrades to a quiet tile 41.6 Staff bar: one swipeable row on a phone 41.7 Admin top bar: account chip no longer clipped Nothing else changes: no colours, no spacing scale, no PHP logic, no database, no hidden order-page controls. ========================================================================== */ /* ========================================================================== 41.1 COOKIE BANNER must not sit on top of page content -------------------------------------------------------------------------- SYMPTOM The fixed cookie strip covered the PDP "Buy Now" row by 42px and the category-carousel arrows by 36px at 1024px; on a phone it covered the last 125px of the page, and the footer could never be scrolled clear of it. CAUSE Two problems stacked: (a) `--nx-cookie-h` is set nowhere in the CSS or the JS, so the body padding always fell back to a hard-coded 132px / 84px. (b) affhaat-v36-redesign.css ships a MORE specific rule @media (max-width:768px) body:not(.is-admin-shell):not(.is-staff-bar){padding-bottom:72px!important} (three class-level selectors) which beat the single `body.nx-cookie-open` rule on every phone AND on any page that renders the staff bar — so the padding was 72-84px while the strip was 98-125px tall. FIX One rule that loses to nobody (selector doubled to raise specificity), guarded by `.nx-cookie-open` so it only applies while a banner is actually on screen. Pure CSS — no JS change. ========================================================================== */ body.nx-cookie-open.nx-cookie-open { padding-bottom: 136px !important; /* strip measures 125px at <=414px */ } @media (min-width: 700px) { body.nx-cookie-open.nx-cookie-open { padding-bottom: 110px !important; /* strip measures 98px from 768px up */ } } /* Let a long translation wrap instead of growing the strip off-screen, and keep both buttons reachable inside it. */ @media (max-width: 480px) { #cookie-banner, .cookie-banner { padding: 12px 14px !important; gap: 10px !important; max-height: 44vh; overflow-y: auto; } #cookie-banner p, .cookie-banner p { min-width: 0 !important; flex: 1 1 100%; font-size: .84rem; line-height: 1.45; margin: 0; } #cookie-banner .cookie-actions, .cookie-banner .cookie-actions { flex: 1 1 100%; gap: 8px; } #cookie-banner .cookie-actions .btn, .cookie-banner .cookie-actions .btn { flex: 1 1 0; min-height: 40px; } } /* ========================================================================== 41.2 ADMIN PANELS THAT CONTAIN A TABLE -------------------------------------------------------------------------- SYMPTOM Admin > Users & Roles > Permissions at 320-414px: the table is 620px wide and its right-hand columns were CUT OFF with no way to reach them — the checkboxes looked like they floated outside the card. CAUSE affhaat-v36-redesign.css:1918 .admin-content .card:has(table) { padding: 0; overflow: hidden; } `overflow: hidden` silently disables the `overflow-x: auto` that nx-theme-pro.css:2131 (.nx-perm-wrap) and affhaat-v36-redesign.css:1927 (.table-wrap) depend on. FIX Keep the edge-to-edge padding, but let the panel scroll sideways. ========================================================================== */ .admin-content .card:has(table), .admin-content .card.nx-perm-wrap { overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100% !important; box-sizing: border-box !important; } @media (max-width: 768px) { /* The permissions matrix needs less width on a phone than on a desk. */ .nx-perm-table { min-width: 560px !important; } .nx-perm-table th, .nx-perm-table td { padding: 8px !important; font-size: .78rem !important; } .nx-perm-table thead th { font-size: .72rem !important; } } /* ========================================================================== 41.3 PDP BUY ROW — Qty + Add to Cart + Buy Now on ONE line -------------------------------------------------------------------------- SYMPTOM At <=700px "Buy Now" dropped onto a SECOND row under "Add to Cart", leaving a 93-131px dead gap beside it and doubling the buy box height (92px instead of 42px). CAUSE The v40 block above sets a 3-column grid, but affhaat-v36-redesign.css:4891 declares @media (max-width:700px) { .pdp-actions { grid-template-areas: "qty cart" / "buy buy"; } } An explicit `grid-template-areas` overrides `grid-template-columns` — the two-row template survived even though `display:grid` and the gap came from v40. FIX Inside the phone breakpoint only: reset the areas to `none` and pin each control back to an auto-flowed grid cell. Desktop never evaluates these rules. ========================================================================== */ @media (max-width: 700px) { .pdp-actions { display: grid !important; grid-template-columns: minmax(52px, 0.62fr) minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto !important; grid-template-areas: none !important; grid-auto-flow: row !important; grid-auto-rows: auto !important; align-items: stretch !important; gap: 8px !important; } .pdp-actions > * { grid-area: auto !important; min-width: 0 !important; } .pdp-actions .qty-wrap { grid-column: 1 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 4px !important; } /* The "Qty" label stays in the DOM for screen readers but is visually hidden on a phone, so the stepper sits on the same line as the two buttons instead of pushing the row taller. */ .pdp-actions .qty-wrap > label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } .pdp-actions .btn-outline.btn-buy, .pdp-actions button.btn-outline { grid-column: 2 !important; width: auto !important; } .pdp-actions .btn-primary.btn-buy, .pdp-actions button.btn-primary { grid-column: 3 !important; width: auto !important; } .pdp-actions .btn, .pdp-actions .btn-buy { min-height: 42px !important; padding: 10px 8px !important; font-size: 0.82rem !important; line-height: 1.2 !important; white-space: nowrap !important; } /* The stock line and its badge stay on ONE line too. */ .pdp-stock { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; } .pdp-stock .badge { flex-shrink: 0 !important; white-space: nowrap !important; } /* PRICE ROW — "was ৳3,499" + the "৳200 Off" badge were baseline-aligned against the big price, so the badge sat 4px BELOW the price line and visually covered it (measured 708-736 vs 700-732 at 390px). Centre the small chips with each other instead. */ .pdp-price-box { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; row-gap: 2px !important; } .pdp-price-box > .old-price, .pdp-price-box > .pdp-off-badge { align-self: center !important; } .pdp-off-badge { display: inline-flex !important; align-items: center !important; padding: 2px 8px !important; line-height: 1.5 !important; white-space: nowrap !important; } } /* Narrowest phones: lose a notch of type size instead of wrapping. */ @media (max-width: 380px) { .pdp-actions { grid-template-columns: minmax(46px, 0.58fr) minmax(0, 1fr) minmax(0, 1fr) !important; gap: 6px !important; } .pdp-actions .btn, .pdp-actions .btn-buy { font-size: 0.74rem !important; padding: 10px 5px !important; } } /* ========================================================================== 41.4 MOBILE TYPE SCALE + TOUCH TARGETS -------------------------------------------------------------------------- Measured under 11px on phones across many pages: .fc-label 10.9px — every form field label in the app (212 hits) .pc-stock 10.9px — product-card stock line .pc-sold 10.9px — product-card "sold" line iOS also zooms the whole page when a <16px input receives focus, which is why the field controls get a matching bump on phones only. ========================================================================== */ @media (max-width: 768px) { /* Specificity note: style.css:803-806 ships .product-card .pc-stock { font-size:.68rem !important } (2 classes) inside `@media (max-width:600px)`, and affhaat-v36-redesign.css uses `.footer-contact .fc-label` (2 classes). A one-class selector here would LOSE even though this file loads last, so both are stated with two classes — same weight, and this file wins on order. */ .pc-stock.pc-stock, .product-card .pc-stock, .pc-sold.pc-sold, .product-card .pc-sold { font-size: 0.8rem !important; } .fc-label.fc-label, .footer-contact .fc-label { font-size: 0.78rem !important; } .fc-input, .form-control, .form-select, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"] { font-size: 16px !important; /* stops iOS auto-zoom on focus */ } .nx-bell-btn { min-width: 40px !important; min-height: 40px !important; } /* Variant picker mini-table: measured 10.4px. affhaat-v36-redesign.css:4752 declares `.variant-live-info span { font-size:.65rem !important }`, so the selector is matched at the same two-class weight. */ .variant-live-info span, .variant-live-info > div > span { font-size: 0.72rem !important; } /* Admin tab strips and the staff bar measured 38px / 36px tall — under the 40px comfortable-tap floor. Height only; padding and look are unchanged. */ .nx-tab { min-height: 40px !important; } /* staff-bar-link is an inline in affhaat-v36-redesign.css:3350, and `min-height` has NO effect on an inline box — that is why the earlier `min-height: 40px` measured 36px. Make it a flex box first. */ .staff-bar-link { display: inline-flex !important; align-items: center !important; min-height: 40px !important; } /* Footer link rows measured 34px tall on a phone — below the 40px comfortable-tap floor. Row height only; type size and colour unchanged. */ .footer-col > a, .ft-link { min-height: 40px !important; display: flex !important; align-items: center; } /* Permissions matrix: the "full access" hint under each role name measured 10.9px. Scoped to the permissions table so no other `.muted` changes. */ .nx-perm-table .muted, .nx-perm-table td small { font-size: 0.72rem !important; } } /* ========================================================================== 41.5 MISSING PRODUCT IMAGE — a designed tile, never a broken glyph -------------------------------------------------------------------------- Every already carries onerror="this.onerror=null;this.src='/assets/img/placeholder.svg'" so a missing file falls back to that asset. The asset itself was absent, so the browser drew its own grey broken-image icon. placeholder.svg now ships with this release; this block only guarantees an that is still unavailable degrades to a quiet plate with readable alt text. ========================================================================== */ .pc-img-wrap, .pdp-main-wrap, .pdp-gal-thumb, .managed-image { background-color: #f1f5f9; background-image: linear-gradient(135deg, #f1f5f9 0%, #e8edf4 100%); } .pc-img-wrap img, .pdp-main-wrap img { max-width: 100%; height: auto; object-fit: contain; } /* ========================================================================== 41.6 STAFF BAR on a phone -------------------------------------------------------------------------- Nine links, each 34px tall and 60-95px wide, wrapped onto two rows at 320-414px and pushed the header down. One swipeable row keeps the strip's height constant whatever the role sees. ========================================================================== */ @media (max-width: 768px) { .staff-bar-inner { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px 10px !important; } .staff-bar-inner::-webkit-scrollbar { display: none; height: 0; } .staff-bar-link { flex: 0 0 auto !important; display: inline-flex !important; align-items: center; min-height: 40px !important; padding: 0 10px !important; font-size: .8rem !important; white-space: nowrap !important; } .staff-bar-role { flex: 0 0 auto !important; font-size: .74rem !important; } .staff-bar-brand { flex: 0 0 auto !important; } } /* ========================================================================== 41.7 ADMIN TOP BAR on a phone -------------------------------------------------------------------------- The bar carries a hamburger, a title, a bell and the account chip in a nowrap row. At 320-414px the account chip was clipped by the right edge and the title pushed it out. Let the title shrink; keep the chip whole. ========================================================================== */ @media (max-width: 768px) { .admin-topbar { gap: 6px !important; } .admin-topbar-title { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-topbar-badge { display: none !important; } .admin-topbar-user { flex: 0 0 auto !important; margin-left: 4px !important; padding: 3px 8px 3px 3px !important; max-width: 44vw; overflow: hidden; } .admin-topbar-user span, .admin-topbar-user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32vw; display: inline-block; vertical-align: middle; } /* FIX #10 — the account chip in the admin top bar. The markup uses .admin-user-meta / .admin-user-avatar, but the responsive rules in affhaat-v36-redesign.css target .admin-topbar-user-meta / .admin-topbar-avatar — names that do not exist in the DOM. So nothing hid the name/role/login-time on a phone: the chip measured 220x86px, wrapped onto three lines and was clipped by the right edge of the 390px screen. Hide the text block on small screens (the avatar still identifies the user) and keep the chip a single, fully-visible pill. */ .admin-topbar-user .admin-user-meta { display: none !important; } .admin-topbar-user { max-width: none !important; padding: 3px !important; gap: 0 !important; } .admin-topbar-user .admin-user-avatar { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; } } /* ========================================================================== v42 — OWNER-REQUESTED FIX PASS (10 items) -------------------------------------------------------------------------- This file (affhaat-brand-unified.css) is the LAST stylesheet the header loads, so every rule below wins the cascade by load order alone. Each block is labelled with the fix number and the measured numbers that justify it. Nothing outside the named selectors is touched. ========================================================================== */ /* ========================================================================== FIX #2 — SLIM FOOTER -------------------------------------------------------------------------- The footer carried 5 columns (brand + Shop + Company + Payment + Newsletter) with 5 links each, a 5-item trust strip and a 56px top margin — on a phone it ran to ~1400px of scrolling. The owner asked for a slimmer footer with the extra menus removed. What changes: * 5 columns -> 3 (brand | Shop | Company). The Payment-methods column and the Newsletter column are hidden; the payment icons move into the brand column so the shop still shows what it accepts. * The 5-item trust strip is hidden (the same reassurances already appear as the PDP trust cards and in the header tagline). * Vertical rhythm tightened: 48px -> 28px top padding, 36px -> 20px grid bottom padding, 56px -> 28px top margin, smaller logo and social chips. ========================================================================== */ .site-footer { margin-top: 28px !important; padding: 28px 0 0 !important; } .footer-grid { grid-template-columns: 1.4fr 1fr 1fr !important; gap: 22px 24px !important; padding: 0 20px 20px !important; } /* The two extra columns the owner does not want. */ .footer-col.footer-newsletter, .footer-col:has(.payment-icons), .footer-col:has(.pay-icons) { display: none !important; } /* Payment icons are re-homed into the brand column (see footer.php). */ .footer-brand .footer-pay-inline { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; margin: 10px 0 0 !important; } .footer-brand .footer-pay-inline .payment-icons, .footer-brand .footer-pay-inline .pay-icons { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 !important; } .footer-brand .footer-pay-inline img, .footer-brand .footer-pay-inline span, .footer-brand .footer-pay-inline .pay-badge { height: 22px !important; width: auto !important; } /* Trust strip removed. */ .footer-trust { display: none !important; } /* Tighter brand block. */ .footer-brand .footer-logo { margin-bottom: 8px !important; } .footer-brand .footer-logo img { height: 40px !important; max-width: 150px !important; } .footer-tagline { margin: 0 0 10px !important; font-size: 0.84rem !important; line-height: 1.5 !important; } .footer-contact { margin: 0 0 10px !important; } .footer-contact li { margin: 0 0 5px !important; font-size: 0.8rem !important; } /* FIX #2 (cont.) — the contact block was the tallest part of the brand column (396px on a phone): each row stacked a small uppercase label ABOVE its value, so three rows became six lines. The label is now inline with the value and the icon is smaller, which roughly halves the block. */ .footer-contact li { gap: 7px !important; align-items: center !important; } .footer-contact .fc-ico { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; font-size: 0.7rem !important; margin-top: 0 !important; } .footer-contact .fc-label { display: inline !important; /* 0.7rem = 11.2px — the 11px legibility floor. 0.66rem measured 10.56px and tripped the tiny-text check on every page. */ font-size: 0.7rem !important; margin: 0 4px 0 0 !important; letter-spacing: 0.02em !important; } .footer-contact .fc-body { display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 0 4px !important; } .footer-contact .fc-addr-lines { display: inline !important; } .footer-contact .fc-addr-lines span { display: inline !important; } .footer-contact .fc-addr-lines span + span::before { content: ', '; } .footer-social-label { margin: 8px 0 6px !important; font-size: 0.72rem !important; } .footer-social a { width: 34px !important; height: 34px !important; } .footer-social a svg { width: 18px !important; height: 18px !important; } .footer-col h4 { margin: 0 0 10px !important; } /* Keep the links comfortably tappable (>=34px) even though the footer is slim: the first pass used 3px padding, which measured 26px tall on a phone — smaller than the 36-38px the rest of the site uses. */ .footer-col > a, .ft-link { padding: 7px 0 !important; font-size: 0.85rem !important; line-height: 1.4 !important; } .footer-hr { margin: 0 !important; } .footer-bottom { padding: 12px 20px !important; } .footer-bottom p { margin: 0 !important; font-size: 0.78rem !important; } @media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 600px) { .site-footer { padding-top: 22px !important; } .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 18px 16px !important; padding-bottom: 16px !important; } .footer-brand { grid-column: 1 / -1; } } /* ========================================================================== FIX #6 — MOBILE HEADER: logo small enough that the action row stays on ONE line -------------------------------------------------------------------------- Measured at 390px: .brand-logo-img was 34px tall but up to 120px wide, and the header row (logo + Recent + Compare + Wishlist + Cart + Theme + Account + hamburger) wrapped to TWO lines, pushing the search bar down. The logo is capped harder on phones and the action icons are tightened so the whole row fits one line at 320-414px. Desktop is untouched (the media query only applies <=900px, where the header already switches to icon-only). ========================================================================== */ @media (max-width: 900px) { .brand-logo-img { height: 30px !important; max-width: 96px !important; } .nx-header .brand { margin-right: 6px !important; } .nx-header-main { gap: 6px !important; padding: 8px 10px !important; } .nx-header-actions { gap: 2px !important; } .nx-header-actions .nx-action, .nx-header-actions a.nx-action, .nx-header-actions button.nx-action { min-width: 34px !important; min-height: 34px !important; padding: 4px !important; } .nx-header-actions .nx-action svg { width: 19px !important; height: 19px !important; } .nx-header-actions .nx-badge { min-width: 15px !important; height: 15px !important; font-size: 9px !important; padding: 0 3px !important; } .nx-menu-btn { min-width: 34px !important; min-height: 34px !important; } } @media (max-width: 380px) { .brand-logo-img { height: 26px !important; max-width: 80px !important; } .nx-header-actions .nx-action, .nx-header-actions a.nx-action, .nx-header-actions button.nx-action { min-width: 30px !important; min-height: 30px !important; } .nx-header-actions .nx-action svg { width: 17px !important; height: 17px !important; } } /* ========================================================================== FIX #9 — "SELECT VARIANT" BOX ON ONE LINE -------------------------------------------------------------------------- The variant card stacked: label on its own line, then the