:root {
--primary-color: #0d6efd;
--secondary-color: #212529;
--accent-color: #ffc107;
--body-bg: #f6f8fb;
--card-bg: #ffffff;
--muted: #6c757d;
}
body {
background: var(--body-bg);
color: #1f2937;
font-family: var(--font-en);
min-height: 100vh;
display: flex;
flex-direction: column;
}
main { flex: 1 0 auto; }
.site-footer { margin-top: auto; }
a { color: var(--primary-color); text-decoration: none; }
a:hover { color: var(--secondary-color); }
.btn {
border-radius: 18px;
font-weight: 700;
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible {
box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--button-primary, var(--primary-color)) 20%, transparent);
}
.btn-primary,
.btn-outline-primary,
.btn-outline-secondary {
--theme-btn: var(--button-primary, var(--primary-color));
}
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: var(--theme-btn);
--bs-btn-border-color: var(--theme-btn);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: color-mix(in srgb, var(--theme-btn) 88%, black);
--bs-btn-hover-border-color: color-mix(in srgb, var(--theme-btn) 88%, black);
--bs-btn-focus-shadow-rgb: 0, 0, 0;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: color-mix(in srgb, var(--theme-btn) 82%, black);
--bs-btn-active-border-color: color-mix(in srgb, var(--theme-btn) 82%, black);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: color-mix(in srgb, var(--theme-btn) 64%, white);
--bs-btn-disabled-border-color: color-mix(in srgb, var(--theme-btn) 64%, white);
box-shadow: 0 14px 30px color-mix(in srgb, var(--theme-btn) 26%, transparent);
}
.btn-outline-primary {
--bs-btn-color: color-mix(in srgb, var(--theme-btn) 72%, black);
--bs-btn-border-color: color-mix(in srgb, var(--theme-btn) 42%, white);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--theme-btn);
--bs-btn-hover-border-color: var(--theme-btn);
--bs-btn-focus-shadow-rgb: 0, 0, 0;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: color-mix(in srgb, var(--theme-btn) 88%, black);
--bs-btn-active-border-color: color-mix(in srgb, var(--theme-btn) 88%, black);
--bs-btn-disabled-color: color-mix(in srgb, var(--theme-btn) 52%, white);
--bs-btn-disabled-border-color: color-mix(in srgb, var(--theme-btn) 26%, white);
background: color-mix(in srgb, var(--theme-btn) 6%, white);
}
.btn-outline-secondary {
--bs-btn-color: color-mix(in srgb, var(--theme-btn) 60%, black);
--bs-btn-border-color: color-mix(in srgb, var(--theme-btn) 22%, white);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--theme-btn);
--bs-btn-hover-border-color: var(--theme-btn);
--bs-btn-focus-shadow-rgb: 0, 0, 0;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: color-mix(in srgb, var(--theme-btn) 88%, black);
--bs-btn-active-border-color: color-mix(in srgb, var(--theme-btn) 88%, black);
background: #fff;
}
.site-logo { width: auto; height: 42px; max-width: 160px; object-fit: contain; }
.site-header .navbar { backdrop-filter: blur(8px); }
.hero {
background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 85%, white), color-mix(in srgb, var(--secondary-color) 80%, white));
color: white;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(13,110,253,.15);
}
.hero .hero-copy { padding: 3rem; }
.hero-card { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 1rem; }
.product-card, .category-card, .summary-card, .account-card, .admin-stat {
background: var(--card-bg);
border: 1px solid rgba(31,41,55,.06);
border-radius: 18px;
box-shadow: 0 8px 28px rgba(15,23,42,.06);
}
.product-card img, .category-card img { border-radius: 16px; object-fit: cover; width: 100%; }
.product-card .thumb-wrap { aspect-ratio: 1 / 1; background: #fff; padding: 14px; }
.product-card .thumb-wrap img { height: 100%; object-fit: contain; }
.price-badge { color: var(--primary-color); font-size: 1.1rem; font-weight: 700; }
.section-title { font-weight: 800; margin-bottom: 1rem; }
.site-footer { background: #fff; border-top: 1px solid rgba(0,0,0,.06); }
.cart-badge { position: absolute; top: -6px; right: -6px; font-size: 10px; }
.badge-soft { background: rgba(13,110,253,.08); color: var(--primary-color); }
.summary-card { padding: 1.25rem; }
.table-card { background: #fff; border-radius: 18px; padding: 1rem; box-shadow: 0 8px 25px rgba(15,23,42,.05); }
.admin-body { background: #eff3f8; }
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
width: 260px; background: linear-gradient(180deg, var(--secondary-color), color-mix(in srgb, var(--secondary-color) 78%, black));
color: white; padding: 24px; position: sticky; top: 0; height: 100vh;
}
.admin-brand { display: block; color: white; font-size: 1.3rem; font-weight: 800; margin-bottom: 1rem; }
.admin-sidebar .nav-link { color: rgba(255,255,255,.86); padding: .7rem .9rem; border-radius: 12px; }
.admin-sidebar .nav-link:hover { background: rgba(255,255,255,.1); color: white; }
.admin-content { flex: 1; }
.admin-stat { padding: 1.25rem; }
.form-section { background: #fff; border-radius: 18px; padding: 1.2rem; box-shadow: 0 8px 25px rgba(15,23,42,.05); }
.invoice-sheet { background: white; border-radius: 18px; padding: 2rem; box-shadow: 0 10px 35px rgba(15,23,42,.08); }
.invoice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.small-label { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.table thead th { background: rgba(13,110,253,.06); }
.lang-ar body, body.lang-ar, .lang-ar { font-family: var(--font-ar) !important; }
.lang-en body, body.lang-en, .lang-en { font-family: var(--font-en); }
.currency-image { height: 1.05em; width: auto; vertical-align: -0.12em; object-fit: contain; transition: transform .18s ease, opacity .18s ease; }
.money-wrap { display: inline-flex !important; align-items: center; gap: .32rem; white-space: nowrap; direction:ltr !important; unicode-bidi:isolate; flex-direction: row !important; }
.money-wrap .currency-slot,.money-wrap .currency-image,.money-wrap .currency-text{order:1 !important;}
.money-wrap .money-value{order:2 !important;}
.money-wrap .currency-slot{display:inline-flex;align-items:center;}
.money-wrap .currency-image{width:16px;height:16px;object-fit:contain;display:inline-block;}
.money-value { font-variant-numeric: tabular-nums; }
.money-wrap:hover .currency-image { transform: scale(1.06); opacity: .98; }
html[dir='rtl'] .money-wrap, body.lang-ar .money-wrap { direction:ltr !important; flex-direction:row !important; }
.rich-content img { max-width: 100%; height: auto; }
.rich-content p:last-child { margin-bottom: 0; }
.rich-content .ql-align-center { text-align: center; }
.rich-content .ql-align-right { text-align: right; }
.rich-content .ql-align-justify { text-align: justify; }
.rich-content .ql-size-small { font-size: .85em; }
.rich-content .ql-size-large { font-size: 1.35em; }
.rich-content .ql-size-huge { font-size: 1.8em; }
.rich-content .ql-font-tajawal, .rich-content .ql-font-store-ar { font-family: var(--font-ar); }
.rich-content .ql-font-arboria, .rich-content .ql-font-store-en { font-family: var(--font-en); }
@media (max-width: 991px) {
.hero .hero-copy { padding: 2rem; }
.admin-shell { display: block; }
.admin-sidebar { width: 100%; height: auto; position: relative; }
.invoice-grid { grid-template-columns: 1fr; }
}
/* admin dashboard refresh */
.admin-body {
background:
radial-gradient(circle at top left, rgba(96,165,250,.14), transparent 28%),
radial-gradient(circle at top right, rgba(29,78,216,.10), transparent 24%),
#f4f7fb;
}
.admin-shell-pro {
gap: 24px;
padding: 18px;
}
.admin-sidebar-pro {
width: 280px;
background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
color: #0f172a;
border: 1px solid rgba(148,163,184,.18);
border-radius: 28px;
box-shadow: 0 18px 55px rgba(15,23,42,.08);
padding: 22px 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: sticky;
top: 18px;
max-height: calc(100vh - 36px);
overflow-y: auto;
scrollbar-width: thin;
}
.admin-brand-card {
display: flex;
align-items: center;
gap: 14px;
padding: 10px;
border-radius: 18px;
background: rgba(255,255,255,.8);
color: #0f172a;
box-shadow: inset 0 0 0 1px rgba(191,219,254,.75);
margin-bottom: 22px;
}
.admin-brand-card:hover { color: #0f172a; }
.admin-brand-logo {
width: 44px;
height: 44px;
object-fit: contain;
border-radius: 12px;
background: #fff;
padding: 4px;
}
.admin-brand-mark {
width: 44px;
height: 44px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-color), #60a5fa);
color: #fff;
font-size: 1.15rem;
box-shadow: 0 12px 24px rgba(37,99,235,.24);
}
.admin-brand-title { font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.admin-brand-subtitle { color: #64748b; font-size: .85rem; }
.admin-menu-block { margin-bottom: 12px; padding: 16px 12px; background: rgba(255,255,255,.72); border: 1px solid rgba(191,219,254,.65); border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.admin-menu-caption {
color: #94a3b8;
text-transform: uppercase;
letter-spacing: .08em;
font-size: .72rem;
font-weight: 700;
padding: 0 10px;
margin-bottom: 10px;
}
.admin-sidebar-pro .nav-link {
color: #334155;
padding: .88rem 1rem;
border-radius: 16px;
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
transition: .2s ease;
}
.admin-sidebar-pro .nav-link i {
width: 20px;
text-align: center;
color: #1d4ed8;
}
.admin-sidebar-pro .nav-link:hover,
.admin-sidebar-pro .nav-link.active {
background: linear-gradient(90deg, rgba(37,99,235,.14), rgba(96,165,250,.08));
color: #0f172a;
box-shadow: inset 0 0 0 1px rgba(96,165,250,.18);
}
.admin-sidebar-pro .nav-link.active i,
.admin-sidebar-pro .nav-link:hover i { color: #1d4ed8; }
.admin-sidebar-pro .nav-link-danger { color: #b91c1c; }
.admin-sidebar-pro .nav-link-danger i { color: #b91c1c; }
.admin-support-card {
border-radius: 24px;
padding: 20px;
color: white;
background: linear-gradient(145deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
box-shadow: 0 16px 34px rgba(37,99,235,.28);
}
.admin-content-pro {
flex: 1;
min-width: 0;
}
.admin-topbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
padding: 10px 6px 20px;
}
.admin-breadcrumb {
display: inline-flex;
align-items: center;
gap: 8px;
color: #64748b;
font-size: .92rem;
margin-bottom: 6px;
}
.admin-page-title {
font-size: 1.85rem;
font-weight: 800;
color: #0f172a;
}
.admin-topbar-actions {
display: flex;
align-items: center;
gap: 14px;
}
.admin-searchbox {
min-width: 320px;
display: flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,.86);
border: 1px solid rgba(226,232,240,.95);
border-radius: 999px;
padding: 0 16px;
box-shadow: 0 12px 30px rgba(15,23,42,.04);
}
.admin-searchbox i { color: #64748b; }
.admin-searchbox input {
width: 100%;
border: 0;
background: transparent;
padding: 14px 0;
outline: none;
color: #0f172a;
}
.admin-icon-btn {
width: 46px;
height: 46px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.86);
border: 1px solid rgba(226,232,240,.95);
color: #0f172a;
box-shadow: 0 10px 24px rgba(15,23,42,.04);
}
.admin-user-dropdown .dropdown-toggle::after{display:none}.admin-user-menu .dropdown-item{display:flex;align-items:center;gap:10px;padding:.7rem 1rem}.admin-user-menu .dropdown-item i{width:18px;text-align:center}.admin-user-chip {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255,255,255,.86);
border: 1px solid rgba(226,232,240,.95);
border-radius: 999px;
padding: 8px 14px 8px 8px;
box-shadow: 0 10px 24px rgba(15,23,42,.04);
}
.admin-user-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1d4ed8, #60a5fa);
color: white;
font-weight: 800;
}
.admin-user-name { font-weight: 700; color: #0f172a; line-height: 1.15; }
.admin-user-email { font-size: .82rem; color: #64748b; }
.admin-page-body { padding: 0 6px 18px; }
.admin-alert { border-radius: 16px; border: 0; box-shadow: 0 8px 24px rgba(15,23,42,.05); }
.dashboard-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.dashboard-stat-card {
position: relative;
overflow: hidden;
border-radius: 26px;
background: rgba(255,255,255,.96);
border: 1px solid rgba(226,232,240,.9);
box-shadow: 0 22px 60px rgba(15,23,42,.06);
padding: 22px;
}
.dashboard-stat-primary,
.dashboard-stat-secondary,
.dashboard-stat-month {
color: white;
border: 0;
}
.dashboard-stat-primary {
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 52%, #60a5fa 100%);
}
.dashboard-stat-secondary {
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
}
.dashboard-stat-month {
background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #5eead4 100%);
}
/* Currency mark image is dark by default — invert it on dark/blue cards so it shows white. */
.dashboard-stat-primary .currency-image,
.dashboard-stat-secondary .currency-image,
.dashboard-stat-month .currency-image {
filter: brightness(0) invert(1);
}
.dashboard-stat-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.dashboard-stat-icon,
.dashboard-stat-arrow {
width: 42px;
height: 42px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.18);
color: white;
}
.dashboard-stat-icon.light {
background: rgba(37,99,235,.08);
color: #1d4ed8;
}
.dashboard-stat-arrow.muted {
background: rgba(148,163,184,.12);
color: #64748b;
}
.dashboard-stat-label { font-size: .96rem; color: inherit; opacity: .95; margin-bottom: 8px; }
.dashboard-stat-value {
font-size: 2rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 8px;
}
.dashboard-stat-value.dark { color: #0f172a; }
.dashboard-stat-meta { font-size: .86rem; opacity: .82; }
.dashboard-panel,
.form-section,
.table-card,
.admin-stat {
background: rgba(255,255,255,.96);
border-radius: 28px;
border: 1px solid rgba(226,232,240,.88);
box-shadow: 0 20px 55px rgba(15,23,42,.06);
padding: 24px;
}
.dashboard-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
.dashboard-panel-header h2 {
font-size: 1.35rem;
font-weight: 800;
color: #0f172a;
margin: 0 0 4px;
}
.dashboard-panel-header p {
color: #64748b;
margin: 0;
font-size: .93rem;
}
.dashboard-chip {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: .45rem .8rem;
background: rgba(37,99,235,.08);
color: #1d4ed8;
font-weight: 700;
font-size: .78rem;
}
.dashboard-chart-lg { height: 320px; }
.dashboard-chart-md { height: 320px; }
.dashboard-chart-sm { height: 260px; }
.dashboard-list { display: grid; gap: 12px; }
.dashboard-list-item {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 12px;
align-items: center;
padding: 14px;
border-radius: 18px;
background: #f8fbff;
border: 1px solid rgba(191,219,254,.55);
}
.dashboard-list-rank {
width: 38px;
height: 38px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1d4ed8, #60a5fa);
color: white;
font-weight: 800;
}
.dashboard-list-copy strong { display: block; color: #0f172a; }
.dashboard-list-copy span { color: #64748b; font-size: .88rem; }
.dashboard-list-value { font-weight: 800; color: #0f172a; }
.quick-actions-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.quick-action-card {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
justify-content: center;
min-height: 120px;
padding: 18px;
border-radius: 22px;
background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
border: 1px solid rgba(191,219,254,.7);
color: #0f172a;
font-weight: 700;
}
.quick-action-card i {
width: 44px;
height: 44px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2563eb, #60a5fa);
color: #fff;
}
.admin-table-modern thead th {
background: #f8fbff;
color: #64748b;
border-bottom: 1px solid rgba(226,232,240,.9);
font-weight: 700;
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .05em;
}
.admin-table-modern tbody td {
border-color: rgba(226,232,240,.8);
padding-top: 14px;
padding-bottom: 14px;
}
.status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .42rem .75rem;
border-radius: 999px;
font-size: .8rem;
font-weight: 700;
text-transform: capitalize;
}
.status-pending { background: #fff7ed; color: #c2410c; }
.status-processing { background: #eff6ff; color: #1d4ed8; }
.status-shipped { background: #eef2ff; color: #4338ca; }
.status-completed { background: #ecfdf5; color: #047857; }
.status-cancelled { background: #fef2f2; color: #b91c1c; }
.payment-pending { background: #fff7ed; color: #c2410c; }
.payment-paid { background: #ecfdf5; color: #047857; }
.payment-failed { background: #fef2f2; color: #b91c1c; }
.payment-refunded { background: #f1f5f9; color: #475569; }
@media (max-width: 1400px) {
.dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
.admin-shell-pro { display: block; }
.admin-sidebar-pro {
width: 100%;
height: auto;
position: relative;
top: 0;
margin-bottom: 18px;
}
}
@media (max-width: 991px) {
.admin-topbar {
flex-direction: column;
align-items: stretch;
}
.admin-topbar-actions {
flex-wrap: wrap;
justify-content: space-between;
}
.admin-searchbox { min-width: 0; width: 100%; }
.dashboard-grid { grid-template-columns: 1fr; }
.quick-actions-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
.admin-shell-pro { padding: 12px; }
.admin-page-title { font-size: 1.45rem; }
.dashboard-panel,
.form-section,
.table-card,
.admin-stat,
.dashboard-stat-card { padding: 18px; border-radius: 22px; }
.dashboard-list-item { grid-template-columns: 38px 1fr; }
.dashboard-list-value { grid-column: 2; }
}
.site-navbar {
background: var(--header-bg);
border-radius: 0 0 24px 24px;
}
.site-brand {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--header-text) !important;
font-weight: 800;
}
.site-logo-icon { height: 34px; width: 34px; object-fit: contain; }
.site-brand-text { font-size: 1.05rem; }
.site-header .navbar-brand,
.site-header .site-header-main .nav-link,
.site-header .site-header-main a,
.site-header .site-search input,
.site-header .site-search i { color: var(--header-text); }
.site-header-nav .navbar a,
.site-header-nav .nav-link { color: var(--header-nav-text); }
.site-header-nav .navbar a:hover,
.site-header-nav .nav-link:hover { color: var(--header-nav-hover); }
.site-header-nav .nav-link.active { color: var(--header-nav-active); }
.site-header-actions { min-width: 0; }
.site-search {
min-width: 290px;
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(15,23,42,.04);
border: 1px solid rgba(148,163,184,.18);
border-radius: 999px;
padding: 0 14px;
}
.site-search input { min-height: 44px; box-shadow: none !important; }
.header-icon-links { display: inline-flex; }
.header-icon-link {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(15,23,42,.04);
border: 1px solid rgba(148,163,184,.18);
}
.header-count {
position: absolute;
top: -4px;
right: -2px;
min-width: 18px;
height: 18px;
border-radius: 999px;
background: var(--primary-color);
color: #fff;
font-size: .68rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
.site-pill-btn {
min-height: 44px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 8px;
padding-inline: 18px;
}
.home-products-section { overflow: hidden; }
.products-inline-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 28px;
}
/* PRICE-ALIGN — every card fills its grid row so the price can be pinned to
the card's bottom edge. Grid stretches items to equal height by default,
so pinning gives one shared price baseline across the whole row. */
.product-showcase-card {
display: flex;
flex-direction: column;
min-width: 0;
height: 100%;
}
.product-showcase-media {
position: relative;
background: #eef1f5;
border-radius: 22px;
/* RESPONSIVE — a square that tracks the column width, so the card really
shrinks as the viewport narrows. A fixed pixel height kept the tile tall
while it got narrower, which is what forced the reflow. */
aspect-ratio: 1 / 1;
padding: 18px;
overflow: hidden;
}
.showcase-thumb {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.showcase-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.product-badge {
position: absolute;
top: 14px;
right: 14px;
background: #4a6cf7;
color: #fff;
border-radius: 999px;
font-size: .84rem;
font-weight: 700;
padding: 10px 16px;
box-shadow: 0 10px 20px rgba(74,108,247,.22);
}
.wishlist-circle,
.cart-plus-circle {
position: absolute;
z-index: 4;
width: 48px;
height: 48px;
border-radius: 50%;
border: 0;
background: #fff;
box-shadow: 0 10px 26px rgba(15,23,42,.12);
display: inline-flex;
align-items: center;
justify-content: center;
color: #111827;
}
.wishlist-circle { top: 12px; left: 12px; }
.cart-plus-circle {
bottom: 12px;
left: 12px;
color: #2f855a;
font-size: 1.1rem;
}
.wishlist-circle.active { color: #e11d48; }
.product-showcase-body {
padding: 18px 4px 0;
text-align: center;
/* Column layout is what lets the price claim the leftover space below. */
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.product-showcase-title {
font-size: 1.05rem;
font-weight: 600;
color: #374151;
margin-bottom: 10px;
line-height: 1.35;
/* Reserve two lines so one-line and two-line names occupy the same space —
the common case aligns exactly. Longer names still wrap freely rather
than being truncated; the price stays aligned regardless because it is
pinned to the bottom. */
min-height: 2.7em;
}
.product-showcase-title a { color: inherit; }
.product-showcase-desc {
color: #8a94a6;
font-size: .95rem;
min-height: 46px;
margin-bottom: 12px;
}
.product-showcase-price {
font-size: 1.05rem;
font-weight: 800;
color: #2d3748;
/* Pushes the price to the bottom of the card — the shared baseline. */
margin-top: auto;
padding-top: 4px;
}
.product-showcase-price .money-wrap {
gap: .45rem;
flex-direction: row !important;
}
/* RESPONSIVE — column counts stay divisors of 6, because every home-page
section renders exactly 6 products (and category pages 12). Dropping to 4
left an orphan row of 2. The sequence 6 → 3 → 2 always fills its rows.
Between breakpoints the cards simply get smaller. */
@media (max-width: 1399px) {
.products-inline-grid { gap: 20px; }
}
@media (max-width: 1199px) {
.products-inline-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
.site-search { min-width: 100%; }
.products-inline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 575px) {
/* Two per row on phones, the same density noon and other Gulf storefronts
use — one huge card per row wastes most of the screen. */
.products-inline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.product-showcase-media { border-radius: 16px; padding: 10px; }
.product-showcase-title { font-size: .92rem; }
.product-showcase-desc { font-size: .82rem; min-height: 38px; }
.product-showcase-price { font-size: .95rem; }
.wishlist-circle,
.cart-plus-circle { width: 36px; height: 36px; font-size: .9rem; }
}
@media (max-width: 359px) {
.products-inline-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
/* storefront header refresh */
.site-header-main-inner { min-height: 72px; }
.site-brand { display:flex; align-items:center; flex-shrink:0; }
.site-brand-text { font-size: 2rem; font-weight: 800; }
.site-search { position: relative; max-width: 980px; }
.site-search i { position:absolute; top:50%; transform:translateY(-50%); left:18px; color:#111827; z-index:2; }
body.lang-ar .site-search i { left:auto; right:18px; }
.site-search .form-control { border-radius: 999px; min-height: 48px; padding-left: 50px; background: #fff !important; border: 0; box-shadow: none; }
body.lang-ar .site-search .form-control { padding-left: 18px; padding-right: 50px; }
.header-tool-link, .header-icon-link { color: var(--header-text); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; position:relative; }
.site-header-tools { flex-shrink: 0; }
.header-language-toggle {
min-height: 42px;
padding: 0 14px;
border-radius: 999px;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.2);
font-weight: 700;
transition: .2s ease;
}
.header-language-toggle:hover {
color: var(--header-text);
background: rgba(255,255,255,.2);
transform: translateY(-1px);
}
.header-icon-link { font-size:1.35rem; }
.header-count { position:absolute; top:-8px; right:-10px; min-width:18px; height:18px; border-radius:999px; background:#fff; color:var(--primary-color); font-size:.7rem; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
body.lang-ar .header-count { right:auto; left:-10px; }
.site-header-nav .nav-link { color: var(--header-nav-text); font-weight:500; padding:.95rem .2rem; }
.site-header-nav .nav-link:hover { color: var(--header-nav-hover); }
.site-header-nav .nav-link.active { color: var(--header-nav-active); }
.site-category-nav { flex-wrap: nowrap; overflow:auto; white-space:nowrap; }
.site-category-nav::-webkit-scrollbar { display:none; }
.footer-payment-cards img { height: 28px; width:auto; display:block; }
.payment-card-chip { background:#fff; border:1px solid rgba(15,23,42,.08); border-radius:12px; padding:8px 10px; box-shadow:0 5px 18px rgba(15,23,42,.05); }
.cart-plus-circle.is-added { background: var(--primary-color) !important; color:#fff !important; transform: scale(1.08); }
.cart-toast { position: fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:#111827; color:#fff; padding:12px 18px; border-radius:999px; opacity:0; pointer-events:none; transition:.25s ease; z-index:1080; }
.cart-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.pagination .page-link { border-radius: 12px; margin: 0 4px; border: 1px solid rgba(15,23,42,.08); color: var(--secondary-color); }
.pagination .page-item.active .page-link { background: var(--primary-color); border-color: var(--primary-color); }
@media (max-width: 991px) {
.site-header-main-inner { flex-wrap: wrap; }
.site-search { order: 3; width:100%; max-width:none; }
.site-header-tools { gap: .8rem !important; }
.header-language-toggle { padding: 0 12px; }
}
.cart-plus-circle:hover {
background: var(--primary-color);
color: #fff;
transform: translateY(-2px);
transition: .2s ease;
}
.wishlist-circle:hover {
color: #e11d48;
transform: translateY(-2px);
transition: .2s ease;
}
.account-profile-grid {
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
gap: 24px;
}
.account-sidebar-card,
.account-main-card {
background: rgba(255,255,255,.96);
border-radius: 28px;
border: 1px solid rgba(226,232,240,.88);
box-shadow: 0 20px 55px rgba(15,23,42,.06);
padding: 24px;
}
.account-sidebar-card { text-align: center; }
.account-avatar-lg {
width: 112px;
height: 112px;
border-radius: 50%;
object-fit: cover;
display: block;
margin: 0 auto 18px;
border: 4px solid rgba(37,99,235,.12);
}
@media (max-width: 991px) {
.account-profile-grid { grid-template-columns: 1fr; }
}
.code-editor{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace!important;min-height:220px;background:#0f172a;color:#e2e8f0;border-color:#1e293b}
.template-preview-frame{width:100%;min-height:560px;border:1px solid rgba(15,23,42,.08);border-radius:18px;background:#fff}
.account-v6-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px}.account-v6-sidebar{display:flex;flex-direction:column;gap:20px}.account-v6-usercard,.account-panel,.account-form-card{background:#fff;border-radius:28px;border:1px solid rgba(15,23,42,.08);box-shadow:0 20px 55px rgba(15,23,42,.06)}.account-v6-usercard{padding:24px;display:flex;align-items:center;gap:16px}.account-v6-avatar{width:78px;height:78px;border-radius:50%;object-fit:cover;background:#e5e7eb}.account-v6-avatar-lg{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid rgba(37,99,235,.1)}.account-v6-name{font-size:1.5rem;font-weight:800;margin:0 0 4px}.account-v6-nav{background:#fff;border-radius:28px;border:1px solid rgba(15,23,42,.08);padding:14px}.account-v6-nav a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;text-decoration:none;color:#334155;font-weight:600;transition:.2s ease}.account-v6-nav a.active{background:var(--profile-nav-active-bg);color:var(--profile-nav-active-text);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--profile-nav-active-text) 18%, transparent)}.account-v6-nav a:hover{background:var(--profile-nav-hover-bg);color:var(--profile-nav-hover-text)}.account-v6-nav a.active i,.account-v6-nav a:hover i{color:inherit}.account-v6-main{min-width:0}.account-panel{padding:28px}.account-form-card{padding:24px}.address-tile,.payment-card-v6{background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:24px;padding:22px;box-shadow:0 14px 38px rgba(15,23,42,.05)}.address-tile.is-default,.payment-card-v6.is-default{border-color:rgba(37,99,235,.35);box-shadow:0 20px 45px rgba(37,99,235,.08)}.payment-card-v6{background:linear-gradient(135deg,#eff6ff,#ffffff)}.payment-card-top{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:28px}.payment-card-number{font-size:1.15rem;font-weight:700;letter-spacing:.08em;margin-bottom:12px}.payment-card-exp{color:#64748b}.activity-list-v6{display:flex;flex-direction:column;gap:12px}.activity-row{display:flex;justify-content:space-between;gap:18px;padding:16px 18px;border:1px solid rgba(15,23,42,.08);border-radius:18px;background:#fff}.account-main-card .btn-primary,.account-panel .btn-primary{border-radius:16px}
@media (max-width: 991px){.account-v6-layout{grid-template-columns:1fr}.template-preview-frame{min-height:420px}}
.admin-user-avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
/* cart redesign */
.cart-page .page-title-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.cart-page .cart-layout { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:24px; align-items:start; }
.cart-page .cart-item-card { display:grid; grid-template-columns:136px minmax(0,1fr) auto; gap:22px; align-items:start; padding:24px; border-radius:24px; }
.cart-page .cart-item-image { width:120px; height:120px; object-fit:contain; background:#f7f8fb; border-radius:16px; padding:12px; }
.cart-page .cart-item-title { font-size:1.1rem; font-weight:800; margin:0 0 .35rem; }
.cart-page .cart-item-desc { color:#667085; font-size:.95rem; margin-bottom:.65rem; }
.cart-page .cart-inline-price { color:var(--primary-color); font-weight:800; font-size:1rem; }
.cart-page .cart-item-side { display:flex; flex-direction:column; align-items:flex-end; gap:14px; min-width:240px; }
.cart-page .cart-qty-form { display:flex; align-items:center; gap:12px; }
.cart-page .qty-box { display:inline-flex; align-items:center; border:1px solid rgba(15,23,42,.12); border-radius:16px; overflow:hidden; background:#fff; }
.cart-page .qty-box button { width:52px; height:52px; border:0; background:#fff; color:var(--primary-color); font-size:1.5rem; font-weight:700; }
.cart-page .qty-box button:hover { background:rgba(13,110,253,.08); }
.cart-page .qty-box input { width:72px; height:52px; border:0; text-align:center; font-size:1.25rem; font-weight:700; background:#fff; }
.cart-page .cart-line-price { font-size:1.15rem; font-weight:800; }
.cart-page .cart-remove-btn { border:0; background:transparent; color:#ef4444; font-weight:500; display:inline-flex; align-items:center; gap:.5rem; padding:0; }
.cart-page .cart-remove-btn:hover { color:#dc2626; }
.cart-page .summary-card.order-summary-card { border-radius:24px; padding:22px; }
.cart-page .summary-row { display:flex; justify-content:space-between; gap:1rem; margin-bottom:14px; }
.cart-page .summary-row.total { border-top:1px solid rgba(15,23,42,.08); padding-top:18px; margin-top:14px; font-size:1.25rem; font-weight:800; }
@media (max-width: 991px) {
.cart-page .cart-layout { grid-template-columns:1fr; }
.cart-page .cart-item-card { grid-template-columns:1fr; }
.cart-page .cart-item-side { align-items:stretch; min-width:0; }
.cart-page .page-title-row { align-items:flex-start; flex-direction:column; }
}
#cartToast.toast-error{background:#dc3545;color:#fff;}
.cart-inline-price .money-wrap, .cart-line-price .money-wrap, .summary-row .money-wrap, .price-badge .money-wrap, .product-showcase-price .money-wrap, .invoice-total-line .money-wrap, .table .money-wrap {flex-direction:row !important; direction:ltr !important;}
.admin-sidebar-pro::-webkit-scrollbar{width:8px}
.admin-sidebar-pro::-webkit-scrollbar-thumb{background:rgba(148,163,184,.45);border-radius:999px}
.admin-shell-pro{align-items:flex-start}
.admin-content-pro{
flex:1;
min-width:0;
background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
border:1px solid rgba(191,219,254,.55);
border-radius:28px;
box-shadow:0 18px 55px rgba(15,23,42,.05);
padding:0 18px 22px;
}
.admin-page-body.container-fluid{padding:0 6px 12px}
@media (max-width: 991px){
.admin-content-pro{padding:0 10px 18px}
.admin-sidebar-pro{max-height:none;overflow:visible}
}
.admin-footer-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#64748b;font-size:.9rem;border-top:1px solid rgba(191,219,254,.7);margin-top:10px;padding-top:16px}
@media (max-width: 767px){.admin-footer-meta{flex-direction:column;align-items:flex-start}}
/* profile dark mode */
body.profile-dark-mode{background:var(--profile-dark-bg);color:var(--profile-dark-text)}
body.profile-dark-mode .site-footer{background:var(--profile-dark-card-bg);border-top-color:var(--profile-dark-border)}
body.profile-dark-mode .account-v6-usercard,
body.profile-dark-mode .account-v6-nav,
body.profile-dark-mode .account-panel,
body.profile-dark-mode .account-form-card,
body.profile-dark-mode .address-tile,
body.profile-dark-mode .payment-card-v6,
body.profile-dark-mode .activity-row{background:var(--profile-dark-card-bg)!important;border-color:var(--profile-dark-border)!important;box-shadow:0 20px 55px rgba(0,0,0,.28)}
body.profile-dark-mode .account-v6-name,
body.profile-dark-mode .account-panel h1,
body.profile-dark-mode .account-panel h2,
body.profile-dark-mode .account-panel h3,
body.profile-dark-mode .payment-card-number,
body.profile-dark-mode .payment-card-top,
body.profile-dark-mode .activity-row strong,
body.profile-dark-mode .table,
body.profile-dark-mode .table th,
body.profile-dark-mode .table td{color:var(--profile-dark-text)!important}
body.profile-dark-mode .text-muted,
body.profile-dark-mode .payment-card-exp,
body.profile-dark-mode .activity-row .small,
body.profile-dark-mode .account-panel p,
body.profile-dark-mode .form-text{color:var(--profile-dark-muted)!important}
body.profile-dark-mode .form-control,
body.profile-dark-mode .form-select{background:#0f172a;border-color:var(--profile-dark-border);color:var(--profile-dark-text)}
body.profile-dark-mode .form-control:disabled{background:#0b1220;color:var(--profile-dark-muted)}
body.profile-dark-mode .table{--bs-table-bg: transparent;--bs-table-color: var(--profile-dark-text);--bs-table-border-color: var(--profile-dark-border)}
body.profile-dark-mode .account-v6-nav a{color:var(--profile-dark-text)}
body.profile-dark-mode .account-v6-nav a.active{background:color-mix(in srgb, var(--profile-nav-active-bg) 30%, #0f172a);color:var(--profile-dark-text)}
body.profile-dark-mode .account-v6-nav a:hover{background:color-mix(in srgb, var(--profile-nav-hover-bg) 25%, #0f172a);color:var(--profile-dark-text)}
body.profile-dark-mode .badge.text-bg-primary{background:var(--primary-color)!important;color:#fff!important}
/* 404 page */
.notfound-wrap{
max-width: 980px;
background: rgba(255,255,255,.96);
border: 1px solid rgba(226,232,240,.9);
border-radius: 34px;
box-shadow: 0 24px 70px rgba(15,23,42,.08);
padding: 32px 24px 40px;
}
.notfound-browser{
position: relative;
margin: 0 auto 24px;
max-width: 760px;
min-height: 340px;
border: 4px solid #111827;
border-radius: 42px;
background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
transform: rotate(-6deg);
overflow: hidden;
}
.notfound-browser:before{
content:"";
position:absolute;
inset: 0 auto 0 18px;
width: 22px;
background: rgba(74,125,240,.08);
}
.notfound-dots{
position:absolute;
top:18px;
right:22px;
display:flex;
gap:10px;
}
.notfound-dots span{
width:18px;height:18px;border-radius:50%;
border:3px solid #111827;background:#fff;display:block;
}
.notfound-code{
position:absolute;
inset: 72px 0 auto 0;
text-align:center;
font-size: clamp(92px, 18vw, 170px);
line-height: 1;
font-weight: 900;
letter-spacing: .03em;
color: var(--primary-color);
}
.notfound-lines{
position:absolute;
left:20%;
right:20%;
bottom:74px;
display:grid;
gap:16px;
}
.notfound-lines span{
display:block;
height:4px;
border-radius:999px;
background:#111827;
opacity:.85;
}
.notfound-lines span:nth-child(1){ width:100%; }
.notfound-lines span:nth-child(2){ width:72%; }
.notfound-lines span:nth-child(3){ width:54%; }
.notfound-title{
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 900;
color:#111827;
margin-bottom: 12px;
}
.notfound-text{
max-width: 640px;
margin: 0 auto;
color:#64748b;
font-size: 1.05rem;
}
html[dir='rtl'] .notfound-browser{ transform: rotate(6deg); }
@media (max-width: 767px){
.notfound-wrap{ padding: 20px 16px 28px; border-radius: 24px; }
.notfound-browser{ min-height: 240px; border-radius: 26px; }
.notfound-dots span{ width:14px;height:14px;border-width:2px; }
.notfound-lines{ left:16%; right:16%; bottom:42px; gap:12px; }
}
/* footer v2 */
.footer-v2{
background: var(--footer-bg);
color: var(--footer-text);
border-top: 1px solid var(--footer-border);
}
.footer-v2 a{ color: inherit; }
.footer-v2-top,
.footer-v2-mid,
.footer-v2-bottom{ border-top: 1px solid var(--footer-border); }
.footer-v2-top{ border-top: 0; padding: 34px 0; }
.footer-v2-top-inner,
.footer-v2-mid-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
}
.footer-v2-label{
font-size: .95rem;
font-weight: 800;
text-transform: uppercase;
color: var(--footer-text);
margin-bottom: 12px;
}
.footer-v2-apps,
.footer-v2-social{ display:flex; flex-direction:column; }
.footer-v2-app-badges{ display:flex; flex-wrap:wrap; gap:12px; }
.footer-v2-app-badges img{
height: 38px;
width: auto;
display:block;
border-radius: 8px;
}
.footer-v2-social{ align-items:flex-end; }
.footer-v2-social-links{ display:flex; flex-wrap:wrap; gap:12px; }
.footer-v2-social-links a{
/* Size and colors come from Footer settings; the fallbacks keep the
footer correct if the CSS is used outside includes/footer.php. */
width: var(--footer-social-size, 36px);
height: var(--footer-social-size, 36px);
border-radius: 50%;
background: var(--footer-social-bg, var(--primary-color));
color: var(--footer-social-icon, #fff);
display:inline-flex;
align-items:center;
justify-content:center;
/* Glyph scales with the circle so the icon never crowds the edge. */
font-size: calc(var(--footer-social-size, 36px) * 0.46);
line-height: 1;
box-shadow: 0 6px 16px rgba(37,99,235,.14);
}
.footer-v2-mid{ padding: 22px 0; }
.footer-v2-copy,
.footer-v2-bottom{ color: var(--footer-muted); }
.footer-v2-cards{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
flex-wrap:wrap;
}
.footer-v2-links{
display:flex;
align-items:center;
justify-content:flex-end;
gap:26px;
flex-wrap:wrap;
}
.footer-v2-links a{ color: var(--footer-text); }
.footer-v2-bottom{ padding: 20px 0; }
.footer-v2-trust{
border-top: 1px solid var(--footer-border);
padding: 16px 0;
}
.footer-trust-inner{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:14px 28px;
}
.trust-badge{
display:inline-flex;
align-items:center;
gap:10px;
text-decoration:none;
color: var(--footer-text);
background:#fff;
border:1px solid var(--footer-border);
border-radius:10px;
padding:8px 14px;
line-height:1.2;
transition: box-shadow .15s ease, transform .15s ease;
}
a.trust-badge:hover{ box-shadow:0 6px 18px rgba(15,23,42,.08); transform: translateY(-1px); }
.trust-badge-icon{
width:28px;
height:28px;
display:block;
flex-shrink:0;
object-fit:contain;
}
.trust-badge-text{
font-weight:600;
font-size:.92rem;
}
.trust-badge-stack{
display:flex;
flex-direction:column;
gap:1px;
}
.trust-badge-label{
font-size:.72rem;
color: var(--footer-muted);
letter-spacing:.2px;
}
.trust-badge-value{
font-size:.95rem;
color: var(--footer-text);
letter-spacing:.4px;
direction:ltr;
unicode-bidi:isolate;
}
@media (max-width: 575px){
.footer-trust-inner{ gap:10px 14px; }
.trust-badge{ padding:6px 10px; }
.trust-badge-icon{ width:24px; height:24px; }
.trust-badge-text{ font-size:.85rem; }
}
html[dir='rtl'] .footer-v2-social{ align-items:flex-start; }
@media (max-width: 991px){
.footer-v2-top-inner,
.footer-v2-mid-inner{
flex-direction:column;
align-items:flex-start;
}
.footer-v2-social,
html[dir='rtl'] .footer-v2-social{ align-items:flex-start; }
.footer-v2-links{ justify-content:flex-start; gap:16px; }
}
/* homepage category slider */
.home-category-slider-section{ position:relative; }
.category-slider-shell{
position:relative;
padding-inline: 38px;
}
.category-slider-track{
display:flex;
gap:22px;
overflow-x:auto;
scroll-behavior:smooth;
scrollbar-width:none;
padding: 4px 2px 8px;
}
.category-slider-track::-webkit-scrollbar{ display:none; }
.category-slider-card{
flex: 0 0 148px;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
color:#1f2937;
}
.category-slider-media{
width: 148px;
height: 148px;
border-radius: 26px;
background: #f3f5f8;
display:flex;
align-items:center;
justify-content:center;
padding: 12px;
margin-bottom: 14px;
box-shadow: inset 0 0 0 1px rgba(15,23,42,.04);
}
.category-slider-media img{
max-width:100%;
max-height:100%;
object-fit:contain;
}
.category-slider-name{
font-size: .95rem;
font-weight: 700;
line-height: 1.25;
}
.category-slider-nav{
position:absolute;
top:50px;
width:44px;
height:44px;
border-radius:50%;
border:1px solid rgba(148,163,184,.28);
background: rgba(255,255,255,.96);
color:#94a3b8;
display:inline-flex;
align-items:center;
justify-content:center;
box-shadow: 0 8px 18px rgba(15,23,42,.08);
z-index:2;
}
.category-slider-nav.prev{ inset-inline-start:0; }
.category-slider-nav.next{ inset-inline-end:0; }
.category-slider-nav:hover{ color:var(--primary-color); }
html[dir='rtl'] .category-slider-track{ direction:rtl; }
@media (max-width: 767px){
.category-slider-shell{ padding-inline: 0; }
.category-slider-nav{ display:none; }
.category-slider-card{ flex-basis: 122px; }
.category-slider-media{ width:122px; height:122px; border-radius:22px; }
}
/* footer icon sizing fix */
.footer-v2-app-badges img{
height: 52px !important;
max-height: 52px !important;
}
/* Payment marks render as the uploaded artwork alone — no card, border or
shadow around them. The logos already carry their own brand background. */
.footer-v2-cards .payment-card-chip{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
display: inline-flex;
align-items: center;
}
.footer-v2-cards .payment-card-chip img,
.footer-payment-cards img{
height: 20px !important;
max-height: 20px !important;
width: auto !important;
}
.footer-v2-links a{
font-size: .98rem;
font-weight: 500;
}
/* LIVE-SEARCH — suggestions dropdown under the header search box. */
.site-search { position: relative; }
.live-search-panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
z-index: 1090;
background: #fff;
border-radius: 18px;
box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
border: 1px solid rgba(15, 23, 42, .06);
overflow: hidden auto;
max-height: min(70vh, 520px);
text-align: start;
}
.live-search-item {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 16px;
color: #1f2937;
border-bottom: 1px solid rgba(15, 23, 42, .05);
}
.live-search-item:last-of-type { border-bottom: 0; }
.live-search-item:hover,
.live-search-item.is-active {
background: #f3f6fb;
color: #111827;
}
.live-search-item img {
width: 48px;
height: 48px;
object-fit: contain;
background: #eef1f5;
border-radius: 10px;
flex-shrink: 0;
}
.live-search-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.live-search-name {
font-weight: 600;
font-size: .95rem;
/* Long perfume names must not push the price out of the row. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.live-search-name mark {
background: rgba(255, 191, 0, .35);
color: inherit;
padding: 0;
border-radius: 3px;
}
.live-search-meta { font-size: .82rem; color: #8a94a6; }
.live-search-price { font-weight: 700; font-size: .92rem; white-space: nowrap; }
.live-search-empty { padding: 18px 16px; color: #8a94a6; font-size: .92rem; text-align: center; }
.live-search-all {
display: block;
padding: 12px 16px;
text-align: center;
font-weight: 600;
background: #f7f9fc;
color: var(--primary-color);
}
.live-search-all:hover { background: #eef2f9; }
@media (max-width: 991px) {
.live-search-item img { width: 40px; height: 40px; }
.live-search-name { font-size: .9rem; }
}
/* PRODUCT-INFO — spec table and description below the buy box. */
.product-info-panel { background:#fff; border-radius:18px; box-shadow:0 8px 28px rgba(15,23,42,.06); overflow:hidden; }
.product-info-block { border-bottom:1px solid rgba(15,23,42,.07); }
.product-info-block:last-child { border-bottom:0; }
.product-info-block > summary {
list-style:none; cursor:pointer; padding:18px 22px;
font-size:1.05rem; font-weight:700; color:#1f2937;
display:flex; align-items:center; justify-content:space-between;
}
.product-info-block > summary::-webkit-details-marker { display:none; }
.product-info-block > summary::after { content:'+'; font-weight:400; font-size:1.4rem; color:#94a3b8; }
.product-info-block[open] > summary::after { content:'\2212'; }
.product-info-body { padding:0 22px 22px; color:#374151; }
.product-spec-list { display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:10px 20px; margin:0; }
.product-spec-list dt { font-weight:700; color:#1f2937; margin:0; }
.product-spec-list dd { margin:0; color:#4b5563; }
/* RELATED — horizontally scrollable strip of nearby products. */
.related-products-shell { position:relative; padding-inline:0; }
.related-products-track {
display:flex; gap:18px; overflow-x:auto; padding:4px 2px 10px;
scroll-snap-type:x proximity;
/* Arrows replace the scrollbar, but the strip still swipes on touch. */
scrollbar-width:none; scroll-behavior:smooth;
}
.related-products-track::-webkit-scrollbar { display:none; }
.related-nav {
position:absolute; top:38%; transform:translateY(-50%);
width:44px; height:44px; border-radius:50%;
border:1px solid rgba(148,163,184,.28);
background:rgba(255,255,255,.97); color:#64748b;
display:inline-flex; align-items:center; justify-content:center;
box-shadow:0 8px 20px rgba(15,23,42,.12); z-index:3;
}
.related-nav:hover { color:var(--primary-color); }
.related-nav[hidden] { display:none; }
.related-nav.prev { inset-inline-start:-14px; }
.related-nav.next { inset-inline-end:-14px; }
html[dir='rtl'] .related-nav i { transform:scaleX(-1); }
.related-product-card {
flex:0 0 190px; scroll-snap-align:start;
background:#fff; border:1px solid rgba(15,23,42,.07); border-radius:16px;
padding:14px; display:flex; flex-direction:column; gap:6px; color:#1f2937;
}
.related-product-card:hover { box-shadow:0 12px 30px rgba(15,23,42,.10); color:#111827; }
.related-product-media { display:block; background:#f3f6fb; border-radius:12px; aspect-ratio:1/1; overflow:hidden; }
.related-product-media img { width:100%; height:100%; object-fit:contain; }
.related-product-brand { font-size:.78rem; color:#8a94a6; font-weight:600; }
.related-product-name {
font-size:.9rem; font-weight:600; line-height:1.35;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.related-product-price { font-weight:800; font-size:.95rem; margin-top:auto; }
/* STICKY-BUY — bottom bar shown after the buy button scrolls away. */
.product-sticky-bar {
position:fixed; left:0; right:0; bottom:0; z-index:1050;
background:#fff; border-top:1px solid rgba(15,23,42,.08);
box-shadow:0 -12px 32px rgba(15,23,42,.10);
transform:translateY(100%); transition:transform .25s ease;
}
.product-sticky-bar.is-visible { transform:translateY(0); }
.product-sticky-inner { display:flex; align-items:center; gap:16px; padding:12px 16px; }
.product-sticky-thumb { width:52px; height:52px; object-fit:contain; background:#f3f6fb; border-radius:10px; flex-shrink:0; }
.product-sticky-text { display:flex; flex-direction:column; min-width:0; flex:1; }
.product-sticky-brand { font-size:.78rem; color:#8a94a6; font-weight:600; }
.product-sticky-name { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product-sticky-price { font-weight:800; font-size:1.05rem; white-space:nowrap; }
.product-sticky-btn { min-width:180px; }
@media (max-width: 767px) {
.product-spec-list { grid-template-columns:1fr; gap:2px 0; }
.product-spec-list dd { margin-bottom:10px; }
.product-sticky-thumb { display:none; }
.product-sticky-btn { min-width:0; flex:1; }
.product-sticky-inner { gap:10px; padding:10px 12px; }
.related-product-card { flex-basis:150px; }
}
@media (max-width: 767px) {
/* Touch devices swipe the strip; arrows would only steal space. */
.related-nav { display:none; }
}
/* HEADER-COMPACT — tighter single-row bar with labelled tool links.
Overrides the earlier pill/circle treatment further up this file. */
.site-header-main-inner { min-height: 60px; }
.site-header-main .py-3 { padding-top: .55rem !important; padding-bottom: .55rem !important; }
.site-logo { height: 34px; max-width: 132px; }
.site-brand-text { font-size: 1.45rem; }
/* SEARCH-ICON — the white pill is the ; the wrapping