/*
 * MIRI NAIL — shoreline background theme
 * Backgrounds only: layout, typography, cards, buttons and imagery remain
 * entirely controlled by the original styles.css.
 */

:root {
  --sand-base: #f8f1e7;
  --sand-light: #fffaf3;
  --sand-warm: #ead8c1;
  --sand-glow: rgba(255, 253, 248, 0.78);
}

body {
  background:
    linear-gradient(90deg, #dfd2c5 0%, #f3eae0 23%, #f7f0e8 77%, #ded1c4 100%);
}

/*
 * The original hero has its own opaque background/image, so this continuous
 * sand canvas becomes visible only below the first view and on category pages.
 */
.lp {
  background:
    linear-gradient(90deg, rgba(250, 242, 231, 0.1) 0%, rgba(255, 253, 249, 0.64) 20%, rgba(255, 253, 249, 0.64) 80%, rgba(247, 236, 222, 0.1) 100%),
    image-set(
      url("assets/sand-beach-bg-v1.avif?v=1") type("image/avif"),
      url("assets/sand-beach-bg-v1.jpg?v=1") type("image/jpeg")
    ) top center / 100% auto repeat-y,
    var(--sand-base);
}

/* Decorative layer remains behind every section; it never changes layout. */
.lp::after {
  background:
    radial-gradient(circle at 8% 24%, rgba(255, 255, 255, 0.7) 0 18px, transparent 38px),
    radial-gradient(circle at 92% 47%, rgba(255, 255, 255, 0.62) 0 22px, transparent 46px),
    radial-gradient(circle at 6% 78%, rgba(255, 248, 239, 0.58) 0 28px, transparent 58px);
  opacity: 0.2;
}

/* All content sections share the same uninterrupted sand canvas. */
.scene-select,
.nailtip-benefit,
.handfoot,
.social,
.product-lineup,
.howto,
.setcontents,
.faq,
.final-cta {
  background: transparent;
}

/* A soft display-window glow separates the pale product photography from sand. */
.product-lineup {
  background:
    radial-gradient(ellipse at 50% 52%, rgba(248, 234, 229, 0.78) 0 42%, rgba(231, 198, 190, 0.4) 54%, rgba(255, 250, 244, 0.54) 69%, transparent 86%);
}

/* Keep the original photography intact and separate it from the sand canvas. */
.benefit-row--swap .benefit-row__media {
  background: #dcecef;
  box-shadow:
    0 0 0 4px rgba(171, 210, 216, 0.76),
    0 20px 34px rgba(92, 126, 132, 0.18);
}

.benefit-row--home .benefit-row__media {
  background: #f4dfe4;
  box-shadow:
    0 0 0 4px rgba(225, 181, 192, 0.76),
    0 20px 34px rgba(146, 95, 107, 0.16);
}

/* The source photo contains a thin white strip baked into both side edges.
   Crop it inside the existing frame without changing the product artwork. */
.benefit-row--home .benefit-row__media img {
  transform: scale(1.06);
}

.benefit-row--pair .benefit-row__media {
  background: #e1ebe5;
  box-shadow:
    0 0 0 4px rgba(181, 207, 192, 0.76),
    0 20px 34px rgba(91, 124, 105, 0.16);
}

/* Turn the open space around the three benefits into one intentional color field.
   This changes only the background; the original text and alternating layout stay intact. */
.nailtip-benefit__rows {
  position: relative;
  isolation: isolate;
}

.nailtip-benefit__rows::before {
  content: "";
  position: absolute;
  inset: -28px -34px;
  z-index: -1;
  border: 1px solid rgba(226, 199, 174, 0.44);
  border-radius: 52px;
  background:
    radial-gradient(ellipse at 82% 43%, rgba(242, 199, 211, 0.62) 0 16%, rgba(246, 218, 224, 0.34) 30%, transparent 52%),
    radial-gradient(ellipse at 16% 12%, rgba(189, 224, 228, 0.52) 0 14%, rgba(218, 237, 235, 0.3) 30%, transparent 50%),
    radial-gradient(ellipse at 16% 86%, rgba(204, 225, 208, 0.56) 0 16%, rgba(226, 237, 224, 0.3) 31%, transparent 52%),
    linear-gradient(180deg, rgba(250, 239, 224, 0.84), rgba(255, 247, 238, 0.9));
  box-shadow:
    inset 0 0 72px rgba(255, 255, 255, 0.58),
    0 24px 54px rgba(128, 95, 66, 0.08);
}

/* Replace only the old white mobile entrance fade with a sand-colored fade. */
.scene-select::before {
  background: linear-gradient(180deg, var(--sand-base) 0%, rgba(248, 241, 231, 0) 100%);
}

.site-footer {
  background:
    linear-gradient(180deg, rgba(255, 250, 243, 0) 0%, rgba(239, 222, 201, 0.64) 48%, var(--sand-warm) 100%);
}

/* Category pages do not have the blue FV, so the sand begins at the top. */
.cat-page .cat-topbar {
  background: rgba(255, 250, 243, 0.58);
}

.cat-page .cat-hero {
  background: radial-gradient(circle at 50% 0%, var(--sand-glow), transparent 72%);
}

@media (max-width: 1023px) {
  .nailtip-benefit__rows::before {
    inset: -18px -12px;
    border-radius: 34px;
  }

  .lp {
    background:
      linear-gradient(90deg, rgba(249, 240, 228, 0.1) 0%, rgba(255, 253, 249, 0.62) 18%, rgba(255, 253, 249, 0.62) 82%, rgba(246, 234, 219, 0.1) 100%),
      image-set(
        url("assets/sand-beach-bg-v1.avif?v=1") type("image/avif"),
        url("assets/sand-beach-bg-v1.jpg?v=1") type("image/jpeg")
      ) top center / 520px auto repeat-y,
      var(--sand-base);
  }

  .lp::after {
    background:
      radial-gradient(circle at 4% 31%, rgba(255, 255, 255, 0.64) 0 14px, transparent 30px),
      radial-gradient(circle at 96% 72%, rgba(255, 249, 240, 0.56) 0 18px, transparent 38px);
    opacity: 0.16;
  }

  .product-lineup {
    background:
      radial-gradient(ellipse at 50% 46%, rgba(248, 234, 229, 0.8) 0 40%, rgba(231, 198, 190, 0.38) 54%, rgba(255, 250, 244, 0.5) 69%, transparent 84%);
  }
}