*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --color-canvas: oklch(0.975 0.009 145);
      --color-surface: oklch(0.932 0.018 148);
      --color-border: oklch(0.865 0.022 148);
      --color-ink-muted: oklch(0.460 0.030 150);
      --color-ink: oklch(0.230 0.038 155);
      --color-accent: oklch(0.640 0.175 138);
      --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
      --font-body: 'DM Sans', system-ui, sans-serif;
      --font-mono: 'IBM Plex Mono', monospace;
      --max-width: 1200px;
      --radius-sm: 4px; --radius-md: 8px;
    }
    body { background: var(--color-canvas); color: var(--color-ink); font-family: var(--font-body); line-height: 1.6; }
    a { color: inherit; text-decoration: none; }
    .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
    .masthead { border-bottom: 1px solid var(--color-border); padding: 1.25rem 0; background: oklch(0.975 0.009 145 / 0.95); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 50; }
    .masthead-inner { display: flex; justify-content: space-between; align-items: center; }
    .brand-mark { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
    .btn { display: inline-flex; padding: 0.65rem 1.25rem; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; background: var(--color-ink); color: white; }
    .collection-header { padding: 3rem 0 2rem; border-bottom: 1px solid var(--color-border); }
    h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; margin-bottom: 0.75rem; }
    .collection-intro { font-size: 1.1rem; color: var(--color-ink-muted); max-width: 780px; }
    .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; padding: 3rem 0; }
    .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.75rem; display: flex; flex-direction: column; justify-content: space-between; }
    .card img { max-width: 100%; height: 220px; object-fit: contain; margin: 1rem 0; }
    .card h2 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-bottom: 0.25rem; }
    .card p { font-size: 0.88rem; color: var(--color-ink-muted); margin-bottom: 1rem; }
    .card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
    .price { font-family: var(--font-mono); font-weight: 700; font-size: 1.1rem; }

    @media (max-width: 768px) {
      .container { padding: 0 1rem; }
      .collection-header { padding: 2rem 0 1.5rem; }
      h1 { font-size: clamp(1.75rem, 6vw, 2.3rem); }
      .collection-intro { font-size: 0.95rem; }
      .products-grid { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; }
      .card { padding: 1.25rem; }
      .card img { height: 180px; }
      .card-footer { flex-direction: column; align-items: stretch; gap: 0.65rem; }
      .card-footer .btn { justify-content: center; width: 100%; padding: 0.75rem; }

      .whatsapp-float {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 52px;
        height: 52px;
      }
      .whatsapp-float-tooltip {
        display: none;
      }
    }

    .whatsapp-float {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 58px;
      height: 58px;
      background: #25D366;
      color: #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 24px -4px rgba(37, 211, 102, 0.45), 0 2px 8px -2px rgba(0, 0, 0, 0.15);
      z-index: 990;
      text-decoration: none;
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
    }
    .whatsapp-float:hover {
      transform: scale(1.08) translateY(-3px);
      box-shadow: 0 10px 30px -4px rgba(37, 211, 102, 0.6), 0 4px 12px -2px rgba(0, 0, 0, 0.2);
    }
    .whatsapp-float:active {
      transform: scale(0.96);
    }
    .whatsapp-float svg {
      width: 32px;
      height: 32px;
      fill: #ffffff;
    }
    .whatsapp-float-tooltip {
      position: absolute;
      right: calc(100% + 12px);
      top: 50%;
      transform: translateY(-50%);
      background: oklch(0.2 0.02 150);
      color: #ffffff;
      font-family: var(--font-body, -apple-system, sans-serif);
      font-size: 0.78rem;
      font-weight: 600;
      white-space: nowrap;
      padding: 0.4rem 0.8rem;
      border-radius: 9999px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .whatsapp-float-tooltip::after {
      content: '';
      position: absolute;
      left: 100%;
      top: 50%;
      margin-top: -4px;
      border-width: 4px 0 4px 5px;
      border-style: solid;
      border-color: transparent transparent transparent oklch(0.2 0.02 150);
    }
    .whatsapp-float:hover .whatsapp-float-tooltip {
      opacity: 1;
      transform: translateY(-50%) translateX(-2px);
    }