:root {
  --mint-50: #effcf8;
  --mint-100: #dbf5ef;
  --mint-200: #c8ece6;
  --mint-400: #85ccc6;
  --mint-500: #4da9a2;
  --teal-600: #2f8f8b;
  --orange-400: #f5b24f;
  --orange-500: #eb9b34;
  --brown-700: #4a3026;
  --brown-500: #6c4e42;
  --line: #b9dfd8;
  --white: #fff;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-soft: 0 12px 28px rgba(52, 131, 126, 0.14);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Nunito", sans-serif;
  color: var(--brown-700);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(248, 255, 252, 0.18)),
    url("./assets/page-original-clean-bg-v2.png"),
    linear-gradient(180deg, #dff4f0 0%, #f5fdfb 100%);
  background-size: 100% 100%, cover, 100% 100%;
  background-position: center top, center top, center;
  background-repeat: no-repeat;
  background-attachment: fixed, fixed, fixed;
  line-height: 1.55;
}

img {
  max-width: 100%;
  display: block;
}

.page-decoration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: none;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -40px;
  background: var(--teal-600);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
}

.skip-link:focus {
  top: 8px;
}

.container {
  width: min(1150px, calc(100% - 2rem));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: #d9f1ec;
  background-image: url("./assets/header-original-clean-bg-v6.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 2px solid #2e3c77;
  border-bottom: 1px solid #a7d3cd;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 17% 17%, rgba(255, 255, 255, 0.22), transparent 22%),
    radial-gradient(ellipse at 83% 16%, rgba(255, 255, 255, 0.2), transparent 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(36, 136, 137, 0.04));
  mix-blend-mode: soft-light;
}

.site-header::after {
  content: none;
}

.header-decor {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

.header-star {
  --star-size: 24px;
  width: var(--star-size);
  height: var(--star-size);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 C56 29 60 39 95 50 C60 61 56 71 50 95 C44 71 40 61 5 50 C40 39 44 29 50 5Z' fill='%23c98221'/%3E%3Cpath d='M50 14 C55 34 58 43 84 50 C58 57 55 66 50 86 C45 66 42 57 16 50 C42 43 45 34 50 14Z' fill='%23ffd45a'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.94;
  filter:
    drop-shadow(0 1px 0 rgba(123, 78, 24, 0.1))
    drop-shadow(0 0 4px rgba(255, 226, 117, 0.26));
}

.header-star::before {
  content: none;
}

.header-star::after {
  content: none;
}

.header-star-logo {
  --star-size: 22px;
}

.header-star-nav {
  --star-size: 14px;
}

.header-star-actions {
  --star-size: 31px;
}

.header-star-actions::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  right: -8px;
  bottom: -5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 C56 29 60 39 95 50 C60 61 56 71 50 95 C44 71 40 61 5 50 C40 39 44 29 50 5Z' fill='%23c98221'/%3E%3Cpath d='M50 14 C55 34 58 43 84 50 C58 57 55 66 50 86 C45 66 42 57 16 50 C42 43 45 34 50 14Z' fill='%23ffd45a'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.9;
}

.header-star-actions::before {
  content: none;
}

.header-cloud {
  --cloud-width: 58px;
  width: var(--cloud-width);
  height: calc(var(--cloud-width) * 0.38);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 255, 252, 0.92));
  border: 1px solid rgba(130, 203, 198, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    inset 0 -2px 0 rgba(83, 164, 164, 0.2);
  filter:
    drop-shadow(0 2px 0 rgba(72, 151, 151, 0.3))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.82));
}

.header-cloud::before,
.header-cloud::after {
  content: "";
  position: absolute;
  bottom: 30%;
  border-radius: 50%;
  background: inherit;
}

.header-cloud::before {
  left: 18%;
  width: 32%;
  height: 92%;
}

.header-cloud::after {
  left: 43%;
  width: 42%;
  height: 112%;
}

.header-cloud-left {
  --cloud-width: 56px;
  left: 7.2%;
  top: 42%;
}

.header-star-logo {
  left: 26.4%;
  top: 23%;
  transform: rotate(-27deg) scaleX(0.94);
}

.header-star-nav {
  right: 35.4%;
  top: 14%;
  transform: rotate(31deg) scaleY(0.9);
  opacity: 0.88;
}

.header-cloud-actions {
  --cloud-width: 61px;
  right: 9.2%;
  top: 18%;
}

.header-star-actions {
  right: 16.7%;
  top: 55%;
  transform: rotate(-18deg) scaleX(1.04);
}

.nav-wrap {
  position: relative;
  z-index: 2;
  min-height: 78px;
  display: grid;
  grid-template-columns: 240px auto 164px;
  align-items: center;
  justify-content: space-between;
  column-gap: 1.25rem;
  padding: 0.28rem 0;
}

.brand {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 224px;
  height: 58px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  justify-self: start;
}

.brand-logo-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: 58px;
  max-height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(75, 47, 38, 0.22));
}

.main-nav {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
  background: #e6ebed;
  border: 1px solid #b4ccca;
  border-radius: 17px;
  box-shadow: 0 4px 10px rgba(69, 131, 126, 0.12);
  width: max-content;
  justify-self: center;
  padding: 0.1rem 0.18rem;
  min-height: 44px;
}

.main-nav a {
  text-decoration: none;
  color: var(--brown-700);
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1;
  padding: 0.64rem 0.92rem;
  border-right: 1px solid #d6e8e3;
  border-radius: 12px;
}

.main-nav a:last-child {
  border-right: none;
}

.main-nav a:hover,
.main-nav a.is-active {
  color: #2d201a;
  background: #f7fbfc;
  box-shadow: 0 2px 6px rgba(96, 126, 121, 0.15);
}

.actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-self: end;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(96, 165, 159, 0.44);
  border-radius: 11px;
  width: 42px;
  height: 42px;
  text-decoration: none;
  background: linear-gradient(180deg, #2f9e99, #258983);
  color: #fff;
  box-shadow: 0 8px 14px rgba(39, 129, 123, 0.26);
}

.icon-btn.is-round {
  border-radius: 999px;
}

.cart-btn {
  width: 49px;
}

.icon-btn svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 1.28rem;
  min-height: 1.28rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 0.76rem;
  color: #fff;
  background: var(--orange-500);
}

.cart-btn {
  position: relative;
}

.menu-toggle {
  display: none;
  border: 1px solid rgba(96, 165, 159, 0.44);
  border-radius: 10px;
  background: #fff;
  padding: 0.42rem 0.68rem;
}

.decor-icon {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.decor-star {
  --star-size: 22px;
  width: var(--star-size);
  height: var(--star-size);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5 C56 29 60 39 95 50 C60 61 56 71 50 95 C44 71 40 61 5 50 C40 39 44 29 50 5Z' fill='%23c98221'/%3E%3Cpath d='M50 14 C55 34 58 43 84 50 C58 57 55 66 50 86 C45 66 42 57 16 50 C42 43 45 34 50 14Z' fill='%23ffd45a'/%3E%3C/svg%3E") center / contain no-repeat;
  filter:
    drop-shadow(0 1px 0 rgba(123, 78, 24, 0.1))
    drop-shadow(0 0 4px rgba(255, 226, 117, 0.26));
  opacity: 0.92;
}

.decor-star::before {
  content: none;
}

.decor-star::after {
  content: none;
}

.decor-cloud {
  --cloud-width: 54px;
  width: var(--cloud-width);
  height: calc(var(--cloud-width) * 0.4);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(242, 255, 252, 0.76));
  border: 1px solid rgba(139, 205, 199, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    inset 0 -2px 0 rgba(88, 169, 166, 0.12);
  filter:
    drop-shadow(0 2px 0 rgba(89, 162, 162, 0.14))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.58));
}

.decor-cloud::before,
.decor-cloud::after {
  content: "";
  position: absolute;
  bottom: 30%;
  border-radius: 50%;
  background: inherit;
}

.decor-cloud::before {
  left: 18%;
  width: 32%;
  height: 92%;
}

.decor-cloud::after {
  left: 43%;
  width: 42%;
  height: 112%;
}

.decor-mushroom {
  --mush-size: 46px;
  width: var(--mush-size);
  height: calc(var(--mush-size) * 0.78);
  border-radius: 50% 50% 42% 42%;
  background:
    radial-gradient(circle at 28% 33%, #fff8df 0 10%, transparent 11%),
    radial-gradient(circle at 60% 28%, #fff8df 0 12%, transparent 13%),
    radial-gradient(circle at 79% 48%, #fff8df 0 8%, transparent 9%),
    linear-gradient(180deg, #ed9a48 0%, #d77231 100%);
  border: 1px solid rgba(137, 84, 48, 0.38);
  filter:
    drop-shadow(0 2px 0 rgba(92, 105, 96, 0.16))
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.44));
}

.decor-mushroom::before {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: -31%;
  height: 47%;
  border-radius: 46% 46% 34% 34%;
  background: linear-gradient(180deg, #fff0cb, #f0c98f);
  border: 1px solid rgba(137, 84, 48, 0.25);
}

.decor-mushroom::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4%;
  height: 23%;
  border-radius: 999px;
  background: rgba(255, 239, 203, 0.72);
}

.hero {
  position: relative;
  width: 100%;
  padding: 8px 0 0;
}

.hero-reference {
  position: relative;
  z-index: 1;
  width: 100vw;
  min-height: clamp(330px, 32.2vw, 402px);
  margin: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: visible;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(201, 235, 229, 0.12) 0%, rgba(201, 235, 229, 0.02) 50%, rgba(201, 235, 229, 0.1) 100%),
    url("./assets/hero-panel-background-wide.png"),
    linear-gradient(180deg, #c9ebe5 0%, #d8f2ed 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-position: center, center, center;
  background-repeat: no-repeat;
  border-top: 0;
  border-bottom: 0;
  box-shadow:
    inset 0 18px 28px rgba(74, 150, 148, 0.1),
    inset 0 -22px 28px rgba(255, 255, 255, 0.18);
}

.hero-reference::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  height: 36px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(248, 255, 252, 0.18)),
    url("./assets/page-original-clean-bg-v2.png"),
    linear-gradient(180deg, #dff4f0 0%, #f5fdfb 100%);
  background-size: 100% 100%, cover, 100% 100%;
  background-position: center top, center top, center;
  background-attachment: fixed, fixed, fixed;
  -webkit-mask:
    radial-gradient(circle at 20px 0, #000 0 23px, transparent 23.6px)
      left top / 39px 36px repeat-x;
  mask:
    radial-gradient(circle at 20px 0, #000 0 23px, transparent 23.6px)
      left top / 39px 36px repeat-x;
  filter: none;
}

.hero-reference::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(248, 255, 252, 0.18)),
    url("./assets/page-original-clean-bg-v2.png"),
    linear-gradient(180deg, #dff4f0 0%, #f5fdfb 100%);
  background-size: 100% 100%, cover, 100% 100%;
  background-position: center top, center top, center;
  background-attachment: fixed, fixed, fixed;
  -webkit-mask:
    radial-gradient(circle at 7px 10px, #000 0 6px, transparent 7px)
      left bottom / 14px 10px repeat-x;
  mask:
    radial-gradient(circle at 7px 10px, #000 0 6px, transparent 7px)
      left bottom / 14px 10px repeat-x;
  filter: none;
}

.hero-scene {
  position: absolute;
  z-index: 1;
  right: max(7.2vw, calc((100vw - 1150px) / 2 + 0.65rem));
  top: 6%;
  width: min(52vw, 660px);
  height: 84%;
  object-fit: contain;
  object-position: center right;
  display: block;
  filter: drop-shadow(0 12px 18px rgba(56, 126, 123, 0.08));
}

.hero-scene-mobile {
  display: none;
}

.hero-content {
  position: absolute;
  z-index: 2;
  left: max(8.1vw, calc((100vw - 1150px) / 2 + 1.65rem));
  top: 13.2%;
  width: min(39vw, 455px);
  text-align: center;
}

.hero-content::before {
  content: none;
}

.hero-content::after {
  content: none;
}

.hero-left-cloud {
  --cloud-width: 46px;
  z-index: 3;
  left: max(4.1vw, calc((100vw - 1150px) / 2 + 0.3rem));
  top: 12%;
  opacity: 0.94;
}

.hero-left-star {
  z-index: 3;
}

.hero-left-star-1 {
  --star-size: 27px;
  left: max(3.1vw, calc((100vw - 1150px) / 2 - 0.55rem));
  top: 27%;
  transform: rotate(-32deg) scaleX(0.94);
}

.hero-left-star-2 {
  --star-size: 17px;
  left: 40.5%;
  top: 37%;
  transform: rotate(24deg) scaleY(0.92);
  opacity: 0.82;
}

.hero-left-star-3 {
  --star-size: 13px;
  left: 29.8%;
  bottom: 22%;
  transform: rotate(49deg) scaleX(0.9);
  opacity: 0.72;
}

.hero-right-star {
  z-index: 3;
}

.hero-right-star-1 {
  --star-size: 30px;
  right: max(7.8vw, calc((100vw - 1150px) / 2 + 1rem));
  top: 33%;
  transform: rotate(18deg) scaleY(0.95);
}

.hero-right-star-2 {
  --star-size: 15px;
  right: max(17vw, calc((100vw - 1150px) / 2 + 7rem));
  bottom: 18%;
  transform: rotate(-41deg) scaleX(0.92);
  opacity: 0.72;
}

.hero-right-cloud {
  --cloud-width: 49px;
  z-index: 3;
  right: max(4.4vw, calc((100vw - 1150px) / 2 + 0.2rem));
  top: 12.5%;
  opacity: 0.7;
}

.hero-mushroom-left {
  display: none;
}

.hero-mushroom-right {
  display: none;
}

.eyebrow {
  margin: 0;
  color: var(--teal-600);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}

h1,
h2,
h3 {
  font-family: "Baloo 2", system-ui, sans-serif;
  line-height: 1.12;
}

h1 {
  margin: 0.45rem 0 0.35rem;
  font-size: clamp(2rem, 5vw, 3.7rem);
}

.welcome-line {
  margin: 0;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.45rem, 2vw, 1.98rem);
  line-height: 1;
  color: #f4f8f8;
  text-shadow:
    -1.3px -1.3px 0 #4b2f26,
    1.3px -1.3px 0 #4b2f26,
    -1.3px 1.3px 0 #4b2f26,
    1.3px 1.3px 0 #4b2f26,
    0 2px 0 rgba(75, 47, 38, 0.16);
}

.brand-hero {
  margin: 0.12rem auto 0.34rem;
  line-height: 0;
  display: flex;
  justify-content: center;
}

.hero-wordmark {
  width: min(108%, 414px);
  height: auto;
  display: block;
  transform: none;
  transform-origin: center;
  filter: drop-shadow(0 3px 0 rgba(75, 47, 38, 0.12));
}

.subtitle-line {
  margin: clamp(0.48rem, 0.78vw, 0.85rem) auto 0;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: clamp(1.22rem, 1.66vw, 1.58rem);
  font-weight: 800;
  line-height: 1.08;
  color: #4b2f26;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
}

.subtitle-line-2 {
  margin: 0.02rem auto 0;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: clamp(1.18rem, 1.58vw, 1.48rem);
  font-weight: 800;
  line-height: 1.08;
  color: #4b2f26;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.34);
}

h2 {
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.65rem);
}

h3 {
  margin: 0.6rem 0 0.2rem;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
}

.hero-cta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(1.35rem, 1.65vw, 1.95rem);
}

.hero .btn {
  min-height: 35px;
  padding: 0.38rem 0.86rem 0.44rem;
  font-size: clamp(0.9rem, 1.08vw, 1.04rem);
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 3px 0 rgba(38, 122, 117, 0.3),
    0 8px 15px rgba(50, 128, 124, 0.16);
}

.hero .btn-primary {
  background: linear-gradient(180deg, #42afa9 0%, #2a9791 100%);
}

.hero .btn-secondary {
  background: linear-gradient(180deg, #a8e1ef 0%, #82cddd 100%);
}

.btn {
  border: none;
  border-radius: 999px;
  text-decoration: none;
  font-family: "Baloo 2", "Nunito", sans-serif;
  font-size: 1.36rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.64rem 1.15rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  color: #fff;
  background: linear-gradient(145deg, var(--teal-600), var(--mint-400));
  box-shadow: 0 8px 18px rgba(57, 142, 138, 0.3);
}

.btn-secondary {
  color: var(--brown-700);
  background: linear-gradient(145deg, #b5e7f2, #93d7ea);
  border: 1px solid #7ec6db;
}

.btn-accent {
  color: #fff;
  background: linear-gradient(145deg, var(--orange-500), var(--orange-400));
  box-shadow: 0 8px 18px rgba(224, 145, 46, 0.3);
}

.btn-danger {
  color: #fff;
  background: #d14c4c;
}

.section {
  position: relative;
  margin: 1.35rem auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(248, 255, 253, 0.82);
  padding: 1rem;
}

.section-decor {
  overflow: hidden;
}

.section-decor > *:not(.decor-icon) {
  position: relative;
  z-index: 1;
}

.section-star-left {
  --star-size: 23px;
  top: 2.2rem;
  left: 18%;
  transform: rotate(37deg) scaleY(0.92);
}

.section-star-right {
  --star-size: 17px;
  top: 2.1rem;
  right: 18%;
  transform: rotate(-29deg) scaleX(0.94);
}

.section-cloud-right {
  --cloud-width: 48px;
  top: 1.4rem;
  right: 5%;
  opacity: 0.72;
}

.section-cloud-left {
  --cloud-width: 54px;
  top: 1.25rem;
  left: 5%;
  opacity: 0.68;
}

.section-decor-gallery .section-cloud-left {
  top: 2.4rem;
}

.section-head {
  margin-bottom: 0.85rem;
  text-align: center;
}

.section-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.section-head h2::before,
.section-head h2::after {
  content: "";
  display: inline-block;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  background: #b6ddd8;
}

.section-head p {
  color: var(--brown-500);
  margin-top: 0.25rem;
}

.grid {
  display: grid;
  gap: 0.9rem;
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  background:
    radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.75), transparent 32%),
    linear-gradient(180deg, rgba(248, 255, 253, 0.92) 0%, rgba(241, 251, 249, 0.88) 70%, rgba(233, 246, 243, 0.9) 100%);
  border: 1px solid #bde0da;
  border-radius: var(--radius-lg);
  padding: 0.7rem;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 0.35rem;
}

.product-layer-card {
  gap: 0;
}

.product-stage {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid #b9dfd8;
  border-radius: 18px;
  aspect-ratio: 7 / 8;
  background: #e9f7f4;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.product-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.5), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(49, 151, 149, 0.06));
  mix-blend-mode: soft-light;
}

.product-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-layer-bg {
  z-index: 0;
}

.product-layer-cutout {
  z-index: 2;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 8px 8px rgba(59, 109, 107, 0.18));
  transform: translateY(0);
}

.product-layer-footer {
  display: none;
}

.product-caption {
  display: none;
}

.product-caption-title {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: clamp(1.28rem, 2.1vw, 1.85rem);
  font-weight: 800;
  line-height: 1;
  color: #4b2f26;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.buy-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 122px;
  min-height: 40px;
  padding: 0.3rem 1.05rem 0.34rem;
  border-radius: 999px;
  border: 0;
  color: #ffd45f;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 1.14rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  overflow: hidden;
  isolation: isolate;
  background: #2b9f99;
  box-shadow:
    0 3px 0 rgba(34, 119, 114, 0.3),
    0 8px 14px rgba(43, 142, 136, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.buy-pill::before {
  content: "";
  position: absolute;
  inset: 4px 9px auto;
  height: 28%;
  z-index: -1;
  border-radius: 999px;
  background: transparent;
}

.buy-pill:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 0 rgba(34, 119, 114, 0.3),
    0 11px 18px rgba(43, 142, 136, 0.18);
}

.buy-text {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  transform: rotate(-1deg);
}

.buy-letter {
  display: inline-block;
  margin-left: -0.035em;
  -webkit-text-stroke: 0.7px #4b2f26;
  paint-order: stroke fill;
  text-shadow:
    -0.7px -0.7px 0 #4b2f26,
    0.7px -0.7px 0 #4b2f26,
    -0.7px 0.7px 0 #4b2f26,
    0.7px 0.7px 0 #4b2f26,
    0 1.5px 1px rgba(75, 47, 38, 0.24);
}

.buy-space {
  width: 0.24em;
}

.buy-letter-1 {
  color: #ffe36d;
  transform: translateY(0.02em) rotate(-4deg);
}

.buy-letter-2 {
  color: #ffb247;
  transform: translateY(-0.03em) rotate(3deg);
}

.buy-letter-3 {
  color: #ff8f5a;
  transform: translateY(0.02em) rotate(-2deg);
}

.buy-letter-4 {
  color: #f6d85f;
  transform: translateY(-0.02em) rotate(2deg);
}

.buy-letter-5 {
  color: #93d777;
  transform: translateY(0.03em) rotate(-3deg);
}

.buy-letter-6 {
  color: #74d1df;
  transform: translateY(-0.02em) rotate(2deg);
}

.buy-letter-7 {
  color: #ffd56b;
  transform: translateY(0.01em) rotate(4deg);
}

.buy-pill.is-accent {
  background: #2b9f99;
  box-shadow:
    0 3px 0 rgba(34, 119, 114, 0.3),
    0 8px 14px rgba(43, 142, 136, 0.16);
}

.buy-pill.is-accent:hover {
  box-shadow:
    0 4px 0 rgba(34, 119, 114, 0.3),
    0 11px 18px rgba(43, 142, 136, 0.18);
}

.card-buy {
  width: fit-content;
  min-width: 134px;
  min-height: 44px;
  margin-top: 0.22rem;
  text-decoration: none;
  pointer-events: auto;
}

.card-media {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 7 / 8;
  border: 1px solid #c9e7e2;
  background: #e9f7f4;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.card p {
  color: var(--brown-500);
  margin: 0;
}

.card-info {
  position: relative;
  display: grid;
  gap: 0.52rem;
  margin-top: 0.62rem;
  padding: 1.05rem 1.05rem 1.08rem;
  overflow: hidden;
  border: 1px solid rgba(151, 216, 208, 0.72);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.7), transparent 32%),
    linear-gradient(180deg, rgba(248, 255, 253, 0.82), rgba(230, 248, 244, 0.78)),
    url("./assets/page-original-clean-bg-v2.png");
  background-size: 100% 100%, 100% 100%, 620px auto;
  background-position: center, center, center top;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 8px 18px rgba(57, 142, 138, 0.08);
}

.card-info::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 211, 91, 0.18), transparent 10%),
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.38), transparent 14%),
    radial-gradient(circle at 78% 84%, rgba(79, 174, 170, 0.1), transparent 18%);
}

.card-info > * {
  position: relative;
  z-index: 1;
}

.card-info h3 {
  margin-top: 0;
  margin-bottom: 0;
  color: #4b2f26;
  font-size: clamp(1.52rem, 2.5vw, 2.08rem);
  line-height: 1.02;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.card-product-name {
  font-weight: 800;
  color: #5b4035;
}

.card .btn {
  width: fit-content;
}

.price {
  font-size: 1.2rem;
  font-weight: 900;
  color: #b96729;
}

.old-price {
  color: #90766d;
  text-decoration: line-through;
  font-size: 0.92rem;
}

.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 10% 0, rgba(255, 255, 255, 0.8), transparent 28%),
    linear-gradient(130deg, #e9faf7 0%, #eefafc 70%);
}

.cta-band > *:not(.decor-icon) {
  position: relative;
  z-index: 1;
}

.cta-star-left {
  --star-size: 28px;
  left: 21%;
  top: 1.45rem;
  transform: rotate(-34deg) scaleX(0.95);
}

.cta-cloud-left {
  --cloud-width: 56px;
  left: 7%;
  bottom: 1.15rem;
  opacity: 0.72;
}

.cta-star-right {
  --star-size: 19px;
  right: 18%;
  top: 1.7rem;
  transform: rotate(26deg) scaleY(0.9);
}

.cta-band p {
  max-width: 58ch;
  margin: 0.35rem auto 0.95rem;
  color: var(--brown-500);
}

.contact-form {
  display: grid;
  gap: 0.52rem;
}

.contact-form label {
  font-weight: 800;
}

.contact-form input,
.contact-form textarea,
.filter-bar select,
.qty-input,
.filter-group input {
  width: 100%;
  border: 1px solid #9ed7d1;
  border-radius: 12px;
  padding: 0.68rem 0.72rem;
  font: inherit;
  background: #fff;
}

.contact-form input:focus,
.contact-form textarea:focus,
.filter-bar select:focus,
.qty-input:focus,
.filter-group input:focus {
  outline: 2px solid rgba(58, 143, 145, 0.24);
  border-color: var(--teal-600);
}

.page-hero {
  margin-top: 1.4rem;
  display: grid;
  gap: 0.42rem;
}

.breadcrumbs {
  color: var(--brown-500);
  font-size: 0.92rem;
}

.breadcrumbs a {
  color: var(--teal-600);
}

.filter-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.filter-group {
  display: grid;
  gap: 0.35rem;
}

.filter-group label {
  font-weight: 700;
}

.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.product-media {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}

.product-media img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  object-position: center top;
}

.product-media-layered {
  padding: 0.7rem;
  background: rgba(248, 255, 253, 0.86);
}

.product-media-layered img {
  min-height: 0;
}

.product-stage-detail {
  width: min(100%, 520px);
  margin: 0 auto;
}

.product-info {
  display: grid;
  gap: 0.6rem;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.chip {
  border-radius: 999px;
  border: 1px solid #b4e3dd;
  background: #dcf5f2;
  padding: 0.25rem 0.7rem;
  font-weight: 700;
  font-size: 0.9rem;
}

.cart-layout {
  display: grid;
  gap: 1rem;
}

.cart-item {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 0.8rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.7rem;
}

.cart-item-image {
  width: 90px;
  height: 90px;
  border-radius: 12px;
  object-fit: cover;
}

.cart-item h3 {
  margin: 0;
  font-size: 1.2rem;
}

.cart-item-meta {
  color: var(--brown-500);
  font-size: 0.92rem;
}

.cart-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.cart-summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: grid;
  gap: 0.6rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}

.summary-row.total {
  font-size: 1.1rem;
  color: #b66429;
}

.empty-state {
  background: #fff;
  border: 1px dashed #badfd8;
  border-radius: var(--radius-md);
  color: var(--brown-500);
  padding: 1rem;
}

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 1.2rem;
  padding: 1rem 0 1.4rem;
  color: var(--brown-500);
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1024px) {
  .header-star-logo {
    left: 22%;
  }

  .header-star-nav {
    right: 31%;
  }

  .header-cloud-actions {
    right: 5%;
  }

  .header-star-actions {
    right: 13%;
  }

  .nav-wrap {
    grid-template-columns: 200px auto 142px;
    column-gap: 0.7rem;
  }

  .brand {
    width: 200px;
  }

  .brand-logo-image {
    height: 52px;
    max-height: 52px;
  }

  .main-nav a {
    font-size: 1rem;
    padding: 0.58rem 0.66rem;
  }

  .icon-btn {
    width: 38px;
    height: 38px;
  }

  .cart-btn {
    width: 43px;
  }

  .hero,
  .product-layout {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-bar {
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 640px) {
  .header-cloud-left,
  .header-star-logo,
  .header-star-nav,
  .header-cloud-actions,
  .header-star-actions {
    display: none;
  }

  .nav-wrap {
    grid-template-columns: auto auto auto;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.55rem 0;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .main-nav {
    display: none;
    width: 100%;
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding: 0.4rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(97, 169, 165, 0.3);
    flex-wrap: wrap;
    background: #e6ebed;
  }

  .main-nav.open {
    display: flex;
  }

  .decor-cloud {
    opacity: 0.56;
  }

  .decor-star {
    opacity: 0.76;
  }

  .hero {
    width: 100%;
    padding-top: 1.3rem;
  }

  .hero-scene {
    min-height: 210px;
    object-fit: contain;
    object-position: center right;
  }

  .grid-3,
  .grid-2,
  .filter-bar {
    grid-template-columns: 1fr;
  }

  .section-head h2::before,
  .section-head h2::after {
    width: 32px;
  }

  .section-star-left {
    left: 1.4rem;
  }

  .section-star-right {
    right: 1.4rem;
  }

  .section-cloud-left,
  .section-cloud-right,
  .cta-cloud-left {
    display: none;
  }

  .cta-star-left {
    left: 1.2rem;
  }

  .cta-star-right {
    right: 1.2rem;
  }

  .cart-item {
    grid-template-columns: 1fr;
  }

  .cart-item-image {
    width: 100%;
    height: 180px;
  }

  .section {
    padding: 0.85rem;
  }

  .main-nav a {
    font-size: 1.1rem;
    border-right: none;
  }

  .brand {
    width: 168px;
    height: 48px;
  }

  .brand-logo-image {
    width: auto;
    height: 46px;
    max-height: 46px;
  }

  .actions {
    gap: 0.32rem;
  }

  .actions a[href="./products.html"] {
    display: none;
  }

  .icon-btn {
    width: 36px;
    height: 36px;
  }

  .cart-btn {
    width: 40px;
  }
}

@media (max-width: 1024px) {
  .header-cloud-left,
  .header-cloud-actions {
    display: none;
  }

  .header-star-logo,
  .header-star-nav,
  .header-star-actions {
    opacity: 0.58;
    transform: scale(0.78);
  }

  .hero-left-cloud,
  .hero-right-cloud,
  .section-cloud-left,
  .section-cloud-right,
  .cta-cloud-left,
  .cta-cloud-right {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero-reference {
    min-height: auto;
    padding: 2.9rem 1.05rem 2.25rem;
    background-size: auto 100%, auto 100%, 100% 100%;
    background-position: center, center, center;
  }

  .hero-reference::before {
    height: 28px;
    -webkit-mask:
      radial-gradient(circle at 15px 0, #000 0 17px, transparent 17.6px)
        left top / 29px 28px repeat-x;
    mask:
      radial-gradient(circle at 15px 0, #000 0 17px, transparent 17.6px)
        left top / 29px 28px repeat-x;
  }

  .hero-reference::after {
    height: 12px;
    -webkit-mask:
      radial-gradient(circle at 8px 12px, #000 0 7px, transparent 7.8px)
        left bottom / 15px 12px repeat-x;
    mask:
      radial-gradient(circle at 8px 12px, #000 0 7px, transparent 7.8px)
        left bottom / 15px 12px repeat-x;
  }

  .hero-scene {
    display: none;
  }

  .hero-scene-mobile {
    display: block;
    width: min(94vw, 390px);
    max-width: none;
    height: auto;
    margin: 0.4rem auto 0.1rem;
    filter: drop-shadow(0 10px 14px rgba(56, 126, 123, 0.1));
  }

  .hero-content {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
  }

  .welcome-line {
    font-size: clamp(1.2rem, 6vw, 1.58rem);
    line-height: 0.98;
  }

  .hero-wordmark {
    width: min(100%, 238px);
  }

  .subtitle-line,
  .subtitle-line-2 {
    white-space: normal;
    font-size: clamp(1rem, 4.6vw, 1.18rem);
    line-height: 1.02;
  }

  .hero-cta {
    width: min(338px, calc(100% - 0.6rem));
    margin: 0.85rem auto 0;
    gap: 0.42rem;
    flex-wrap: nowrap;
  }

  .hero .btn {
    width: auto;
    flex: 1 1 0;
    justify-content: center;
    min-height: 37px;
    padding-inline: 0.42rem;
    font-size: clamp(0.78rem, 3.45vw, 0.9rem);
  }

  .hero-left-cloud,
  .hero-right-cloud,
  .hero-left-star-2,
  .hero-left-star-3,
  .hero-right-star-2 {
    display: none;
  }
}

@media (prefers-color-scheme: dark) and (max-width: 1024px) {
  :root {
    color-scheme: dark;
    --brown-700: #f3ded0;
    --brown-500: #d4b8aa;
    --line: rgba(139, 218, 207, 0.34);
    --shadow-soft: 0 14px 28px rgba(1, 22, 25, 0.34);
  }

  body {
    color: var(--brown-700);
    background:
      linear-gradient(180deg, rgba(6, 42, 46, 0.72), rgba(7, 35, 39, 0.8)),
      url("./assets/page-original-clean-bg-v2.png"),
      linear-gradient(180deg, #0f4c50 0%, #12383d 100%);
    background-size: 100% 100%, cover, 100% 100%;
    background-position: center top, center top, center;
    background-attachment: scroll, scroll, scroll;
  }

  .site-header {
    background-color: #174e50;
    border-bottom-color: rgba(151, 221, 213, 0.28);
    box-shadow: 0 8px 22px rgba(1, 20, 23, 0.26);
  }

  .site-header::before {
    background:
      linear-gradient(180deg, rgba(2, 30, 34, 0.22), rgba(2, 30, 34, 0.38)),
      radial-gradient(ellipse at 18% 20%, rgba(255, 255, 255, 0.08), transparent 23%);
    mix-blend-mode: multiply;
  }

  .main-nav {
    background: rgba(232, 244, 244, 0.88);
    border-color: rgba(117, 190, 185, 0.32);
    box-shadow: 0 10px 22px rgba(3, 28, 31, 0.28);
  }

  .main-nav a {
    color: #4a3026;
  }

  .menu-toggle,
  .icon-btn {
    background: #218f8b;
    color: #f8fffc;
    border-color: rgba(174, 232, 225, 0.32);
    box-shadow: 0 8px 18px rgba(1, 24, 27, 0.28);
  }

  .menu-toggle {
    background: rgba(239, 251, 249, 0.92);
    color: #4a3026;
  }

  .hero-reference {
    background:
      linear-gradient(180deg, rgba(6, 45, 48, 0.18), rgba(6, 45, 48, 0.34)),
      url("./assets/hero-panel-background-wide.png"),
      linear-gradient(180deg, #205e60 0%, #164346 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    box-shadow:
      inset 0 20px 34px rgba(5, 37, 40, 0.18),
      inset 0 -28px 34px rgba(4, 28, 31, 0.25);
  }

  .hero-reference::before,
  .hero-reference::after {
    background:
      linear-gradient(180deg, rgba(6, 42, 46, 0.72), rgba(7, 35, 39, 0.8)),
      url("./assets/page-original-clean-bg-v2.png"),
      linear-gradient(180deg, #0f4c50 0%, #12383d 100%);
    background-size: 100% 100%, cover, 100% 100%;
    background-position: center top, center top, center;
    background-attachment: scroll, scroll, scroll;
  }

  .welcome-line {
    color: #fff9ef;
    text-shadow:
      -1.4px -1.4px 0 #4b2f26,
      1.4px -1.4px 0 #4b2f26,
      -1.4px 1.4px 0 #4b2f26,
      1.4px 1.4px 0 #4b2f26,
      0 2px 0 rgba(24, 18, 15, 0.24);
  }

  .subtitle-line,
  .subtitle-line-2,
  h2,
  h3,
  .card-product-name,
  .cart-item h3 {
    color: #f5dfd2;
    text-shadow: 0 1px 0 rgba(28, 19, 16, 0.18);
  }

  .section,
  .card,
  .cart-item,
  .cart-summary,
  .product-detail-card {
    color-scheme: dark;
    background:
      radial-gradient(circle at 12% 0, rgba(255, 255, 255, 0.08), transparent 30%),
      linear-gradient(180deg, rgba(21, 78, 80, 0.88) 0%, rgba(14, 58, 62, 0.9) 100%);
    border-color: rgba(137, 216, 207, 0.34);
    box-shadow: var(--shadow-soft);
  }

  .section-head p,
  .card p,
  .cart-item-meta,
  .old-price {
    color: #d7c4b9;
  }

  .product-stage,
  .card-media,
  .cart-item-image {
    background: #173f43;
    border-color: rgba(137, 216, 207, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .card-info {
    color-scheme: dark;
    background:
      radial-gradient(circle at 16% 0, rgba(255, 255, 255, 0.08), transparent 36%),
      linear-gradient(180deg, rgba(19, 70, 73, 0.9), rgba(14, 55, 58, 0.94));
    border-color: rgba(137, 216, 207, 0.34);
  }

  .card-info::before {
    opacity: 0.24;
  }

  .card-info h3,
  .card-product-name,
  .price {
    color: #f4d8c6;
    text-shadow: none;
  }

  .buy-text,
  .buy-letter {
    color: #ffd45f;
    -webkit-text-stroke: 0.7px #4b2f26;
    text-shadow:
      0 1px 0 #4b2f26,
      0 2px 0 rgba(25, 18, 14, 0.18);
  }

  img,
  .hero-wordmark,
  .brand-logo-image,
  .product-layer,
  .hero-scene,
  .hero-scene-mobile {
    color-scheme: light;
  }

  .btn-secondary {
    color: #4a3026;
    background: linear-gradient(145deg, #9ed9e7, #77c4d8);
    border-color: rgba(151, 219, 233, 0.58);
  }

  .btn-primary,
  .buy-pill {
    box-shadow:
      0 3px 0 rgba(3, 72, 70, 0.5),
      0 9px 18px rgba(1, 24, 27, 0.28);
  }

  .decor-cloud,
  .header-cloud {
    opacity: 0.72;
    filter:
      drop-shadow(0 2px 0 rgba(6, 45, 48, 0.2))
      drop-shadow(0 0 7px rgba(255, 255, 255, 0.32));
  }

  .decor-star,
  .header-star {
    opacity: 0.86;
    filter:
      drop-shadow(0 1px 0 rgba(71, 45, 14, 0.22))
      drop-shadow(0 0 5px rgba(255, 209, 83, 0.24));
  }
}

@media (prefers-color-scheme: dark) and (max-width: 640px) {
  .main-nav {
    background: rgba(235, 245, 245, 0.94);
  }

  .hero-reference {
    background-size: auto 100%, auto 100%, 100% 100%;
  }

  .hero-scene-mobile {
    filter: drop-shadow(0 12px 16px rgba(1, 23, 25, 0.24));
  }

  .section {
    background:
      radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.08), transparent 30%),
      linear-gradient(180deg, rgba(20, 75, 78, 0.92), rgba(14, 55, 58, 0.95));
  }
}