/* Lilia Atelier — storefront styles.
 *
 * The design is authored with inline styles on every element, and app.js keeps
 * them verbatim so the page matches the canvas exactly. This sheet holds only
 * what inline styles cannot express: the reset, pseudo-classes, keyframes and
 * the responsive rules that let a desktop-width design work on a phone.
 *
 * Responsive overrides use !important deliberately: they must beat the inline
 * styles carried over from the design. */

/* Rubik, self-hosted, is the Arabic face.
 *
 * It is named after the Latin faces in every stack, never before them: Jost and
 * Cormorant carry no Arabic glyphs, so Arabic falls through to Rubik while Latin
 * never reaches it. Subset to Arabic plus basic Latin — 68 KB rather than 345 —
 * with the init/medi/fina joining features kept, because Arabic without them is
 * a row of unconnected letters.
 *
 * Self-hosted on purpose: a font that fails to load does not announce itself,
 * it just renders in a fallback that looks nearly right. */
@font-face {
  font-family: 'Rubik';
  src: url('/assets/fonts/rubik-arabic-var.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

html, body { margin: 0; padding: 0; background: #FCFAFB; }
* { box-sizing: border-box; }

a { color: #A94F8C; text-decoration: none; }
a:hover { color: #72325D; }

input, select, textarea, button { font-family: 'Jost', 'Rubik', sans-serif; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #A94F8C; }
::placeholder { color: #BEABB6; }

/* A visible focus ring for keyboard users. The design has none, and without one
 * the customise page cannot be operated without a mouse. */
:focus-visible { outline: 2px solid #A94F8C; outline-offset: 2px; }

@keyframes liliaUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- boot placeholder --------------------------------------------------- */

.boot {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FCFAFB;
}
.boot-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  letter-spacing: 0.3em;
  color: #D5BACA;
  animation: liliaUp 0.6s ease both;
}

/* --- hover states ------------------------------------------------------- */
/* The design expresses these as style-hover attributes, which are a canvas
 * feature with no HTML equivalent. */

.lil-step:hover { background: #FEFAFC !important; }
.lil-ghost:hover { border-color: #A94F8C !important; color: #72325D !important; }
.lil-lang:hover { border-color: #A94F8C !important; background: #FBF2F7 !important; }
.lil-footlink:hover { color: #72325D !important; }
.lil-wa-foot { transition: background 0.18s ease, box-shadow 0.18s ease; }
.lil-wa-foot:hover { background: #1EBE5B !important; box-shadow: 0 8px 22px rgba(37, 211, 102, 0.36) !important; }
.lil-card:hover .lil-slot { filter: brightness(0.985); }
.lil-chip { transition: border-color 0.15s ease, background 0.15s ease; }
.lil-cta { transition: filter 0.15s ease; }
.lil-cta:hover { filter: brightness(1.06); }
button:disabled { opacity: 0.55; cursor: not-allowed !important; }

/* --- toast -------------------------------------------------------------- */

.toast {
  position: fixed;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  bottom: 26px;
  z-index: 200;
  max-width: min(520px, calc(100vw - 32px));
  padding: 14px 22px;
  border-radius: 999px;
  background: #20131B;
  color: #fff;
  font: 300 13.5px/1.5 'Jost', 'Rubik', sans-serif;
  text-align: center;
  box-shadow: 0 18px 44px -18px rgba(32, 19, 27, 0.6);
  animation: liliaUp 0.3s ease both;
}
.toast[data-kind="error"] { background: #8C2733; }
.toast[data-kind="ok"] { background: #5E2A50; }

/* --- field error -------------------------------------------------------- */

.lil-field-error {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 300;
  color: #B03046;
}
.lil-invalid { border-color: #D28B98 !important; }

/* --- responsive --------------------------------------------------------- */

/* Tablet: collapse the widest two-column splits first. */
@media (max-width: 1080px) {
  .lil-wrap { padding-inline: 26px !important; }
  .lil-hero { grid-template-columns: 1fr !important; gap: 44px !important; padding-block: 56px 64px !important; }
  .lil-hero-art { height: 460px !important; }
  .lil-hero h1 { font-size: 56px !important; }
  .lil-steps { grid-template-columns: repeat(2, 1fr) !important; }
  .lil-grid-4 { grid-template-columns: repeat(3, 1fr) !important; }
  .lil-split { grid-template-columns: 1fr !important; gap: 40px !important; }
  .lil-split aside, .lil-split .lil-sticky { position: static !important; }
  .lil-about-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .lil-values { grid-template-columns: 1fr !important; gap: 32px !important; }
  .lil-footer-cols { grid-template-columns: 1fr 1fr !important; gap: 34px !important; }
  .lil-band { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; }
}

/* Phone. */
@media (max-width: 720px) {
  .lil-wrap { padding-inline: 18px !important; }

  /* The header's six nav links cannot sit on one line; they move under the
     brand row and scroll horizontally rather than wrapping into a tall block. */
  .lil-header-bar {
    height: auto !important;
    flex-wrap: wrap !important;
    padding-block: 12px !important;
    gap: 12px !important;
  }
  .lil-nav {
    order: 3 !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 18px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none;
  }
  .lil-nav::-webkit-scrollbar { display: none; }

  .lil-hero h1 { font-size: 42px !important; }
  .lil-hero-art { height: 340px !important; border-radius: 170px 170px 12px 12px !important; }
  .lil-hero-card { position: static !important; width: 100% !important; margin-top: 20px !important; }
  .lil-hero-stats { gap: 24px !important; flex-wrap: wrap !important; }

  .lil-steps { grid-template-columns: 1fr !important; }
  .lil-grid-3, .lil-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 14px !important; }
  .lil-about-3 { grid-template-columns: 1fr !important; }
  .lil-detail-media { grid-template-columns: 56px 1fr !important; }
  .lil-fields { grid-template-columns: 1fr !important; }
  .lil-checkout-fields { grid-template-columns: 1fr !important; }
  .lil-checkout-fields > label { grid-column: auto !important; }
  .lil-footer-cols { grid-template-columns: 1fr !important; }
  .lil-progress { gap: 12px !important; }
  .lil-progress span:last-child { font-size: 9px !important; }
  .lil-order-grid { grid-template-columns: 1fr !important; }

  h1 { font-size: 40px !important; }
  h2 { font-size: 34px !important; }

  .lil-section { padding-block: 48px !important; }
  .lil-copyright { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
}

/* Very narrow: two-up product grids become one-up. */
@media (max-width: 460px) {
  .lil-grid-3, .lil-grid-4 { grid-template-columns: 1fr !important; }
}

/* --- print -------------------------------------------------------------- */
/* Customers print the order confirmation to take to the boutique. */
@media print {
  .lil-header, .lil-footer, .lil-cta, .lil-noprint { display: none !important; }
  body { background: #fff; }
}


/* Arabic is cursive, and letter-spacing pulls the joins apart: a word set with
 * tracking stops being a word and becomes a row of separate letters. The
 * design's tracking is a Latin device and is dropped wherever Arabic is set.
 *
 * !important is required, not lazy: the design's tracking arrives as an inline
 * style on each element, and nothing else can beat that. */
html[dir="rtl"] * { letter-spacing: normal !important; word-spacing: normal !important; }

/* The wordmark stays Latin on the Arabic side of the site, and its tracking is
 * what makes it a wordmark, so it is put back. */
html[dir="rtl"] .lilia-mark { letter-spacing: 0.22em !important; }