.elementor-widget-posts .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__title, .elementor-widget-posts .elementor-post__title a{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-posts .elementor-post__meta-data{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .elementor-post__excerpt p{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-posts .elementor-post__read-more{color:var( --e-global-color-accent );}.elementor-widget-posts a.elementor-post__read-more{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__card .elementor-post__badge{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-257 .elementor-element.elementor-element-eb9eef1{--grid-row-gap:35px;--grid-column-gap:30px;}.elementor-257 .elementor-element.elementor-element-eb9eef1.elementor-element{--align-self:center;}.elementor-257 .elementor-element.elementor-element-eb9eef1 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.95 * 100% );}.elementor-257 .elementor-element.elementor-element-eb9eef1:after{content:"0.95";}.elementor-257 .elementor-element.elementor-element-eb9eef1 .elementor-post__thumbnail__link{width:100%;}.elementor-257 .elementor-element.elementor-element-eb9eef1 .elementor-post__meta-data span + span:before{content:"///";}.elementor-257 .elementor-element.elementor-element-eb9eef1.elementor-posts--thumbnail-left .elementor-post__thumbnail__link{margin-right:20px;}.elementor-257 .elementor-element.elementor-element-eb9eef1.elementor-posts--thumbnail-right .elementor-post__thumbnail__link{margin-left:20px;}.elementor-257 .elementor-element.elementor-element-eb9eef1.elementor-posts--thumbnail-top .elementor-post__thumbnail__link{margin-bottom:20px;}@media(max-width:767px){.elementor-257 .elementor-element.elementor-element-eb9eef1 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-257 .elementor-element.elementor-element-eb9eef1:after{content:"0.5";}.elementor-257 .elementor-element.elementor-element-eb9eef1 .elementor-post__thumbnail__link{width:100%;}}/* Start custom CSS *//* ============================================================
   NAILZ EXTENSIONS — SITE-WIDE BACKGROUND
   Palette: #fff5f1 (base) / #ffffff (content) / #d9a394 & #b9614f (accents)
   Paste into: Appearance > Customize > Additional CSS
   ============================================================ */

/* 1) Base site background */
html {
  background: #fff5f1 !important;
}

body {
  background-color: #fff5f1 !important;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.9) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(255,231,222,0.8) 0%, transparent 50%);
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}

/* 2) Lift main content areas onto white "cards" so text stays readable
      against the tinted background. Adjust body.elementor-page-257s to match your theme
      if your content wrapper has a different class/ID. */
.site-content,
.content-area,
main#main,
#main,
.entry-content,
article {
  position: relative;
  z-index: 1;
}

/* 3) Animated nail-shaped background decoration
      Two fixed, pointer-events-none layers behind all content.
      Shapes are drawn with clip-path (no images), so they scale cleanly. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Shape 1 — almond nail silhouette, top-right, gentle float + rotate */
body::before {
  top: 6%;
  right: -4%;
  width: clamp(120px, 14vw, 220px);
  height: clamp(160px, 19vw, 300px);
  background: linear-gradient(160deg, #ffe7de 0%, #f6c9bb 100%);
  clip-path: path("M50,0 C20,10 0,60 0,110 C0,160 20,190 50,200 C80,190 100,160 100,110 C100,60 80,10 50,0 Z");
  opacity: 0.55;
  animation: nx-float-a 14s ease-in-out infinite;
}

/* Shape 2 — stiletto nail silhouette, lower-left, slower drift */
body::after {
  bottom: 4%;
  left: -5%;
  width: clamp(100px, 12vw, 190px);
  height: clamp(180px, 22vw, 340px);
  background: linear-gradient(200deg, #ffffff 0%, #f3ded6 100%);
  clip-path: polygon(50% 0%, 78% 30%, 92% 100%, 8% 100%, 22% 30%);
  opacity: 0.5;
  animation: nx-float-b 18s ease-in-out infinite;
}

@keyframes nx-float-a {
  0%   { transform: translate(0, 0) rotate(-6deg); }
  50%  { transform: translate(-14px, 22px) rotate(4deg); }
  100% { transform: translate(0, 0) rotate(-6deg); }
}

@keyframes nx-float-b {
  0%   { transform: translate(0, 0) rotate(5deg); }
  50%  { transform: translate(16px, -18px) rotate(-4deg); }
  100% { transform: translate(0, 0) rotate(5deg); }
}

/* 4) Small floating sparkle accents (pure CSS, no assets) — attached to
      the hero section so they sit near your headline; add the class
      "nx-sparkle-field" to any wrapper where you want this effect. */
.nx-sparkle-field {
  position: relative;
  overflow: hidden;
}
.nx-sparkle-field .nx-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #d9a394;
  border-radius: 50%;
  opacity: 0.7;
  animation: nx-sparkle-drift 6s ease-in-out infinite;
}
.nx-sparkle-field .nx-sparkle:nth-child(2) { animation-delay: 1.5s; background: #b9614f; }
.nx-sparkle-field .nx-sparkle:nth-child(3) { animation-delay: 3s; }

@keyframes nx-sparkle-drift {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
  50%      { transform: translateY(-14px) scale(1.3); opacity: 1; }
}

/* 5) Respect reduced-motion preference: pause all decorative animation */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .nx-sparkle-field .nx-sparkle {
    animation: none !important;
  }
}

/* 6) Hide the heavier shapes on small screens to keep mobile lightweight
      and avoid overlapping tap targets */
@media (max-width: 640px) {
  body::before,
  body::after {
    opacity: 0.3;
    width: 90px;
    height: 130px;
  }
}/* End custom CSS */