)
-----------------------------------------------------------
Each | can optionally have a data-label="..." for the
bold prefix label. Cells with block-level children should
wrap them in a span/div if they want inline display.
Cell behaviour is "stack": label on its own line, content below.
This is safer than space-between because it handles multi-line
content (img + name + small) reliably without truncation.
----------------------------------------------------------- */
@media (max-width: 767.98px) {
.lr-table-cards {
width: 100%;
border-collapse: separate;
border-spacing: 0;
display: block;
}
.lr-table-cards thead,
.lr-table-cards colgroup { display: none; }
.lr-table-cards tbody { display: block; }
.lr-table-cards tr {
display: block;
background: var(--bg-elevated, var(--bg-main, #fff));
border: 1px solid var(--border-color, rgba(0,0,0,0.08));
border-radius: 14px;
padding: 14px;
margin-bottom: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.lr-table-cards td {
display: block;
padding: 8px 0;
border: 0;
border-bottom: 1px dashed var(--border-color, rgba(0,0,0,0.08));
text-align: start;
font-size: 0.9rem;
word-break: break-word;
overflow-wrap: anywhere;
}
.lr-table-cards td:last-child { border-bottom: 0; padding-bottom: 0; }
.lr-table-cards td:first-child { padding-top: 0; }
.lr-table-cards td[data-label]::before {
content: attr(data-label);
display: block;
font-weight: 600;
color: var(--text-secondary, #71717a);
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 4px;
}
/* Action cells: keep buttons in a row even though the cell stacks. */
.lr-table-cards td.lr-cell-actions .admin-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
}
/* Hide cells entirely (e.g. ID column) on mobile when the
developer marks them with .lr-hide-sm */
.lr-table-cards td.lr-hide-sm { display: none; }
/* Empty-state rows (single | with colspan) should fill the card
and center their text instead of using the stacked label layout. */
.lr-table-cards td[colspan] {
text-align: center;
padding: 24px 0;
}
.lr-table-cards td[colspan]::before { content: none; }
}
/* NO auto card-list. We made this opt-in only by removing the
`.admin-table-wrap > .admin-table:not(.lr-no-cards)` rule that
was here previously — it broke complex admin pages that have
show-tables, nested layouts, and thumbnails. Tables that should
become cards must add the `lr-table-cards` class explicitly. */
/* -------------------------------------------------------------
7) Scroll-fallback for any table that doesn't opt-in to cards
-----------------------------------------------------------
Lets admin index tables stay tabular but scroll horizontally on
small screens. Tables already inside .admin-table-wrap (which is
the common pattern) get this for free.
----------------------------------------------------------- */
@media (max-width: 767.98px) {
.admin-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.admin-table-wrap > .admin-table:not(.lr-table-cards) {
min-width: 720px;
}
}
.lr-table-scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 12px;
}
.lr-table-scroll > table { min-width: 720px; }
/* -------------------------------------------------------------
8) Tabs scrollable horizontally on mobile (opt-in)
----------------------------------------------------------- */
.lr-tabs-scroll {
display: flex;
gap: var(--lr-sp-2);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: 4px;
scrollbar-width: thin;
}
.lr-tabs-scroll > * { scroll-snap-align: start; flex-shrink: 0; }
.lr-tabs-scroll::-webkit-scrollbar { height: 6px; }
.lr-tabs-scroll::-webkit-scrollbar-thumb {
background: var(--border-color, rgba(0,0,0,0.12));
border-radius: 999px;
}
/* -------------------------------------------------------------
9) Sticky CTA on mobile (opt-in)
----------------------------------------------------------- */
.lr-sticky-cta {
position: sticky;
bottom: 0;
z-index: 20;
background: var(--bg-elevated, var(--bg-main, #fff));
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
border-top: 1px solid var(--border-color, rgba(0,0,0,0.08));
box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
margin-inline: -16px;
}
@media (min-width: 1024px) {
.lr-sticky-cta {
position: static; padding: 0; background: transparent;
border: 0; box-shadow: none; margin-inline: 0;
}
}
/* -------------------------------------------------------------
10) Drawer utility (opt-in)
----------------------------------------------------------- */
.lr-drawer {
position: fixed; inset: 0; z-index: 70;
pointer-events: none; opacity: 0;
transition: opacity 0.18s ease;
}
.lr-drawer[aria-hidden="false"] { pointer-events: auto; opacity: 1; }
.lr-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.lr-drawer-panel {
position: absolute; top: 0; bottom: 0;
inset-inline-start: 0; width: min(86vw, 360px);
background: var(--bg-elevated, var(--bg-main, #fff));
overflow-y: auto; overscroll-behavior: contain;
padding: 16px;
transform: translateX(-100%);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
[dir="rtl"] .lr-drawer-panel { transform: translateX(100%); }
.lr-drawer[aria-hidden="false"] .lr-drawer-panel { transform: translateX(0); }
.lr-drawer-panel.lr-drawer-end {
inset-inline-start: auto; inset-inline-end: 0;
transform: translateX(100%);
}
[dir="rtl"] .lr-drawer-panel.lr-drawer-end { transform: translateX(-100%); }
.lr-drawer[aria-hidden="false"] .lr-drawer-panel.lr-drawer-end { transform: translateX(0); }
@media (min-width: 1024px) {
.lr-drawer.lr-drawer-md-static {
position: static; opacity: 1; pointer-events: auto;
}
.lr-drawer.lr-drawer-md-static .lr-drawer-backdrop { display: none; }
.lr-drawer.lr-drawer-md-static .lr-drawer-panel {
position: static; transform: none; width: auto;
background: transparent; box-shadow: none; padding: 0; overflow: visible;
}
}
body.lr-no-scroll { overflow: hidden; touch-action: none; }
/* -------------------------------------------------------------
11) Touch target safety (opt-in)
----------------------------------------------------------- */
@media (max-width: 767.98px) {
.lr-touch,
.lr-touch button,
.lr-touch a {
min-width: 44px; min-height: 44px;
}
}
/* -------------------------------------------------------------
12) Visibility utilities
----------------------------------------------------------- */
.lr-hide-md-up { display: initial; }
.lr-show-md-up { display: none; }
@media (min-width: 768px) {
.lr-hide-md-up { display: none !important; }
.lr-show-md-up { display: initial; }
.lr-show-md-up.lr-show-block { display: block; }
.lr-show-md-up.lr-show-flex { display: flex; }
.lr-show-md-up.lr-show-grid { display: grid; }
}
.lr-hide-lg-up { display: initial; }
.lr-show-lg-up { display: none; }
@media (min-width: 1024px) {
.lr-hide-lg-up { display: none !important; }
.lr-show-lg-up { display: initial; }
.lr-show-lg-up.lr-show-block { display: block; }
.lr-show-lg-up.lr-show-flex { display: flex; }
.lr-show-lg-up.lr-show-grid { display: grid; }
}
/* -------------------------------------------------------------
13) Aspect-ratio helpers (opt-in)
----------------------------------------------------------- */
.lr-aspect-1 { aspect-ratio: 1 / 1; }
.lr-aspect-4-3 { aspect-ratio: 4 / 3; }
.lr-aspect-4-5 { aspect-ratio: 4 / 5; }
.lr-aspect-16-9 { aspect-ratio: 16 / 9; }
.lr-aspect-3-2 { aspect-ratio: 3 / 2; }
.lr-aspect-fill > * { width: 100%; height: 100%; object-fit: cover; }
/* -------------------------------------------------------------
14) Typography clamps (opt-in)
----------------------------------------------------------- */
.lr-h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.2; }
.lr-h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.25; }
.lr-h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.3; }
.lr-lead { font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem); }
/* -------------------------------------------------------------
15) Truncation helpers (opt-in)
----------------------------------------------------------- */
.lr-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-clamp-2, .lr-clamp-3 {
display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.lr-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.lr-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
/* -------------------------------------------------------------
16) Container query
----------------------------------------------------------- */
.lr-container-q { container-type: inline-size; }
/* -------------------------------------------------------------
17) Storefront polish (safe, low-risk additive tweaks)
----------------------------------------------------------- */
@media (max-width: 767.98px) {
/* Slightly tighter sections on phones (additive, doesn't alter
grid structure — just lowers vertical padding). */
.section { padding-block: 36px; }
.breadcrumb { flex-wrap: wrap; gap: 4px; font-size: 0.82rem; }
}
/* -------------------------------------------------------------
17b) Navbar dropdown chrome (CSP-safe, replaces inline styles)
-----------------------------------------------------------
These rules replace the `style="..."` and Alpine-driven
:style/:class bindings that lived in navbar.blade.php. They
work with the vanilla JS controller embedded in that file.
----------------------------------------------------------- */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
}
.nav-dropdown-chevron {
font-size: 0.65rem;
margin-inline-start: 4px;
transition: transform 0.2s ease;
}
.nav-dropdown.is-open .nav-dropdown-chevron {
transform: rotate(180deg);
}
/* The .user-dropdown base in components.css uses `right: 0;` which
the old navbar overrode with inline `style="left:0"` per-locale.
Now we replace those inline styles with class-based RTL-aware
alignment. Specificity (0,2,1 via html[dir=...]) beats the
components.css base (0,1,0). */
.nav-dropdown-menu {
min-width: 200px;
/* START-aligned default (Categories sits below+aligned-to-start). */
left: 0;
right: auto;
}
html[dir="rtl"] .nav-dropdown-menu {
left: auto;
right: 0;
}
/* End-aligned variant (lang switcher, user menu). */
.nav-dropdown-menu-end {
left: auto;
right: 0;
}
html[dir="rtl"] .nav-dropdown-menu-end {
left: 0;
right: auto;
}
/* Lang switcher icon spacing — replaces the old inline margin styles */
.lang-switch-icon { font-size: 0.85rem; margin-inline-end: 6px; }
.lang-switch .nav-dropdown-chevron { font-size: 0.6rem; margin-inline-start: 6px; }
.lang-flag { font-size: 1rem; }
.lang-check { margin-inline-start: auto; font-size: 0.75rem; color: var(--brand); }
/* Cart/wishlist badge positioning — replaces the long inline style on the
elements in navbar.blade.php. */
.navbar-action-btn-badged { position: relative; }
.nav-badge {
position: absolute;
top: -4px;
inset-inline-end: -4px;
background: var(--brand);
color: #fff;
border-radius: 999px;
font-size: 0.65rem;
min-width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
font-weight: 700;
line-height: 1;
}
/* Logout button inside user dropdown — styled like the other items */
.user-dropdown-logout {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 18px;
background: transparent;
border: 0;
color: inherit;
font: inherit;
text-align: start;
cursor: pointer;
transition: var(--transition);
}
.user-dropdown-logout:hover { background: var(--bg-section); color: var(--brand); }
/* -------------------------------------------------------------
18) Storefront navbar — mobile drawer (≤1024px)
-----------------------------------------------------------
The legacy components.css only handles ≤768px:
.navbar-links { display: none }
.mobile-menu-btn { display: flex }
.navbar-links.active { display: flex; position: absolute; top:header-height; ... }
This leaves a 769-1023px gap where the hamburger is hidden but
the menu still tries to lay out horizontally. We extend the
mobile mode to ≤1024px and reshape the open menu as a side drawer.
----------------------------------------------------------- */
@media (max-width: 1023.98px) {
/* Hamburger MUST be visible across the entire sub-desktop range. */
.mobile-menu-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 1.25rem;
}
/* Hide search bar on small screens to declutter the top row. */
.navbar-search { display: none !important; }
/* Drawer base — hidden off-screen on the trailing edge. We need
to be more specific than .navbar-links.active in components.css
so we use a body+nav chain to win specificity without !important
on every property. */
.navbar .navbar-links {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
position: fixed;
top: 0;
bottom: 0;
inset-inline-end: 0;
inset-inline-start: auto;
width: min(86vw, 320px);
height: 100vh;
height: 100dvh;
padding: 72px 16px 24px;
background: var(--bg-header, var(--bg-main, #fff));
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 95;
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: -10px 0 40px rgba(0,0,0,0.2);
box-sizing: border-box;
}
[dir="rtl"] .navbar .navbar-links {
transform: translateX(-100%);
}
/* Legacy components.css sets `display: none` on .navbar-links at
≤768px (no `!important`). Our rule above sets `display: flex`
at the same specificity (0,2,0 vs 0,1,0 — we win specificity). */
/* Beats `.navbar-links.active` from components.css (which would
otherwise reset to position:absolute with 20px padding) AND
`.navbar-links.active { background: rgba(13,11,20,0.95) }` from
luxury-polish.css (which would render the drawer as a dark
translucent panel instead of a solid side drawer).
Specificity 0,3,0 wins over both. We re-assert every property
the legacy rules touch so cascade order can't surprise us. */
.navbar .navbar-links.active {
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 4px;
transform: translateX(0);
position: fixed;
top: 0;
bottom: 0;
inset-inline-end: 0;
inset-inline-start: auto;
width: min(86vw, 320px);
height: 100vh;
height: 100dvh;
padding: 72px 16px 24px;
background: var(--bg-header, var(--bg-main, #fff));
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-top: 0;
box-shadow: -10px 0 40px rgba(0,0,0,0.2);
z-index: 95;
}
[dir="rtl"] .navbar .navbar-links.active {
inset-inline-end: 0;
inset-inline-start: auto;
box-shadow: 10px 0 40px rgba(0,0,0,0.2);
}
/* Hamburger → close (X) state — used by the JS class-swap. The
transition is on the parent button so the icon rotates smoothly. */
.mobile-menu-btn { transition: transform 0.2s ease; }
.mobile-menu-btn.is-open { transform: rotate(90deg); }
/* Belt-and-suspenders: even if the JS class-swap is ever skipped
(e.g. external script error before our inline handler runs), the
open-state button forces the X glyph by overriding the FontAwesome
::before content. Works whether the inner still has fa-bars
or already has fa-times. \f00d == FA "times" / "xmark". */
.mobile-menu-btn.is-open [data-nav-icon]::before {
content: "\f00d" !important;
}
.mobile-menu-btn:not(.is-open) [data-nav-icon]::before {
content: "\f0c9"; /* FA "bars" */
}
.navbar .navbar-links > a {
padding: 14px;
border-radius: 10px;
font-size: 1rem;
width: 100%;
}
.navbar .navbar-links > a::after { display: none; }
.navbar .navbar-links > a:hover,
.navbar .navbar-links > a.active {
background: rgba(var(--brand-rgb, 183 132 116), 0.10);
}
/* Inside the drawer, the nav-dropdown wrapper flows in document order;
its menu becomes a collapsible accordion controlled by .is-open
(toggled by the vanilla JS click handler). */
.navbar .navbar-links .nav-dropdown {
position: static;
width: 100%;
}
.navbar .navbar-links .nav-dropdown-toggle {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 14px;
border-radius: 10px;
font-size: 1rem;
color: inherit;
}
/* Dropdown menu inside drawer: full-width accordion, no shadow */
.navbar .navbar-links .nav-dropdown-menu {
position: static;
box-shadow: none;
border: 0;
background: transparent;
padding: 4px 0 4px 12px;
min-width: 0;
width: 100%;
max-height: 0;
overflow: hidden;
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
transition: max-height 0.3s ease;
}
.navbar .navbar-links .nav-dropdown.is-open .nav-dropdown-menu {
max-height: 80vh;
}
.navbar .navbar-links .nav-dropdown-menu a {
padding: 10px 12px;
font-size: 0.92rem;
border-radius: 8px;
}
}
/* Backdrop behind the open drawer */
.lr-nav-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
opacity: 0; pointer-events: none;
transition: opacity 0.22s ease;
z-index: 90;
}
.lr-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { .lr-nav-backdrop { display: none !important; } }
/* -------------------------------------------------------------
18a) Navbar action buttons — keep them visible on tiny screens
----------------------------------------------------------- */
@media (max-width: 1023.98px) {
.navbar-inner { gap: 8px; }
.navbar-actions { gap: 6px; flex-wrap: nowrap; }
.navbar-logo {
font-size: 1.15rem;
letter-spacing: 1px;
gap: 6px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.navbar-logo img { height: 32px; }
.navbar-action-btn,
.user-menu-toggle {
width: 40px;
height: 40px;
flex-shrink: 0;
}
.user-menu-toggle img { width: 32px; height: 32px; }
/* Lang switcher: keep the icons, hide the long label so the topbar
doesn't overflow on narrow phones. */
.lang-switch {
padding: 0 10px;
height: 40px;
font-size: 0.78rem;
}
.lang-switch > span { display: none; }
}
@media (max-width: 480px) {
.navbar-logo { font-size: 1rem; }
.navbar-logo img { height: 28px; }
/* Even tighter on tiny phones */
.navbar-actions { gap: 4px; }
.lang-switch { padding: 0 8px; }
}
/* -------------------------------------------------------------
19) Admin polish — SAFE, non-structural tweaks only
-----------------------------------------------------------
Removed earlier aggressive rules (.admin-page-header column,
.admin-form-actions sticky, .admin-card-header column) because
those broke pages with custom layouts. Keeping ONLY pure
wrapping/spacing safety net.
----------------------------------------------------------- */
@media (max-width: 767.98px) {
/* Form grids collapse to one column on phones — additive,
only affects grids that already use these classes. */
.admin-form-grid,
.admin-form-grid-2,
.admin-form-grid-3 {
grid-template-columns: 1fr !important;
}
/* Filter rows wrap nicely — additive */
.admin-filter-row,
.admin-filter-bar {
flex-wrap: wrap;
gap: 8px;
}
/* Pagination wraps on small screens */
.pagination, .admin-pagination {
flex-wrap: wrap;
gap: 4px;
justify-content: center;
}
}
/* -------------------------------------------------------------
20) Print: hide drawers and CTAs
----------------------------------------------------------- */
@media print {
.lr-drawer,
.lr-nav-backdrop,
.lr-sticky-cta,
.mobile-menu-btn {
display: none !important;
}
}
/* =============================================================
21) STOREFRONT FLUID TYPOGRAPHY & MOBILE POLISH
-----------------------------------------------------------
Scoped to `body:not(.admin-body)` so NONE of this leaks into
the admin panel (admin body has class="admin-body"). All sizing
uses `clamp(min, preferred, max)` so the type and components
scale smoothly between phones and desktop without media-query
step-changes. Built mobile-first.
The viewport-min anchor for clamp is 360px (narrowest common
phone). The viewport-max anchor is 1280px (XL desktop). Anything
between scales linearly via the `vw` term.
============================================================= */
/* ─── A) Fluid base + heading scale ─────────────────────────────
Root font-size 15px on a 360px viewport, 16px from 1024px+.
This makes EVERY rem-based size adapt automatically (cards,
buttons, paddings declared in rem) without us touching them. */
body:not(.admin-body) {
font-size: clamp(0.94rem, 0.88rem + 0.30vw, 1rem);
line-height: 1.65;
}
/* Page headings — the inline `font-size: 1.8rem` on profile stat
numbers and the `font-size: 1.5rem` on hero |