/* Layout: SPARK — structural styles only. All colours come from the active
   palette's variables, so any palette works with this layout. */
html[data-layout="spark"] body { font-family: 'Poppins', 'SolaimanLipi', system-ui, sans-serif; }

/* bold colour-filled header */
.sp-header { background: var(--brand); position: sticky; top: 0; z-index: 1030; }
.sp-header .brand-name { color: var(--brand-ink); }
.sp-header .header-icon { color: var(--brand-ink); opacity: .92; }
.sp-header .header-icon:hover { color: var(--accent); opacity: 1; }
.sp-search .form-control {
  border: 0; border-radius: 999px 0 0 999px; min-height: 42px; background: var(--card-bg);
}
.sp-search .btn { border-radius: 0 999px 999px 0; background-image: none; box-shadow: none; }

/* icon-tile rail — this IS the navigation */
.sp-rail { background: var(--body-bg); border-bottom: 1px solid var(--line-soft); }
.sp-rail .container { scrollbar-width: none; }
.sp-rail .container::-webkit-scrollbar { display: none; }
.sp-tile {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  text-decoration: none; flex: 0 0 auto; width: 72px;
}
.sp-tile-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--brand-tint);
  color: var(--brand); display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; transition: background .15s ease, transform .15s ease;
}
.sp-tile:hover .sp-tile-icon { background: var(--brand); color: var(--brand-ink); transform: translateY(-2px); }
.sp-tile-label {
  font-size: .72rem; font-weight: 600; color: var(--ink); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* airy grid */
html[data-layout="spark"] .row[class*="row-cols-"] { --bs-gutter-x: 1.1rem; --bs-gutter-y: 1.3rem; }

/* playful cards */
.sp-card { border: 0; border-radius: 18px; box-shadow: 0 3px 12px rgba(20, 20, 20, .1); }
html[data-theme="dark"] .sp-card { box-shadow: 0 3px 12px rgba(0, 0, 0, .4); }
.sp-card:hover { box-shadow: 0 8px 22px rgba(20, 20, 20, .16); }
.sp-thumb img { aspect-ratio: 1/1; object-fit: cover; }
.sp-off {
  position: absolute; top: 12px; left: -6px; z-index: 2;
  background: var(--accent); color: var(--accent-ink);
  font-size: .72rem; font-weight: 800; padding: .25rem .6rem .25rem .8rem;
  border-radius: 0 999px 999px 0; transform: rotate(-4deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
  display: inline-flex; align-items: center; gap: .25rem;
}
.sp-card .wish-btn { top: 10px; right: 10px; }
.sp-body { padding: .75rem .9rem .9rem; }
.sp-body .name { font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }
.sp-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sp-price { display: flex; flex-direction: column; }
.sp-price .price-now { font-size: 1.05rem; }
.sp-price .price-was { font-size: .75rem; }
.sp-add {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--brand); color: var(--brand-ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
  text-decoration: none; transition: background .15s ease, transform .15s ease;
}
.sp-add:hover:not(:disabled) { background: var(--brand-dark); color: var(--brand-dark-ink); transform: scale(1.08); }
.sp-add:disabled { opacity: .5; cursor: not-allowed; }

html[data-layout="spark"] .hero-slide { border-radius: 20px; }
html[data-layout="spark"] .btn { border-radius: 999px; font-weight: 700; }
html[data-layout="spark"] .section-title { font-weight: 800; }
html[data-layout="spark"] .cat-card { border: 0; border-radius: 16px; background: var(--surface); }
html[data-layout="spark"] .chip { border-radius: 999px; }

/* language toggle matches the coloured header's icon colour */
.sp-header .lang-switch a { color: var(--brand-ink); }
.sp-header .lang-switch a:hover { color: var(--accent); }