/* ============================================================
   RAMADAN & EID THEME — lantern-lit nights and Eid mornings.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from the things of the season's streets and homes:
   hanging lanterns, a crescent moon, eight-point-star geometry
   and gold on deep night teal. Night teal after dark (the
   default); ivory, deep teal and brass by day.

   The theme sets the --theme-* accent ramp itself (lantern gold),
   so the admin's accent colour setting does not apply while it is
   active.
   ============================================================ */

:root {
  --font-display: 'Reem Kufi', 'Readex Pro', 'Segoe UI', sans-serif;
  --font-ui:      'Readex Pro', 'Inter', system-ui, sans-serif;

  --paper:        #fbf6ea;
  --paper-2:      #fffdf7;
  --paper-3:      #f1e7d2;
  --ink:          #12343b;
  --ink-2:        #2d4d53;
  --ink-soft:     #5f7777;
  --rule:         rgba(18, 52, 59, 0.14);
  --rule-soft:    rgba(18, 52, 59, 0.07);
  --radius:       16px;
  --radius-sm:    10px;
  --shadow:       0 1px 2px rgba(18, 52, 59, .06), 0 4px 14px -6px rgba(18, 52, 59, .14);
  --shadow-md:    0 2px 4px rgba(18, 52, 59, .06), 0 16px 32px -14px rgba(18, 52, 59, .3);

  /* Brass */
  --theme-50:  #fbf3e1;
  --theme-100: #f5e3bb;
  --theme-200: #ebc983;
  --theme-300: #dcac55;
  --theme-400: #c9922f;
  --theme-500: #b07a19;
  --theme-600: #8f6212;
  --theme-700: #714d0f;
  --theme-800: #53390c;
  --theme-900: #352408;
  --theme-500-rgb: 176, 122, 25;
  --theme-600-rgb: 143, 98, 18;

  --teal:       #0f5b5f;
  --teal-2:     #137076;
  --teal-soft:  rgba(15, 91, 95, 0.10);
  --night:      #0b2730;
  --night-2:    #10323d;
  --lamp:       #e7b450;
  --lamp-2:     #f4cf7e;

  /* Names other themes' shared markup reaches for */
  --gold:       #c9922f;
  --gold-2:     #e7b450;
  --gold-soft:  rgba(201, 146, 47, 0.16);
  --gold-ink:   #1d1405;
  --felt:       #0f5b5f;
  --felt-2:     #0b4549;
  --on-felt:    #fbf6ea;
  --on-felt-soft: rgba(251, 246, 234, 0.74);
  --peacock:    #0f5b5f;
  --peacock-soft: rgba(15, 91, 95, 0.10);

  --notify-accent: var(--theme-500);
  --nav-accent:    var(--theme-600);
  --hdr-strip-bg:  #0b2730;
  --hdr-strip-rule: transparent;
  --text-primary:  var(--ink);

  /* Buttons: deep teal by day, lantern gold by night */
  --btn-bg:       #0f5b5f;
  --btn-bg-hover: #137076;
  --btn-ink:      #fffdf7;
  --btn-shadow:   0 2px 0 #093c3f, 0 8px 18px -10px rgba(9, 60, 63, .7);
  --btn-shadow-hover: 0 3px 0 #093c3f, 0 12px 22px -10px rgba(9, 60, 63, .7);

  /* Eight-point stars (khatam) on a lattice: the theme's border band */
  --stars-band: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='18' viewBox='0 0 34 18'><rect width='34' height='18' fill='%230b2730'/><g fill='%23e7b450'><rect x='11.5' y='3.5' width='11' height='11'/><rect x='11.5' y='3.5' width='11' height='11' transform='rotate(45 17 9)'/></g><circle cx='17' cy='9' r='2.4' fill='%230b2730'/><circle cx='0' cy='9' r='1.5' fill='%23e7b450'/><circle cx='34' cy='9' r='1.5' fill='%23e7b450'/></svg>");
  --girih: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><g fill='none' stroke='%2312343b' stroke-opacity='0.05' stroke-width='1.2'><rect x='19' y='19' width='18' height='18'/><rect x='19' y='19' width='18' height='18' transform='rotate(45 28 28)'/><path d='M0 0l9 9M56 0l-9 9M0 56l9-9M56 56l-9-9'/></g></svg>");

  --page-bg: var(--girih) repeat, var(--paper);
}

html.dark {
  --paper:        #0b2730;
  --paper-2:      #10323d;
  --paper-3:      #164250;
  --ink:          #f5ecd9;
  --ink-2:        #dccfb4;
  --ink-soft:     #9fb6b8;
  --rule:         rgba(245, 236, 217, 0.14);
  --rule-soft:    rgba(245, 236, 217, 0.07);
  --shadow:       0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px -8px rgba(0, 0, 0, .55);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, .3), 0 18px 36px -14px rgba(0, 0, 0, .75);

  --theme-50:  #2a2412;
  --theme-100: #3a3016;
  --theme-200: #6a5320;
  --theme-300: #f4cf7e;
  --theme-400: #f0c46a;
  --theme-500: #e7b450;
  --theme-600: #f0c46a;
  --theme-700: #f4cf7e;
  --theme-800: #f8dfa6;
  --theme-900: #fbeccc;
  --theme-500-rgb: 231, 180, 80;
  --theme-600-rgb: 240, 196, 106;

  --teal:       #3cc0b0;
  --teal-2:     #5fd2c3;
  --teal-soft:  rgba(60, 192, 176, 0.14);

  --gold:       #e7b450;
  --gold-2:     #f4cf7e;
  --gold-soft:  rgba(231, 180, 80, 0.16);
  --felt:       #082027;
  --felt-2:     #10323d;
  --peacock:    #3cc0b0;
  --peacock-soft: rgba(60, 192, 176, 0.14);

  --nav-accent:    var(--lamp);
  --hdr-strip-bg:  #071c22;

  --btn-bg:       #e7b450;
  --btn-bg-hover: #f4cf7e;
  --btn-ink:      #1d1405;
  --btn-shadow:   0 2px 0 #a57a24, 0 8px 22px -8px rgba(231, 180, 80, .45);
  --btn-shadow-hover: 0 3px 0 #a57a24, 0 12px 28px -8px rgba(231, 180, 80, .6);

  --girih: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><g fill='none' stroke='%23e7b450' stroke-opacity='0.06' stroke-width='1.2'><rect x='19' y='19' width='18' height='18'/><rect x='19' y='19' width='18' height='18' transform='rotate(45 28 28)'/><path d='M0 0l9 9M56 0l-9 9M0 56l9-9M56 56l-9-9'/></g></svg>");
  --page-bg:
    radial-gradient(1000px 460px at 50% -160px, rgba(231, 180, 80, 0.10), transparent 70%) no-repeat,
    var(--girih) repeat,
    var(--paper);
}

/* ── Base ──
   Tailwind's compiled sheet loads after the theme, so selectors that must
   beat its single-class utilities carry an extra html qualifier. */
html body {
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-ui);
}
html .font-sans { font-family: var(--font-ui); }

html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-synthesis: none;
  letter-spacing: 0;
}
.display-italic { font-style: normal; }

::selection { background: var(--lamp); color: #1d1405; }

.text-gradient-theme { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--theme-500); }

.ed-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--theme-600);
}
.ed-eyebrow-tight { font-size: 9px !important; letter-spacing: 0 !important; white-space: nowrap !important; }

/* Section eyebrow — a small eight-point star in front of the label */
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--theme-600);
  margin-bottom: 0.7rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0;
  width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><g fill='%23c9922f'><rect x='3' y='3' width='8' height='8'/><rect x='3' y='3' width='8' height='8' transform='rotate(45 7 7)'/></g></svg>") center / contain no-repeat;
}

.btn-view-all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.9rem; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
  color: var(--ink);
  padding: .3rem .1rem 2px;
  border-bottom: 2px solid var(--theme-500);
  text-decoration: none;
  transition: gap 0.18s ease;
}
.btn-view-all:hover { gap: 0.75rem; }
[dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }

.ed-rule { background-color: var(--rule); }
.ed-rule-soft { background-color: var(--rule-soft); }
.ed-grain::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--girih); }

.ed-folio { font-family: var(--font-display); font-weight: 600; color: var(--theme-600); }

/* ── Header ── */
#desktopHeader .hdr-search {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
#desktopHeader .hdr-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.ed-search { background: transparent; border: none; }

.hdr-strip, .hdr-strip .ed-status { color: rgba(245, 236, 217, 0.86); }
.hdr-strip a:hover, .hdr-strip button:hover { color: var(--lamp); }

/* The star band: a row of gold eight-point stars on night teal, under the
   main header bar and wherever a section needs a border. */
.re-band { height: 18px; background: var(--stars-band) repeat-x center / 34px 18px; border-top: 1px solid rgba(231, 180, 80, .45); border-bottom: 1px solid rgba(231, 180, 80, .45); }

/* The season chip in the status strip */
.re-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; letter-spacing: .06em; color: var(--lamp-2); }
.re-strip-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
/* The desktop strip shares its line with the menu; the iftar time joins
   the day only where there is room for both. */
@media (min-width: 1024px) and (max-width: 1439px) { .re-strip-chip__extra { display: none; } }

.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ed-subnav-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0.6rem 2rem; }
@media (min-width: 1280px) { .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }
.ed-subnav-eyebrow {
  flex-shrink: 0;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); white-space: nowrap;
  padding-right: 1.25rem; border-right: 1px solid var(--rule);
}
[dir="rtl"] .ed-subnav-eyebrow { padding-right: 0; padding-left: 1.25rem; border-right: 0; border-left: 1px solid var(--rule); }
.ed-subnav-items { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.85rem; border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
}
.ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.ed-subnav-item:hover { color: var(--ink); background: var(--paper-3); }
.ed-subnav-item.active { background: var(--btn-bg); color: var(--btn-ink); }
.ed-subnav-item:focus-visible { outline: 2px solid var(--theme-500); outline-offset: 2px; }

/* ── Links and buttons ── */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid var(--theme-500);
  transition: gap 0.18s ease;
}
.ed-link-arrow:hover { gap: 0.7rem; }

html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.8rem 1.55rem;
  white-space: nowrap;
  font-family: var(--font-ui); font-size: 0.97rem; font-weight: 600;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 0;
  border-radius: 12px;
  box-shadow: var(--btn-shadow);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover {
  background: var(--btn-bg-hover); color: var(--btn-ink);
  transform: translateY(-1px); box-shadow: var(--btn-shadow-hover);
}
html .ed-btn-primary:active, html .ed-plan-cta:active { transform: translateY(1px); }
html.dark .ed-btn-primary, html.dark .ed-btn-primary:hover,
html.dark .ed-plan-cta, html.dark .ed-plan-cta:hover, html.dark button.ed-plan-cta { color: var(--btn-ink); }
html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta,
html body .ed-plan-cta, html.dark body .ed-plan-cta {
  background: var(--btn-bg); color: var(--btn-ink); border: 0; box-shadow: var(--btn-shadow);
}
html body .ed-plan-featured .ed-plan-cta { background: #e7b450; color: #1d1405; }
.ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible { outline: 3px solid var(--theme-500); outline-offset: 3px; }

.ed-btn-secondary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.76rem 1.4rem;
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 12px;
  transition: background 0.15s ease, border-color .15s ease;
}
.ed-btn-secondary:hover { background: var(--paper-3); border-color: var(--ink-soft); }
html.dark .ed-btn-secondary { color: var(--ink); }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); }

/* ── Cards: soft corners, a fine gold edge, a lift on hover ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
html .ed-plan:hover, html .shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
html .ed-plan-featured {
  position: relative;
  background: #0b2730; color: #f5ecd9;
  border: 1px solid rgba(231, 180, 80, .45); border-radius: var(--radius);
  overflow: hidden;
}
html.dark .ed-plan-featured { background: #082027; }
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
  background: var(--stars-band) repeat-x center / 34px 18px; pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(245, 236, 217, .2); }

/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-soft); }
.ed-topnav-link { color: rgba(245, 236, 217, 0.86); text-decoration: none; transition: color 0.16s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: var(--lamp); }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); padding: 1.1rem 1.5rem 0.4rem;
}
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.drawer-nav-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.65rem 1.5rem;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
}
.drawer-nav-row:hover { background: var(--paper-3); color: var(--ink); }
.drawer-logout, .drawer-login { margin: 1rem 1.5rem 1.25rem; padding: 0.85rem 1rem; }
.drawer-logout {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 12px; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600;
  color: var(--theme-600); border: 1px solid var(--theme-600); text-decoration: none;
}
.drawer-logout:hover { background: var(--gold-soft); }

.mobile-glass-header {
  background: rgba(251, 246, 234, 0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(11, 39, 48, 0.94); }

.ed-avatar-ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--theme-500); }

[x-cloak] { display: none !important; }

.ed-dropdown {
  background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.ed-dropdown-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.68rem 1rem;
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
}
.ed-dropdown-item:hover { background: var(--paper-3); color: var(--ink); }
.ed-section-cap {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); padding: 0.9rem 1rem 0.4rem;
}

.ed-mobile-link.active { color: var(--nav-accent); }

/* ── The night sky: stars that twinkle in turn (still for visitors who ask
   for less motion) ── */
.re-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.re-sky::before, .re-sky::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 30px 40px, #fff6dc, transparent),
    radial-gradient(1.2px 1.2px at 140px 90px, #fff6dc, transparent),
    radial-gradient(2px 2px at 220px 30px, #fff6dc, transparent),
    radial-gradient(1.2px 1.2px at 80px 170px, #fff6dc, transparent),
    radial-gradient(1.6px 1.6px at 190px 210px, #fff6dc, transparent);
  background-size: 260px 260px;
  opacity: .7;
}
.re-sky::after { background-size: 190px 190px; opacity: .4; transform: translate(60px, 40px); }
@media (prefers-reduced-motion: no-preference) {
  .re-sky::after { animation: re-twinkle 4.5s ease-in-out 3 both; }
}
@keyframes re-twinkle { 0%, 100% { opacity: .4; } 50% { opacity: .1; } }

/* ── Lanterns ──
   ramadan_lantern_svg() draws them: currentColor is the brass frame; the
   glass glows warm behind the arch panes. */
.re-lantern { display: block; width: 100%; height: auto; overflow: visible; color: #c9922f; }
.re-lantern__glass { fill: #f6c35c; }
.re-lantern__glow { fill: #fff2c6; opacity: .9; }
.re-lantern--teal .re-lantern__glass { fill: #6fd9c8; }
.re-lantern--rose .re-lantern__glass { fill: #f39a80; }
.re-hang { position: relative; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }
.re-hang__chain { width: 1.5px; background: repeating-linear-gradient(180deg, #c9922f 0 4px, transparent 4px 6px); }
.re-hang .re-lantern { filter: drop-shadow(0 0 10px rgba(246, 195, 92, .55)) drop-shadow(0 0 26px rgba(246, 195, 92, .25)); }
@media (prefers-reduced-motion: no-preference) {
  .re-hang { animation: re-sway 5s ease-in-out 3 both; animation-delay: calc(var(--i, 0) * -1.3s); }
  .re-lantern__glow { animation: re-flicker 2.8s ease-in-out 4 both; animation-delay: calc(var(--i, 0) * -.7s); }
}
@keyframes re-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes re-flicker { 0%, 100% { opacity: .9; } 40% { opacity: .65; } 60% { opacity: .95; } }

/* ── Dark/light toggle: moonrise ──
   assets/themes/ramadan-eid/assets/js/ramadan-eid.js registers the
   transition: a crescent rises from the foot of the screen, the night sky
   opens out of it until it covers the page, the mode flips, and the sky
   draws back into the moon as it sets. --my is the moon's resting height
   and --r the radius that reaches the farthest corner, both set from JS. */
.px-fx--re-moonrise { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; --my: 58vh; --r: 150vmax; }
.px-fx--re-moonrise .re-mr__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 22px 30px, #fff4d2, transparent),
    radial-gradient(1px 1px at 70px 80px, #f5ecd9, transparent),
    radial-gradient(2px 2px at 130px 18px, #f4cf7e, transparent),
    radial-gradient(1px 1px at 160px 110px, #f5ecd9, transparent),
    radial-gradient(1.5px 1.5px at 100px 140px, #fff4d2, transparent),
    linear-gradient(180deg, #071c22 0%, #0b2730 55%, #10323d 100%);
  background-size: 180px 160px, 180px 160px, 180px 160px, 180px 160px, 180px 160px, auto;
  clip-path: circle(0px at 50% var(--my));
  transition: clip-path 0.42s cubic-bezier(.55, 0, .25, 1);
}
.px-fx--re-moonrise.is-sky .re-mr__sky { clip-path: circle(var(--r) at 50% var(--my)); }
.px-fx--re-moonrise .re-mr__moon {
  --d: clamp(64px, 9vmin, 96px);
  position: absolute; left: 50%; top: var(--my);
  width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  /* A waxing crescent, lit on the right: the hilal that opens the month */
  box-shadow: inset calc(var(--d) * -.24) calc(var(--d) * .06) 0 0 #f4cf7e;
  filter: drop-shadow(0 0 14px rgba(244, 207, 126, .7));
  transform: translateY(calc(100vh - var(--my) + var(--d)));
  transition: transform 0.34s cubic-bezier(.3, .7, .3, 1);
}
.px-fx--re-moonrise.is-up .re-mr__moon { transform: translateY(0); }

/* ── Footer: the night street, under a row of lanterns ── */
.re-footer {
  --paper:     #082027;
  --paper-2:   #0e2d36;
  --paper-3:   #154049;
  --ink:       #f5ecd9;
  --ink-2:     #dccfb4;
  --ink-soft:  #9fb6b8;
  --rule:      rgba(245, 236, 217, 0.16);
  --rule-soft: rgba(245, 236, 217, 0.08);
  --theme-500: #e7b450; --theme-600: #e7b450; --theme-700: #f4cf7e;
  --theme-500-rgb: 231, 180, 80;
  position: relative;
}
.re-footer-top { position: relative; background: #082027; margin-bottom: -1px; }
.re-footer-lanterns { position: relative; display: flex; justify-content: space-around; padding: 0 1rem; height: 104px; overflow: hidden; }
.re-footer-lanterns::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #c9922f; opacity: .7; }
.re-footer-lanterns .re-hang { width: 30px; }
.re-footer-lanterns .re-hang__chain { height: var(--h, 20px); }
.re-footer a:hover { color: var(--lamp); }
html.dark #desktopFooter li { color: var(--ink-2) !important; }

html .ed-floating-nav {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
}
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .92rem; font-weight: 500; color: var(--ink-2); }
html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); }
html body .ed-floating-nav a.ed-floating-link.active { background: var(--btn-bg); color: var(--btn-ink) !important; }
html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--btn-ink) !important; }

html body .re-footer .ed-newsletter {
  background: #0e2d36; color: var(--ink);
  border: 1px solid rgba(231, 180, 80, .4); border-radius: 18px;
  box-shadow: 0 0 0 6px rgba(231, 180, 80, .05);
}
html body .re-footer .ed-newsletter::after { display: none; }
html body .re-footer .ed-newsletter-input { background: #082027 !important; color: var(--ink) !important; border: 1px solid rgba(245, 236, 217, .25) !important; border-radius: 12px; }
html body .re-footer .ed-newsletter-input::placeholder { color: var(--ink-soft); }
html body .re-footer .ed-newsletter-input:focus { border-color: var(--lamp) !important; }
html body .re-footer .ed-newsletter-btn {
  background: #e7b450; color: #1d1405; border: 0; border-radius: 12px;
  font-family: var(--font-ui); font-weight: 600;
}
html body .re-footer .ed-newsletter-age { color: var(--ink-2); }

/* Logo plaque: the light-mode logo on an ivory pointed-arch plaque with a
   gold edge, wherever it sits on the night colours (footer, app splash). */
.re-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.5rem 1.6rem .95rem;
  background: #fffdf7;
  border-radius: 50% 50% 10px 10px / 34% 34% 10px 10px;
  box-shadow: 0 0 0 2px #c9922f, 0 0 0 6px #0b2730, 0 0 0 7px rgba(231, 180, 80, .5), 0 14px 28px -12px rgba(0, 0, 0, .6);
}

/* Long titles and descriptions show in full; a card grows instead of
   clipping them. */
html [class*="line-clamp-"] { -webkit-line-clamp: unset; }
html body .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* .text-fit (assets/css/header.css) shrinks a title to one line with JS,
   measured before the display face loads; under this theme it wraps. */
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

/* ── Dark-mode greys from assets/css/header.css ──
   header.css forces a neutral near-black palette onto Tailwind's light
   utilities with !important; these follow the theme's own surfaces. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(11, 39, 48, 0.94) !important; border-bottom-color: var(--rule) !important; }
html.dark #desktopFooter { background: var(--paper) !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(16, 50, 61, 0.96) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark .premium-profile-header { background: var(--paper-2) !important; }
html.dark .premium-dropdown,
html.dark #mobileExploreSheet .bg-white,
html.dark #logoutModal .bg-white,
html.dark .bg-white,
html.dark [x-data] .bg-white,
html.dark .bg-white.shadow-xl,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2) !important; }
html.dark .bg-gray-50,
html.dark .even\:bg-gray-50:nth-child(even) { background-color: var(--paper) !important; }
html.dark .bg-gray-100,
html.dark #mobileExploreSheet .bg-gray-100,
html.dark thead { background-color: var(--paper-3) !important; }
html.dark .from-white, html.dark .from-gray-50 { --tw-gradient-from: var(--paper) !important; }
html.dark .to-white, html.dark .to-gray-50 { --tw-gradient-to: var(--paper) !important; }
html.dark .via-white, html.dark .via-gray-50 { --tw-gradient-via: var(--paper-2) !important; }
html.dark .from-gray-100 { --tw-gradient-from: var(--paper-2) !important; }
html.dark .to-gray-100 { --tw-gradient-to: var(--paper-2) !important; }
html.dark .search-input,
html.dark select:not(.no-dark) { background-color: var(--paper-2) !important; }
html.dark .gradient-bg { background: linear-gradient(-45deg, #10323d, #0b2730, #164250, #071c22) !important; }
html.dark [class*="dark:bg-[#121218]"], html.dark [class*="dark:bg-[#0"] { background-color: var(--paper-2) !important; }

/* header.css fills every dark-mode field with a navy #0d1117; here fields
   take the theme's own night teal. Same selector shape so it outranks it. */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.no-dark),
html.dark textarea:not(.no-dark),
html.dark select:not(.no-dark) {
  background-color: #082027 !important;
  border-color: rgba(245, 236, 217, .2) !important;
  color: #f5ecd9 !important;
}

/* Inverted panels: shared markup paints some panels with background
   var(--ink) and letters them in var(--paper), which only works while ink
   is dark. After dark those panels take the deepest night teal. */
html.dark [style*="background: var(--ink)"],
html.dark [style*="background:var(--ink)"],
html.dark [style*="background-color: var(--ink)"],
html.dark [style*="background-color:var(--ink)"] {
  --ink: #082027;
  --paper: #f5ecd9;
  border-color: rgba(231, 180, 80, .3);
}

html header.safe-top-header[style] { background: rgba(251, 246, 234, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(11, 39, 48, .95) !important; }

/* ── Login / register / forgot-password brand panel: a starry night ── */
:root, html.dark {
  --brand-gradient: linear-gradient(170deg, #10323d 0%, #0b2730 55%, #071c22 100%);
  --brand-glow-1: rgba(231, 180, 80, 0.22);
  --brand-glow-2: rgba(60, 192, 176, 0.14);
}
.brand-panel { background: var(--girih), var(--brand-gradient) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is the star band along the panel's foot. */
html .brand-panel::after {
  content: ''; position: absolute;
  left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  width: 100% !important; height: 18px !important;
  border-radius: 0 !important; transform: none !important; opacity: 1 !important;
  background: var(--stars-band) repeat-x center / 34px 18px !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(245, 236, 217, 0.8) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 600 !important; }

/* ── Wallet balance card: night teal under a crescent moon, edged with
   the star band ── */
html body .wallet-hero {
  position: relative;
  background:
    radial-gradient(500px 220px at 85% 0%, rgba(231, 180, 80, .16), transparent 70%),
    linear-gradient(150deg, #10323d 0%, #082027 85%);
  border: 1px solid rgba(231, 180, 80, .35);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  color: #f5ecd9;
  overflow: hidden;
}
html body .wallet-hero::before {
  left: 0; right: 0; top: auto; bottom: 0; height: 18px; border-radius: 0;
  background: var(--stars-band) repeat-x center / 34px 18px;
}
html body .wallet-hero::after {
  content: ''; position: absolute; right: 26px; top: 22px; width: 40px; height: 40px; border-radius: 50%;
  box-shadow: inset -9px 3px 0 0 #f4cf7e; transform: rotate(-20deg); pointer-events: none; opacity: .9;
}
html[dir="rtl"] body .wallet-hero::after { right: auto; left: 26px; }
/* Moves the card's top row (the WALLET label) out from under the crescent. */
html body .wallet-hero > div:first-child { padding-inline-end: 56px; }
html body .wallet-balance-num {
  font-family: var(--font-display); font-variation-settings: normal; font-weight: 600;
  color: #f4cf7e;
}
html body .wallet-hero-btn-primary { background: #e7b450; color: #1d1405; border: 0; font-family: var(--font-ui); font-weight: 600; border-radius: 12px; }
html body .wallet-hero-btn-primary:hover { background: #f4cf7e; color: #1d1405; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 500; color: #f5ecd9; border-color: rgba(245, 236, 217, .4); border-radius: 12px; }
/* The shared phone rule splits the row into equal thirds, which folds
   "Add Balance" in two; size each button to its label instead and let a
   whole button drop to the next row when the card is too narrow. */
@media (max-width: 480px) {
  html body .wallet-hero :has(> .wallet-hero-btn-primary) { column-gap: 8px; }
  html body :is(.wallet-hero-btn-primary, .wallet-hero-btn-secondary) { flex: 1 1 auto; white-space: nowrap; padding-inline: 8px; }
}

/* ── Mystery box card (styled by assets/css/pages/home.css): a box of
   sweets with a lattice lid — a strip of the star band down its side ── */
html .ed-card-mystery {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
html .ed-card-mystery::before {
  top: 0; bottom: 0; left: 20%; right: auto; width: 18px; height: auto; border-radius: 0;
  background: var(--stars-band) repeat-y center / 18px 34px; opacity: .95; z-index: 0;
}
[dir="rtl"] .ed-card-mystery::before { left: auto; right: 20%; }
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: gold edge with the star band along its top ── */
html body .pd-buybox {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
html body .pd-buybox::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px;
  background: var(--stars-band) repeat-x center / 34px 18px;
}
html body .pd-buybox .font-display.text-4xl { font-weight: 600; color: var(--theme-600); }
.pd-title { font-weight: 600 !important; }

/* The mystery box plugin's own button is ink on paper and dynamic-theme's
   ".dark button" turns its label the colour of its fill; readable here on
   plugin releases without their own fix. */
html.dark button.spin-btn:not(:disabled) { color: var(--paper); }

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the theme's brass and teal. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--theme-500); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--theme-600); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600 { color: var(--theme-600); }
/* Solid purple action buttons (coupon Apply and the like) sit beside a
   field and take the colour of the main buttons. */
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
  background-color: var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 12px;
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100 { background-color: var(--gold-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50 { background-color: var(--gold-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200 { border-color: rgba(176, 122, 25, .3); }
html.dark .border-violet-200 { border-color: rgba(231, 180, 80, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(15, 91, 95, .35); }
html .focus\:border-purple-400:focus { border-color: var(--teal); }

/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are the theme's main buttons. */
html .bg-theme-600.text-white, html .bg-theme-500.text-white,
html .bg-blue-600.text-white, html .bg-blue-500.text-white {
  background: var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow) !important;
}
html .bg-theme-600.text-white:hover, html .bg-theme-500.text-white:hover { background: var(--btn-bg-hover) !important; }
html .bg-theme-600.text-white [class*="border-white"] { border-color: rgba(255, 253, 247, .3); border-top-color: var(--btn-ink); }

/* ── Winners page cards ── */
html .wnc { border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--rule); box-shadow: var(--shadow); }
html .wnc:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* ── Cart and checkout: the order total under the star band ──
   Picked out by what the panels contain, so no copies of their markup
   (or their Alpine hooks) live in the theme. */
html [id^="cart-row-"] { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 16px !important; }
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
  position: relative;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  padding-top: 1.6rem !important;
}
html .rounded-2xl:has(> div > div > #summary-total)::before,
html section.rounded-2xl:has([x-text="totalDisplay()"])::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px;
  background: var(--stars-band) repeat-x center / 34px 18px;
}
html .rounded-2xl:has(> div > div > #summary-total) > div,
html section.rounded-2xl:has([x-text="totalDisplay()"]) > div { border-style: dashed !important; }
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--theme-600);
}

/* The status strip holds one line, never wrapping inside its 32px. */
.hdr-strip .ed-status, .hdr-strip .ed-status * { white-space: nowrap; }
.hdr-strip .ed-status { font-size: 11px; letter-spacing: .05em; }
@media (max-width: 1023px) { .hdr-strip .re-strip-chip { font-size: 10px; gap: .35rem; } }
/* Small phones: the dark-mode switch and the App chip in the header drop
   their words and keep their icons. */
@media (max-width: 419px) {
  html .hdr-strip .dark-mode-toggle span { display: none; }
  html .mobile-glass-header .pwa-chip__label { display: none; }
  html .mobile-glass-header .pwa-chip { padding: 0 .6rem; }
}


/* ── My Winnings: each prize in an Eidi envelope — a gold-edged flap
   over the picture ── */
.re-win {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.re-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.re-win__wrap { background: var(--girih), var(--paper-3); }
html.dark .re-win__wrap { background: var(--girih), #164250; }
.re-win__wrap::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 1;
  background: #0f5b5f; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
html.dark .re-win__wrap::before { background: #e7b450; }
.re-win__wrap::after {
  content: ''; position: absolute; left: 50%; top: 18px; width: 16px; height: 16px; margin-left: -8px; z-index: 2;
  background: #c9922f; transform: rotate(45deg); box-shadow: 0 0 0 2px var(--paper-2);
}
.re-win__wrap img { position: relative; z-index: 0; }
.re-win__wrap > .absolute { z-index: 3; }
.re-win__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .6rem;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px;
}
.re-win__tag--open { color: #1d1405; background: #e7b450; border-color: transparent; }
.re-win__tag--done { color: #fffdf7; background: #0f5b5f; border-color: transparent; }
html.dark .re-win__tag--done { color: #082027; background: #3cc0b0; }
.re-win__name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.re-win__label { padding-top: .6rem; border-top: 1px dashed var(--rule); }
.re-win__price { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1; color: var(--theme-600); }
.re-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .9rem; }
.re-win__cart, .re-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 12px; font-weight: 600;
}
.re-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); }
.re-win__cart:hover { border-color: var(--teal); color: var(--teal); }
.re-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.re-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-size: .9rem; font-weight: 600;
  color: var(--teal); background: var(--teal-soft); border-radius: 12px;
}

/* ── Materials ──
   What every surface past the homepage is built from, shared by the skin
   sheets (assets/css/skin/) and the plugin variants:
   - a string of Ramadan lights: small lanterns and crescents hung from a
     brass cord, along the top of dialogs, sheets and section heads;
   - the star band (above) and its narrow edge, a line of khatam stars on
     night teal, for table heads and the tops of cards;
   - lantern brass, for rims, frames, coins and medallions;
   - the eight-point star and the pointed arch as masks, behind icons, on
     thumbnails and around the current page;
   - a corner of girih in the corner of panels;
   - the night panel: deep teal lit from one corner by lamplight. */
:root {
  --mint:        #2b7d5a;
  --mint-soft:   rgba(43, 125, 90, 0.12);
  --pomegranate: #b23a32;
  --pome-soft:   rgba(178, 58, 50, 0.10);
  --date:        #7a4a2a;
  --theme-600-ink: #fffdf7;
  --btn-edge:    #093c3f;
  --re-glass-off: #cfdcd8;
  --re-dune:     #e8d6b0;
  --re-dune-2:   #d6bd8c;

  --lantern-string: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='30' viewBox='0 0 72 30'><defs><mask id='c'><rect width='72' height='30' fill='white'/><circle cx='51.6' cy='16' r='4.5' fill='black'/></mask></defs><path d='M0 2 Q18 9.4 36 2 Q54 9.4 72 2' fill='none' stroke='%23c9922f' stroke-width='1.4'/><path d='M18 5.6 V10 M54 5.6 V11.5' stroke='%23c9922f' stroke-width='.9'/><path d='M15 11.2 Q18 7.6 21 11.2 Z' fill='%23b07a19'/><path d='M15 12 H21 L22.7 17 L21 22 H15 L13.3 17 Z' fill='%23c9922f'/><path d='M16.3 13.3 H19.7 L20.9 17 L19.7 20.7 H16.3 L15.1 17 Z' fill='%23f6c35c'/><path d='M16 22 H20 L18 25.4 Z' fill='%23b07a19'/><circle cx='18' cy='26.6' r='.9' fill='%23b07a19'/><circle cx='54' cy='17' r='5.4' fill='%23e7b450' mask='url(%23c)'/><g fill='%23e7b450'><rect x='50.4' y='15.4' width='2.6' height='2.6'/><rect x='50.4' y='15.4' width='2.6' height='2.6' transform='rotate(45 51.7 16.7)'/></g><circle cx='36' cy='2.3' r='1.5' fill='%230f5b5f'/><circle cx='4' cy='3.4' r='.9' fill='%23e7b450'/><circle cx='68' cy='3.4' r='.9' fill='%23e7b450'/></svg>");
  --khatam-line: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'><rect width='24' height='8' fill='%230b2730'/><g fill='%23e7b450'><rect x='4.4' y='2.4' width='3.2' height='3.2'/><rect x='4.4' y='2.4' width='3.2' height='3.2' transform='rotate(45 6 4)'/></g><circle cx='18' cy='4' r='1' fill='%23f4cf7e'/><path d='M0 .5 H24 M0 7.5 H24' stroke='%23c9922f' stroke-width='.8'/></svg>");
  --star-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect x='17' y='17' width='66' height='66'/><rect x='17' y='17' width='66' height='66' transform='rotate(45 50 50)'/></svg>");
  --arch-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M4 100 V44 C4 24 28 12 50 0 C72 12 96 24 96 44 V100 Z'/></svg>");
  --crescent-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'><defs><mask id='m'><rect width='28' height='24' fill='white'/><circle cx='10' cy='10.4' r='8.6' fill='black'/></mask></defs><circle cx='13' cy='12' r='10' fill='%23c9922f' mask='url(%23m)'/><g fill='%23e7b450'><rect x='8' y='9' width='4.4' height='4.4'/><rect x='8' y='9' width='4.4' height='4.4' transform='rotate(45 10.2 11.2)'/></g></svg>");
  --lantern-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 34'><circle cx='10' cy='2' r='1.4' fill='none' stroke='%238f6212' stroke-width='1'/><path d='M5.5 8.4 Q10 2.4 14.5 8.4 Z' fill='%23b07a19'/><path d='M5 9 H15 L17 17 L15 25 H5 L3 17 Z' fill='%23c9922f'/><path d='M6.8 10.8 H13.2 L14.6 17 L13.2 23.2 H6.8 L5.4 17 Z' fill='%23f6c35c'/><path d='M8.6 12.4 Q10 11 11.4 12.4 V21.6 H8.6 Z' fill='%23fff2c6'/><path d='M7 25 H13 L10 30.5 Z' fill='%23b07a19'/><circle cx='10' cy='32' r='1.3' fill='%23b07a19'/></svg>");
  --star-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><g fill='%23c9922f'><rect x='3' y='3' width='8' height='8'/><rect x='3' y='3' width='8' height='8' transform='rotate(45 7 7)'/></g><circle cx='7' cy='7' r='1.6' fill='%23fff3c4'/></svg>");
  --girih-corner: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><g fill='none' stroke='%23c9922f' stroke-opacity='.6' stroke-width='1.2'><rect x='18' y='-22' width='44' height='44'/><rect x='18' y='-22' width='44' height='44' transform='rotate(45 40 0)'/></g><g fill='%230f5b5f' fill-opacity='.55'><rect x='33' y='-7' width='14' height='14'/><rect x='33' y='-7' width='14' height='14' transform='rotate(45 40 0)'/></g><circle cx='8' cy='3' r='1.4' fill='%23c9922f'/><circle cx='37' cy='32' r='1.4' fill='%23c9922f'/></svg>");
  --stars-field: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'><g fill='%23fff4d2'><circle cx='12' cy='18' r='1'/><circle cx='64' cy='9' r='.8'/><circle cx='118' cy='26' r='1.2'/><circle cx='148' cy='70' r='.8'/><circle cx='88' cy='58' r='.7'/><circle cx='34' cy='84' r='1'/><circle cx='102' cy='104' r='.8'/><circle cx='6' cy='112' r='.7'/></g></svg>");
  --khatam-line-v: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'><rect width='8' height='24' fill='%230b2730'/><g fill='%23e7b450'><rect x='2.4' y='4.4' width='3.2' height='3.2'/><rect x='2.4' y='4.4' width='3.2' height='3.2' transform='rotate(45 4 6)'/></g><circle cx='4' cy='18' r='1' fill='%23f4cf7e'/><path d='M.5 0 V24 M7.5 0 V24' stroke='%23c9922f' stroke-width='.8'/></svg>");
  --brass-leaf: linear-gradient(90deg, #8f6212, #f4cf7e 30%, #c9922f 55%, #fff3c4 70%, #8f6212);
  --finial: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 30'><defs><linearGradient id='b' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23f5dc9b'/><stop offset='.4' stop-color='%23c9922f'/><stop offset='.7' stop-color='%23ecc56a'/><stop offset='1' stop-color='%238f6212'/></linearGradient><mask id='m'><rect width='34' height='30' fill='white'/><circle cx='14.4' cy='6.6' r='5.6' fill='black'/></mask></defs><circle cx='17' cy='8' r='6.6' fill='url(%23b)' mask='url(%23m)'/><rect x='16' y='14' width='2' height='6' fill='%238f6212'/><circle cx='17' cy='15' r='1.8' fill='url(%23b)'/><path d='M5 30 Q6 19 17 18 Q28 19 29 30 Z' fill='url(%23b)'/><path d='M8 27 Q17 20 26 27' fill='none' stroke='%23fff3c4' stroke-width='.8' opacity='.7'/></svg>");
  --arch-window: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130'><path d='M6 130 V58 C6 34 30 18 50 2 C70 18 94 34 94 58 V130 Z' fill='%23f6c35c' fill-opacity='.16' stroke='%23c9922f' stroke-width='1.8'/><path d='M14 130 V60 C14 40 34 26 50 13 C66 26 86 40 86 60 V130' fill='none' stroke='%23c9922f' stroke-width='1' stroke-dasharray='1.5 3'/></svg>");
  --brass-metal: linear-gradient(135deg, #f5dc9b 0%, #c9922f 30%, #ecc56a 52%, #8f6212 80%, #d6a84e 100%);
  --brass-rim: 0 0 0 2px #c9922f, 0 0 0 3.5px #714d0f;
  --lantern-glow: radial-gradient(closest-side, rgba(246, 195, 92, .38), rgba(246, 195, 92, .12) 55%, transparent);
  --night-panel:
    radial-gradient(420px 240px at 100% 0%, rgba(246, 195, 92, .22), transparent 70%),
    radial-gradient(380px 240px at 0% 100%, rgba(60, 192, 176, .14), transparent 70%),
    linear-gradient(160deg, #10323d 0%, #071c22 78%);
  --frame-inset: inset 0 0 0 4px var(--paper-2), inset 0 0 0 5px rgba(var(--theme-500-rgb), .24);
}
html.dark {
  --mint:        #6fd3a0;
  --mint-soft:   rgba(111, 211, 160, 0.14);
  --pomegranate: #f2836f;
  --pome-soft:   rgba(242, 131, 111, 0.14);
  --date:        #d9a477;
  --theme-600-ink: #1d1405;
  --btn-edge:    #a57a24;
  --re-glass-off: #24464f;
  --re-dune:     #164250;
  --re-dune-2:   #10323d;
  --brass-rim: 0 0 0 2px #e7b450, 0 0 0 3.5px #8f6212;
}

/* A string of lights across the top of whatever carries .re-string-top */
.re-string { height: 30px; background: var(--lantern-string) repeat-x; background-size: 72px 30px; }
.re-string-top { position: relative; }
.re-string-top::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 3; pointer-events: none;
  background: var(--lantern-string) repeat-x; background-size: 72px 30px;
}
.re-khatam { height: 8px; background: var(--khatam-line) repeat-x; background-size: 24px 8px; }

/* The night: soft pools of lamplight over a field of stars, for scenes
   that are night in both modes (errors, results, the games hero). */
.re-night {
  position: relative; isolation: isolate;
  background: var(--stars-field) repeat, var(--night-panel);
  color: #f5ecd9;
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board: ivory paper with a
   faint girih by day, the night sky after dark. Tiles rise from pale sand
   through lamplight gold, date brown and pomegranate to teal and night,
   like the lanterns strung along a street at dusk. */
:root {
  --game-bg:        #fbf6ea;
  --game-surface:   #f1e7d2;
  --game-surface-2: #fffdf7;
  --game-ink:       #12343b;
  --game-muted:     #5f7777;
  --game-accent:    #0f5b5f;
  --game-accent-ink:#fffdf7;
  --game-good:      #2b7d5a;
  --game-bad:       #b23a32;
  --game-tile-1:    #f5e3bb;
  --game-tile-2:    #e7b450;
  --game-tile-3:    #c9922f;
  --game-tile-4:    #b23a32;
  --game-tile-5:    #7a4a2a;
  --game-tile-6:    #137076;
  --game-tile-7:    #0f5b5f;
  --game-tile-8:    #0b2730;
  --game-radius:    10px;
  --game-font:      'Reem Kufi', 'Readex Pro', system-ui, sans-serif;
  --game-font-css:  "/assets/themes/ramadan-eid/assets/fonts/fonts.css";
  /* Arena chrome (assets/css/game-arena.css): an ivory board, not a dark screen */
  --game-arena-screen: #fbf6ea;
  --game-arena-coins:  #b07a19;
  --game-arena-win:    #2b7d5a;
  --game-arena-danger: #b23a32;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23b07a19' stroke-opacity='.14' stroke-width='1'><rect x='14' y='14' width='12' height='12'/><rect x='14' y='14' width='12' height='12' transform='rotate(45 20 20)'/></g></svg>");
}
html.dark {
  --game-bg:        #0b2730;
  --game-surface:   #10323d;
  --game-surface-2: #164250;
  --game-ink:       #f5ecd9;
  --game-muted:     #9fb6b8;
  --game-accent:    #e7b450;
  --game-accent-ink:#1d1405;
  --game-good:      #6fd3a0;
  --game-bad:       #f2836f;
  --game-tile-1:    #2a3a2c;
  --game-tile-2:    #8f6212;
  --game-tile-3:    #c9922f;
  --game-tile-4:    #e7b450;
  --game-tile-5:    #f2836f;
  --game-tile-6:    #3cc0b0;
  --game-tile-7:    #f4cf7e;
  --game-tile-8:    #fff4d2;
  --game-arena-screen: #0b2730;
  --game-arena-coins:  #f4cf7e;
  --game-arena-win:    #6fd3a0;
  --game-arena-danger: #f2836f;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g fill='none' stroke='%23e7b450' stroke-opacity='.12' stroke-width='1'><rect x='14' y='14' width='12' height='12'/><rect x='14' y='14' width='12' height='12' transform='rotate(45 20 20)'/></g></svg>");
}

/* ── Standalone pages ──
   Age check, unsubscribe and change language are their own documents that
   never run header.php's head_meta, so the skin sheets don't reach them;
   their few rules live here, where they do load. */
html body.age-check-body { background: var(--page-bg); font-family: var(--font-ui); }
html body .age-check-card {
  position: relative; overflow: hidden;
  padding-top: 3rem;
  background: var(--girih), var(--paper-2);
  border: 1px solid rgba(var(--theme-500-rgb), .4);
  border-radius: 24px;
  box-shadow: var(--frame-inset), var(--shadow-md);
}
html body .age-check-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px;
  background: var(--lantern-string) repeat-x; background-size: 72px 30px;
}
html body .age-check-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: var(--khatam-line) repeat-x; background-size: 24px 8px;
}
html body .age-check-logo { border-radius: 50% 50% 14px 14px / 40% 40% 14px 14px; background: var(--lantern-glow), var(--paper); box-shadow: var(--brass-rim); padding: 10px 8px 6px; }
html body .age-check-title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
html body .age-check-input { border-radius: 12px; border: 1.5px solid rgba(var(--theme-500-rgb), .35); background: var(--paper-2); font-family: var(--font-ui); }
html body .age-check-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); outline: none; }
html body .age-check-submit { border-radius: 12px; background: var(--btn-bg); color: var(--btn-ink); border: 0; box-shadow: var(--btn-shadow); font-family: var(--font-ui); font-weight: 600; }
html body .age-check-foot a { color: var(--teal); }
html body .lang-card {
  border-radius: 16px !important;
  border: 1px solid rgba(var(--theme-500-rgb), .3) !important;
  background: var(--paper-2) !important;
  transition: transform .15s ease, border-color .15s ease;
}
html body .lang-card:hover { transform: translateY(-2px); border-color: var(--theme-500) !important; }
html body .lang-card:has(input:checked) {
  border-color: transparent !important;
  box-shadow: var(--brass-rim), 0 0 22px -6px rgba(246, 195, 92, .6) !important;
  background: var(--gold-soft) !important;
}
html body .lang-card img { border-radius: 50%; box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 4px #c9922f; }
html body .lang-card:has(input:checked) .rounded-full:has(> .fa-check) { background: var(--teal) !important; color: var(--paper-2) !important; }
html body:has(.lang-card) h1 { font-family: var(--font-display); font-weight: 600 !important; letter-spacing: 0 !important; }
html body:has(.lang-card) .footer-safe { box-shadow: 0 -12px 24px -18px rgba(11, 39, 48, .55); }
html body:has(.lang-card) .footer-safe::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; background: var(--khatam-line) repeat-x; background-size: 24px 8px; }
html body:has(.lang-card) .w-9.h-9.rounded-xl:has(> .fa-language) { background: var(--teal) !important; color: var(--paper-2) !important; border-radius: 0 !important; -webkit-mask: var(--star-mask) center / contain no-repeat; mask: var(--star-mask) center / contain no-repeat; }

/* A row of lanterns on a brass cord (ramadan_lantern_row()) */
.re-lantern-row { position: relative; display: flex; justify-content: space-around; align-items: flex-start; height: 96px; padding: 0 1rem; overflow: hidden; pointer-events: none; }
.re-lantern-row::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #c9922f; opacity: .8; }
.re-lantern-row .re-hang { width: 22px; flex-shrink: 0; }
.re-lantern-row .re-hang:nth-child(n+9) { display: none; }
@media (min-width: 640px) { .re-lantern-row .re-hang:nth-child(n+9) { display: flex; } .re-lantern-row .re-hang:nth-child(n+13) { display: none; } }
@media (min-width: 1024px) { .re-lantern-row .re-hang:nth-child(n+13) { display: flex; } }

/* One small lantern inline (ramadan_lamp()) */
.re-lamp { display: inline-block; width: 1.1em; vertical-align: middle; }
.re-lamp .re-lantern { filter: drop-shadow(0 0 5px rgba(246, 195, 92, .6)); }
.re-lamp--out .re-lantern__glass { fill: var(--re-glass-off); }
.re-lamp--out .re-lantern__glow { opacity: .15; animation: none; }
.re-lamp--out .re-lantern { filter: none; }

/* Pools of lamplight behind a night scene (.re-glows > i, placed inline) */
.re-glows { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.re-glows > i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s, 280px); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c, rgba(246, 195, 92, .26)), transparent);
}

/* Phones: headings break only between words, never mid-word. */
@media (max-width: 639px) {
  html body .reveal.flex-row:has(> .btn-view-all) h2.text-fit { font-size: clamp(1.5rem, 8vw, 1.875rem); }
  html body :is(h1, h2, h3):is(.text-fit, .truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
}

/* Phones: a ticket's two dates stack rather than run into each other; the
   bids page's four tiles go two by two ("Gesamtgebote" was cut off); the
   auction page's browse link drops under its heading ("Andere Auktionen
   durchstöbern" pushed the page wider). */
@media (max-width: 639px) {
  html body .grid.grid-cols-2.rtl-text-right:has(> div > .whitespace-nowrap) { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  html body .grid.grid-cols-4:has(> div > p.text-3xl.font-extrabold) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
}

/* Status tones (kernel 1.1.166): this theme's own green, amber, red and info hues
   for the shared .px-tone-* chips and notes, each set so its chip and text
   read at 4.5:1 or better on this theme's paper in light and dark. */
html:root { --px-good: #2b7d5a; --px-warn: #b45309; --px-crit: #b33a32; --px-info: #287d9a; }
html.dark:root { --px-good: #8edcb4; --px-warn: #fccc50; --px-crit: #f8bfb4; --px-info: #9ad2e5; }

/* Changing language, the scene (ramadan-eid.js): the lantern that swings in
   and lights the old name before the reload, then moves aside for the
   crescent and draws the new name after it. The night is the same on both
   pages, so the reload never shows. */
.re-lang-stage { background: color-mix(in srgb, var(--night) 62%, transparent); }
.re-lang-scene {
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: min(560px, 100%); box-sizing: border-box; padding: 0 20px 22px; text-align: center;
  color: var(--on-felt); border-radius: var(--radius); font-family: var(--font-ui);
  background: linear-gradient(180deg, var(--night-2), var(--night));
  box-shadow: inset 0 0 0 1px rgba(231, 180, 80, .38), 0 34px 70px -28px rgba(0, 0, 0, .7);
}
.re-lang-hang, .re-lang-words, .re-lang-tag { position: relative; z-index: 1; }
.re-lang-sky { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.re-lang-sky i { position: absolute; font-style: normal; font-size: 12px; line-height: 1; color: var(--lamp-2); opacity: .7; }
.re-lang-sky i:nth-child(2) { left: 10%; top: 18%; }
.re-lang-sky i:nth-child(3) { left: 22%; top: 46%; font-size: 9px; }
.re-lang-sky i:nth-child(4) { right: 12%; top: 26%; font-size: 14px; }
.re-lang-sky i:nth-child(5) { right: 26%; top: 10%; font-size: 9px; }
.re-lang-sky i:nth-child(6) { right: 8%; top: 58%; font-size: 10px; }
.re-lang-sky .re-lang-glow {
  left: 50%; top: 24px; width: 340px; height: 280px; margin-left: -170px; opacity: 1;
  background: radial-gradient(closest-side, rgba(244, 207, 126, .32), rgba(244, 207, 126, 0));
}
.re-lang-hang { width: 46px; height: 118px; transform-origin: 50% 0; }
.re-lang-hang::before { content: ''; position: absolute; left: 22px; top: 0; width: 2px; height: 46px; background: var(--lamp); }
.re-lang-hang::after {
  content: ''; position: absolute; left: 11px; top: 44px; width: 24px; height: 14px; background: #c9922f;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.re-lang-lamp {
  position: absolute; left: 0; top: 58px; width: 46px; height: 56px;
  clip-path: polygon(22% 0, 78% 0, 100% 28%, 100% 74%, 68% 100%, 32% 100%, 0 74%, 0 28%);
  background: linear-gradient(90deg, #8f6212, #e7b450 50%, #8f6212);
}
.re-lang-flame {
  position: absolute; inset: 9px 11px 11px; border-radius: 45% 45% 35% 35%;
  background: radial-gradient(circle at 50% 68%, #fffbe8 0, #f4cf7e 38%, #e08a1e 82%);
}
.re-lang-moon {
  position: absolute; z-index: 1; left: 50%; top: 52px; width: 42px; height: 42px; margin-left: -21px; border-radius: 50%;
  box-shadow: inset 11px -5px 0 0 var(--lamp-2); transform: rotate(-24deg) scale(.6); opacity: 0;
}
.re-lang-words {
  display: grid; place-items: center; width: 100%; margin-top: 6px;
  font: 600 clamp(28px, 8.4vw, 46px)/1.15 var(--font-display);
}
.re-lang-words > span { grid-area: 1 / 1; max-width: 100%; }
.re-lang-new { position: relative; }
.re-lang-old, .re-lang-ink { overflow-wrap: anywhere; color: var(--lamp-2); filter: drop-shadow(0 0 12px rgba(244, 207, 126, .45)); }
.re-lang-ink { display: block; clip-path: inset(-30% -10% -30% -10%); }
.re-lang-sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.re-lang-sweep b {
  position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%;
  background: #fffbe8; box-shadow: 0 0 14px 6px rgba(244, 207, 126, .75);
}
.re-lang-to-rtl .re-lang-sweep b { left: auto; right: 0; }
.re-lang-tag {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: 14px;
  font: 600 12px/1 var(--font-ui); letter-spacing: .14em; color: var(--on-felt-soft);
}
.re-lang-end { display: inline-flex; align-items: center; gap: 6px; }
.re-lang-flag { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(231, 180, 80, .6); }
.re-lang-star { color: var(--lamp); }

/* Out: the lantern swings in on its chain and its light comes up on the old name. */
.px-lang-stage-out .re-lang-scene { animation: re-lang-scene-in .3s ease-out both; }
.px-lang-stage-out .re-lang-hang { animation: re-lang-swing .8s cubic-bezier(.3, .6, .4, 1) both; }
.px-lang-stage-out .re-lang-glow { animation: re-lang-glow-on .45s ease-out .35s both; }
.px-lang-stage-out .re-lang-old { animation: re-lang-light .45s ease-out .42s both; }
.px-lang-stage-out .re-lang-ink { clip-path: inset(-30% 100% -30% -10%); }
.px-lang-stage-out .re-lang-to-rtl .re-lang-ink { clip-path: inset(-30% -10% -30% 100%); }
.re-lang-stage .re-lang-sky i:not(.re-lang-glow) { animation: re-lang-twinkle .38s ease-in-out 2 both; }
.re-lang-stage .re-lang-sky i:not(.re-lang-glow):nth-child(odd) { animation-delay: .1s; }
/* In: the lantern moves aside, the crescent rises and the light draws the new name. */
.px-lang-stage-in .re-lang-hang { animation: re-lang-aside .45s cubic-bezier(.3, .6, .3, 1) .08s both; }
.px-lang-stage-in .re-lang-old { animation: re-lang-fade .25s ease-in .05s both; }
.px-lang-stage-in .re-lang-moon { animation: re-lang-moon .4s ease-out .3s both; }
.px-lang-stage-in .re-lang-glow { animation: re-lang-glow-dim .5s ease .2s both; }
.px-lang-stage-in .re-lang-ink { animation: re-lang-draw .5s ease-in-out .4s both; }
.px-lang-stage-in .re-lang-to-rtl .re-lang-ink { animation-name: re-lang-draw-rtl; }
.px-lang-stage-in .re-lang-sweep { animation: re-lang-sweep .5s ease-in-out .4s both; }
.px-lang-stage-in .re-lang-to-rtl .re-lang-sweep { animation-name: re-lang-sweep-rtl; }
.px-lang-stage-in .re-lang-scene { animation: re-lang-scene-out .25s ease-in 1s both; }
@keyframes re-lang-scene-in { from { transform: translateY(-24px); opacity: 0; } }
@keyframes re-lang-scene-out { to { transform: translateY(-20px); opacity: 0; } }
@keyframes re-lang-swing {
  0%  { transform: translateX(-60px) rotate(34deg); opacity: 0; }
  25% { opacity: 1; }
  50% { transform: rotate(-12deg); }
  75% { transform: rotate(5deg); }
}
@keyframes re-lang-glow-on { from { opacity: 0; } }
@keyframes re-lang-light { from { color: rgba(245, 236, 217, .2); filter: drop-shadow(0 0 0 rgba(244, 207, 126, 0)); } }
@keyframes re-lang-twinkle { 50% { opacity: .15; } }
@keyframes re-lang-aside { to { transform: translateX(min(140px, 28vw)) rotate(-14deg) scale(.82); } }
@keyframes re-lang-fade { to { opacity: 0; transform: translateY(-8px); } }
@keyframes re-lang-moon { to { transform: rotate(-24deg); opacity: 1; } }
@keyframes re-lang-glow-dim { to { opacity: .55; } }
@keyframes re-lang-draw { from { clip-path: inset(-30% 100% -30% -10%); } }
@keyframes re-lang-draw-rtl { from { clip-path: inset(-30% -10% -30% 100%); } }
@keyframes re-lang-sweep { 8%, 85% { opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
@keyframes re-lang-sweep-rtl { 8%, 85% { opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }
@media (max-width: 460px) {
  .re-lang-scene { padding: 0 14px 18px; }
  .re-lang-sky i:nth-child(n+4) { display: none; }
}

/* Phones: the hero's two buttons stay side by side, each as wide as its
   label needs, their text and padding shrinking with the screen; a label
   still too long takes two even lines inside its button. A home section's title and its "View all" link
   share one row too: the title keeps a little under half of it, breaking
   between words if it must, and only a very long link label takes two
   lines. */
@media (max-width: 639px) {
  html body :is(div, p):has(> .ed-btn-primary):has(> :is(.ed-btn-secondary, .re-hero__cta2)) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: .5rem; }
  html body :is(div, p):has(> .ed-btn-primary):has(> :is(.ed-btn-secondary, .re-hero__cta2)) > :is(.ed-btn-primary, .ed-btn-secondary, .re-hero__cta2) {
    flex: 1 1 auto; min-width: min-content; width: auto; margin: 0; justify-content: center; text-align: center; white-space: normal; text-wrap: balance;
    padding-inline: clamp(.5rem, 2.6vw, 1.25rem); font-size: clamp(.75rem, 3.5vw, .9375rem); line-height: 1.15;
  }
  html body :is(div, p):has(> .ed-btn-primary):has(> :is(.ed-btn-secondary, .re-hero__cta2)) > :is(.ed-btn-primary, .ed-btn-secondary, .re-hero__cta2) > :is(svg, i, img) { flex: none; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; column-gap: .75rem; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > div { flex: 1 1 0; min-width: 45%; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > a { flex: 0 1 auto; max-width: 55%; margin: 0; white-space: normal; text-wrap: balance; text-align: center; font-size: .8125rem; line-height: 1.2; letter-spacing: .02em; gap: .375rem; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) h2.text-fit { font-size: clamp(1.25rem, 6.4vw, 1.75rem); overflow-wrap: break-word; }
}

/* Recent winners strip. It also stops while one of its cards has focus,
   slides towards the reading side on right-to-left pages (the shared loop
   only runs leftwards, which empties the row there), and holds still with
   each winner shown once when there are too few of them to fill the row
   (data-wt-still, set by assets/js/components/home/winner-ticker.js). */
html body .wt-wrap:focus-within .wt-track { animation-play-state: paused; }
@keyframes wt-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: no-preference) {
  html[dir="rtl"] body .wt-track { animation-name: wt-scroll-rtl; }
}
html body .wt-wrap[data-wt-still] .wt-track { animation: none; transform: none; margin-inline: auto; }
html body .wt-wrap[data-wt-still] .wt-card[data-wt-repeat] { display: none; }

/* Windows (wallet, sign-out and the plugins' windows) sit on their own panel,
   so the secondary text, accent links and buttons in them take the deeper
   shades below to read at 4.5:1 there; the page around keeps its own. */
html:not(.dark) [role="dialog"] {
  --ink-soft: #5c7373;
  --theme-500: #946615;
}
/* rev 868fe5109c9f2a2b */