:root {
        --cream: #fef9ed;
        --cream-2: #f5ecda;
        --paper: #fffdf7;
        --sage: #435137;
        --sage-2: #d8e8c5;
        --sage-3: #6a775d;
        --clay: #98471c;
        --clay-2: #ffdbcc;
        --rose: #efbba2;
        --ink: #1d1c15;
        --muted: #555247;
        --line: #d8cbb7;
        --shadow: 0 24px 70px rgba(63, 41, 24, 0.16);
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        background: var(--cream);
        color: var(--ink);
        font-family: Montserrat, system-ui, sans-serif;
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(255,255,255,0.45), rgba(255,255,255,0.16)),
          url("https://www.transparenttextures.com/patterns/natural-paper.png");
        opacity: 0.32;
        z-index: 50;
      }

      a { color: inherit; }
      button, input, select { font: inherit; }

      .topbar {
        position: fixed;
        inset: 0 0 auto;
        z-index: 40;
        height: 76px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 clamp(18px, 4vw, 64px);
        background: rgba(254, 249, 237, 0.88);
        border-bottom: 1px solid rgba(216, 203, 183, 0.72);
        backdrop-filter: blur(18px);
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
      }

      .brand-mark {
        width: 48px;
        height: 48px;
        display: grid;
        place-items: center;
        border-radius: 0;
        background: transparent;
        color: inherit;
        font-weight: 800;
        overflow: hidden;
      }

      .brand-mark img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .brand strong {
        display: block;
        font-family: "Playfair Display", Georgia, serif;
        color: var(--clay);
        font-size: 1.2rem;
        line-height: 1;
      }

      .brand span:last-child {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 0.78rem;
      }

      .nav {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .nav a {
        padding: 10px 13px;
        border-radius: 999px;
        color: var(--muted);
        text-decoration: none;
        font-size: 0.88rem;
        font-weight: 700;
      }

      .nav a:hover,
      .nav a:focus-visible {
        background: var(--sage-2);
        color: var(--sage);
        outline: none;
      }

      .nav .whatsapp-link {
        background: var(--clay);
        color: white;
      }

      .page {
        overflow: hidden;
        padding-top: 76px;
      }

      .shell {
        width: min(1240px, calc(100% - 32px));
        margin: 0 auto;
      }

      .hero {
        position: relative;
        min-height: calc(100vh - 76px);
        padding: clamp(38px, 6vw, 78px) 0 clamp(92px, 10vw, 150px);
        background:
          radial-gradient(circle at 8% 12%, rgba(255, 219, 204, 0.55), transparent 22rem),
          var(--cream);
        border-bottom-left-radius: 70% 9%;
        border-bottom-right-radius: 70% 9%;
      }

      .hero::before {
        content: "";
        position: absolute;
        inset: 0 0 4%;
        z-index: 0;
        background: var(--sage);
        clip-path: ellipse(104% 82% at 38% 7%);
      }

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

      .brand-bird {
        position: absolute;
        z-index: 2;
        pointer-events: none;
        user-select: none;
        filter: drop-shadow(0 14px 22px rgba(31, 24, 15, 0.18));
      }

      .brand-bird img {
        display: block;
        width: 100%;
        height: auto;
      }

      .brand-bird--hero {
        width: clamp(116px, 13vw, 186px);
        left: clamp(18px, 5vw, 86px);
        bottom: clamp(52px, 8vw, 122px);
        transform: rotate(-12deg) scaleX(-1);
      }

      .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
        gap: clamp(32px, 5vw, 76px);
        align-items: start;
      }

      .eyebrow {
        margin: 0;
        color: var(--clay-2);
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .hero h1,
      h2,
      h3 {
        margin: 0;
        font-family: "Playfair Display", Georgia, serif;
        text-wrap: balance;
      }

      .hero h1 {
        max-width: 650px;
        margin-top: 18px;
        color: white;
        font-size: clamp(2.85rem, 5.9vw, 5.65rem);
        line-height: 0.98;
        letter-spacing: -0.02em;
      }

      .hero-copy {
        max-width: 610px;
        margin: 26px 0 0;
        color: rgba(255,255,255,0.86);
        font-size: clamp(1rem, 1.25vw, 1.12rem);
        line-height: 1.7;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 32px;
      }

      .hero-actions .category-jump {
        display: none;
      }

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0 22px;
        border: 1px solid rgba(255,255,255,0.38);
        border-radius: 999px;
        background: rgba(255,255,255,0.12);
        color: white;
        text-decoration: none;
        font-weight: 800;
        cursor: pointer;
      }

      .button.primary {
        background: var(--paper);
        color: var(--sage);
        box-shadow: 0 15px 36px rgba(31, 24, 15, 0.18);
      }



      @keyframes blobBreath {
        0%, 100% { border-radius: var(--blob-a); transform: translate3d(0,0,0) rotate(var(--blob-rotate, 0deg)); }
        50% { border-radius: var(--blob-b); transform: translate3d(0,-6px,0) rotate(calc(var(--blob-rotate, 0deg) * -1)); }
      }

      @keyframes blobImageDrift {
        0%, 100% { transform: scale(1.04) translate3d(0,0,0); }
        50% { transform: scale(1.1) translate3d(-2%, 1%, 0); }
      }

      .blob-shape {
        --blob-a: 58% 42% 34% 66% / 52% 35% 65% 48%;
        --blob-b: 38% 62% 56% 44% / 44% 55% 45% 56%;
        border-radius: var(--blob-a);
      }

      .blob-soft {
        position: relative;
        border-radius: var(--blob-a);
        isolation: isolate;
      }

      .blob-soft::before {
        content: "";
        position: absolute;
        inset: -10px;
        z-index: -1;
        border-radius: inherit;
        background: rgba(216, 232, 197, 0.42);
        transform: rotate(-3deg);
      }

      .hero-art {
        position: relative;
        min-height: 620px;
      }

      .hero-photo {
        --blob-a: 62% 38% 31% 69% / 55% 33% 67% 45%;
        --blob-b: 46% 54% 61% 39% / 42% 58% 42% 58%;
        --blob-rotate: -1.5deg;
        position: absolute;
        inset: 0 0 0 10%;
        overflow: hidden;
        border: 14px solid rgba(255,255,255,0.14);
        border-radius: var(--blob-a);
        background: var(--cream-2);
        box-shadow: var(--shadow);
        animation: blobBreath 11s ease-in-out infinite;
      }

      .hero-photo::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(135deg, rgba(74, 91, 65, 0.16), rgba(176, 98, 51, 0.10)),
          url("assets/builder/portad1.jpg");
        background-size: cover;
        background-position: center;
      }

      .hero-photo::after {
        content: "";
        position: absolute;
        inset: 8%;
        border: 1px solid rgba(255,255,255,0.42);
        border-radius: 45% 55% 62% 38% / 48% 39% 61% 52%;
        pointer-events: none;
      }

      .hero-photo img {
        display: none;
      }

      .floating-note {
        --blob-a: 68% 32% 62% 38% / 31% 54% 46% 69%;
        --blob-b: 42% 58% 39% 61% / 62% 35% 65% 38%;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        left: 0;
        bottom: 30px;
        width: min(300px, 68%);
        padding: 26px 24px 30px;
        border: 1px solid rgba(216, 203, 183, 0.8);
        border-radius: var(--blob-a);
        background: rgba(255,253,247,0.95);
        box-shadow: var(--shadow);
        text-align: center;
        animation: blobBreath 13s ease-in-out infinite;
      }

      .floating-note strong {
        display: block;
        color: var(--clay);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 1.3rem;
      }

      .floating-note span {
        display: none;
        margin-top: 8px;
        color: var(--muted);
        font-size: 0.9rem;
        line-height: 1.45;
      }

      .intro-categories {
        position: relative;
        z-index: 2;
        margin-top: -54px;
        padding-bottom: clamp(70px, 8vw, 120px);
      }

      .category-band {
        position: relative;
        z-index: 1;
        padding: clamp(8px, 2vw, 18px) 0 0;
      }

      .category-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 24px;
      }

      .category-heading h2 {
        color: var(--sage);
        font-size: clamp(1.8rem, 4vw, 3.1rem);
      }

      .category-heading p {
        display: none;
      }

      .category-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(12px, 2vw, 22px);
        align-items: center;
      }

      .category-tile {
        --blob-a: 62% 38% 34% 66% / 48% 34% 66% 52%;
        --blob-b: 38% 62% 57% 43% / 57% 43% 57% 43%;
        --tile-color: var(--sage);
        position: relative;
        min-height: clamp(150px, 18vw, 224px);
        aspect-ratio: 1.08;
        overflow: hidden;
        border: 0;
        border-radius: var(--blob-a);
        background: var(--sage);
        color: white;
        cursor: pointer;
        text-align: left;
        box-shadow: 0 18px 42px rgba(66, 41, 24, 0.16);
        animation: blobBreath var(--blob-speed, 14s) ease-in-out infinite;
        animation-delay: var(--blob-delay, 0s);
      }

      .category-tile--photo {
        background: var(--tile-color);
      }

      .category-tile--photo::before {
        content: "";
        position: absolute;
        inset: 13px;
        z-index: 0;
        border: 8px solid var(--tile-color);
        border-radius: inherit;
        background-image: var(--tile-image);
        background-size: cover;
        background-position: center;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
        transform: rotate(-1deg) scale(1.01);
      }

      .category-tile:nth-child(1) {
        border-radius: 52% 48% 42% 58% / 55% 40% 60% 45%;
        --blob-speed: 13s;
        --blob-delay: -1.5s;
      }

      .category-tile:nth-child(2) {
        border-radius: 34% 66% 54% 46% / 58% 43% 57% 42%;
        transform: translateY(18px);
        --blob-speed: 16s;
        --blob-delay: -6s;
      }

      .category-tile:nth-child(3) {
        border-radius: 70% 30% 42% 58% / 42% 57% 43% 58%;
        transform: translateY(-8px);
        --blob-speed: 12s;
        --blob-delay: -3.25s;
      }

      .category-tile:nth-child(4) {
        border-radius: 46% 54% 63% 37% / 54% 39% 61% 46%;
        background: var(--clay);
        transform: translateY(8px);
        --blob-speed: 17s;
        --blob-delay: -9s;
      }

      .category-tile img {
        display: none;
      }

      .category-tile::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          radial-gradient(circle at 74% 24%, rgba(255,255,255,0.22), transparent 0 18%, transparent 22%),
          linear-gradient(180deg, rgba(18,15,10,0.02), rgba(18,15,10,0.16));
      }

      .category-tile:hover img,
      .category-tile:focus-visible img {
        transform: scale(1.06);
      }

      .category-tile span {
        position: absolute;
        left: 12%;
        right: 9%;
        bottom: 10%;
        z-index: 2;
        display: grid;
        place-items: center;
        min-height: 72px;
        padding: 16px 18px 18px;
        border: 1px solid rgba(216, 203, 183, 0.88);
        border-radius: 62% 38% 54% 46% / 39% 58% 42% 61%;
        background: rgba(255,253,247,0.94);
        color: var(--clay);
        text-align: center;
        box-shadow: 0 12px 30px rgba(66, 41, 24, 0.14);
        font-family: "Playfair Display", Georgia, serif;
        font-size: clamp(1.35rem, 2.3vw, 2rem);
        font-weight: 700;
        line-height: 1;
        text-wrap: balance;
      }

      .category-tile:nth-child(1) span {
        left: 10%;
        right: 12%;
        bottom: 11%;
        border-radius: 54% 46% 35% 65% / 58% 36% 64% 42%;
      }

      .category-tile:nth-child(2) span {
        left: 9%;
        right: 15%;
        bottom: 13%;
        border-radius: 35% 65% 57% 43% / 42% 59% 41% 58%;
      }

      .category-tile:nth-child(3) span {
        left: 13%;
        right: 8%;
        bottom: 8%;
        border-radius: 66% 34% 45% 55% / 45% 38% 62% 55%;
      }

      .category-tile:nth-child(4) span {
        left: 9%;
        right: 9%;
        bottom: 12%;
        border-radius: 42% 58% 61% 39% / 61% 41% 59% 39%;
      }

      .category-tile em {
        position: absolute;
        z-index: 1;
        top: 18px;
        left: 22px;
        font-style: normal;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0.9;
      }

      .catalog-section {
        padding: clamp(16px, 2.4vw, 32px) 0 clamp(60px, 8vw, 100px);
      }

      .catalog-section > .section-head {
        padding-left: clamp(18px, 3.5vw, 46px);
        margin-bottom: 20px;
      }

      .catalog-section > .section-head h2 {
        color: var(--clay);
      }

      .section-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 28px;
      }

      .section-head .eyebrow {
        color: var(--clay);
      }

      .section-head h2 {
        margin-top: 8px;
        color: var(--ink);
        font-size: clamp(1.9rem, 3.2vw, 2.8rem);
        line-height: 1.05;
      }

      .catalog-tools {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
      }

      .catalog-tools select,
      .catalog-tools input {
        min-height: 46px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--paper);
        color: var(--ink);
        padding: 0 16px;
      }

      .catalog-tools input {
        width: min(330px, 100%);
      }

      .catalog-tools input[type="hidden"] {
        display: none;
      }

      .notice {
        display: none;
        max-width: 100%;
        margin-top: 18px;
        padding: 12px 16px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--paper);
        color: var(--muted);
        font-size: 0.92rem;
      }

      .notice strong {
        color: var(--clay);
      }

      .catalog-groups {
        display: grid;
        gap: 66px;
      }

      .catalog-family {
        position: relative;
        display: grid;
        gap: 22px;
      }

      .family-perch-bird {
        position: absolute;
        top: 0;
        width: clamp(48px, 6vw, 72px);
        height: auto;
        transform: translate(-50%, calc(var(--bird-bottom, 0.85) * -100%)) rotate(-6deg);
        filter: drop-shadow(0 8px 12px rgba(63, 41, 24, 0.22));
        z-index: 2;
        pointer-events: none;
      }

      .family-perch-bird.is-flipped {
        transform: translate(-50%, calc(var(--bird-bottom, 0.85) * -100%)) scaleX(-1) rotate(6deg);
      }

      .family-head {
        position: relative;
        min-height: 110px;
        display: grid;
        align-items: center;
        overflow: hidden;
        padding: 16px clamp(22px, 4vw, 46px);
        border-radius: 72px 26px 72px 26px;
        background: var(--sage-2);
      }

      .family-head::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(19,31,9,0.08), rgba(255,255,255,0.28));
      }

      .family-head h3 {
        position: relative;
        z-index: 1;
        color: var(--sage);
        font-size: clamp(1.7rem, 3vw, 2.6rem);
        line-height: 1;
      }

      .family-head p {
        position: relative;
        z-index: 1;
        max-width: 560px;
        margin: 10px 0 0;
        color: var(--muted);
        line-height: 1.5;
      }

      .catalog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 24px;
        align-items: start;
      }

      .catalog-grid .product-card:nth-child(3n + 2) {
        margin-top: 42px;
      }

      .catalog-grid .product-card:nth-child(4n) {
        margin-top: 18px;
      }

      .catalog-grid .product-card:nth-child(4n + 1) {
        --media-a: 58% 42% 35% 65% / 43% 61% 39% 57%;
        --media-b: 36% 64% 62% 38% / 59% 37% 63% 41%;
        --media-speed: 13s;
        --media-delay: -1.5s;
        --media-rotate: -8deg;
        --media-x: -3%;
        --media-y: 1%;
      }

      .catalog-grid .product-card:nth-child(4n + 2) {
        --media-a: 39% 61% 68% 32% / 58% 35% 65% 42%;
        --media-b: 72% 28% 44% 56% / 36% 68% 32% 64%;
        --media-speed: 21s;
        --media-delay: -10s;
        --media-rotate: 7deg;
        --media-x: 2%;
        --media-y: -2%;
      }

      .catalog-grid .product-card:nth-child(4n + 3) {
        --media-a: 69% 31% 51% 49% / 35% 63% 37% 65%;
        --media-b: 41% 59% 29% 71% / 65% 39% 61% 35%;
        --media-speed: 11s;
        --media-delay: -3.25s;
        --media-rotate: 3deg;
        --media-x: 4%;
        --media-y: 2%;
      }

      .catalog-grid .product-card:nth-child(4n) {
        --media-a: 47% 53% 33% 67% / 69% 43% 57% 31%;
        --media-b: 64% 36% 73% 27% / 38% 62% 38% 62%;
        --media-speed: 16s;
        --media-delay: -7s;
        --media-rotate: -4deg;
        --media-x: -1%;
        --media-y: -3%;
      }

      .catalog-grid .product-card:nth-child(6n + 1) {
        --media-a: 31% 69% 56% 44% / 42% 70% 30% 58%;
        --media-b: 68% 32% 37% 63% / 61% 34% 66% 39%;
        --media-rotate: 9deg;
      }

      .catalog-grid .product-card:nth-child(6n + 4) {
        --media-a: 72% 28% 62% 38% / 48% 31% 69% 52%;
        --media-b: 35% 65% 49% 51% / 32% 70% 30% 68%;
        --media-rotate: -10deg;
      }

      .catalog-grid .product-card:nth-child(7n + 5) {
        --media-a: 44% 56% 27% 73% / 54% 39% 61% 46%;
        --media-b: 63% 37% 70% 30% / 34% 66% 34% 66%;
        --media-delay: -11s;
        --media-rotate: 5deg;
      }

      .product-card {
        display: grid;
        gap: 0;
        padding: 12px;
        overflow: hidden;
        border: 1px solid rgba(216, 203, 183, 0.72);
        border-radius: 24px;
        background: var(--paper);
        box-shadow: 0 14px 36px rgba(69, 47, 28, 0.08);
        cursor: default;
        text-align: left;
        transition: transform 260ms ease, box-shadow 260ms ease;
      }

      .product-card:hover,
      .product-card:focus-visible {
        transform: translateY(-3px);
        box-shadow: 0 22px 54px rgba(69, 47, 28, 0.14);
        outline: none;
      }

      .product-media {
        --media-a: 54% 46% 31% 69% / 36% 59% 41% 64%;
        --media-b: 38% 62% 58% 42% / 52% 34% 66% 48%;
        --media-speed: 14s;
        --media-delay: 0s;
        --media-rotate: 0deg;
        --media-x: 0%;
        --media-y: 0%;
        position: relative;
        display: block;
        width: 92%;
        margin: 6px auto 0;
        padding: 0;
        border: 9px solid var(--solid-color, var(--cream-2));
        aspect-ratio: 1 / 1.06;
        overflow: visible;
        border-radius: var(--media-a);
        background: var(--solid-color, var(--cream-2));
        color: inherit;
        cursor: zoom-in;
        animation: mediaBlob var(--media-speed) ease-in-out infinite;
        animation-delay: var(--media-delay);
      }

      .catalog-grid .product-card:nth-child(2n) .product-media {
        animation-direction: reverse;
      }

      .catalog-grid .product-card:nth-child(3n) .product-media {
        width: 86%;
        aspect-ratio: 1.04 / 1;
      }

      .catalog-grid .product-card:nth-child(5n) .product-media {
        width: 94%;
        aspect-ratio: 1 / 0.92;
      }

      .product-media::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background:
          radial-gradient(circle at 72% 24%, rgba(255,255,255,0.28), transparent 0 16%, transparent 21%),
          linear-gradient(145deg, rgba(255,255,255,0.14), rgba(31,24,15,0.18)),
          var(--media-image, linear-gradient(var(--solid-color), var(--solid-color)));
        background-size: cover;
        background-position: center;
        transition: transform 700ms ease;
      }

      .product-card:hover .product-media::before {
        transform: scale(1.09) rotate(-1deg);
      }

      .product-bird {
        position: absolute;
        right: 1%;
        bottom: 1%;
        z-index: 5;
        width: clamp(67px, 32.5%, 130px);
        max-height: 50%;
        object-fit: contain;
        pointer-events: none;
        filter: drop-shadow(0 10px 18px rgba(31, 24, 15, 0.22));
      }

      .product-bird--left {
        right: auto;
        left: 1%;
      }

      .product-bird--right {
        right: 1%;
        left: auto;
      }

      .product-bird--large {
        width: clamp(76px, 35.7%, 143px);
        max-height: 54%;
      }

      .product-bird--tarta {
        width: clamp(74px, 35.8%, 143px);
        max-height: 55%;
      }

      .product-bird--golosina {
        right: -18%;
        bottom: -20%;
        left: auto;
        width: clamp(152px, 73.2%, 293px);
        max-height: 92%;
      }

      @keyframes mediaBlob {
        0%, 100% {
          border-radius: var(--media-a);
          transform: translate3d(var(--media-x), var(--media-y), 0) rotate(var(--media-rotate)) scaleX(var(--media-flip, 1));
        }
        50% {
          border-radius: var(--media-b);
          transform: translate3d(calc(var(--media-x) * -1), calc(var(--media-y) * -1), 0) rotate(calc(var(--media-rotate) * -1)) scaleX(var(--media-flip, 1));
        }
      }

      .product-body {
        display: grid;
        gap: 11px;
        padding: 18px 18px 20px;
        border-radius: 18% 7% 21% 9% / 8% 20% 8% 17%;
        background: rgba(255,253,247,0.88);
      }

      .product-body h3 {
        color: var(--clay);
        font-size: 1.7rem;
        line-height: 1.05;
      }

      .product-body p {
        margin: 0;
        color: var(--muted);
        line-height: 1.5;
      }

      .quick-config {
        display: grid;
        gap: 8px;
        margin-top: 8px;
      }

      .quick-config details {
        border-top: 1px solid var(--line);
        padding-top: 8px;
      }

      .quick-config summary {
        display: none;
      }

      .quick-config select {
        width: 100%;
        min-height: 38px;
        margin-top: 7px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: white;
        color: var(--ink);
        padding: 0 10px;
      }

      .quick-config select.quick-format--fixed {
        border: none;
        background: transparent;
        padding: 0 0 0 2px;
        appearance: none;
        -webkit-appearance: none;
        pointer-events: none;
        color: var(--ink);
        opacity: 1;
        font-weight: 600;
      }

      .option-help {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        margin: 4px auto 2px;
        padding: 6px 9px 7px;
        border: 1px solid rgba(216, 203, 183, 0.92);
        border-radius: 10px;
        background: rgba(255, 253, 247, 0.96);
        color: var(--muted);
        font-size: 0.7rem;
        line-height: 1.28;
        text-align: center;
        box-shadow: 0 6px 16px rgba(69, 47, 28, 0.05);
      }

      .option-help::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        width: 10px;
        height: 10px;
        border-left: 1px solid rgba(216, 203, 183, 0.82);
        border-top: 1px solid rgba(216, 203, 183, 0.82);
        background: rgba(255, 253, 247, 0.96);
        transform: translateX(-50%) rotate(45deg);
      }

      .reserve-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 10px;
      }

      .summary-item .reserve-row {
        justify-content: space-between;
      }

      .reserve-row strong {
        color: var(--clay);
      }

      .reserve-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0 13px;
        border-radius: 999px;
        background: var(--clay);
        color: white;
        text-decoration: none;
        font-size: 0.82rem;
        font-weight: 800;
      }

      .reserve-button:focus-visible {
        outline: 3px solid rgba(67, 81, 55, 0.28);
        outline-offset: 3px;
      }

      .option-error {
        min-height: 20px;
        color: #8b2d1d;
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.35;
      }

      .price {
        color: var(--clay);
        font-weight: 800;
      }

      .open-detail {
        color: var(--sage);
        font-weight: 800;
      }

      .builder-section {
        position: relative;
        padding: clamp(64px, 8vw, 110px) 0;
        background: var(--sage);
        color: white;
        border-bottom-left-radius: 55% 8%;
        border-bottom-right-radius: 55% 8%;
        overflow-x: clip;
      }

      .builder-box {
        display: grid;
        width: min(1500px, calc(100% - clamp(48px, 7vw, 120px)));
        grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
        gap: clamp(36px, 4vw, 88px);
        align-items: center;
      }

      .builder-box h2 {
        max-width: 440px;
        font-size: clamp(2.45rem, 3.7vw, 4rem);
        line-height: 1.05;
      }

      .builder-title-line {
        display: block;
        white-space: nowrap;
      }

      .builder-box p {
        max-width: 460px;
        color: rgba(255,255,255,0.76);
        line-height: 1.65;
      }

      .builder-card {
        display: grid;
        grid-template-columns: minmax(360px, 560px) minmax(260px, 320px);
        gap: clamp(28px, 3vw, 64px);
        align-items: center;
        padding: 24px 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        min-width: 0;
      }

      .builder-card a {
        width: 100%;
        margin-top: 14px;
      }

      .layer-cake {
        position: relative;
        min-height: 0;
        display: grid;
        gap: 4px;
        isolation: isolate;
        overflow: visible;
      }

      .layer-cake::before {
        content: none;
        position: absolute;
        left: 45%;
        bottom: 28px;
        width: 74%;
        height: 34px;
        border-radius: 50%;
        background: rgba(20, 18, 14, 0.22);
        filter: blur(8px);
        transform: translateX(-50%) rotate(-3deg);
        z-index: -1;
      }

      .layer-cake::after {
        content: none;
        position: absolute;
        left: 12%;
        top: 16%;
        width: 58px;
        height: 180px;
        border-left: 1px solid rgba(255,255,255,0.18);
        border-radius: 70% 0 0 50%;
        opacity: 0.7;
      }

      .layer {
        position: absolute;
        left: 43%;
        width: min(66%, 310px);
        transform: translateX(-50%) rotate(-2deg);
        box-shadow: inset 0 -16px 26px rgba(81,45,28,0.13), 0 18px 30px rgba(28, 22, 15, 0.18);
      }

      .layer.top {
        top: 36px;
        height: 92px;
        border-radius: 53% 47% 49% 51% / 34% 38% 62% 66%;
        background:
          radial-gradient(circle at 28% 32%, #7c4a2e 0 5px, transparent 6px),
          radial-gradient(circle at 46% 22%, #d9a441 0 5px, transparent 6px),
          radial-gradient(circle at 62% 35%, #6f7d55 0 6px, transparent 7px),
          radial-gradient(circle at 72% 20%, #5b2b22 0 4px, transparent 5px),
          radial-gradient(ellipse at 36% 58%, rgba(255,255,255,0.72), transparent 42%),
          linear-gradient(160deg, #fff3df, #e6c394 58%, #bd7a4d);
      }

      .layer.top::before,
      .layer.top::after,
      .layer.fill::before,
      .layer.base::before {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .layer.top::before {
        inset: 18px 20px auto 20px;
        height: 26px;
        border-radius: 50%;
        border-top: 8px solid rgba(255,255,255,0.54);
        transform: rotate(-2deg);
      }

      .layer.top::after {
        left: 24%;
        top: 12%;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #5b2b22;
        box-shadow:
          34px 12px 0 #d9a441,
          68px 2px 0 #6f7d55,
          96px 18px 0 #7c4a2e,
          124px 5px 0 #f1d5b8,
          142px 24px 0 #5b2b22;
      }

      .layer.fill {
        top: 182px;
        height: 88px;
        width: min(70%, 330px);
        border-radius: 54% 46% 43% 57% / 35% 40% 60% 65%;
        background:
          radial-gradient(circle at 30% 34%, rgba(255,255,255,0.45), transparent 20%),
          radial-gradient(circle at 55% 25%, #d9bd7a 0 13px, transparent 14px),
          radial-gradient(circle at 42% 38%, #f4e2bd 0 16px, transparent 17px),
          linear-gradient(90deg, #f3d9a9, #e5bc78 52%, #c98950);
        transform: translateX(-50%) rotate(2deg);
      }

      .layer.fill::before {
        left: 15%;
        top: 14px;
        width: 72%;
        height: 24px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, #9e5b2f 18%, #c77937 42%, transparent 78%);
        transform: rotate(-5deg);
      }

      .layer.base {
        top: 318px;
        height: 112px;
        width: min(62%, 295px);
        border-radius: 48% 52% 45% 55% / 22% 27% 73% 78%;
        background:
          radial-gradient(circle at 18% 34%, rgba(255,255,255,0.11) 0 2px, transparent 3px),
          radial-gradient(circle at 34% 68%, rgba(255,255,255,0.09) 0 2px, transparent 3px),
          radial-gradient(circle at 72% 45%, rgba(255,255,255,0.1) 0 2px, transparent 3px),
          radial-gradient(circle at 52% 28%, #1c0e0a 0 5px, transparent 6px),
          linear-gradient(145deg, #6b3328, #351813 72%);
      }

      .layer.base::before {
        left: 14%;
        top: -34px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(255,241,219,0.72);
        box-shadow:
          28px -18px 0 rgba(255,241,219,0.45),
          58px 4px 0 rgba(255,241,219,0.52),
          94px -26px 0 rgba(255,241,219,0.38),
          126px -8px 0 rgba(255,241,219,0.5),
          158px -30px 0 rgba(255,241,219,0.32);
      }

      .layer-label {
        position: absolute;
        right: 0;
        width: min(34%, 150px);
        color: rgba(255,255,255,0.88);
        font-size: 0.78rem;
        line-height: 1.25;
        font-weight: 600;
      }

      .layer-label::before {
        content: "";
        position: absolute;
        right: calc(100% + 9px);
        top: 16px;
        width: 66px;
        height: 1px;
        background: rgba(255,255,255,0.66);
      }

      .layer-label::after {
        content: "";
        position: absolute;
        right: calc(100% + 72px);
        top: 11px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255,253,247,0.96);
        box-shadow: 0 0 0 5px rgba(255,255,255,0.14);
      }

      .layer-label strong {
        display: block;
        color: #fff8ec;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(1.2rem, 2vw, 1.55rem);
        line-height: 1;
        margin-bottom: 5px;
      }

      .layer-label.top-note { top: 64px; }
      .layer-label.fill-note { top: 212px; }
      .layer-label.base-note { top: 348px; }

      .cake-photo {
        display: block;
        width: min(88%, 360px);
        height: auto;
        object-fit: contain;
        margin: 0 auto;
        pointer-events: none;
        user-select: none;
        filter: drop-shadow(0 16px 22px rgba(18, 15, 10, 0.22));
      }

      .cake-photo.topping {
        width: min(80%, 320px);
      }

      .cake-photo.cream {
        width: min(74%, 360px);
      }

      .cake-photo.base {
        width: min(76%, 340px);
      }

      .cake-step {
        display: grid;
        gap: 8px;
        margin-bottom: 22px;
      }

      .cake-step:last-child {
        margin-bottom: 0;
      }

      .cake-step-text {
        display: block;
        max-width: 320px;
        margin: 0 auto;
        color: rgba(255,255,255,0.82);
        font-size: 0.78rem;
        line-height: 1.25;
        font-weight: 600;
        text-align: center;
      }

      .cake-step-text strong {
        display: block;
        color: #fff8ec;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(1.25rem, 2vw, 1.7rem);
        line-height: 1;
        margin-bottom: 5px;
      }

      .layer-cake {
        min-height: 500px;
        display: block;
      }

      .cake-step {
        display: contents;
      }

      .cake-step-text {
        position: absolute;
        right: 4%;
        width: min(32%, 150px);
        max-width: none;
        margin: 0;
        text-align: left;
        color: rgba(255,255,255,0.88);
      }

      .cake-step-text::before {
        content: "";
        position: absolute;
        right: calc(100% + 9px);
        top: 16px;
        width: 58px;
        height: 1px;
        background: rgba(255,255,255,0.66);
      }

      .cake-step-text::after {
        content: "";
        position: absolute;
        right: calc(100% + 64px);
        top: 11px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255,253,247,0.96);
        box-shadow: 0 0 0 5px rgba(255,255,255,0.14);
      }

      .cake-step:nth-child(1) .cake-step-text { top: 62px; }
      .cake-step:nth-child(2) .cake-step-text { top: 218px; }
      .cake-step:nth-child(3) .cake-step-text { top: 372px; }

      .cake-photo {
        position: absolute;
        left: 33%;
        margin: 0;
        transform: translateX(-50%);
      }

      .cake-photo.topping {
        top: 32px;
        width: min(58%, 285px);
        transform: translateX(-50%) rotate(-2deg);
      }

      .cake-photo.cream {
        top: 184px;
        width: min(64%, 320px);
        transform: translateX(-50%) rotate(1.2deg);
      }

      .cake-photo.base {
        top: 334px;
        width: min(60%, 300px);
        transform: translateX(-50%) rotate(-1deg);
      }

      .builder-card .layer-cake {
        min-height: 0;
        display: grid;
        gap: 18px;
        width: 100%;
        border: 0;
        border-radius: 0;
        overflow: visible;
      }

      .builder-card .cake-step {
        display: grid;
        gap: 8px;
      }

      .builder-card .cake-photo {
        position: static;
        left: auto;
        display: block;
        margin: 0 auto;
        transform: none;
      }

      .builder-card .cake-photo.topping {
        width: min(54%, 300px);
        transform: rotate(-2deg);
      }

      .builder-card .cake-photo.cream {
        width: min(62%, 350px);
        transform: rotate(1.2deg);
      }

      .builder-card .cake-photo.base {
        width: min(58%, 330px);
        transform: rotate(-1deg);
      }

      .builder-card .cake-step-text {
        position: static;
        left: auto;
        right: auto;
        width: min(90%, 340px);
        max-width: none;
        margin: 0 auto;
        transform: none;
        text-align: center;
        padding: 0;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        text-shadow: none;
      }

      .builder-card .cake-step-text::before {
        content: none;
        position: absolute;
        right: calc(100% + 9px);
        top: 16px;
        width: 54px;
        height: 1px;
        background: rgba(255,255,255,0.66);
      }

      .builder-card .cake-step-text::after {
        content: none;
        position: absolute;
        right: calc(100% + 60px);
        top: 11px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255,253,247,0.96);
        box-shadow: 0 0 0 5px rgba(255,255,255,0.14);
      }

      .builder-form {
        width: 100%;
        max-width: 330px;
        margin: 0 0 0 auto;
      }

      .builder-card .layer-cake {
        display: block;
        position: relative;
        min-height: 610px;
        width: 100%;
        overflow: visible;
      }

      .builder-card .cake-step {
        display: contents;
      }

      .builder-card .cake-photo {
        position: absolute;
        left: 30%;
        display: block;
        margin: 0;
        object-fit: contain;
        transform: translateX(-50%);
        filter: drop-shadow(0 18px 26px rgba(18, 15, 10, 0.24));
        z-index: 1;
      }

      .builder-card .cake-photo.topping {
        top: 22px;
        width: min(58%, 330px);
        transform: translateX(-50%) rotate(-2deg);
      }

      .builder-card .cake-photo.cream {
        top: 226px;
        width: min(64%, 360px);
        transform: translateX(-50%) rotate(1deg);
      }

      .builder-card .cake-photo.base {
        top: 430px;
        width: min(60%, 340px);
        transform: translateX(-50%) rotate(-1deg);
      }

      .builder-card .cake-step-text {
        position: absolute;
        left: auto;
        right: 0;
        width: min(35%, 190px);
        max-width: none;
        margin: 0;
        padding: 0;
        background: transparent;
        color: rgba(255,255,255,0.88);
        text-align: left;
        text-shadow: none;
        transform: none;
        z-index: 3;
      }

      .builder-card .cake-step-text::before {
        content: "";
        position: absolute;
        right: calc(100% + 9px);
        top: 16px;
        width: 88px;
        height: 1px;
        background: rgba(255,255,255,0.66);
        z-index: 4;
      }

      .builder-card .cake-step-text::after {
        content: "";
        position: absolute;
        right: calc(100% + 94px);
        top: 11px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255,253,247,0.96);
        box-shadow: 0 0 0 5px rgba(255,255,255,0.14);
        z-index: 5;
      }

      .builder-card .cake-step:nth-child(1) .cake-step-text { top: 86px; }
      .builder-card .cake-step:nth-child(2) .cake-step-text { top: 290px; }
      .builder-card .cake-step:nth-child(3) .cake-step-text { top: 494px; }

      .builder-card .cake-step:nth-child(2) .cake-step-text::before {
        width: 116px;
      }

      .builder-card .cake-step:nth-child(2) .cake-step-text::after {
        right: calc(100% + 122px);
      }

      .builder-card .cake-step:nth-child(3) .cake-step-text::before {
        width: 128px;
      }

      .builder-card .cake-step:nth-child(3) .cake-step-text::after {
        right: calc(100% + 134px);
      }

      .builder-options {
        display: grid;
        gap: 12px;
        overflow: visible;
      }

      .builder-options label {
        display: grid;
        gap: 7px;
        padding: 10px 12px 12px;
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 18px;
        background: rgba(255,255,255,0.08);
        color: white;
        font-weight: 700;
      }

      .builder-options span {
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.74);
      }

      .builder-options select {
        width: 100%;
        min-height: 42px;
        border: 1px solid rgba(255,255,255,0.28);
        border-radius: 999px;
        background: rgba(255,253,247,0.94);
        color: var(--sage);
        padding: 0 12px;
        font: inherit;
        font-weight: 800;
      }

      .builder-pick {
        position: relative;
        padding: 0;
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 18px;
        background: rgba(255,255,255,0.08);
        color: white;
        overflow: visible;
        z-index: 1;
      }

      .builder-pick[open] {
        z-index: 20;
      }

      .builder-pick summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 50px;
        padding: 0 12px;
        cursor: pointer;
        list-style: none;
      }

      .builder-pick summary::-webkit-details-marker {
        display: none;
      }

      .builder-pick summary::after {
        content: "+";
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 999px;
        background: rgba(255,253,247,0.92);
        color: var(--sage);
        font-weight: 900;
      }

      .builder-pick[open] summary::after {
        content: "−";
      }

      .builder-pick summary strong {
        margin-left: auto;
        color: rgba(255,255,255,0.82);
        font-size: 0.78rem;
      }

      .builder-checks {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        display: grid;
        gap: 7px;
        max-height: 236px;
        overflow: auto;
        padding: 10px 12px;
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 18px;
        background: rgba(74, 91, 65, 0.96);
        box-shadow: 0 18px 34px rgba(20, 18, 14, 0.24);
        backdrop-filter: blur(10px);
      }

      .builder-checks label {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 8px 10px;
        border-color: rgba(255,255,255,0.16);
        border-radius: 999px;
        background: rgba(255,253,247,0.92);
        color: var(--sage);
        font-size: 0.88rem;
        font-weight: 800;
      }

      .builder-checks input {
        width: 16px;
        height: 16px;
        accent-color: var(--clay);
      }

      .builder-options textarea {
        width: 100%;
        min-height: 74px;
        resize: vertical;
        border: 1px solid rgba(255,255,255,0.28);
        border-radius: 18px;
        background: rgba(255,253,247,0.94);
        color: var(--sage);
        padding: 11px 12px;
        font: inherit;
        font-weight: 700;
      }

      .topper-note {
        max-width: 330px;
        margin: 12px 0 0 auto;
        padding: 12px 14px;
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 14px;
        background: rgba(255,253,247,0.1);
        color: rgba(255,255,255,0.82);
        font-size: 0.84rem;
        font-weight: 700;
        line-height: 1.4;
      }

      .topper-note strong {
        color: #fff8ec;
      }

      .topper-note a {
        color: #fff8ec;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
      }

      .topper-samples {
        display: grid;
        grid-template-columns: repeat(3, 48px);
        gap: 8px;
        margin-top: 10px;
      }

      .topper-sample {
        position: relative;
        width: 48px;
        aspect-ratio: 1;
        padding: 0;
        border: 1px solid rgba(255,253,247,0.3);
        border-radius: 8px;
        background: rgba(255,253,247,0.16);
        overflow: hidden;
        cursor: pointer;
      }

      .topper-sample img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .builder-total {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(255,255,255,0.2);
        font-weight: 800;
      }

      .moodboard-section {
        padding: clamp(54px, 8vw, 108px) 0 clamp(70px, 9vw, 124px);
        background: var(--cream);
      }

      .moodboard-head {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(260px, 0.44fr);
        gap: clamp(18px, 5vw, 70px);
        align-items: end;
        margin-bottom: clamp(22px, 4vw, 40px);
      }

      .moodboard-head h2 {
        color: var(--sage);
        font-size: clamp(2.2rem, 5vw, 5rem);
        line-height: 0.98;
      }

      .moodboard-head p {
        margin: 0;
        color: var(--muted);
        line-height: 1.65;
      }

      .moodboard-slider {
        position: relative;
      }

      .moodboard-track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(250px, 28vw);
        gap: clamp(18px, 2.5vw, 34px);
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: none;
        cursor: grab;
        padding: 8px 0 22px;
        scrollbar-width: none;
      }

      .moodboard-track::-webkit-scrollbar {
        display: none;
      }

      .moodboard-track.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
      }

      .moodboard-card {
        position: relative;
        aspect-ratio: 1;
        min-height: 0;
        padding: clamp(22px, 3vw, 36px);
        border: 1px solid rgba(216, 203, 183, 0.75);
        border-radius: 8px;
        background: var(--tone, var(--sage-2));
        scroll-snap-align: start;
        overflow: hidden;
        isolation: isolate;
        user-select: none;
      }

      .moodboard-photo {
        position: absolute;
        inset: 0;
        z-index: -2;
        width: 112%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        transform: translate3d(calc(var(--parallax-x, 0px) * -0.85), 0, 0) scale(1.04);
        transition: transform 120ms linear;
        filter: none;
      }

      .moodboard-card::before,
      .moodboard-card::after {
        content: none;
        position: absolute;
        z-index: 0;
        border-radius: 999px;
        transform: translate3d(var(--parallax-x, 0px), 0, 0);
        transition: transform 120ms linear;
      }

      .moodboard-card::before {
        inset: 0;
        width: auto;
        aspect-ratio: auto;
        border-radius: 0;
        background:
          linear-gradient(180deg, rgba(29, 28, 21, 0.06), rgba(29, 28, 21, 0.58)),
          linear-gradient(90deg, rgba(255,253,247,0.1), rgba(255,253,247,0));
        transform: none;
      }

      .moodboard-card::after {
        width: 44%;
        aspect-ratio: 1;
        left: 10%;
        bottom: -16%;
        background: rgba(67, 81, 55, 0.18);
      }

      .moodboard-depth {
        display: none;
      }

      .moodboard-content {
        position: absolute;
        z-index: 2;
        left: clamp(18px, 3vw, 34px);
        right: clamp(18px, 3vw, 34px);
        bottom: clamp(20px, 3vw, 36px);
        display: grid;
        gap: 0;
      }

      .moodboard-kicker {
        display: none;
      }

      .moodboard-content h3 {
        color: var(--cream);
        width: fit-content;
        max-width: min(100%, 12ch);
        padding: 7px 10px 8px;
        border-radius: 8px;
        background: rgba(255, 253, 247, 0.82);
        color: var(--sage);
        font-size: clamp(0.84rem, 1.5vw, 1.75rem);
        line-height: 0.98;
        text-shadow: none;
      }

      .moodboard-tags {
        display: none;
        flex-wrap: wrap;
        gap: 8px;
      }

      .moodboard-tags span {
        padding: 7px 10px;
        border: 1px solid rgba(255,253,247,0.34);
        border-radius: 999px;
        background: rgba(29, 28, 21, 0.22);
        color: rgba(255,253,247,0.86);
        font-size: 0.74rem;
        font-weight: 800;
      }

      .moodboard-progress {
        height: 4px;
        margin-top: 12px;
        border-radius: 999px;
        background: rgba(216, 203, 183, 0.78);
        overflow: hidden;
      }

      .moodboard-progress span {
        display: block;
        width: var(--progress, 0%);
        height: 100%;
        border-radius: inherit;
        background: var(--sage);
        transition: width 140ms ease;
      }

      .detail {
        position: fixed;
        inset: 0;
        z-index: 70;
        display: none;
        padding: 18px;
        background: rgba(27, 24, 18, 0.46);
      }

      .detail.is-open {
        display: grid;
        place-items: center;
      }

      .detail-card {
        display: grid;
        grid-template-columns: minmax(250px, 390px) minmax(0, 1fr);
        width: min(900px, 100%);
        max-height: min(720px, calc(100vh - 36px));
        overflow: auto;
        border-radius: 34px;
        background: var(--paper);
        box-shadow: var(--shadow);
      }

      .detail-media {
        min-height: 420px;
        background: var(--cream-2);
      }

      .detail-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .detail-content {
        padding: clamp(24px, 4vw, 44px);
      }

      .detail-close {
        float: right;
        width: 40px;
        height: 40px;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--paper);
        color: var(--ink);
        cursor: pointer;
        font-weight: 800;
      }

      .detail-content .eyebrow {
        color: var(--clay);
      }

      .detail-content h2 {
        margin-top: 8px;
        color: var(--ink);
        font-size: clamp(2.3rem, 5vw, 4rem);
        line-height: 0.95;
      }

      .detail-content p {
        color: var(--ink);
        line-height: 1.55;
      }

      .ingredient-list {
        display: grid;
        gap: 10px;
        margin: 22px 0;
      }

      .ingredient {
        padding-top: 12px;
        border-top: 1px solid var(--line);
      }

      .ingredient strong {
        display: block;
        margin-bottom: 4px;
        color: var(--clay);
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .order-box {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: #fff8ed;
      }

      .field {
        display: grid;
        gap: 6px;
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 800;
      }

      .field:last-of-type,
      .total,
      .whatsapp,
      .fineprint {
        grid-column: 1 / -1;
      }

      .field select,
      .field input {
        min-height: 42px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: white;
        color: var(--ink);
        padding: 0 12px;
      }

      .total {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
        font-weight: 800;
      }

      .whatsapp {
        display: grid;
        place-items: center;
        min-height: 48px;
        border-radius: 999px;
        background: var(--clay);
        color: white;
        text-decoration: none;
        font-weight: 800;
      }

      .fineprint {
        margin: 0;
        color: var(--muted);
        font-size: 0.78rem;
        line-height: 1.35;
      }

      .footer {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 22px;
        padding: 34px 0;
        color: var(--muted);
        font-size: 0.88rem;
      }

      .footer-badges {
        display: contents;
      }

      .footer-copy {
        justify-self: center;
        text-align: center;
        font-size: 1.08rem;
      }

      .footer-links {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 6px;
      }

      .footer-about-link {
        color: var(--sage);
        text-decoration: none;
        font-weight: 600;
      }

      .footer-about-link--top {
        display: inline-block;
        margin-bottom: 6px;
        font-size: 1.3em;
      }

      .footer-tagline {
        font-size: 0.85em;
      }

      .footer-credit {
        display: block;
        margin-top: 10px;
        font-size: 0.72rem;
        color: var(--muted);
      }

      .footer-credit a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 2px;
      }

      .footer-credit a:hover {
        color: var(--clay);
      }

      .scroll-top-btn {
        position: fixed;
        right: clamp(10px, 2.5vw, 24px);
        bottom: clamp(10px, 2.5vw, 24px);
        z-index: 60;
        width: clamp(64px, 8vw, 92px);
        height: auto;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        opacity: 0;
        transform: translateY(14px) scale(0.85);
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease;
      }

      .scroll-top-btn.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
      }

      .scroll-top-bird {
        display: block;
        width: 100%;
        height: auto;
        transform: rotate(-8deg);
        filter: drop-shadow(0 10px 16px rgba(63, 41, 24, 0.25));
        transition: transform 0.2s ease;
      }

      .scroll-top-btn:hover .scroll-top-bird,
      .scroll-top-btn:focus-visible .scroll-top-bird {
        transform: rotate(-8deg) translateY(-4px);
      }

      .scroll-top-bird.is-flipped {
        transform: scaleX(-1) rotate(8deg);
      }

      .scroll-top-btn:hover .scroll-top-bird.is-flipped,
      .scroll-top-btn:focus-visible .scroll-top-bird.is-flipped {
        transform: scaleX(-1) rotate(8deg) translateY(-4px);
      }

      .scroll-top-arrow {
        position: absolute;
        width: 22px;
        height: 22px;
        right: 4px;
        bottom: 4px;
        padding: 4px;
        box-sizing: border-box;
        background: var(--clay);
        border-radius: 50%;
        box-shadow: 0 0 0 2px var(--cream);
        color: white;
      }

      .scroll-top-btn:hover .scroll-top-arrow,
      .scroll-top-btn:focus-visible .scroll-top-arrow {
        background: var(--sage);
      }

      @media (prefers-reduced-motion: reduce) {
        .scroll-top-btn {
          transition: opacity 0.1s linear;
        }
      }

      .footer-about-link:hover {
        color: var(--clay);
      }

      .footer-instagram {
        display: flex;
        width: fit-content;
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: var(--sage);
        text-decoration: none;
        font-weight: 600;
      }

      .footer-instagram:hover {
        color: var(--clay);
      }

      .footer-instagram-icon {
        width: 18px;
        height: 18px;
      }

      .footer-stamp-wrap {
        display: flex;
        align-items: center;
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
      }

      .footer-stamp {
        width: clamp(78px, 8vw, 112px);
        transform: rotate(8deg);
        filter: drop-shadow(0 10px 16px rgba(63, 41, 24, 0.14));
      }

      body.routed [data-page] {
        display: none;
      }

      body.routed [data-page].is-active {
        display: block;
      }

      body.routed #inicio.is-active {
        display: block;
      }

      body.routed #categorias.is-active {
        display: block;
      }

      .image-viewer .detail-card {
        display: block;
        width: min(760px, calc(100% - 28px));
        max-height: none;
        overflow: hidden;
        border-radius: 30px;
        background: var(--zoom-frame, var(--sage));
        padding: clamp(12px, 2vw, 18px);
        box-shadow: 0 28px 80px rgba(20, 18, 14, 0.34);
      }

      .topper-viewer .detail-card {
        width: min(600px, calc(100% - 28px));
      }

      .image-viewer .detail-media {
        min-height: 0;
      }

      .solid-zoom {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        min-height: 0;
        border-radius: 0;
        background-color: var(--zoom-frame, var(--sage));
        background:
          var(--zoom-image, var(--solid-color));
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
      }

      .zoom-bird {
        position: absolute;
        right: clamp(16px, 2.4vw, 28px);
        bottom: clamp(16px, 2.4vw, 28px);
        z-index: 2;
        width: clamp(78px, 13.7%, 124px);
        aspect-ratio: 1 / 1;
        background-image: var(--zoom-bird-image);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        pointer-events: none;
        filter: drop-shadow(0 14px 22px rgba(20, 18, 14, 0.24));
      }

      .zoom-bird--left {
        right: auto;
        left: clamp(16px, 2.4vw, 28px);
      }

      .zoom-bird--golosina {
        right: clamp(-10px, -1.4vw, -6px);
        bottom: clamp(-10px, -1.4vw, -6px);
        left: auto;
        width: clamp(156px, 27.4%, 248px);
      }

      .image-viewer .detail-content {
        display: none;
      }

      .summary-section {
        min-height: calc(100vh - 76px);
        padding: clamp(70px, 9vw, 120px) 0;
        background: var(--cream);
      }

      .summary-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
        gap: 24px;
        align-items: start;
      }

      .summary-list {
        display: grid;
        gap: 14px;
      }

      .summary-item {
        --blob-a: 8% 18% 9% 15% / 18% 9% 16% 8%;
        --blob-b: 16% 8% 17% 7% / 8% 17% 9% 15%;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: var(--blob-a);
        background: var(--paper);
      }

      .summary-item h3 {
        color: var(--clay);
      }

      .summary-side {
        --blob-a: 18% 12% 20% 14% / 14% 20% 12% 18%;
        --blob-b: 12% 20% 14% 18% / 20% 12% 18% 14%;
        position: sticky;
        top: 96px;
        padding: 38px 34px;
        border-radius: var(--blob-a);
        background: var(--sage);
        color: white;
        animation: blobBreath 15s ease-in-out infinite;
      }

      .summary-side h3 {
        margin: 0 0 14px;
        font-size: clamp(1.65rem, 3vw, 2.35rem);
        line-height: 1.05;
      }

      .summary-side p {
        color: rgba(255,255,255,0.76);
        line-height: 1.5;
      }

      @media (min-width: 901px) and (max-width: 1480px) {
        .builder-box {
          width: min(100% - 56px, 1240px);
          grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
          gap: clamp(28px, 3vw, 44px);
        }

        .builder-box h2 {
          max-width: 360px;
          font-size: clamp(2.35rem, 3.5vw, 3.45rem);
        }

        .builder-title-line {
          white-space: normal;
        }

        .builder-box p {
          max-width: 360px;
        }

        .builder-card {
          grid-template-columns: minmax(340px, 1fr) minmax(248px, 292px);
          gap: clamp(22px, 2.2vw, 34px);
          min-width: 0;
        }

        .builder-card .layer-cake {
          min-height: 560px;
        }

        .builder-card .cake-photo {
          left: 28%;
        }

        .builder-card .cake-photo.topping {
          width: min(56%, 280px);
        }

        .builder-card .cake-photo.cream {
          top: 210px;
          width: min(61%, 310px);
        }

        .builder-card .cake-photo.base {
          top: 398px;
          width: min(58%, 300px);
        }

        .builder-card .cake-step:nth-child(1) .cake-step-text { top: 80px; }
        .builder-card .cake-step:nth-child(2) .cake-step-text { top: 270px; }
        .builder-card .cake-step:nth-child(3) .cake-step-text { top: 458px; }

        .builder-card .cake-step-text {
          right: 0;
          width: min(36%, 168px);
        }

        .builder-card .cake-step-text::before {
          width: 58px;
        }

        .builder-card .cake-step-text::after {
          right: calc(100% + 64px);
        }

        .builder-card .cake-step:nth-child(2) .cake-step-text::before,
        .builder-card .cake-step:nth-child(3) .cake-step-text::before {
          width: 72px;
        }

        .builder-card .cake-step:nth-child(2) .cake-step-text::after,
        .builder-card .cake-step:nth-child(3) .cake-step-text::after {
          right: calc(100% + 78px);
        }

        .builder-form {
          max-width: 292px;
          min-width: 0;
        }

        .builder-form > p {
          font-size: 0.95rem;
        }

        .builder-options label,
        .builder-pick {
          border-radius: 14px;
        }

        .builder-pick summary,
        .builder-options label {
          padding-inline: 12px;
        }

        .builder-card a {
          white-space: normal;
        }
      }

      @media (min-width: 901px) and (max-width: 1100px) {
        .builder-box {
          width: min(100% - 48px, 860px);
          grid-template-columns: 1fr;
          gap: 34px;
        }

        .builder-box h2,
        .builder-box p {
          max-width: 620px;
        }

        .builder-card {
          grid-template-columns: minmax(0, 1fr) minmax(250px, 292px);
          width: 100%;
          gap: 26px;
        }

        .builder-card .layer-cake {
          min-height: 540px;
        }
      }

      @media (max-width: 900px) {
        .family-perch-bird {
          display: none;
        }

        .topbar {
          align-items: flex-start;
          height: auto;
          min-height: 76px;
          flex-direction: column;
          padding-block: 12px;
        }

        .page {
          padding-top: 112px;
        }

        .nav {
          width: 100%;
          overflow-x: auto;
          padding-bottom: 2px;
        }

        .hero-grid,
        .builder-box,
        .detail-card {
          grid-template-columns: 1fr;
        }

        .hero {
          border-bottom-left-radius: 40% 3%;
          border-bottom-right-radius: 40% 3%;
        }

        .hero::before {
          clip-path: ellipse(138% 82% at 42% 3%);
        }

        .hero-art {
          min-height: 420px;
        }

        .hero-photo {
          inset: 0;
        }

        .brand-bird--hero {
          width: 104px;
          left: 12px;
          bottom: 32px;
        }

        .footer {
          grid-template-columns: 1fr auto;
        }

        .footer-copy {
          grid-column: 1 / -1;
          grid-row: 1;
          justify-self: center;
        }

        .footer-stamp-wrap {
          grid-column: 1;
          grid-row: 2;
          justify-self: start;
        }

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

        .category-tile,
        .category-tile:nth-child(1),
        .category-tile:nth-child(2),
        .category-tile:nth-child(3),
        .category-tile:nth-child(4) {
          grid-column: auto;
          grid-row: auto;
          transform: none;
          min-height: clamp(145px, 42vw, 210px);
        }

        .category-tile span,
        .category-tile:nth-child(1) span,
        .category-tile:nth-child(2) span,
        .category-tile:nth-child(3) span,
        .category-tile:nth-child(4) span {
          left: 10%;
          right: 10%;
          bottom: 10%;
          min-height: 58px;
          padding: 13px 15px;
          font-size: clamp(1.16rem, 5vw, 1.55rem);
        }

        .category-heading,
        .section-head {
          align-items: start;
          flex-direction: column;
        }

        .category-heading {
          gap: 10px;
        }

        .catalog-tools,
        .catalog-tools input,
        .catalog-tools select {
          width: 100%;
        }

        .builder-card {
          grid-template-columns: 1fr;
          border-radius: 34px;
        }

        .layer-cake {
          min-height: 0;
        }

        .layer {
          left: 38%;
          width: min(58%, 250px);
        }

        .cake-photo {
          left: auto;
          width: min(54%, 230px);
        }

        .cake-photo.topping {
          width: min(52%, 225px);
        }

        .cake-photo.cream {
          width: min(58%, 250px);
        }

        .cake-photo.base {
          width: min(54%, 240px);
        }

        .layer.fill {
          width: min(62%, 268px);
        }

        .layer.base {
          width: min(55%, 240px);
        }

        .layer-label {
          right: 2%;
          width: 38%;
          font-size: 0.72rem;
        }

        .layer-label::before {
          width: 34px;
        }

        .layer-label::after {
          right: calc(100% + 42px);
        }

        .cake-step-text {
          left: auto;
          right: 1%;
          width: 42%;
          font-size: 0.7rem;
          text-align: left;
          transform: none;
        }

        .cake-step-text::before {
          content: "";
          width: 46px;
        }

        .cake-step-text::after {
          content: "";
          right: calc(100% + 54px);
        }

        .builder-card .cake-step:nth-child(2) .cake-step-text::before,
        .builder-card .cake-step:nth-child(3) .cake-step-text::before {
          width: 54px;
        }

        .builder-card .cake-step:nth-child(2) .cake-step-text::after,
        .builder-card .cake-step:nth-child(3) .cake-step-text::after {
          right: calc(100% + 62px);
        }

        .builder-section {
          padding-top: 52px;
        }

        .builder-box {
          width: min(100% - 32px, 430px);
          gap: 20px;
          align-items: start;
        }

        .builder-card {
          gap: 10px;
          padding-top: 0;
        }

        .builder-card .layer-cake {
          min-height: 430px;
          margin-top: -14px;
        }

        .builder-card .cake-photo {
          left: 28%;
        }

        .builder-card .cake-photo.topping {
          top: 18px;
          width: min(54%, 205px);
        }

        .builder-card .cake-photo.cream {
          top: 160px;
          width: min(58%, 230px);
        }

        .builder-card .cake-photo.base {
          top: 302px;
          width: min(56%, 220px);
        }

        .builder-card .cake-step:nth-child(1) .cake-step-text { top: 64px; }
        .builder-card .cake-step:nth-child(2) .cake-step-text { top: 204px; }
        .builder-card .cake-step:nth-child(3) .cake-step-text { top: 344px; }

        .builder-card .cake-step-text {
          right: 2%;
          width: 41%;
          font-size: 0.68rem;
        }

        .builder-card .cake-step-text strong {
          font-size: clamp(1.2rem, 6vw, 1.45rem);
        }

        .builder-form {
          max-width: 314px;
          margin-inline: auto;
        }

        .builder-form > p {
          max-width: 100%;
          margin-inline: auto;
          text-align: center;
        }

        .builder-total {
          max-width: 314px;
          margin-inline: auto;
        }

        .summary-section {
          padding: 52px 0 72px;
        }

        .moodboard-head {
          grid-template-columns: 1fr;
        }

        .moodboard-track {
          grid-auto-columns: minmax(250px, 78vw);
        }

        .moodboard-card {
          min-height: 0;
        }

        .summary-section .section-head {
          width: min(100% - 32px, 430px);
          margin-inline: auto;
        }

        .summary-panel {
          grid-template-columns: 1fr;
          width: min(100% - 32px, 430px);
          margin-inline: auto;
          gap: 18px;
        }

        .summary-list {
          width: 100%;
        }

        .summary-item {
          width: 100%;
          padding: 22px 20px;
          box-sizing: border-box;
          border-radius: 24px;
        }

        .summary-side {
          position: static;
          width: 100%;
          box-sizing: border-box;
          padding: 30px 26px;
          border-radius: 28px;
          text-align: left;
          order: 2;
          animation: none;
        }

        .summary-side .button {
          width: min(100%, 240px);
        }

        .detail {
          padding: 0;
          place-items: end;
        }

        .detail-card {
          max-height: 94vh;
          border-radius: 34px 34px 0 0;
        }

        .detail-media {
          min-height: 260px;
        }

        .order-box {
          grid-template-columns: 1fr;
        }
      }

      @media (min-width: 1300px) {
        .hero h1 {
          font-size: clamp(4.8rem, 5.55vw, 5.8rem);
        }

        .hero-copy {
          max-width: 650px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .moodboard-card::before,
        .moodboard-card::after,
        .moodboard-depth {
          transform: none !important;
          transition: none;
        }
      }