html {
  font-size: 14px;
}

:root {
  --image-overlay-shadow: 0 2px 6px rgba(0, 0, 0, .9), 0 4px 20px rgba(0, 0, 0, .55);
  --image-overlay-shadow-soft: 0 1px 4px rgba(0, 0, 0, .85), 0 2px 12px rgba(0, 0, 0, .45);
  --site-surface: var(--bs-body-bg);
  --site-text: var(--bs-body-color);
  --site-muted: var(--bs-secondary-color);
  --site-border: var(--bs-border-color);
  --site-card-bg: var(--bs-tertiary-bg);
  --site-footer-bg: #111827;
  --site-footer-text: #f3f4f6;
  --site-footer-link: #cbd5e1;
  --site-footer-link-hover: #f8fafc;
  --site-footer-divider: #374151;

  /* Brand accent layer — defaults to the theme's primary color so every
     client looks correct out of the box. A client's brand.css (see
     clients/<name>/css/brand.css) can override --site-accent(-soft) with a
     dedicated luxury/secondary color (e.g. gold) without touching --cz-primary. */
  --site-accent: var(--cz-primary, #111827);
  --site-accent-soft: var(--cz-primary, #111827);
}

[data-bs-theme='dark'] {
  --site-footer-bg: #0b1220;
  --site-footer-text: #e5e7eb;
  --site-footer-link: #cbd5e1;
  --site-footer-link-hover: #ffffff;
  --site-footer-divider: #334155;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: var(--site-surface);
  color: var(--site-text);
}

.site-header {
  background: var(--site-surface);
  border-bottom: 1px solid var(--site-border);
}

.brand {
  color: var(--site-text);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 700;
}

.header-meta {
  color: var(--site-muted);
  font-size: 0.95rem;
}

.hero-wrap {
  background: linear-gradient(120deg, #fef9c3 0%, #e0f2fe 100%);
}

[data-bs-theme='dark'] .hero-wrap {
  background: linear-gradient(120deg, #172033 0%, #1b2d42 100%);
}

.hero-title {
  font-weight: 800;
  margin: 0;
}

.hero-subtitle {
  color: var(--site-muted);
  margin-top: 8px;
}

.section-title {
  margin-bottom: 6px;
  font-size: 1.5rem;
}

.section-subtitle,
.section-description {
  color: var(--site-muted);
}

.content-card {
  background: var(--site-card-bg);
  border: 1px solid var(--site-border);
  border-radius: 14px;
  overflow: hidden;
}

.card-media {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.card-title {
  font-size: 1.05rem;
  margin: 0 0 6px;
}

.card-subtitle {
  color: var(--site-muted);
  margin-bottom: 8px;
}

.card-text {
  color: var(--site-muted);
}

.image-overlay-copy {
  color: #fff;
  text-shadow: var(--image-overlay-shadow);
}

.image-overlay-copy :is(h1, h2, h3, h4, h5, h6, p, div, span, small) {
  color: inherit;
}

.image-overlay-copy-soft {
  color: rgba(255, 255, 255, .82);
  text-shadow: var(--image-overlay-shadow-soft);
}

.site-footer {
  background: var(--site-footer-bg);
  color: var(--site-footer-text);
}

.site-footer a {
  color: var(--site-footer-link);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--site-footer-link-hover);
}

.footer-bottom {
  border-top: 1px solid var(--site-footer-divider);
  padding-top: 16px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Announcement bar (opt-in via HomeHeader.Settings.announcementBar) */
.announcement-bar {
  background-color: var(--cz-primary, var(--site-accent, #111827));
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Absolutely-positioned messages crossfade in place; min-height reserves the
   one line box every message shares (all render via the fs-sm fw-medium classes). */
.announcement-bar__viewport {
  position: relative;
  min-height: 1.375rem;
}

.announcement-bar__message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}

.announcement-bar__message.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Outgoing message keeps drifting upward as it fades, so entry/exit read as one continuous motion. */
.announcement-bar__message.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}

.announcement-bar a {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .announcement-bar__message {
    transition: none;
  }
}

/* Scroll-aware header (opt-in via HomeHeader.Settings.scroll.transparentAtTop). The actual
   transparent/solid toggle is set via inline !important style (see _ClassicNav.cshtml /
   _FloatingNav.cshtml) rather than a CSS class — Bootstrap's .bg-body utility is also
   !important, so a class-based toggle would depend on winning a specificity fight against
   it. This rule only supplies the smooth transition for that inline-style change. */
.header-transparent-top {
  transition: background-color .3s ease, box-shadow .3s ease;
}

/* ---- Home-builder section rhythm -------------------------------------------
   Every home-builder section renders inside a .home-section wrapper (see
   Views/Home/Index.cshtml). The wrapper owns:
   1. Vertical rhythm — consistent block padding across ALL sections, tunable
      per client via --section-pad(-tight) and per section via Settings.spacing
      ("default" | "compact" | "spacious" | "flush").
   2. Section colors — HomeSection.BgHex/FgHex (+ dark variants) arrive as CSS
      custom props so full-width tinted bands (e.g. a plum gifting band) work
      for every template, in both themes, without per-partial code.
   Partials must NOT add their own outer margins/padding-bottom anymore. */
:root {
  --section-pad: clamp(2.25rem, 4.5vw, 3.75rem);
  --section-pad-tight: clamp(1.25rem, 2.5vw, 2rem);
  --section-pad-loose: clamp(3.25rem, 7vw, 5.5rem);
}

.home-section {
  padding-block: var(--section-pad);
  background-color: var(--hs-bg, transparent);
  color: var(--hs-fg, inherit);
}

[data-bs-theme='dark'] .home-section {
  background-color: var(--hs-bg-dark, var(--hs-bg, transparent));
  color: var(--hs-fg-dark, var(--hs-fg, inherit));
}

/* A tinted band supplies its own text color, so Bootstrap's body-color
   utilities inside it must inherit rather than fight it. */
.home-section--tinted :is(h1, h2, h3, h4, h5, h6, .text-body, .text-body-secondary, .text-body-emphasis, .nav-link) {
  color: inherit;
}

.home-section--compact { padding-block: var(--section-pad-tight); }
.home-section--spacious { padding-block: var(--section-pad-loose); }
.home-section--flush { padding-block: 0; }

/* A section whose partial rendered nothing (no items configured, search filter
   emptied it, missing coordinates, …) must not leave an empty tinted band. */
.home-section:not(:has(*)) { display: none; }

/* ---- Category rail — full-bleed image tiles (CategoryCardGrid Settings.style:"imageTile")
   An alternative to the default Cartzilla colored-card swiper: a static CSS-grid rail of
   full-bleed category photos with the name/count anchored at the bottom over a dark scrim —
   brand-neutral (the scrim is plain black, not tinted to --site-accent) so it drops into any
   client's palette without extra config. ---------------------------------------------------- */
.category-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 767.98px) {
  .category-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }
}

.category-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  border-radius: var(--bs-border-radius-xl, 1rem);
  overflow: hidden;
  padding: 1.25rem;
  color: #fff;
  text-decoration: none;
  background: var(--bs-tertiary-bg);
}

.category-tile__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.category-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .12) 60%, rgba(0, 0, 0, .22) 100%);
}

.category-tile:hover .category-tile__image {
  transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
  .category-tile:hover .category-tile__image { transform: none; }
}

.category-tile__body {
  position: relative;
  z-index: 1;
}

.category-tile__name {
  font-size: 1.15rem;
  font-weight: 600;
}

.category-tile__count {
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
}

/* ---- Section head (eyebrow + title + optional "view all" link) ------------- */
.section-eyebrow {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--site-accent);
  margin-bottom: .5rem;
}

.section-head { margin-bottom: 1.75rem; }

/* ---- Announcement bar marquee mode (announcementBar.mode: "marquee") -------- */
.announcement-bar__marquee {
  display: flex;
  overflow: hidden;
  min-height: 1.375rem;
}

.announcement-bar__marquee-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 3.5rem;
  padding-inline-end: 3.5rem;
  white-space: nowrap;
  animation: announcement-marquee var(--marquee-duration, 22s) linear infinite;
}

.announcement-bar:hover .announcement-bar__marquee-track { animation-play-state: paused; }

@keyframes announcement-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* In RTL the track must travel the opposite way or it exits the viewport instantly. */
[dir='rtl'] .announcement-bar__marquee-track { animation-name: announcement-marquee-rtl; }

@keyframes announcement-marquee-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-bar__marquee-track { animation: none; }
}

/* ---- Floating CTA pill (HeaderSettings.floatingCta) ------------------------- */
/* Bottom-end corner — the WhatsApp bubble owns bottom-start, so both can coexist. */
.floating-cta {
  position: fixed;
  z-index: 1020;
  inset-inline-end: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  padding: .8rem 1.4rem;
  border-radius: 50rem;
  background-color: var(--fcta-bg, var(--site-accent));
  color: var(--fcta-fg, #fff);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .22);
  transition: transform .15s ease, filter .15s ease;
}

.floating-cta:hover {
  transform: translateY(-3px);
  filter: brightness(1.06);
  color: var(--fcta-fg, #fff);
}

@media (prefers-reduced-motion: reduce) {
  .floating-cta:hover { transform: none; }
}

/* Cartzilla's `.ratio > *` rule (theme.css) blanket-stretches every direct child to
   position:absolute + 100%x100% for the classic aspect-ratio-box trick — correct for the
   media element itself, but it also catches badge <span>s placed as siblings of the image
   inside a .ratio box (product/category cards), stretching a small "New"/"Offer" pill into
   a full-card overlay. Scope badges back to their intended small corner pill; (.ratio > .badge)
   is more specific than (.ratio > *) so this wins regardless of source order. */
.ratio > .badge {
  position: absolute;
  width: auto;
  height: auto;
}

/* Shared luxury-detail utilities — brand-neutral by default (driven by
   --site-accent), so every client gets the same refined touches and a
   client's brand.css only needs to set the color tokens, not rebuild these. */

/* Thin accent divider line, e.g. under a section heading. */
.accent-divider {
  width: 56px;
  height: 2px;
  background-color: var(--site-accent);
  border: none;
  border-radius: 1px;
}

.accent-divider.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Subtle lift + shadow on hover for product/content cards. */
.card-hover-lift {
  transition: transform .25s ease, box-shadow .25s ease;
}

.card-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .08);
}

@media (prefers-reduced-motion: reduce) {
  .card-hover-lift {
    transition: none;
  }

  .card-hover-lift:hover {
    transform: none;
  }
}
/* ── Split video hero film frame ────────────────────────────────────────────
   Mirrors the Al Asel mockup's .commerce-hero__film (z_templates "5 safar 2"
   components.css): sharp corners, thin accent border, inset white keyline,
   deep shadow, dark backing while the video loads, and a small uppercase
   label chip in the bottom corner. Portrait 9/16 on desktop, 4/5 on mobile. */
.split-hero-film {
  position: relative;
  overflow: hidden;
  width: min(100%, 380px);
  aspect-ratio: 9 / 16;
  border: 1px solid color-mix(in srgb, var(--site-accent) 48%, transparent);
  background: #071b16;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .42);
}

.split-hero-film::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(255, 255, 255, .28);
  pointer-events: none;
  z-index: 2;
}

.split-hero-film > video,
.split-hero-film > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-hero-film__label {
  position: absolute;
  inset-inline-start: 1.5rem;
  bottom: 1.5rem;
  z-index: 3;
  padding: .6rem .85rem;
  background: rgba(6, 31, 25, .85);
  color: var(--site-accent-soft, var(--site-accent));
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

@media (max-width: 991.98px) {
  .split-hero-film {
    width: 100%;
    aspect-ratio: 4 / 5;
  }
}

/* ── Story block hairline frame (Settings.mediaFrame:true) ─────────────────
   Mirrors the client mockup's .story-film.hairline-frame (z_templates "5 safar 1"
   components.css): sharp corners, a thin neutral hairline border and an inset
   white keyline over the photo/video itself, plus a soft depth shadow. Opt-in per
   StoryBlock section — the gifting promo band instance keeps the plain rounded
   corners it already had. */
.story-media-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--site-border);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .18);
}

.story-media-frame::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(255, 255, 255, .28);
  pointer-events: none;
  z-index: 2;
}