:root {
      --pico-font-family: 'Work Sans', sans-serif;
      --pico-background-color: #f7f2ec;
      --pico-color: #2d241f;
      --pico-primary: #8a4d37;
      --pico-primary-hover: #713b28;
      --pico-primary-focus: rgba(138, 77, 55, .2);
      --pico-secondary: #58706b;
      --pico-card-background-color: #fffaf6;
      --pico-card-border-color: #eadfd4;
      --pico-muted-border-color: #e7dacd;
      --pico-form-element-background-color: #fffdfa;
      --pico-form-element-border-color: #d8c8bc;
      --pico-border-radius: 18px;
      --hero: linear-gradient(135deg, #f8e7db 0%, #f6f2eb 55%, #efe1d5 100%);
    }

    body {
      background: radial-gradient(circle at top left, rgba(191, 111, 74, .12), transparent 30%), var(--pico-background-color);
    }

    .brand {
      font-family: 'Instrument Serif', serif;
      font-size: 1.6rem;
      letter-spacing: .02em;
    }

    .hero {
      background: var(--hero);
      border: 1px solid #eadfd4;
      border-radius: 28px;
      padding: 2rem;
      box-shadow: 0 18px 50px rgba(83, 58, 47, .08);
    }

    .hero-grid {
      display: grid;
      gap: 2rem;
      align-items: start;
    }

    @media(min-width: 960px) {
      .hero-grid {
        grid-template-columns: 1.1fr .9fr;
      }
    }

    .product-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(2.4rem, 4vw, 4.2rem);
      line-height: 1;
      margin-bottom: .75rem;
    }

    .muted {
      color: #78695e;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      border: 1px solid #dfd0c3;
      border-radius: 999px;
      padding: .45rem .8rem;
      background: rgba(255, 255, 255, .55);
      font-size: .92rem;
    }

    .preview-card {
      background: #fffdf9;
      border: 1px solid #eadfd4;
      border-radius: 24px;
      padding: 1rem;
    }

    .preview-card img {
      width: 100%;
      aspect-ratio: 1/1;
      object-fit: cover;
      border-radius: 18px;
      background: #f1e6dd;
    }

    .section-card {
      background: #fffaf6;
      border: 1px solid #eadfd4;
      border-radius: 24px;
      padding: 1.25rem;
    }

    .price-box {
      position: sticky;
      top: 1rem;
    }

    .price {
      font-size: 2.2rem;
      font-weight: 700;
      color: #7b3f2f;
    }

    .breakdown {
      font-size: .95rem;
      color: #644f45;
      background: #fff6ef;
      border: 1px dashed #d8b8a3;
      border-radius: 16px;
      padding: 1rem;
    }

    .notice {
      border-left: 4px solid #b56b45;
      padding-left: 1rem;
      color: #6d4b3a;
    }

    .topbar {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.2rem;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem;
      align-items: center;
    }

    small.counter {
      display: inline-flex;
      min-width: 1.4rem;
      justify-content: center;
      background: #8a4d37;
      color: #fff;
      border-radius: 999px;
      padding: .1rem .4rem;
      font-size: .78rem;
    }

    .login-card {
      max-width: 480px;
      margin: 3rem auto;
    }

    .cart-item {
      border: 1px solid #eadfd4;
      border-radius: 18px;
      padding: 1rem;
      background: #fffdf9;
      margin-bottom: 1rem;
    }

    /* Section Menu */
    .action-link {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
    }

    .user-menu {
      position: relative;
    }

    .user-menu-toggle {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      margin: 0;
    }

    .user-menu-dropdown {
      position: absolute;
      top: calc(100% + .55rem);
      right: 0;
      min-width: 220px;
      background: #fffaf6;
      border: 1px solid #eadfd4;
      border-radius: 18px;
      box-shadow: 0 18px 40px rgba(83, 58, 47, .12);
      padding: .45rem;
      display: grid;
      gap: .2rem;
      z-index: 30;
    }

    .user-menu-item {
      display: flex;
      align-items: center;
      gap: .7rem;
      padding: .8rem .9rem;
      border-radius: 14px;
      text-decoration: none;
      color: #2d241f;
    }

    .user-menu-item:hover {
      background: #f5ebe2;
    }

    .user-menu-danger {
      color: #8a4d37;
    }

    /* Fin Section Menu */