/* ===================================================================== responsive-enhancements.css — storefront UI + responsiveness layer ===================================================================== COMBINED, self-sufficient version. Loaded AFTER assets/css/style.css in both includes/header.php and admin/includes/header.php (admin loads admin-enhancements.css after this, so admin overrides still win). Every rule targets storefront-only classes, except three deliberately universal, harmless guards (images never overflow, 16px control font on phones, and a storefront-scoped overflow-x clip via the `.site-body` class that header.php adds to — so admin is untouched). NOTE: the drawer + filter-drawer rules (sections 7–9) are ALSO kept inline inside includes/header.php and shop.php, so the mobile menu still works even if this file ever fails to load. The duplicate rules are identical, so there is no conflict. This file changes NO PHP, queries or behaviour; delete it to revert (the already exists). ===================================================================== */ /* ===================================================================== 1) HORIZONTAL OVERFLOW — fix the right-side white strip on zoom-out --------------------------------------------------------------------- Real causes fixed at the source: the absolutely-positioned mega-menu (min-width:460px) that stays in layout while hidden; product grids on `1fr` tracks (implicit min-width:auto); and the chat panel on 100vw. `.site-body { overflow-x: clip }` is the sticky-safe guard (clip, not hidden, so the sticky navbar / filter panel keep working); scoped to the storefront body class so admin tables that scroll are untouched. ===================================================================== */ .site-body { overflow-x: clip; } .nav-dropdown-menu { max-width: calc(100vw - 24px); } @media (max-width: 600px) { #chat-panel { width: auto; left: 16px; right: 16px; } } img, svg, video, iframe { max-width: 100%; } /* ===================================================================== 2) PRODUCT GRID — ~5-6 desktop / 3 tablet / 2 mobile auto-fill + minmax(0, …) is fluid and can never overflow; explicit counts lock in the requested tablet (3) and mobile (2) layouts. ===================================================================== */ .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } @media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } } @media (max-width: 640px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } /* ===================================================================== 3) COMPACT PRODUCT CARD — PriceOye / Amazon density ===================================================================== */ .product-card .thumb { padding: 10px; } .product-card .info { padding: 11px 12px 13px; gap: 6px; } .product-card .brand-name { font-size: 10.5px; } .product-card .name { font-size: 14px; line-height: 1.25; min-height: 2.5em; } .spec-strip { font-size: 10px; padding: 6px 0; } .spec-strip b { font-size: 11.5px; } .price-line { gap: 6px; } .price-line .price { font-size: 16px; } .price-line .was { font-size: 12px; } .stars { font-size: 11.5px; } .wish-toggle { width: 30px; height: 30px; } .card-actions { margin-top: 8px; } .card-actions .btn { padding: 8px 10px; font-size: 12.5px; } @media (max-width: 400px) { .product-card .info { padding: 9px 10px 11px; } .product-card .name { font-size: 13px; } } /* ===================================================================== 4) HOMEPAGE RHYTHM + TYPOGRAPHY (modest, hierarchy preserved) ===================================================================== */ .section { padding: 40px 0; } .section-head { margin-bottom: 20px; } .section-head h2 { font-size: 24px; } .hero .container { padding: 44px 20px; gap: 32px; } .hero h1 { font-size: 34px; } .hero p.lead { font-size: 15px; } .hero-actions { margin-top: 20px; } @media (max-width: 768px) { .section { padding: 30px 0; } .section-head h2 { font-size: 21px; } .hero h1 { font-size: 27px; } .hero .container { padding: 32px 18px; gap: 22px; } } @media (max-width: 420px) { .hero h1 { font-size: 23px; } .section-head h2 { font-size: 19px; } } /* ===================================================================== 5) HEADER MOBILE LAYOUT — spacing + search alignment ===================================================================== */ @media (max-width: 768px) { .navbar .container { flex-wrap: wrap; gap: 12px 14px; row-gap: 10px; } .nav-hamburger { order: 1; } .navbar .brand { order: 2; margin-right: auto; } .nav-icons { order: 3; gap: 6px; } .search-form { order: 4; flex: 1 1 100%; max-width: none; } } /* ===================================================================== 6) MOBILE NAV: hide the hover category strip, show the hamburger ===================================================================== */ .nav-hamburger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; flex: 0 0 auto; } .nav-hamburger:hover { border-color: var(--ink); } @media (max-width: 768px) { .nav-hamburger { display: inline-flex; } .category-strip { display: none; } } /* ===================================================================== 7) SLIDE-OUT CATEGORIES DRAWER (mobile) One shared backdrop + the left-side .site-drawer. Behaviour is in assets/js/main.js. Mobile-only: hidden on desktop. ===================================================================== */ .drawer-backdrop { position: fixed; inset: 0; background: rgba(20, 15, 36, .5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; z-index: 1090; } .drawer-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .site-drawer { position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh; width: min(84vw, 330px); background: var(--surface); box-shadow: var(--shadow-lg); z-index: 1100; transform: translateX(-100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; } .site-drawer.is-open { transform: translateX(0); } .site-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; } .site-drawer__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); } .site-drawer__close { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-soft); font-size: 22px; line-height: 1; cursor: pointer; } .site-drawer__close:hover { color: var(--ink); border-color: var(--ink); } .site-drawer__nav { padding: 8px 10px 24px; } .drawer-item { display: flex; align-items: center; } .drawer-link { flex: 1; display: block; padding: 11px 12px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 500; color: var(--ink); } .drawer-link:hover, .drawer-link.active { background: var(--gold-soft); color: var(--gold-deep); } .drawer-expand { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--text-soft); cursor: pointer; } .drawer-expand svg { transition: transform .2s ease; } .drawer-expand[aria-expanded="true"] svg { transform: rotate(180deg); } /* Collapsible brand sub-list — indented, strictly vertical. */ .drawer-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; } .drawer-sub.is-open { grid-template-rows: 1fr; } .drawer-sub > div { overflow: hidden; padding-left: 12px; } .drawer-sublink { display: block; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--text-soft); } .drawer-sublink:hover, .drawer-sublink.active { background: var(--gold-soft); color: var(--gold-deep); } .drawer-hr { border: 0; border-top: 1px solid var(--border); margin: 10px 6px; } .drawer-section-label { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); } /* Drawer is a mobile-only feature — never shows on desktop. */ @media (min-width: 769px) { .site-drawer, .drawer-backdrop { display: none !important; } } /* ===================================================================== 8) SHOP FILTER PANEL AS A MOBILE DRAWER Desktop keeps the existing sticky sidebar (style.css). Under 768px the same .filter-panel becomes a right-side drawer opened by the Filters button; all existing filter inputs / auto-submit behaviour are kept. ===================================================================== */ .filter-fab { display: none; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13.5px; cursor: pointer; } .filter-fab:hover { border-color: var(--ink); } .filter-panel__head { display: none; } @media (max-width: 768px) { .filter-fab { display: inline-flex; } .filter-panel { position: fixed; top: 0; right: 0; left: auto; height: 100vh; height: 100dvh; width: min(86vw, 340px); margin: 0; border-radius: 0; border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 1100; transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; } .filter-panel.is-open { transform: translateX(0); } .filter-panel__head { display: flex; align-items: center; justify-content: space-between; margin: -20px -20px 8px; /* .filter-panel has 20px padding */ padding: 14px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; } .filter-panel__title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); } } /* ===================================================================== 9) SHOP LAYOUT WITHOUT FILTERS (non-phone categories) ===================================================================== */ .shop-layout--full { grid-template-columns: 1fr; } /* ===================================================================== 10) FORM CONTROLS ON PHONES — 16px prevents iOS zoom-on-focus ===================================================================== */ @media (max-width: 640px) { input, select, textarea { font-size: 16px; } } /* ===================================================================== PRODUCT CARD v2 (preview "pcard" format) — blue Buy Now, quick view ===================================================================== */ .pcard{background:#fff;border:1.5px solid #E6EAF2;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s} .pcard:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(14,30,56,.14)} .pthumb{position:relative;background:#F5F7FA;padding:16px;display:grid;place-items:center} .pthumb img{height:150px;width:auto;max-width:100%;object-fit:contain} .pbadge{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:8px;color:#fff;letter-spacing:.03em} .pbadge-off{background:#F26522} .pbadge-new{background:#1E6FEB;top:38px} .pbadge-oos{background:#64748B;top:66px} .pbadge-5g{left:auto;right:10px;top:auto;bottom:10px;background:#0E1E38} .pwish{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:#fff;border:0;box-shadow:0 4px 12px rgba(14,30,56,.15);display:grid;place-items:center;color:#132A4A;cursor:pointer;transition:color .2s,transform .2s} .pwish:hover{color:#F26522;transform:scale(1.1)} .pwish.active{color:#F26522} .pquick{position:absolute;left:0;right:0;bottom:-42px;display:flex;justify-content:center;transition:bottom .22s} .pcard:hover .pquick{bottom:10px} .pquick a{background:rgba(14,30,56,.92);color:#fff;font-size:12px;font-weight:600;padding:8px 16px;border-radius:20px} .pbody{padding:13px 14px 15px;display:flex;flex-direction:column;gap:5px;flex:1} .pbrand{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7C8AA0} .pname{font-size:14.5px;font-weight:600;line-height:1.3;min-height:2.5em;color:#0E1E38} .pname:hover{color:#1E6FEB} .prate{font-size:11.5px;color:#F5A623} .prate span{color:#7C8AA0} .pprice{margin-top:auto} .pprice b{font-size:16.5px;color:#132A4A} .pprice s{font-size:12px;color:#9AA7BC;margin-left:6px} .pact{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px} .pact .btn-add{background:#EAF2FF;color:#1E6FEB;font-weight:700;font-size:12.5px;padding:9px 6px;border-radius:11px;border:0;cursor:pointer;transition:background .2s;font-family:inherit} .pact .btn-add:hover{background:#D8E8FF} .pact .btn-add:disabled{opacity:.5;cursor:not-allowed} .pact .btn-buy{background:#F26522;color:#fff;font-weight:700;font-size:12.5px;padding:9px 6px;border-radius:11px;text-align:center;transition:background .2s,box-shadow .2s} .pact .btn-buy:hover{background:#D9531A;box-shadow:0 6px 16px rgba(242,101,34,.35);color:#fff} @media (max-width:400px){.pact{grid-template-columns:1fr}.pthumb img{height:128px}} /* ===================================================================== CATEGORY CARD v2 (preview "cat" format) — gradient + line-art + arrow ===================================================================== */ .catsv2{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px} .catv2{position:relative;border-radius:18px;overflow:hidden;padding:20px 18px 18px;min-height:168px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:linear-gradient(145deg,var(--c1),var(--c2));box-shadow:0 8px 24px rgba(14,30,56,.10);transition:transform .2s,box-shadow .2s} .catv2::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 40%)} .catv2:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(14,30,56,.18);color:#fff} .catv2 .art{position:absolute;top:12px;right:12px;width:76px;height:76px;opacity:.95;transition:transform .25s} .catv2 .art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.28))} .catv2:hover .art{transform:scale(1.1) rotate(-4deg)} .catv2 .cb{position:relative} .catv2 .cb b{font-size:15.5px;display:block} .catv2 .cb small{font-size:12px;color:rgba(255,255,255,.82)} .catv2 .go{position:absolute;bottom:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:14px;transition:background .2s,transform .2s} .catv2:hover .go{background:rgba(255,255,255,.32);transform:translateX(3px)} @media (max-width:640px){.catsv2{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ===================================================================== 11) HORIZONTAL-SCROLL ROOT CAUSES (v3 audit) — fixed at the source, not hidden. Each rule targets a real measured overflow producer. ===================================================================== */ /* (a) Legacy cart rows: five fixed grid tracks cannot fit a 360px phone. Below 560px the row re-flows into image + details, with price / qty / remove wrapping underneath — nothing pushes past the edge. */ @media (max-width: 560px) { .cart-row { grid-template-columns: 62px minmax(0, 1fr); grid-auto-rows: auto; row-gap: 8px; } .cart-row img { width: 62px; height: 62px; } .cart-row > *:nth-child(n+3) { grid-column: 2; justify-self: start; } } /* (b) Checkout stepper: three labelled steps + two 60px connector lines overflow narrow screens. Shrink the connectors and let it wrap. */ @media (max-width: 520px) { .checkout-steps { flex-wrap: wrap; gap: 8px 0; } .checkout-steps .line { width: 22px; margin: 0 8px; } .checkout-steps .step { font-size: 12px; gap: 7px; } .checkout-steps .step .num { width: 24px; height: 24px; font-size: 11px; } } /* (c) Data tables keep white-space:nowrap for readability, so on phones the TABLE scrolls inside its own box instead of stretching the page. Applies to storefront account pages; admin already scrolls. */ @media (max-width: 760px) { .site-body .data-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* (d) Two-column grids built on bare `1fr` tracks inherit min-width:auto, so one long unbroken word (URL, SKU, mono price) can force the page wider than the screen. minmax(0,…) removes the intrinsic floor. */ .hero .container { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .pd-desc { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } @media (max-width: 980px) { .hero .container, .pd-desc { grid-template-columns: minmax(0, 1fr); } } .trust-item > div { min-width: 0; } .trust-item strong, .trust-item small { overflow-wrap: anywhere; } .summary-row span, .pd-desc-body, .review p { overflow-wrap: anywhere; } /* (e) Long single-word product names / emails in flex rows. */ .section-head h2, .hx-head h2 { min-width: 0; overflow-wrap: anywhere; } /* ===================================================================== 12) SITE-WIDE POLISH (v3 audit) — consistency touches on the blue branding: selection color, focus rings, thin scrollbars, chips. ===================================================================== */ ::selection { background: #1E6FEB; color: #fff; } :focus-visible { outline: 3px solid rgba(30,111,235,.55); outline-offset: 2px; } .pdx-thumbs::-webkit-scrollbar, .tabs::-webkit-scrollbar { height: 6px; } .pdx-thumbs::-webkit-scrollbar-thumb, .tabs::-webkit-scrollbar-thumb { background: #D9E0EB; border-radius: 4px; } /* Alerts get a soft leading edge in their own semantic colour. */ .alert { border-left: 3px solid transparent; } .alert-success { border-left-color: #0f8a6a; } .alert-error { border-left-color: #d6453f; } .alert-info { border-left-color: #1E6FEB; } /* Pagination current page on brand blue. */ .pagination .current { background: #1E6FEB; border-color: #1E6FEB; } .pagination a:hover { border-color: #1E6FEB; color: #1E6FEB; }